/* ==========================================================================
   GEMINI ASSOCIATES — RESPONSIVE HARDENING
   --------------------------------------------------------------------------
   Loaded last. Fixes real mobile defects found by rendering the site at
   360-414px:

     1. Horizontal overflow from fixed-width decorative glows (450-520px)
        positioned with percentage offsets
     2. Wide data tables (min-width:860px) bursting their containers
     3. Touch targets below the 44x44px minimum
     4. Oversized display type on small screens
     5. Hero/section padding too generous on narrow viewports

   Principle: contain overflow at the source rather than hiding it with
   overflow-x:hidden on <body>, which would break position:sticky.
   ========================================================================== */

/* ==========================================================================
   01. GLOBAL OVERFLOW CONTAINMENT & SYMMETRY
   ========================================================================== */

/* Prevent horizontal viewport spill while preserving sticky headers */
html, body {
    overflow-x: clip !important;
    max-width: 100vw;
}

/* Any full-bleed section must clip its own decorative children */
.gemini-hero-container,
.gemini-pillars-section,
.gemini-about-section,
.gemini-innovation-section,
.gemini-services-section,
.gemini-products-section,
.gemini-projects-section,
.gemini-values-section,
.gemini-certifications-section,
.gemini-contact-section {
    overflow-x: clip; /* clip (not hidden) preserves position:sticky */
}

/* Prevent CTAs and buttons from bursting containers due to box-sizing */
.products-explore-btn,
.cert-explore-btn,
.services-explore-btn,
.about-cta-btn,
.projects-explore-btn,
.values-explore-btn,
.contact-cta-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Breadcrumb overflow protection */
nav[aria-label="breadcrumb"],
.breadcrumb {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Bootstrap .row applies negative horizontal margins (-gutter/2) which its
   parent .container is supposed to absorb via padding. Clamping max-width
   on .row broke negative margin math and created 24px right-side asymmetry.
   We ensure .row always expands symmetrically.
   -------------------------------------------------------------------------- */
.row {
    max-width: none !important;
}

@media (max-width: 991.98px) {
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }

    /* Stacked contact page symmetry: eliminate double gutters on mobile */
    .gemini-contact-section .row,
    .contact-section .row {
        --bs-gutter-x: 0 !important;
        row-gap: 1.25rem !important;
        margin-inline: 0 !important;
        width: 100% !important;
    }

    .gemini-contact-section .row > [class*="col-"],
    .contact-section .row > [class*="col-"] {
        padding-inline: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1rem;
    }

    /* Guarantee containers always provide gutter-absorbing padding */
    .container,
    .container-fluid {
        padding-left: max(0.75rem, var(--bs-gutter-x, 1rem) * 0.5);
        padding-right: max(0.75rem, var(--bs-gutter-x, 1rem) * 0.5);
    }
}

/* Long unbroken strings (emails, chemical names, URLs) must wrap */
p, li, td, th, dd, dt,
.value-card-desc,
.innovation-card-desc,
.bento-desc,
.pillar-desc,
.about-text,
.about-lead {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Grids that declare fixed minmax() floors must collapse below that floor */
@media (max-width: 575.98px) {
    [style*="grid-template-columns"],
    .values-grid,
    .cert-grid,
    .materials-grid,
    .spec-grid,
    .detail-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   02. DECORATIVE GLOWS — scale with the viewport instead of fixed px
   ========================================================================== */
@media (max-width: 767.98px) {
    .hero-glow,
    .hero-glow-1,
    .hero-glow-2,
    .ambient-glow,
    .section-glow,
    .bg-glow {
        width: min(60vw, 280px) !important;
        height: min(60vw, 280px) !important;
        filter: blur(60px) !important;
        opacity: 0.35 !important;
    }

    .hero-glow-1 { left: -10% !important; top: -60px !important; }
    .hero-glow-2 { right: -10% !important; bottom: -60px !important; }
}

/* ==========================================================================
   03. WIDE TABLES — scroll inside their own container, never the page
   ========================================================================== */
/* Actual wrapper class names used in this project */
.table-responsive,
.matrix-wrapper,
.products-table-container,
.catalogue-table-card .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Visible, branded scrollbar so the affordance is obvious */
.matrix-wrapper::-webkit-scrollbar,
.products-table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.matrix-wrapper::-webkit-scrollbar-thumb,
.products-table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--ga-brand-300);
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    /* Hint that the table scrolls sideways */
    .matrix-wrapper::after,
    .products-table-container::after,
    .catalogue-table-card .table-responsive::after {
        content: 'Swipe to see more →';
        display: block;
        padding: 0.5rem 0.25rem 0;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--ga-ink-400);
        text-align: right;
        position: sticky;
        left: 0;
    }
}

/* ==========================================================================
   04. TOUCH TARGETS — WCAG 2.5.8 minimum 24px, Apple HIG recommends 44px
   ========================================================================== */
@media (hover: none), (max-width: 991.98px) {
    .navbar-nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    .footer .btn.btn-link {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .btn-social {
        min-width: 44px;
        min-height: 44px;
    }

    .back-to-top {
        width: 52px;
        height: 52px;
        line-height: 52px;
    }

    .custom-button,
    .about-cta-btn,
    .hero-btn-primary,
    .hero-btn-secondary,
    .values-explore-btn,
    .gemini-nav-cta {
        min-height: 48px;
    }

    /* Inline text links in body copy get more tappable padding */
    .innovation-link,
    .about-secondary-link,
    .pillar-action {
        min-height: 44px;
        align-items: center;
    }
}

/* ==========================================================================
   05. MOBILE TYPOGRAPHY
   Display type tuned for desktop was overwhelming at 390px.
   ========================================================================== */
@media (max-width: 767.98px) {
    :root {
        --ga-text-4xl: clamp(1.6rem, 6.4vw, 2rem);
        --ga-text-5xl: clamp(1.85rem, 7.6vw, 2.4rem);
        --ga-section-y: 3rem;
    }

    .gemini-hero-title {
        font-size: clamp(1.85rem, 7.6vw, 2.4rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }

    .gemini-hero-lead {
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
    }

    /* Eyebrow badges wrap gracefully instead of forcing width */
    .hero-eyebrow-badge,
    .gemini-section-badge,
    .pillars-badge {
        font-size: 0.65rem !important;
        letter-spacing: 0.05em !important;
        padding: 6px 12px !important;
        text-align: center;
        line-height: 1.45;
        max-width: 100%;
        white-space: normal;
    }

    .values-main-title,
    .innovation-title,
    .services-main-title,
    .products-main-title,
    .projects-main-title,
    .certifications-main-title,
    .contact-main-title,
    .pillars-title,
    .about-title {
        font-size: clamp(1.6rem, 6.4vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    .values-main-subtitle,
    .innovation-lead,
    .services-main-subtitle,
    .products-main-subtitle,
    .projects-main-subtitle,
    .certifications-main-subtitle,
    .contact-main-subtitle,
    .pillars-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* Card interiors get tighter padding to preserve content width */
    .gemini-value-card,
    .about-bento-card,
    .innovation-card,
    .contact-dept-card {
        padding: 1.4rem 1.25rem !important;
    }

    /* Ghost numerals shrink so they don't dominate small cards */
    .innovation-card::after {
        font-size: 2.8rem !important;
        top: 0.35rem;
        right: 0.8rem;
    }
}

/* ==========================================================================
   06. HERO LAYOUT ON MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
    .gemini-hero-container {
        padding: 4.5rem 1rem 5.5rem 1rem !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .gemini-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Single-column KPI strip reads far better than a cramped 2x2 */
    .hero-kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0.5rem 1.25rem !important;
        border-radius: 18px !important;
        width: 100% !important;
        max-width: 350px !important;
        margin-inline: auto !important;
    }

    .hero-kpi-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        gap: 0 0.75rem;
        text-align: left !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
        padding: 0.85rem 0 !important;
    }

    .hero-kpi-card:last-child {
        border-bottom: none !important;
    }

    .kpi-value {
        font-size: 1.25rem !important;
        grid-row: span 2;
        align-self: center;
        min-width: 5.5rem;
    }

    .kpi-label { font-size: 0.82rem !important; }
    .kpi-sub   { font-size: 0.7rem !important; }

    /* Stack CTAs full-width with comfortable spacing */
    .gemini-hero-content .d-flex.flex-wrap {
        flex-direction: column;
        gap: 0.75rem !important;
    }
}

/* ==========================================================================
   07. MOBILE NAVIGATION
   ========================================================================== */
@media (max-width: 991.98px) {
    .gemini-header-wrapper .navbar-collapse {
        max-height: calc(100vh - var(--ga-header-h) - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gemini-header-wrapper .navbar-nav .nav-link {
        border-bottom: 1px solid var(--ga-ink-100);
        padding: 0.75rem 0.5rem !important;
    }

    .gemini-header-wrapper .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    /* Active item gets a clear left accent on mobile */
    .gemini-header-wrapper .navbar-nav .nav-link.active {
        border-left: 3px solid var(--ga-brand-500);
        padding-left: 0.75rem !important;
        background: var(--ga-brand-50);
        border-radius: 0 8px 8px 0;
    }

    .gemini-logo { height: 40px !important; }
}

/* ==========================================================================
   08. FOOTER
   ========================================================================== */
@media (max-width: 767.98px) {
    .footer .container.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 1rem !important;
    }

    .footer .col-md-6.col-lg-4.py-5 {
        padding-top: 0 !important;
        padding-bottom: 1.5rem !important;
    }

    .footer h4 {
        font-size: 1.05rem;
        margin-bottom: 1rem !important;
    }

    .footer .copyright {
        text-align: center;
        padding: 20px 0;
    }
}

/* ==========================================================================
   09. FORM VALIDATION & INTERACTION STATES
   Forms already use .form-floating with correct for/id pairing and
   `required`. These rules add the missing visual feedback.
   ========================================================================== */

/* Mark required fields so the requirement is visible, not just enforced */
.form-floating > label::after {
    content: '';
}

.form-floating > input[required] ~ label::after,
.form-floating > textarea[required] ~ label::after {
    content: ' *';
    color: #e11d48;
    font-weight: 700;
}

/* Only show validity colouring after the user has interacted */
.form-control:user-invalid {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14);
}

.form-control:user-valid {
    border-color: #10b981;
}

/* Fallback for browsers without :user-invalid */
@supports not selector(:user-invalid) {
    .form-control:not(:placeholder-shown):invalid {
        border-color: #e11d48;
    }
    .form-control:not(:placeholder-shown):valid {
        border-color: #10b981;
    }
}

/* Submit button disabled/busy state */
.contact-cta-btn:disabled,
.custom-button:disabled,
button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.is-submitting {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.is-submitting::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ga-spin 0.7s linear infinite;
}

@keyframes ga-spin {
    to { transform: rotate(360deg); }
}

/* iOS zooms the page if an input's font-size is below 16px */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   10. COLOUR CONTRAST — WCAG 2.1 AA
   --------------------------------------------------------------------------
   Measured failures in the original palette (white text):
     #01A2D3  -> 2.95:1  FAIL (primary button)
     #0284c7  -> 4.10:1  FAIL (link / button end stop)
     #94a3b8  -> 2.56:1  FAIL (hint text on white)

   Fix: keep the cyan brand identity for large display text, accents, icons
   and dark-background use, but darken the ramp wherever small text sits on
   it. The gradient now runs 027fa8 -> 01688a (4.56:1 -> 6.27:1).
   ========================================================================== */
:root {
    --ga-gradient-brand: linear-gradient(135deg, #027fa8 0%, #01688a 100%);
    --ga-gradient-brand-hover: linear-gradient(135deg, #01688a 0%, #075985 100%);
    --ga-text-link: #0369a1;   /* 5.93:1 on white */
}

/* Links in body copy */
a:not(.btn):not([class*="-btn"]):not(.nav-link):not(.navbar-brand) {
    color: #0369a1;
}

a:not(.btn):not([class*="-btn"]):not(.nav-link):not(.navbar-brand):hover {
    color: #075985;
}

/* Inline "learn more" style links */
.innovation-link,
.about-secondary-link,
.product-link,
.service-link {
    color: #0369a1 !important;
}

.innovation-link.text-success,
.innovation-link.text-info {
    color: #0f766e !important; /* 4.76:1 — the old #10b981/#0dcaf0 failed */
}

/* Hint / helper / caption text — #94a3b8 was 2.56:1 */
.kpi-sub,
.text-muted,
.form-text,
.caption,
.helper-text {
    color: #5b6b80 !important; /* 5.44:1 */
}

/* Keep the light tint for small text on DARK backgrounds, where it passes */
.footer .text-muted,
.gemini-topbar .text-muted,
.hero-kpi-card .kpi-sub {
    color: #94a3b8 !important; /* 7.00:1 on #08172c */
}

/* Nav links: #1e293b already passes; ensure active state does too */
.gemini-header-wrapper .navbar-nav .nav-link:hover,
.gemini-header-wrapper .navbar-nav .nav-link.active {
    color: #0369a1 !important;
}

/* Section badges */
.gemini-section-badge,
.pillars-badge {
    color: #075985; /* 7.56:1 on #f0f9ff */
}

/* Buttons keep white text on the darkened gradient.
   NOTE: every page carries an inline <style> block that sets these
   gradients to the failing #01A2D3. Inline <style> in <body> parses after
   this file, so matching specificity is not enough — these rules are
   deliberately escalated with html[class] + !important to win the cascade. */
html .custom-button,
html .about-cta-btn,
html .hero-btn-primary,
html .gemini-nav-cta,
html .values-explore-btn,
html .contact-cta-btn,
html .innovation-cta-btn,
html .products-cta-btn,
html .services-cta-btn,
html .projects-cta-btn,
html .cert-cta-btn,
html a[class$="-cta-btn"],
html a[class$="-explore-btn"],
html button[class$="-cta-btn"] {
    background-image: var(--ga-gradient-brand) !important;
    background-color: #027fa8 !important;
    color: #ffffff !important;
}

html .custom-button:hover,
html .about-cta-btn:hover,
html .hero-btn-primary:hover,
html .gemini-nav-cta:hover,
html .values-explore-btn:hover,
html .contact-cta-btn:hover,
html a[class$="-cta-btn"]:hover,
html a[class$="-explore-btn"]:hover,
html button[class$="-cta-btn"]:hover {
    background-image: var(--ga-gradient-brand-hover) !important;
    background-color: #01688a !important;
    color: #ffffff !important;
}

/* Solid-fill brand surfaces that carry small white text */
html .bg-primary,
html .whats-next-badge,
html .new-tag {
    background-image: var(--ga-gradient-brand) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   11. SAFE-AREA INSETS (notched devices)
   ========================================================================== */
@supports (padding: max(0px)) {
    @media (max-width: 991.98px) {
        .gemini-header-wrapper > .container-fluid,
        .gemini-topbar > .container-fluid {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }

        .back-to-top {
            right: max(16px, env(safe-area-inset-right));
            bottom: max(16px, env(safe-area-inset-bottom));
        }
    }
}

/* ==========================================================================
   12. COMPREHENSIVE SITE-WIDE MOBILE RESPONSIVE HARDENING
   Tuned specifically for 320px – 768px viewports (iOS Safari & Android Chrome)
   ========================================================================== */

/* Universal mobile media query for tablets and phones */
@media (max-width: 991.98px) {
    /* Section vertical padding: reduce desktop 5.5rem voids to clean mobile proportions */
    .section-py,
    .gemini-pillars-section {
        padding-top: clamp(2.5rem, 6vh, 3.5rem) !important;
        padding-bottom: clamp(2.5rem, 6vh, 3.5rem) !important;
    }

    .section-header-wrap {
        margin-bottom: 2rem !important;
    }

    /* Headings scaling cleanly without breaking long words */
    .section-main-heading,
    .pillars-title,
    .contact-main-title,
    .services-main-title,
    .products-main-title,
    .values-main-title {
        font-size: clamp(1.75rem, 6vw, 2.3rem) !important;
        line-height: 1.2 !important;
    }

    .section-lead-text,
    .pillars-subtitle,
    .contact-main-subtitle {
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
    }

    /* Bento Pillar cards on mobile: ensure smooth stack without clipping */
    .pillar-card {
        min-height: auto !important;
        height: auto !important;
    }

    .pillar-body {
        max-width: 100% !important;
        padding: 1.4rem 1.25rem 1.2rem !important;
    }

    .pillar-media-window {
        position: relative !important;
        width: 100% !important;
        height: 190px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .pillar-tech-tag {
        top: 12px !important;
        right: 12px !important;
        font-size: 0.65rem !important;
    }

    /* Form cards: prevent mobile horizontal squeeze */
    .enquiry-card-wrapper,
    .gemini-form-card {
        border-radius: 18px !important;
    }

    .enquiry-header-bar {
        padding: 1.6rem 1.25rem !important;
    }

    .enquiry-form-body {
        padding: 1.6rem 1.25rem !important;
    }

    .gemini-form-card {
        padding: 1.6rem 1.25rem !important;
    }

    /* Inputs: guarantee 16px minimum font size to kill iOS auto-zoom */
    .custom-form-control,
    .catalogue-search-input,
    .form-control,
    .form-select {
        font-size: 16px !important;
        border-radius: 10px !important;
        min-height: 46px;
    }

    /* Buttons: full width touch target on mobile */
    .enquiry-form-body .btn,
    .gemini-form-card .btn,
    .contact-cta-btn {
        width: 100% !important;
        min-height: 50px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem !important;
    }

    /* Catalogue filter pills swipe rail on mobile */
    .catalogue-toolbar {
        padding: 1.15rem 1rem !important;
        border-radius: 16px !important;
    }

    .catalogue-filter-group {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding-bottom: 6px;
        margin-inline: -0.25rem;
        scrollbar-width: none;
    }

    .catalogue-filter-group::-webkit-scrollbar {
        display: none;
    }

    .filter-pill-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 7px 14px !important;
        font-size: 0.78rem !important;
    }

    /* Data Tables: mobile scroll container with clean cell padding */
    .catalogue-table thead th {
        padding: 12px 14px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    .catalogue-table tbody td {
        padding: 13px 14px !important;
        font-size: 0.88rem !important;
    }

    .grade-title {
        font-size: 0.95rem !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    /* Department contact cards */
    .contact-dept-card {
        padding: 1.25rem 1.15rem !important;
    }

    .dept-pill-link {
        font-size: 0.75rem !important;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    /* Product spec cards */
    .product-spec-card {
        padding: 1.35rem 1.15rem !important;
    }

    .product-hero {
        padding: 3.5rem 1.25rem 3rem !important;
    }

    .product-hero h1 {
        font-size: clamp(1.85rem, 6.5vw, 2.4rem) !important;
    }

    /* Water & CDMO stats strip on mobile */
    .water-stat-strip,
    .cdmo-stat-strip {
        padding: 1rem 0.5rem !important;
    }
}

/* Extra small mobile hardening (phones <= 575.98px, e.g. iPhone SE, 13 mini) */
@media (max-width: 575.98px) {
    /* Container gutters */
    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hero CTA full-width stack */
    .hero-cta-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.65rem !important;
    }

    html .hero-btn-primary,
    .hero-btn-secondary {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 20px !important;
    }

    /* Department cards stack icon and text on very narrow screens */
    .contact-dept-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    /* Modals & iframes */
    iframe {
        max-width: 100% !important;
        height: 280px !important;
    }

    /* Breadcrumbs on mobile */
    .breadcrumb {
        font-size: 0.8rem;
    }

    /* Alphabet filter bar in product_details.php */
    .alphabet-container {
        padding: 0.75rem 0.4rem !important;
    }

    .alphabet-btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.78rem !important;
        min-width: 28px !important;
    }
}