/*
Theme Name: Safebyte
Theme URI: http://demo.casethemes.net/safebyte
Author: Case-Themes
Author URI: https://casethemes.net/
Description: Safebyte is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Version: 1.0.0
Requires PHP: 7.4
Tested up to: 6.4
License: ThemeForest
License URI: https://themeforest.net/licenses
Text Domain: safebyte
Tags: Blog, E-Commerce, Portfolio, Grid Layout, One Column, Two Columns, Three Columns, Four Columns, Left Sidebar, Right Sidebar, Custom Background, Custom Colors, Custom Header, Custom Logo, custom-menu, Editor Style, Featured Image Header, Featured Images, flexible-header, Footer Widgets, Full Width Template, microformats, Post Formats, Sticky Post, Theme Options, threaded-comments, translation-ready, Block Editor Styles, Wide Blocks
*/


/* ==========================================================
   ForshTec single blog fixes
   - Keep Elementor page-title text inside the viewport
   - Prevent long single-post breadcrumb titles from escaping pill
   - Improve single featured-image responsiveness
   ========================================================== */

/* Elementor-built page title: allow dynamic post titles to wrap safely. */
.single-post #pxl-page-title-elementor .pxl-heading,
.single-post #pxl-page-title-elementor .pxl-heading--inner,
.single-post #pxl-page-title-elementor .pxl-item--title,
.single-post #pxl-page-title-elementor .pxl-heading--text {
    max-width: 100%;
    min-width: 0;
}

.single-post #pxl-page-title-elementor .pxl-heading--inner {
    width: 100%;
}

.single-post #pxl-page-title-elementor .pxl-item--title,
.single-post #pxl-page-title-elementor .pxl-heading--text {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Single-post featured image inserted by content-single.php. */
.single-post .pxl---post .pxl-item--image {
    width: 100%;
    overflow: hidden;
}

.single-post .pxl---post .pxl-item--image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Long current-post titles should not spill outside the breadcrumb pill. */
.single-post .pxl-breadcrumb {
    max-width: 100%;
}

.single-post .pxl-breadcrumb li:last-child {
    min-width: 0;
    overflow: hidden;
}

.single-post .pxl-breadcrumb li:last-child .breadcrumb-entry {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 767px) {
    /* Override oversized Elementor responsive typography for long blog titles. */
    .single-post #pxl-page-title-elementor .pxl-heading .pxl-item--title {
        font-size: clamp(32px, 9.5vw, 38px) !important;
        line-height: 1.14 !important;
    }

    .single-post #pxl-page-title-elementor .pxl-heading,
    .single-post #pxl-page-title-elementor .pxl-heading--inner {
        width: 100% !important;
    }

    /* Fit Home + current post title cleanly in the breadcrumb. */
    .single-post .pxl-breadcrumb {
        display: flex;
        width: calc(100vw - 32px);
        max-width: 340px;
        padding-left: 18px;
        padding-right: 18px;
        gap: 8px;
        overflow: hidden;
    }

    .single-post .pxl-breadcrumb li:first-child {
        flex: 0 0 auto;
    }

    .single-post .pxl-breadcrumb li:last-child {
        flex: 1 1 auto;
    }

    .single-post .pxl-breadcrumb li:last-child .breadcrumb-entry {
        font-size: 12px;
    }
}