/* ════════════════════════════════════════════════════════════
   SOLANZO — shared design tokens & components
   Single source of truth for the brand palette and the page-banner
   used by the static pages. Loaded once in layouts/site.blade.php.
   Page-specific component CSS still lives in each view's @push('styles').
════════════════════════════════════════════════════════════ */

/* ── Brand design tokens ─────────────────────────────────────
   (previously duplicated in products/blog views) */
:root {
    --sz-teal: #09464b;
    --sz-teal-2: #163838;
    --sz-sage: #85A6A6;
    --sz-ink: #28241f;
    --sz-muted: #6a7878;
    --sz-line: #e7edec;
    --sz-bg: #f5f8f8;
}

/* ── Page banner (dark hero used by About / Contact / Certifications) ──
   Identical across those pages — centralised here.
   NOTE: the background image is referenced relative to /public. */
.page-banner {
    position: relative;
    background: linear-gradient(135deg, #09464b 0%, #163838 100%);
    padding: 150px 0 70px;
    overflow: hidden;
}
.page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/images/page-title-map.png') center right / contain no-repeat;
    opacity: .12;
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner .eyebrow {
    color: #85A6A6;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 10px;
    display: block;
}
.page-banner h1 {
    font-family: 'Wix Madefor Display', sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0;
}
.page-banner .crumbs { color: #acb3b3; font-size: 14px; margin-top: 14px; }
.page-banner .crumbs a { color: #85A6A6; text-decoration: none; }

/* ── Accessibility ───────────────────────────────────────────
   Skip-to-content link: hidden until focused via keyboard (Tab),
   then drops into view so keyboard/screen-reader users can bypass
   the navigation. */
.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 100000;
    background: #09464b;
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid #85A6A6;
    outline-offset: 2px;
}

/* Visible keyboard focus for interactive elements (does not affect
   mouse users thanks to :focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #85A6A6;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Language dropdown: hide closed state from first paint (anti-FOUC) ──
   The full .sz-lang styling lives in a <style> block at the BOTTOM of the
   page body, so on load the menu flashed open for a moment before that late
   CSS hid it. This rule lives in solanzo.css (loaded in <head>) so the menu
   is hidden before the header ever paints. The bottom block's
   `.sz-lang.open .sz-lang__menu { visibility:visible }` still reveals it on
   click. */
.sz-lang__menu { opacity: 0; visibility: hidden; }
.sz-lang.open .sz-lang__menu { opacity: 1; visibility: visible; }

/* ════════════════════════════════════════════════════════════
   MOBILE-FRIENDLY HARDENING (site-wide)
   Loaded once for every public page. Fixes horizontal scroll,
   runaway media, and small tap targets at phone widths.
════════════════════════════════════════════════════════════ */

/* 1) Never allow horizontal scroll. The main offender was Bootstrap's
   `.row.g-5` negative gutter margins (-12px each side) on rows that sit
   outside a padded container at mobile width — they pushed content ~12px
   past each edge. overflow-x:clip on the root removes the side-scroll;
   the gutter is also tamed below so layout stays correct, not just clipped. */
html, body { max-width: 100%; overflow-x: clip; }

/* 2) Media can never exceed its container (prevents wide images / embeds /
   tables forcing the page wider than the screen). NOTE: height:auto is applied
   only to images/svg — iframes & <video> keep their explicit/aspect heights
   (the contact-page Google Map and the hero video set their own height). */
img, svg, canvas { max-width: 100%; height: auto; }
video, iframe, embed, object { max-width: 100%; }
table { max-width: 100%; }

/* ── Tablet / mobile shared (≤991px) ── */
@media (max-width: 991.98px) {
    /* Static page banners (About, Contact, Certifications) */
    .page-banner { padding: 120px 0 56px; }

    /* Section vertical rhythm on content pages */
    .about-values, .about-commitment, .about-story, .about-faq,
    .contact-info, .compliance { padding-top: 56px; padding-bottom: 56px; }
    .contact-main { padding: 40px 0 64px; }

    /* Contact map: don't force a tall column beside a stacked form */
    .contact-map, .contact-map iframe { min-height: 320px; }
}

/* ── Phone (≤767px) ── */
@media (max-width: 767.98px) {
    .page-banner { padding: 110px 0 48px; }
    .page-banner h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }

    /* Hero banners on products / blog / product detail */
    .products-hero, .blog-hero, .pd-hero, .article-hero {
        padding-top: 120px;
        padding-bottom: 56px;
    }

    /* Spec tables scroll horizontally instead of breaking layout */
    #panel-specs, .spec-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .spec-table { min-width: 300px; }

    /* Blog category chips: horizontal scroll strip */
    .blog-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .blog-filters::-webkit-scrollbar { display: none; }
    .blog-chip { flex: 0 0 auto; }

    /* Article share row stacks cleanly */
    .article-foot { flex-direction: column; align-items: flex-start; }

    /* Certifications callout */
    .cert-commitment { padding: 28px 22px; }
}

@media (max-width: 575.98px) {
    /* 3) Tame the large Bootstrap gutters on phones so rows don't overflow
       and columns aren't cramped. (.g-5 = 3rem, .g-4 = 1.5rem → smaller.) */
    .row.g-5, .row.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

    /* 4) Comfortable thumb tap targets for primary buttons (inline-flex centres
       label + icon). Block-level mobile-nav links handled separately so they
       stay full-width. Footer micro-links left as-is to avoid layout churn. */
    .btn, button.btn, a.btn,
    .footer-cta-btn, .product-mega-all,
    .btn-hero, .btn-hero-outline, .btn-sz, .btn-sz-light,
    .btn-sz-ghost, .btn-back, .btn-ghost,
    .newsletter-form button, .footer-subscribe__btn,
    .mobile-menu-toggle, .close-menu {
        min-height: 44px;
    }
    .btn, button.btn, a.btn,
    .footer-cta-btn, .product-mega-all,
    .btn-hero, .btn-hero-outline, .btn-sz, .btn-sz-light,
    .btn-sz-ghost, .btn-back, .btn-ghost {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-nav > li > a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .mobile-menu-toggle, .close-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Form fields: comfortable touch height */
    .form-control, .footer-subscribe__input,
    .newsletter-form input[type="email"],
    .contact-form-wrapper .form-control {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }

    /* 5) Long unbroken strings (URLs, codes) wrap instead of overflowing. */
    p, li, td, dd, .pd-prose, .article-prose { overflow-wrap: break-word; }

    /* Home hero: less top padding under mobile header */
    .home-hero .hero-content { padding-top: 100px; }
    .home-hero { min-height: 85vh; }

    /* Newsletter + hero CTAs stack full-width */
    .newsletter-form { flex-direction: column; max-width: none; }
    .newsletter-form button { width: 100%; }

    /* Footer CTA band */
    .footer-cta-band { padding: 32px 0; }
    .footer-widgets-wrap { padding: 48px 0 40px; }

    /* 404 page */
    .error-page { padding: 120px 0 72px; min-height: 60vh; }

    /* Contact form card */
    .contact-form-wrapper { padding: 24px 20px; }

    /* Product tabs: scrollable pill strip when labels are long */
    .pd-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        scrollbar-width: none;
    }
    .pd-tabs::-webkit-scrollbar { display: none; }
    .pd-tab { flex: 0 0 auto; white-space: nowrap; }

    /* Product grid: single column on very narrow phones */
    .product-grid { grid-template-columns: 1fr; }
}