/* ============================================================
   Responsive refinements
   ============================================================ */

/* ── Global horizontal overflow prevention ──────────────────
   Only clip at the html level. Clipping body separately
   (overflow-x: clip/hidden) can cause asymmetric padding
   appearance on mobile because Bootstrap row negative margins
   extend the same amount on both sides, but clipping only
   removes the right-side extension from view.
   ---------------------------------------------------------- */
html { overflow-x: hidden; }

/* Images and media must never exceed their container */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* Word-wrap for long text (URLs in legal pages, table cells, etc.) */
p, li, td, th, .accordion-body {
    overflow-wrap: break-word;
    word-break:    break-word;
}

/* ── Large screens (≥1200px) ── */
@media (min-width: 1200px) {
    .hero { padding: 6rem 0 5rem; }
}

/* Medium screens (768px – 991px) */
@media (max-width: 991.98px) {
    section { padding: 3.5rem 0; }
    .section-lg { padding: 5rem 0; }

    .feature-row {
        flex-direction: column;
        gap: 2rem;
    }
    .feature-row.reverse { flex-direction: column; }

    .hero { padding: 3.5rem 0 3rem; }
    .hero .hero-image { margin-top: 2rem; }

    /* Mobile nav menu */
    .site-navbar #mainNav {
        display: none;
        width: 100%;
        background-color: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding: 0.5rem 0 0.75rem;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .site-navbar #mainNav.show {
        display: block;
    }

    /* Nav links in mobile menu — tighter, no underline animation */
    .site-navbar #mainNav .nav-link {
        padding: .5rem 0;
        font-size: .95rem;
        border-bottom: 1px solid var(--color-border);
        position: relative;
    }
    .site-navbar #mainNav .nav-link:last-of-type {
        border-bottom: none;
    }

    /* Active item: left accent bar instead of bottom underline */
    .site-navbar #mainNav .nav-link.active {
        color: var(--color-primary);
        font-weight: 600;
        padding-left: .75rem;
        border-left: 3px solid var(--color-primary);
    }

    /* Kill the desktop underline ::after completely inside mobile menu */
    .site-navbar #mainNav .nav-link::after {
        display: none !important;
    }

    /* Navbar: keep CTA button inside collapsed menu */
    .site-navbar .btn-demo { margin: .75rem 0 .25rem; width: 100%; text-align: center; }

    /* Hamburger toggler icon */
    #navToggler { color: var(--color-text); padding: 0.25rem; }
    #navToggler:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

    /* Footer columns stack */
    .site-footer .col-lg-3,
    .site-footer .col-lg-2 { margin-bottom: 2rem; }
}

/* Small screens (≤767px) */
@media (max-width: 767.98px) {
    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.5rem; }

    section { padding: 3rem 0; }

    .cta-band { padding: 3rem 0; }

    .pillar-card { padding: 1.5rem; }

    .cookie-banner-actions { flex-direction: column; align-items: stretch; }
    #cookie-banner .btn-sm { text-align: center; }

    .step-indicator { gap: .25rem; }
    .step-dot { width: 28px; height: 28px; font-size: .7rem; }

    .error-code { font-size: 6rem; }

    /* Platform stat boxes: shrink value text so it fits in col-6 without wrapping */
    .stat-value { font-size: 1.25rem; }
    .stat-label { font-size: .78rem; }

    /* USP strip: stack icon above text so col-6 columns aren't cramped */
    .usp-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .5rem;
    }
    .usp-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    .usp-icon svg { width: 20px; height: 20px; }
    .usp-title { font-size: .875rem; }
    .usp-desc { font-size: .75rem; }
}

/* Extra-small (≤575px) */
@media (max-width: 575.98px) {
    .hero { padding: 2.5rem 0 2rem; }

    .testimonial-block { padding: 1.25rem; }

    .cta-band .d-flex { flex-direction: column; gap: .75rem !important; }
    .cta-band .btn { width: 100%; }

    #scroll-top { bottom: 1.25rem; right: 1.25rem; }

    /* Step numbers: shrink on tiny screens */
    .step-number {
        width: 34px;
        height: 34px;
        font-size: .8rem;
        flex-shrink: 0;
    }

    /* Tables: allow horizontal scroll inside their wrapper */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Breadcrumb: allow wrapping */
    .breadcrumb { flex-wrap: wrap; }

    /* Section labels: block on tiny screens */
    .section-label { display: block; }
}

/* ── Symmetric container & row gutters on mobile ────────────
   Bootstrap .row has negative margins of half the gutter-x.
   On small screens large gutters (g-4, g-5) extend rows beyond
   the container, making the right side appear clipped.
   Setting gutter-x to 1.5rem means row margin = -0.75rem on
   each side — exactly compensated by the container's 0.75rem
   default padding, giving equal left/right breathing room.
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
    .g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
    .g-5, .gx-5 { --bs-gutter-x: 1.5rem; }

    /* Ensure container padding is symmetric and at least matches row gutter */
    .container {
        padding-left:  max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
}

/* Smooth scroll (spec §17.5) */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}