/* ============================================================
   luca.ecosystem — Adaptive Screen Hardening
   Keeps every page usable at literally any viewport size.
   Loaded after lucUI.css on every page.
   ============================================================ */

/* --- Global overflow guard: no horizontal scroll at any width --- */
html {
    overflow-x: clip;
}

/* --- Fixed navbar offset ---
   Navbar floats 20px from the top with a min-height of 82px.
   Padding reclaims space once the hamburger menu takes over
   (<=900px) and again on small phones. */
body {
    padding-top: 160px;
}

@media (max-width: 900px) {
    body { padding-top: 128px; }
}

@media (max-width: 480px) {
    body { padding-top: 120px; }
}

/* --- Navbar brand: fluid lockup that never wraps --- */
.luc-navbar-brand {
    min-width: 0;
}

.luc-navbar-brand img {
    width: clamp(38px, 7vw, 50px);
}

.luc-navbar-brand .luc-font-display {
    font-size: clamp(1rem, 4vw, 1.4rem);
    white-space: nowrap;
}

.luc-theme-dock {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

.luc-theme-dock button {
    min-height: 2rem;
    padding: .35rem .6rem;
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    color: var(--text-muted);
    font: 500 .7rem/1 var(--font-body);
    cursor: pointer;
}

.luc-theme-dock button:hover,
.luc-theme-dock button[aria-pressed="true"] {
    border-color: var(--luc-accent);
    color: var(--luc-accent);
}

/* --- Mobile menu: never taller than the viewport --- */
@media (max-width: 900px) {
    .luc-navbar-links {
        max-height: calc(100dvh - 130px);
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }

    .luc-navbar-container {
        flex-wrap: wrap;
        row-gap: .65rem;
    }

    .luc-theme-dock {
        order: 3;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .luc-container { width: min(100% - 1.25rem, var(--luc-content-width)); }
    .luc-grid-cols-2,
    .luc-grid-cols-3 { grid-template-columns: 1fr !important; }
    .luc-grid-cols-2 > .luc-card:last-child { grid-column: auto !important; }
    .luc-card-body { padding: var(--space-5); }
    .luc-code-window { max-width: 100%; overflow-x: auto; }
    .luc-code-body { min-width: 36rem; }
    .luc-footer-grid { grid-template-columns: 1fr !important; gap: var(--space-6); }
    .luc-footer-bottom { text-align: center; }
}

/* --- Hero lockups: fluid logo and tighter type on tiny screens --- */
.luc-stage .luc-stage-content > img {
    height: auto;
}

@media (max-width: 480px) {
    .luc-stage h1 {
        line-height: 1.12;
    }
}

/* --- Footer breathing room on small screens --- */
@media (max-width: 480px) {
    .luc-footer {
        padding: var(--space-8) var(--space-4);
    }
}