/* ═══════════════════════════════════════════════════════════════════════
   PKC Responsive Fixes — pkc-responsive-fixes.css  v2.0
   Single source of truth for all mobile/tablet responsive overrides.
   Loaded LAST so it wins the cascade.
   To revert entirely: dequeue 'pkc-responsive-fixes' in functions.php.

   Breakpoint ladder used here (matches theme convention):
     ≤ 1199px  — small desktop / large tablet landscape
     ≤ 1024px  — tablet landscape (iPad)
     ≤ 991px   — tablet portrait
     ≤ 767px   — large phone landscape / small tablet
     ≤ 575px   — phone portrait
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   GLOBAL — applies at every viewport
   ─────────────────────────────────────────────────────────────────────── */

/* Defensive: stop horizontal scroll if any element overflows.
   Theme carousels (owl/swiper) use CSS transforms, not native scroll,
   so they are unaffected by this. */
html,
body {
    overflow-x: hidden;
}

/* style.css sets img max-width:100% but not height:auto, so constrained
   images stay at natural pixel height and look squished. */
img {
    height: auto;
}

/* Native video should obey container width. */
video {
    max-width: 100%;
    height: auto;
}

/* Tables overflow horizontally on phones by default — wrap them in a
   scrollable region rather than letting them push the page. */
.entry-content table,
.post-content table,
article table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Block-level images inside content should never push the layout out. */
.entry-content img,
.post-content img,
article img {
    max-width: 100%;
    height: auto;
}


/* ───────────────────────────────────────────────────────────────────────
   TABLET landscape and below (iPad Pro and smaller) — ≤ 1024px
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    /* iOS Safari force-zooms the page whenever a focused input has
       font-size < 16px. style.css sets inputs to 12px globally.
       Bump text-entry inputs only — leave buttons and pre-styled
       inputs alone. */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    textarea,
    select {
        font-size: 16px;
    }

    /* Ensure container padding has breathing room from the edges
       so cards/cells don't kiss the viewport border. */
    .container,
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* ── MOBILE MENU TOGGLE ───────────────────────────────────────
       Anchor inside #masthead so it scrolls/sticks WITH the logo
       (sticky header keeps both visible). Vertically centred against
       the .header-row so the hamburger lines up with the logo
       baseline — not floating independently. */
    #masthead {
        position: relative !important;
    }
    #masthead .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute !important;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        width: 44px !important;
        height: 44px !important;
        max-width: none !important;
        padding: 0 !important;
        background: #00267a !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer;
        margin: 0 !important;
        z-index: 100000 !important;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }
    /* When toggled (panel open), pin to viewport top-right so the
       close icon stays reachable regardless of scroll position. */
    #masthead .main-navigation.toggled .menu-toggle {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        transform: none !important;
    }

    /* Hamburger icon — three white lines (matches the navy button bg). */
    #masthead .menu-toggle .hamburger-box {
        position: relative;
        display: inline-block;
        width: 22px;
        height: 18px;
    }

    #masthead .menu-toggle .hamburger-inner,
    #masthead .menu-toggle .hamburger-inner::before,
    #masthead .menu-toggle .hamburger-inner::after {
        display: block;
        position: absolute;
        width: 22px;
        height: 2.5px;
        background-color: #ffffff !important;
        border-radius: 2px;
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    top 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.18s ease;
        content: "";
    }

    #masthead .menu-toggle .hamburger-inner {
        top: 50%;
        margin-top: -1.25px;
    }

    #masthead .menu-toggle .hamburger-inner::before {
        top: -7px;
    }

    #masthead .menu-toggle .hamburger-inner::after {
        top: 7px;
    }

    /* When toggled, animate the three white lines into a proper X.
       Middle line stays centred and rotates to "/".
       ::after moves to centre and rotates to "\" — together they cross.
       ::before fades out.
       Both visible bars forced white to beat style.css `.toggled
       .hamburger-inner` defaults. */
    #masthead .main-navigation.toggled .menu-toggle .hamburger-inner {
        transform: rotate(45deg) !important;
        top: 50% !important;
        background-color: #ffffff !important;
    }
    #masthead .main-navigation.toggled .menu-toggle .hamburger-inner::before {
        top: 0 !important;
        opacity: 0 !important;
        transform: none !important;
    }
    #masthead .main-navigation.toggled .menu-toggle .hamburger-inner::after {
        top: 0 !important;
        transform: rotate(-90deg) !important;
        opacity: 1 !important;
        background-color: #ffffff !important;
    }

    /* Default mobile: nav menu collapsed.
       style.css has THREE conflicting `ul.nav-menu` rules and the last
       one (`position: static; max-width: none`) is unconditional —
       no media query wrapping it — so it bleeds into mobile and
       leaves the panel always visible. Force the slide-out positioning
       back, scoped to this breakpoint. */
    #site-navigation.main-navigation {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* ── MOBILE SLIDE-OUT PANEL ──────────────────────────────────
       position: fixed (viewport-relative) + transform: translateX(100%)
       (element-relative, guaranteed off-screen regardless of parent
       width). Modernised gradient + glassy backdrop blur on close. */
    .main-navigation #primary-menu,
    .main-navigation ul.nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        width: 320px !important;
        max-width: 88vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 99999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
        background: linear-gradient(180deg, #00267a 0%, #001a5a 100%) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 72px 0 96px !important;
        margin: 0 !important;
        display: block !important;
        list-style: none !important;
        box-shadow: none !important;
        will-change: transform;
    }

    /* When user taps the hamburger, navigation.js adds `.toggled` to
       the nav — slide the panel into view. */
    .main-navigation.toggled #primary-menu,
    .main-navigation.toggled ul.nav-menu {
        transform: translateX(0) !important;
    }

    /* Panel item separators for a cleaner modern look. */
    .main-navigation.toggled #primary-menu > li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .main-navigation.toggled #primary-menu > li:last-child {
        border-bottom: none !important;
    }

    /* When toggled, move the hamburger (now an X via style.css animation)
       to the top-right corner of the panel so users can find it to close.
       Default position keeps it floating in the original header slot,
       which gets covered by the backdrop and looks disconnected. */
    .main-navigation.toggled .menu-toggle {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 100001 !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }
    .main-navigation.toggled .menu-toggle .hamburger-inner,
    .main-navigation.toggled .menu-toggle .hamburger-inner::before,
    .main-navigation.toggled .menu-toggle .hamburger-inner::after {
        background-color: #ffffff !important;
    }

    /* Make the panel + hamburger sit ABOVE any third-party chat widget
       (LiveDesk / ldeskuid / similar use z-index ~9999). */
    .main-navigation.toggled::before {
        z-index: 99999 !important;
    }

    /* ── ACCORDION SUBMENUS ────────────────────────────────────────
       Submenus collapsed by default inside the open panel; each
       parent <li> only reveals its children when it has the
       `.is-open` class (added by navigation.js on tap). */
    .main-navigation.toggled #primary-menu .menu-item-has-children > .sub-menu,
    .main-navigation.toggled ul.nav-menu .menu-item-has-children > .sub-menu {
        display: none !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 0 0 16px !important;
        border-left: 2px solid rgba(242, 196, 51, 0.5) !important;
        grid-template-columns: none !important;
    }
    /* Show submenu when the parent has EITHER .is-open (added by my
       click handler) OR .focus (added by existing toggleFocus
       touchstart handler in navigation.js). Both are valid because:
       - Desktop / mouse clicks: click event fires → .is-open toggles
       - Touch devices: touchstart fires + preventDefault kills the
         subsequent click → .focus toggles via existing handler.
       Accept both so the accordion works on every input type. */
    .main-navigation.toggled #primary-menu .menu-item-has-children.is-open > .sub-menu,
    .main-navigation.toggled #primary-menu .menu-item-has-children.focus > .sub-menu,
    .main-navigation.toggled ul.nav-menu .menu-item-has-children.is-open > .sub-menu,
    .main-navigation.toggled ul.nav-menu .menu-item-has-children.focus > .sub-menu {
        display: block !important;
    }

    /* Chevron indicator on parent items (▾) — rotates when open. */
    .main-navigation.toggled #primary-menu .menu-item-has-children > a::after {
        content: "▾";
        float: right;
        margin-left: 8px;
        font-size: 11px;
        opacity: 0.7;
        transition: transform 0.18s ease;
    }
    .main-navigation.toggled #primary-menu .menu-item-has-children.is-open > a::after,
    .main-navigation.toggled #primary-menu .menu-item-has-children.focus > a::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* ── MOBILE PANEL TEXT COLORS ─────────────────────────────────
       pkc-typography.css uses `#primary-menu` (ID) which beats
       nav-modern.css's `.nav-menu`. Prefix our overrides with
       `.toggled` for specificity 0,1,4 — wins against typography's
       0,1,3 AND scopes the override to the open mobile panel only,
       so desktop nav is untouched. */

    /* Top-level items — white text, sensible padding (typography
       sets `padding: 2em 1.8em` = 64px per item, way too much).
       Includes :hover, .current-menu-item, .current-menu-parent,
       .current-menu-ancestor states to override typography's navy
       (which is invisible on the navy panel). */
    .main-navigation.toggled #primary-menu > li > a,
    .main-navigation.toggled #primary-menu > li.current-menu-item > a,
    .main-navigation.toggled #primary-menu > li.current-menu-parent > a,
    .main-navigation.toggled #primary-menu > li.current-menu-ancestor > a,
    .main-navigation.toggled #primary-menu > li.current_page_item > a,
    .main-navigation.toggled #primary-menu > li > a:hover,
    .main-navigation.toggled #primary-menu > li > a:focus {
        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 12px 24px !important;
        line-height: 1.4 !important;
        background: transparent !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        border-radius: 0 !important;
    }
    /* Active state gets a subtle gold tint so user can see what page they're on. */
    .main-navigation.toggled #primary-menu > li.current-menu-item > a,
    .main-navigation.toggled #primary-menu > li.current-menu-parent > a,
    .main-navigation.toggled #primary-menu > li.current-menu-ancestor > a,
    .main-navigation.toggled #primary-menu > li.current_page_item > a {
        color: #f2c433 !important;
    }

    /* Submenu items — bright white for readability on navy. */
    .main-navigation.toggled #primary-menu .sub-menu > li > a,
    .main-navigation.toggled #primary-menu .sub-menu li a {
        color: #ffffff !important;
        opacity: 0.95;
        font-size: 13px !important;
        font-weight: 400 !important;
        padding: 7px 20px !important;
        line-height: 1.4 !important;
        background: transparent !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Hover/tap feedback on items inside the mobile panel. */
    .main-navigation.toggled #primary-menu > li > a:hover,
    .main-navigation.toggled #primary-menu > li > a:focus,
    .main-navigation.toggled #primary-menu .sub-menu li a:hover,
    .main-navigation.toggled #primary-menu .sub-menu li a:focus {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #f2c433 !important;
    }

    /* CTA items (Contact Us, phone) — render as gold pill buttons
       inside the panel so they're obvious calls-to-action.
       Typography sets navy-on-navy here too. */
    .main-navigation.toggled #primary-menu > li.pkc-menu-cta {
        background: transparent !important;
        margin: 8px 16px !important;
        padding: 0 !important;
    }
    .main-navigation.toggled #primary-menu > li.pkc-menu-cta > a {
        color: #00267a !important;
        background: #f2c433 !important;
        font-weight: 600 !important;
        text-align: center !important;
        padding: 12px 16px !important;
        border-radius: 6px !important;
        display: block !important;
    }

    /* The mega-menu desktop styles ("Services" panel uses CSS grid)
       leak into mobile via `.pkc-menu-services > .sub-menu`. Reset
       the layout BUT honour the accordion: collapsed by default,
       only displayed when .pkc-menu-services has .is-open class. */
    .main-navigation.toggled #primary-menu .pkc-menu-services > .sub-menu {
        display: none !important;
        grid-template-columns: none !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        padding: 0 !important;
        margin: 4px 0 8px 16px !important;
        background: transparent !important;
        border: none !important;
        border-left: 2px solid rgba(242, 196, 51, 0.5) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        position: static !important;
    }
    .main-navigation.toggled #primary-menu .pkc-menu-services.is-open > .sub-menu,
    .main-navigation.toggled #primary-menu .pkc-menu-services.focus > .sub-menu {
        display: block !important;
    }

    /* Services category headings (Management Consulting, etc.) inside
       the mobile panel — typography styles these as bold navy 18px.
       Default WHITE (readable on navy); active variant gets gold via
       the WordPress .current-* class rules below. */
    .main-navigation.toggled #primary-menu .pkc-menu-services > .sub-menu > li > a {
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        padding: 12px 20px 6px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    /* ── ACTIVE-PAGE HIGHLIGHT ────────────────────────────────────
       WordPress adds these classes automatically:
         .current-menu-item     → exact item matching the current page
         .current-menu-parent   → its direct parent
         .current-menu-ancestor → any ancestor up the chain
         .current_page_*        → same for page-type items
       So when a leaf is active, the leaf + every parent up to the top
       are tagged — gold lights up the full active path so the user
       sees which category their current page belongs to.
       Specificity wins all default colour rules in this file. */
    .main-navigation.toggled #primary-menu li.current-menu-item > a,
    .main-navigation.toggled #primary-menu li.current-menu-parent > a,
    .main-navigation.toggled #primary-menu li.current-menu-ancestor > a,
    .main-navigation.toggled #primary-menu li.current_page_item > a,
    .main-navigation.toggled #primary-menu li.current_page_parent > a,
    .main-navigation.toggled #primary-menu li.current_page_ancestor > a {
        color: #f2c433 !important;
        opacity: 1 !important;
    }

    /* Backdrop dimming when menu is open — tap to close. */
    .main-navigation.toggled::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.35);
        z-index: 998;
        animation: pkc-fade-in 0.2s ease;
    }

    @keyframes pkc-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}


/* ───────────────────────────────────────────────────────────────────────
   TABLET portrait and below — ≤ 991px
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Bootstrap col-md-* already stacks here, but several theme
       sections use flex containers without flex-wrap. Force wrap
       so children flow onto multiple rows instead of overflowing. */
    .d-flex:not(.flex-nowrap):not(.flex-md-row),
    .row {
        flex-wrap: wrap;
    }

    /* Footer columns: stack to single column on tablet portrait. */
    #colophon .row > [class*="col-"] {
        margin-bottom: 24px;
    }

    /* ── BANNER GAP ───────────────────────────────────────────────
       Pages with a background-image hero/banner sit flush against
       the sticky header on mobile. Add a top margin so the banner
       background starts a clear distance below the header. */
    .banner-sec,
    #hpbann,
    #home-anim-banner,
    #page-anim-banner,
    .entry-header.pg-sec,
    section[class*="banner"],
    section[class*="hero"],
    .elementor-section:first-child[style*="background"] {
        margin-top: 16px !important;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   LARGE PHONE landscape — ≤ 767px
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* style.css sets these sections to padding:100px 5% globally,
       which dominates a phone viewport. */
    #abt-journ,
    #hp-casestudy,
    #hp-posts,
    #hp-signup,
    #hp-team,
    #pg-serv-signup,
    #wrk-events {
        padding: 48px 5%;
    }

    /* Generic section padding — reduce on phones for any element
       carrying the common .py-100 / .py-80 utility pattern. */
    .py-100,
    .py-80,
    [class*="elementor-section-stretched"] > .elementor-container {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Most homepage hero/banner blocks have large desktop padding
       that's wasteful on phones. */
    #home-anim-banner,
    #hpbann,
    .banner-sec,
    .hero-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* Buttons commonly need to be full width on phones to be tappable. */
    .btn-block-sm,
    .btn-full-mobile {
        display: block;
        width: 100%;
    }

    /* Owl carousel dots & arrows are usually oversized for the
       reduced viewport. */
    .owl-dots,
    .owl-nav {
        margin-top: 12px !important;
    }

    .owl-nav button.owl-prev,
    .owl-nav button.owl-next {
        padding: 4px 8px !important;
    }

    /* Footer headings — slightly tighten spacing on phones. */
    #colophon h2,
    #colophon h3,
    #colophon h4 {
        margin-top: 20px;
    }

    /* Footer menu lists — give space between items for finger taps. */
    #colophon ul li {
        padding: 6px 0;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   PHONE portrait — ≤ 575px
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {

    /* THE BIG ONE: rescale the entire type system on phones.
       The theme's typography is built on these CSS variables in
       pkc-typography.css :root. Overriding them here resizes every
       heading and button across the entire site in one move,
       without per-element rules. */
    :root {
        --t-base:  0.9375rem;  /* 15px body (was 16px) */
        --t-md:    1rem;       /* 16px (was 18px) */
        --t-lg:    1.125rem;   /* 18px (was 22px) */
        --t-xl:    1.375rem;   /* 22px h3 (was 28px) */
        --t-2xl:   1.5rem;     /* 24px h2 (was 32px) */
        --t-3xl:   1.75rem;    /* 28px h1 (was 40px) */
        --t-hero:  1.875rem;   /* 30px hero (was 40px) */
    }

    /* Tighten line-height so larger ratios don't look airy on small
       screens. */
    :root {
        --lh-body:  1.55;
        --lh-tight: 1.18;
    }

    /* Sections still pushing too much vertical space on phones. */
    section,
    .elementor-section {
       // padding-top: 32px;
       // padding-bottom: 32px;
    }

    /* Cards: trim padding so content has room. */
    .card,
    .pkc-card,
    .service-card,
    .blog-card,
    .casestudy-post {
        padding: 16px !important;
    }

    /* Tap-target floor for buttons. Skip .main-navigation a — the mobile
       slide-out menu sets its own block layout in style.css, and forcing
       inline-flex here corrupts it. Tap targets inside the nav are
       handled by per-link padding in nav-modern.css mobile block. */
    .btn,
    .btn-primary,
    .btn-secondary,
    button:not(.owl-prev):not(.owl-next):not(.menu-toggle):not(.hamburger-box) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer link breathing room — padding instead of min-height so it
       doesn't disturb inline layout. */
    #colophon a {
        padding: 6px 0;
        display: inline-block;
    }

    /* Hero / banner headline sizes — the hero blocks often use
       custom classes that bypass the :root scale. */
    .lxd,
    .banner-sec h1,
    .banner-sec h2,
    .hero h1,
    .hero h2 {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.2 !important;
    }

    /* Sub-headlines / strap-lines inside banners. */
    .banner-sec h3,
    .banner-sec p,
    .hero p {
        font-size: 0.9375rem !important; /* 15px */
    }

    /* Forms: stack labels above inputs and let inputs span width. */
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="url"],
    .wpcf7 textarea,
    .wpcf7 select,
    form.wpcf7-form input,
    form.wpcf7-form textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Modal/popup forms (popform.php) — give breathing room. */
    .modal-dialog,
    .popform-wrap {
        margin: 16px auto !important;
        max-width: calc(100vw - 32px) !important;
    }

    /* Header height: keep sticky nav short so it doesn't eat the
       fold. */
    #masthead.fixHeader {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* Site branding (logo) — cap height so it doesn't dominate. */
    .site-branding img,
    #masthead img.custom-logo {
        max-height: 38px;
        width: auto;
    }

    /* Service cards / icon grids — stack and center. */
    .service-cards,
    .icon-grid,
    .three-col-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Practice leaders / team grids — single column on phone. */
    .pract-leaders .row > [class*="col-"],
    #hp-team .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Reduce huge negative margins that some sections use to
       create overlap effects on desktop. */
    [class*="mt-n"],
    [style*="margin-top: -"] {
        margin-top: 0 !important;
    }

    /* Breadcrumbs — wrap and reduce size. */
    .breadcrumb,
    .breadcrumbs {
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* Tables — also force scroll wrapper (in case content wasn't
       wrapped at the global rule above). */
    table {
        display: block;
        overflow-x: auto;
        width: 100%;
        max-width: 100%;
    }

    /* Iframes (YouTube etc.) — best-effort responsive sizing. */
    iframe {
        max-width: 100%;
    }

    /* Lottie animation containers (animated banners on homepage). */
    lottie-player,
    .lottieplayer,
    .lottieplayer2 {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   TESTIMONIALS PAGE — template-testimonial.php
   The base styling lives in pkc-typography.css (now scoped to the
   portable `body.page-template-template-testimonial-php` class).
   These rules add the responsive padding tier that was missing —
   the originals only covered desktop and ≤575px, leaving a tablet
   gap where the page felt cramped or over-padded.
   ─────────────────────────────────────────────────────────────────────── */

/* Tablet (≤ 991px) — proportional shrink of large vertical paddings */
@media (max-width: 991px) {
    body.page-template-template-testimonial-php #primary > .entry-header.pg-sec {
        padding: 44px 0 24px !important;
    }
    body.page-template-template-testimonial-php #primary > .entry-header h1 {
        font-size: 1.625rem !important;  /* 26px */
        max-width: 700px;
    }
    body.page-template-template-testimonial-php #tstpg-player {
        padding-top: 4px !important;
        padding-bottom: 40px !important;
    }
    body.page-template-template-testimonial-php #tstpg-player > .container > .row > .col-12 .p-5 {
        padding: 16px !important;
    }
    body.page-template-template-testimonial-php [id^="tstpg-"]:not(#tstpg-player) {
        padding: 40px 0 !important;
    }
    body.page-template-template-testimonial-php .item.tstmnl {
        padding: 26px 22px 24px !important;
    }
}

/* Large phone landscape (≤ 767px) — further reduce padding so video
   thumbnails breathe in a 2-up grid */
@media (max-width: 767px) {
    body.page-template-template-testimonial-php #tstpg-player {
        padding-bottom: 32px !important;
    }
    body.page-template-template-testimonial-php #tstpg-player .yt-links {
        margin: 10px auto 0 !important;
    }
    body.page-template-template-testimonial-php #tstpg-player .yt-links h3 {
        font-size: 0.9375rem !important;  /* 15px */
        margin: 10px 12px 4px !important;
    }
    body.page-template-template-testimonial-php #tstpg-player .yt-links p {
        font-size: 0.8125rem;  /* 13px */
        margin: 0 12px 10px !important;
    }
    body.page-template-template-testimonial-php [id^="tstpg-"]:not(#tstpg-player) {
        padding: 32px 0 !important;
    }
    body.page-template-template-testimonial-php .tstpg-oc.owl-carousel {
        padding: 0 12px !important;
    }
}

/* Phone portrait (≤ 575px) — bottom of the ladder; the existing
   pkc-typography.css :575 rules already cover .entry-header h1 and
   .item.tstmnl. Just tighten the section/player padding one more
   notch since those weren't covered. */
@media (max-width: 575px) {
    body.page-template-template-testimonial-php #tstpg-player {
        padding-bottom: 24px !important;
    }
    body.page-template-template-testimonial-php #tstpg-player > .container > .row > .col-12 .p-5 {
        padding: 12px !important;
    }
    body.page-template-template-testimonial-php [id^="tstpg-"]:not(#tstpg-player) {
        padding: 24px 0 !important;
    }
    /* container side-padding hugs viewport on tiny screens */
    body.page-template-template-testimonial-php #tstpg-player > .container,
    body.page-template-template-testimonial-php [id^="tstpg-"] > .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ───────────────────────────────────────────────────────────────────────
   SMALL PHONE — ≤ 380px (iPhone SE, smaller Androids)
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {

    /* One more notch down for very narrow viewports. */
    :root {
        --t-3xl:  1.5rem;       /* 24px h1 */
        --t-2xl:  1.3125rem;    /* 21px h2 */
        --t-xl:   1.1875rem;    /* 19px h3 */
        --t-hero: 1.625rem;     /* 26px hero */
    }

    /* Container side-padding even tighter to maximize content width. */
    .container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   STICKY MOBILE HEADER + CAROUSEL NORMALIZATION
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. Sticky mobile header ───────────────────────────────────────────
   The theme already toggles `.fixHeader` on scroll via JS, but on
   mobile we want the menu pinned from the start so the hamburger is
   always reachable. `position: sticky` is native and doesn't need JS. */
@media (max-width: 1024px) {
    #masthead.site-header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9000 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 38, 122, 0.10);
    }
}


/* ── 2. Carousel arrows: normalize size + aspect ratio site-wide ──────
   Many sliders (owl, swiper, slick) have inconsistent arrow sizing.
   Some look stretched because their SVG/icon backgrounds use
   `background-size: 100% 100%`. Lock all to a 36×36 square with
   `background-size: contain` so the icon keeps its aspect ratio. */
.owl-nav button.owl-prev,
.owl-nav button.owl-next,
.swiper-button-prev,
.swiper-button-next,
.slick-prev,
.slick-next,
button.owl-prev,
button.owl-next {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Swiper's ::after pseudo carries the chevron glyph — keep it sized
   sensibly so it doesn't dominate the 36px button. */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 14px !important;
    line-height: 1 !important;
}


/* ── 3. Case-Studies arrows centered on mobile ─────────────────────────
   The `.cs-swiper-startup` slider on #hp-casestudy has left/right
   buttons that fall to the bottom-left at mobile widths. Pin them
   centred under the slide. */
@media (max-width: 991px) {
    #hp-casestudy .cs-swiper-startup,
    section#hp-casestudy [class*="swiper"] {
        position: relative;
        padding-bottom: 60px !important;
    }
    #hp-casestudy .cs-swiper-startup .swiper-button-prev,
    #hp-casestudy .swiper-button-prev.cs-swiper-startup-prev {
        position: absolute !important;
        bottom: 8px !important;
        top: auto !important;
        left: calc(50% - 48px) !important;
        right: auto !important;
        margin: 0 !important;
    }
    #hp-casestudy .cs-swiper-startup .swiper-button-next,
    #hp-casestudy .swiper-button-next.cs-swiper-startup-next {
        position: absolute !important;
        bottom: 8px !important;
        top: auto !important;
        left: calc(50% + 12px) !important;
        right: auto !important;
        margin: 0 !important;
    }
}


/* ── 4. Per-slide dynamic height for case-study & testimonial cards ───
   Default swiper/owl behaviour stretches every slide to the height of
   the tallest slide. For text-heavy cards where content length varies
   this leaves a lot of empty space. Set slides to auto height; swiper
   also needs JS `autoHeight: true` on init for perfect tracking, but
   this CSS prevents the tallest-slide stretch on its own. */
.cstudy-post,
.cs-swiper-startup .swiper-slide,
.pkc-test-card,
.tstpg-oc .item.tstmnl,
#hp-casestudy .swiper-slide,
.client-speak-sec .swiper-slide {
    height: auto !important;
    align-self: stretch;
}

/* The swiper-wrapper needs align-items: flex-start so the cards align
   to the top instead of stretching to fill the row height. */
#hp-casestudy .swiper-wrapper,
.cs-swiper-startup .swiper-wrapper,
.client-speak-sec .swiper-wrapper {
    align-items: flex-start !important;
}