@media(max-width: 767px) {
    .footer-col ul {
        display: grid;
        gap: initial;
        margin-bottom: 15px;
        flex-wrap: wrap;
        grid-template-columns: 1fr 1fr;
        text-align: center;
        padding-left: 0px;
    }
    .image-slider figcaption.constructionWorld-image-carousel-caption {
        font-size: 25px;
    }
}

/* ============================================================
   Responsive header
   Collapse the floating navbar pill into a hamburger + dropdown
   on tablet and mobile (<= 991px). Above that the inline desktop
   menu is shown unchanged.
   Markup:    themes/trikona-edtech/header.php
   Toggle JS: themes/trikona-edtech/assets/js/mobile-menu-toggle.js
              (toggles the [hidden] attribute + aria-expanded on
               #mobile-menu, which the rules below key off).
   ============================================================ */
@media (max-width: 991px) {
    /* Flat, full-width white header bar flush to the top of the viewport,
       laid out as branding (left) | hamburger (right). */
    .site-header {
        top: 0;
        background: #fff;
        /* Compact the bar on phones. The desktop 130px height + 34px top
           padding exist for the floating-pill layout; on the flat mobile bar
           they left ~44px of the fixed header overlapping the page content
           (the .banner-section top offset below is only 86px, so dashboard
           content was clipped under the header). Shrink the header to that
           same 86px so content clears it and the logo/hamburger sit centred. */
        height: 86px;
        padding-top: 0;
    }
    .site-header .container {
        width: 100%;
        max-width: 100%;
        gap: 10px;
        padding: 0.5rem 1rem;
        /* Flat full-width bar flush to the top: drop the desktop floating-pill
           positioning, rounded corners and side inset. */
        position: relative;
        left: auto;
        transform: none;
        margin: 0;
        border: none;
        border-bottom: 2px solid #ffc000;
        border-radius: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }
    /* Keep the header flush at the very top for every role, including admins
       (neutralises the theme's default admin-bar top gap). */
    .admin-bar .site-header .container {
        margin-top: 0;
    }
    .site-header .site-branding {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Hide the inline desktop menu. */
    .site-header .site-navigation.show {
        display: none !important;
    }

    /* Reveal the hamburger toggle, kept in the flex row on the right. */
    .site-header .site-navigation-toggle-holder {
        display: flex;
        align-items: center;
        position: static;
        right: auto;
        top: auto;
        flex: 0 0 auto;
        padding: 0;
    }
    .site-header .site-navigation-toggle-holder .site-navigation-toggle {
        width: 38px;
        height: 38px;
        border-radius: 100px;
        background-color: #FBC25A;
        color: #1b3b4c;
    }

    /* Dropdown panel flows straight out of the header bar: full width and
       scrollable, flush to the bar (no gap) and rounded only at the bottom so
       the bar + menu read as one unit. Overrides the legacy
       ".constructionWorld-active" collapse rules. */
    .site-header #mobile-menu.site-navigation-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        margin: 0;
        max-height: min(80vh, 560px);
        overflow-y: auto;
        transform: none;
        background: var(--e-global-color-secondary);
        border: none;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.4);
    }
    .site-header #mobile-menu.site-navigation-dropdown[hidden] {
        display: none;
    }

    /* List + items styled for the dark pill theme. */
    .site-header #mobile-menu.site-navigation-dropdown ul.menu {
        position: static;
        width: 100%;
        margin: 0;
        padding: 6px 0;
        background: transparent;
    }
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li {
        display: block;
        width: 100%;
    }
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li a {
        display: block;
        width: 100%;
        padding: 13px 20px;
        background: transparent;
        color: #f9f8f7;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
        text-decoration: none;
        font-weight: 500;
    }
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li:last-child a {
        box-shadow: none;
    }
    /* The current page is intentionally left uniform with the rest of the list
       (no yellow/green active fill); the gold icons + greeting keep the accent.
       Hover feedback is neutral and limited to hover-capable (mouse) devices so
       a tap on touch never leaves an item stuck in a highlighted state. */
    @media (hover: hover) {
        .site-header #mobile-menu.site-navigation-dropdown ul.menu li a:hover {
            background: rgba(255, 255, 255, 0.06);
            color: #f9f8f7;
        }
    }

    /* Sub-menus expand inline (no hover/JS on touch). */
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li ul,
    .site-header #mobile-menu.site-navigation-dropdown ul.menu > li li {
        position: static;
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        transform: none;
        max-height: none;
        background: rgba(0, 0, 0, 0.18);
    }
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li ul li a {
        padding-left: 40px;
        font-size: 14px;
    }

    /* Chevron cue on any mobile item that has a sub-menu. Sub-menus render
       expanded inline, so this is a visual "has more below" marker; it reuses
       the Font Awesome angle the desktop menu already uses. */
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li.menu-item-has-children > a {
        position: relative;
        padding-right: 44px;
    }
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li.menu-item-has-children > a::after {
        content: "\f107";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        line-height: 1;
        color: currentColor;
        opacity: 0.7;
        pointer-events: none;
    }
}

/* ============================================================
   Mobile header restructure
   Markup: themes/trikona-edtech/header.php
   - Center the brand logo and swap it for the company logo.
   - Pin the hamburger to the right edge.
   - Move the top-bar "Explore Platform" + role/membership block and the
     "Hi <user>" greeting off the pill and into the dropdown (greeting at
     the top, Explore Platform CTA at the bottom).
   - Highlight the Logout link (v1.1).
   ============================================================ */

/* Company logo is only for the mobile pill; hidden on desktop. */
.site-header .site-branding .mobile-brand-logo {
    display: none;
}

@media (max-width: 991px) {
    /* White header bar with the brand pinned to the left and the hamburger to
       the right (matches the approved mobile header design). */
    .site-header .container {
        background: #fff;
        justify-content: flex-start;
    }
    .site-header .site-branding {
        display: flex;
        /* header.css sets this to column, which makes align-items (not
           justify-content) the horizontal axis. Force row so the logo aligns
           to the left edge and stays vertically centered. */
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex: 1 1 auto;
        min-width: 0;
        /* Reserve space on the right so the left-aligned logo clears the
           absolutely-positioned hamburger. */
        padding: 0 56px 0 4px;
        text-align: left;
    }

    /* Hide the desktop logo cluster (icon + "My Workspace" + greeting);
       show the centered company logo instead. */
    .site-header .site-branding .site-logo {
        display: none !important;
    }
    .site-header .site-branding .mobile-brand-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }
    .site-header .site-branding .mobile-brand-logo img {
        display: block;
        height: 36px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
    }

    /* Pin the hamburger to the right edge, clear of the centered logo. */
    .site-header .site-navigation-toggle-holder {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Remove the top-bar Explore Platform + role/membership block; it now
       lives inside the dropdown. */
    .site-header .header-explore-platform {
        display: none !important;
    }

    /* Dropdown user box (top): greeting + role/membership. */
    .site-header #mobile-menu.site-navigation-dropdown .mobile-menu-userbox {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255, 196, 0, 0.35);
    }
    .site-header #mobile-menu.site-navigation-dropdown .mobile-menu-user-greeting {
        font-size: 15px;
        font-weight: 700;
        color: #febf00;
    }
    .site-header #mobile-menu.site-navigation-dropdown .mobile-menu-user-meta {
        font-size: 12px;
        font-weight: 500;
        color: #d6d6d6;
    }

    /* Dropdown Explore Platform CTA (bottom). */
    .site-header #mobile-menu.site-navigation-dropdown .mobile-menu-explore {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 12px 16px 14px;
        padding: 12px 16px;
        background: #FBC25A;
        color: #1b3b4c;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 10px;
    }
    .site-header #mobile-menu.site-navigation-dropdown .mobile-menu-explore i {
        font-size: 12px;
    }

    /* Highlight the Logout link in theme yellow. */
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li.li-logout-trigger > a,
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li.logout-icon > a {
        background: #fbc25a2e;
        color: #FBC25A;
        font-weight: 700;
        box-shadow: inset 3px 0 0 #d9a400;
    }
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li.li-logout-trigger > a:hover,
    .site-header #mobile-menu.site-navigation-dropdown ul.menu li.logout-icon > a:hover {
        background: #fbc25a45;
        color: #FBC25A;
    }
}



/* Mobile view */
@media (max-width: 991px) {
    body.woocommerce-checkout h3#order_review_heading {
        width: 100% !important;
        margin-left: 0 !important;
    }
}
@media (max-width: 768px) {
    .woocommerce-checkout .form-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Panels (billing + order review) span the full width on mobile */
    .woocommerce-checkout .col2-set {
        width: 100% !important;
    }
    .woocommerce-checkout #order_review.woocommerce-checkout-review-order {
        width: 100% !important;
    }

    /* Fields go full width. base.css sets input/select2/textarea to
       70% !important, so the mobile override also needs !important to
       win — without it the desktop 70% persists on phones. */
    .woocommerce-checkout .form-row label,
    .woocommerce-checkout .form-row input,
    .woocommerce-checkout .form-row span.select2.select2-container,
    .woocommerce-checkout .form-row textarea {
        width: 100% !important;
    }

    /* Address line 2 wrapper: was width:70% + margin-left:auto on desktop */
    .woocommerce-checkout #billing_address_2_field .woocommerce-input-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Drop the 2em bottom margin WooCommerce core adds under notices */
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-message {
        margin: 0 !important;
    }

    /* Clear the top offset under the fixed header on mobile */
    .banner-section {
        padding-top: 86px !important;
    }

    /* Remove the 20px flex gap so stacked WooCommerce panels sit tight */
    .container .woocommerce {
        gap: 0 !important;
    }
}



/* ===== Mobile Fix ===== */
@media (max-width: 768px) {
.woocommerce-checkout form.checkout {
grid-template-columns: 1fr;
gap: 25px;
}
}


/* ============================================================
   Responsive page title
   The default page template (themes/trikona-edtech/page.php) prints
   the page title as <main><article><h1>…</h1></article>. base.css
   gives every h1 a fixed 2.5rem size, and the child theme centers all
   headings globally (support_form_inline_css() in trikona-child), so a
   long title such as "Student Ambassador" is wider than a phone screen
   and gets clipped on both sides. Scale the in-content title down with
   a fluid size and let it wrap so it always stays inside the viewport.
   Scoped to `main h1` so the header's hidden .site-title and the
   plugin/content h2–h6 are left untouched.
   ============================================================ */
@media (max-width: 768px) {
    main h1 {
        display: block;
        font-size: clamp(1.5rem, 7vw, 2.25rem);
        line-height: 1.15;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* ============================================================
   Global: smaller buttons on phones.
   Targets the standard button classes site-wide (Bootstrap .btn,
   WP/WooCommerce .button, Gutenberg .wp-block-button__link, and form
   submit/button inputs) so text buttons read at a phone-appropriate size.
   Icon-only controls (hamburger .site-navigation-toggle, FAQ .cl-faq-fab__btn,
   sub-menu .submenu-toggle) use their own classes and are intentionally left
   alone. !important is used so this wins over the many per-component button
   sizes across the theme/plugins.
   ============================================================ */
@media (max-width: 767px) {
    .btn,
    a.btn,
    button.btn,
    .button,
    a.button,
    button.button,
    .woocommerce a.button,
    .woocommerce button.button,
    .wp-block-button__link,
    input[type="submit"],
    input[type="button"] {
        padding: 7px 14px !important;
        font-size: 13px !important;
    }

    /* The single "Add to cart" button uses a fixed height:45px + line-height:45px
       (base.css/main.css) to vertically center its label and line up with the 45px
       quantity box. The 7px top/bottom padding forced above shrinks its content box
       below the 45px line height, pushing the label to the bottom edge of the button.
       Zero the vertical padding so the label stays centered; keep the horizontal
       padding. Higher specificity + !important to win over the rule above. */
    .woocommerce button.single_add_to_cart_button.button.alt {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* A button's label is sometimes wrapped in a heading (e.g. <h4> inside the
       "Enable Edit Mode" button) or a <p>, which keeps its large size instead
       of the button's. Pull that inner text down to the button size. Icons
       (<i>/<svg>) are not matched, so icon buttons are unaffected. */
    .btn > h1, .btn > h2, .btn > h3, .btn > h4, .btn > h5, .btn > h6, .btn > p,
    .button > h1, .button > h2, .button > h3, .button > h4, .button > h5, .button > h6, .button > p,
    .wp-block-button__link > h1, .wp-block-button__link > h2, .wp-block-button__link > h3, .wp-block-button__link > h4, .wp-block-button__link > h5, .wp-block-button__link > h6, .wp-block-button__link > p {
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
}