/* Responsive enhancements (mobile-first adjustments)
    Scope: Navigation collapse, hero spacing tweaks, circle menu scaling.
     Desktop styles remain unchanged because all overrides use max-width queries.
*/

/* Ensure toggle hidden by default (desktop) */
.nav-toggle {
    display: none;
}

/* 1. Navigation collapse */
@media (width <= 920px) {
    .nav {
        gap: 10px;
        padding: 10px 14px;
    }

    /* Hide primary nav inline version when collapsed; only show expanded panel state */
    .navlinks:not(body.nav-open .navlinks) {
        /* If nav not open ensure it's not occupying inline layout space */
        position: fixed;
        inset: 60px 0 auto;
        max-height: 0;
        overflow: hidden;
    }

    /* Force full hide (no layout, no off-screen reserved space) when nav closed */
    #primary-nav.navlinks { display: none; }
    body.nav-open #primary-nav.navlinks { display: flex; }

    .brand-logo {
        height: 40px;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid rgb(255 255 255 / 18%);
        background: rgb(255 255 255 / 6%);
        color: #e6eef7;
        cursor: pointer;
        position: relative;
    }

    .navlinks {
        position: fixed;
        inset: 60px 0 auto;
        background: rgb(5 8 26 / 92%);
        backdrop-filter: blur(14px) saturate(140%);
        display: flex;
        flex-direction: column;
        padding: 12px 18px 28px;
        gap: 4px;
        border-bottom: 1px solid rgb(255 255 255 / 15%);
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }

    body.nav-open .navlinks {
        max-height: 420px;
    }

    .navlinks a {
        width: 100%;
        font-size: .95rem;
    }

    .nav-toggle:focus-visible {
        outline: 2px solid #37a1ff;
        outline-offset: 2px;
    }

    .nav-toggle .bar {
        position: absolute;
        left: 11px;
        right: 11px;
        height: 2px;
        background: #e6eef7;
        border-radius: 2px;
        transition: transform .35s, opacity .35s;
    }
    .nav-toggle .bar.b1 { top: 14px; }
    .nav-toggle .bar.b2 { top: 21px; }
    .nav-toggle .bar.b3 { top: 28px; }
    body.nav-open .nav-toggle .bar.b1 { transform: translateY(7px) rotate(45deg); }
    body.nav-open .nav-toggle .bar.b2 { opacity: 0; }
    body.nav-open .nav-toggle .bar.b3 { transform: translateY(-7px) rotate(-45deg); }

    /* Move lang selector under menu */
    .lang {
        position: fixed;
        top: 60px;
        right: 12px;
        display: flex;
        flex-direction: row;
        gap: 6px;
    }

    body.nav-open .lang {
        top: auto;
        bottom: 12px;
        right: 12px;
    }
}

@media (width <= 560px) {
    .brand-logo { height: 34px; }
}

/* 2. Hero refinements */
@media (width <= 800px) {
    .site .hero .wrap { padding: 56px 0 40px; }
}

@media (width <= 580px) {
    .site .hero .wrap { padding: 46px 0 36px; }
}

@media (width <= 480px) {
    .site h1 { font-size: clamp(1.9rem, 1.4rem + 6vw, 2.5rem); }
    .site .lead { font-size: .97rem; }
    .site .cta { flex-direction: column; align-items: stretch; }
    .site .btn { width: 100%; text-align: center; }
}

/* 3. Cards tighten spacing on very small screens */
@media (width <= 480px) { .site .card { padding: 16px; } }

/* 4. Circle Menu scaling (keep usability, reduce footprint)
    NOTE: Removed previous 820px nudge reset to keep circle + logo centered consistently. */

@media (width <= 760px) {
    .menu-wrapper {
        min-height: 520px; /* maintain presence */
        overflow: visible; /* prevent clipping */
    }
}

/* Keep circle menu visible on small screens: override plugin that hides SVG @768px */
@media (width <= 768px) {
    .menu-wrapper .menu-svg { display: block !important; }

    /* Optionally still show list below for accessibility if desired; keep hidden for now */
    .menu-wrapper + .responsive-list { display: none !important; }
}

/* Dynamic scaling handled via --circle-scale JS; keep only logo/menu height tweaks */
@media (width <= 600px) {
    .menu-wrapper { min-height: 500px; }
}

/* Test safeguard: reserve vertical space so scaled circle menu does not overlap cards */
@media (width <= 640px) {
    .menu-wrapper { min-height: 340px !important; }
}

/* 5. Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .navlinks,
    .nav-toggle .bar { transition: none; }
}

/* 6. High contrast mode */
@media (forced-colors: active) {
    .nav-toggle { border: 1px solid ButtonText; }
    .nav-toggle .bar { background: ButtonText; }
}

/* Enhance responsive CTA handling: allow button text wrapping and hyphen break, prevent clipping */
@media (width <= 520px) {
    /* Earlier stack to avoid clipping just above 480px */
    .cta { flex-direction: column; align-items: stretch; gap: 10px; }
    .cta .btn { width: 80%; text-align: center; white-space: normal; }
}

@media (width <= 480px) {
    /* Ensure standalone .cta groups (not wrapped by .site) also stack vertically */
    .cta { flex-direction: column; align-items: stretch; }
    .cta .btn { width: 80%; text-align: center; white-space: normal; }
}

@media (width <= 290px) {
  /* Ensure standalone .cta groups (not wrapped by .site) also stack vertically */
  .cta { flex-direction: column; align-items: stretch; }
  .cta .btn { width: 50%; text-align: center; white-space: normal; }
}

/* Permit wrapping inside buttons containing non-breaking hyphen (U+2011) by substituting with regular hyphen via optional utility */
.btn { hyphens: auto; overflow-wrap: anywhere; }