/* MECHANIZ — modern engineering UI layer */
:root {
    color-scheme: dark;
    --surface-glass: rgba(8, 15, 28, .68);
    --surface-card: rgba(12, 21, 37, .82);
    --accent-glow: rgba(var(--accent-rgb), .22);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-0: #f4f7fb;
    --bg-1: #ffffff;
    --bg-2: #eef3f9;
    --bg-3: #e3ebf5;
    --line: #cbd7e6;
    --line-soft: rgba(65, 86, 112, .16);
    --text-1: #0b1628;
    --text-2: #52647c;
    --text-3: #7b8ba0;
    --glass: rgba(255,255,255,.76);
    --glass-strong: rgba(255,255,255,.92);
    --shadow-sm: 0 8px 25px rgba(23, 48, 82, .08);
    --shadow: 0 18px 55px rgba(23, 48, 82, .12);
    --surface-glass: rgba(255,255,255,.68);
    --surface-card: rgba(255,255,255,.82);
}

body {
    min-height: 100vh;
    background-color: var(--bg-0);
    background-image:
        radial-gradient(circle at 90% -10%, rgba(var(--accent-2-rgb), .12), transparent 32%),
        radial-gradient(circle at 5% 0%, rgba(var(--accent-rgb), .10), transparent 28%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, var(--bg-2) 100%);
    transition: background-color .35s ease, color .35s ease;
}

body::before { opacity: .85; animation: grid-drift 26s linear infinite; }
body::after { animation: ambient-pulse 8s ease-in-out infinite alternate; }

@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 36px 36px; } }
@keyframes ambient-pulse { from { opacity: .65; } to { opacity: 1; } }
@keyframes float-soft { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-8px,0); } }
@keyframes shimmer { 0% { transform: translateX(-120%); opacity: 0; } 20% { opacity: .7; } 55% { opacity: .7; } 100% { transform: translateX(120%); opacity: 0; } }

/* Desktop navbar: keep every primary navigation item on ONE row. */
.navbar .inner {
    min-height: 70px;
    gap: .55rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.navbar .brand {
    flex: 0 0 auto;
    font-size: 1rem;
}
.navbar .brand-mark { width: 26px; height: 26px; }
.nav-links {
    display: flex;
    align-items: center;
    gap: .08rem;
    margin-inline-start: .15rem;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}
.nav-links a {
    flex: 0 0 auto;
    font-size: .75rem;
    padding: .28rem .34rem;
    white-space: nowrap;
}
.nav-link-inner { gap: .28rem !important; white-space: nowrap; }
.nav-links .ui-icon { width: 14px; height: 14px; }
.nav-actions {
    flex: 0 0 auto;
    gap: .28rem;
    white-space: nowrap;
}
.nav-actions .btn-sm { min-height: 32px; padding: .34rem .55rem; font-size: .72rem; }
.nav-search-btn { width: 32px; height: 32px; }
.theme-toggle { width: 36px; height: 36px; }

/* Give the navbar a little more room on medium desktop screens without wrapping. */
@media (min-width: 861px) and (max-width: 1180px) {
    .navbar .inner { gap: .35rem; }
    .navbar .brand { font-size: .9rem; }
    .nav-links { gap: 0; }
    .nav-links a { font-size: .69rem; padding-inline: .27rem; }
    .nav-link-inner { gap: .22rem !important; }
    .nav-links .ui-icon { width: 13px; height: 13px; }
    .nav-actions .btn-sm { font-size: .68rem; padding-inline: .45rem; }
}

@keyframes pulseTxt { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.theme-toggle {
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-1);
    background: var(--surface-card);
    backdrop-filter: blur(14px);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle:hover { transform: translateY(-2px) rotate(-4deg); border-color: rgba(var(--accent-rgb), .55); }
.theme-toggle .sun { display:none; }
html[data-theme="light"] .theme-toggle .moon { display:none; }
html[data-theme="light"] .theme-toggle .sun { display:block; }

.card, .timeline, .calendar-widget, .imv-box, .imv-panel, .q-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface-card) 92%, transparent), color-mix(in srgb, var(--bg-2) 78%, transparent));
    backdrop-filter: blur(14px) saturate(120%);
}
.card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.08) 48%, transparent 58%);
    transform: translateX(-120%); opacity: 0;
}
.card:hover::after { opacity: 1; animation: shimmer .75s ease both; }
.btn, .choice-btn { position: relative; overflow: hidden; }
.btn::after, .choice-btn::after {
    content: ""; position:absolute; inset-block:0; width:35%; left:-45%;
    transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    transition: left .5s ease;
}
.btn:hover::after, .choice-btn:hover::after { left:120%; }

.hero { min-height: 70vh; display:flex; align-items:center; }
.hero::before { animation: float-soft 7s ease-in-out infinite; }
.hero::after { animation: float-soft 9s ease-in-out infinite reverse; }
.hero h1 { text-wrap: balance; }
.hero .cta .btn { min-height: 44px; border-radius: 12px; }

.article-body p, .article-body li { max-width: 78ch; }
.article-body img { border-radius: 16px; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease; }
.article-body img:hover { transform: scale(1.012); box-shadow: var(--shadow); }
.timeline a.active { background: linear-gradient(135deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-2-rgb), .08)); transform: translateX(-3px); }

.imv-box { position: relative; min-height: 420px; border-radius: 20px; overflow: hidden; }
.imv-box::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), .08), transparent 45%); }
.imv-toolbar button { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.imv-toolbar button:hover { transform: translateY(-2px); }

.quiz-shell { max-width: 920px; padding-top: 2rem; padding-bottom: 2rem; }
.q-card { border-radius: 20px; padding: clamp(1rem,3vw,2rem); }
.choice-btn {
    width:100%; min-height:54px; margin-top:.65rem; text-align:right; padding:.85rem 1rem;
    border:1px solid var(--line-soft); border-radius:14px; color:var(--text-1);
    background:color-mix(in srgb, var(--surface-card) 90%, transparent);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.choice-btn:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .38); }
.choice-btn.selected { background: rgba(var(--accent-rgb), .10); border-color: rgba(var(--accent-rgb), .60); box-shadow: 0 10px 28px rgba(var(--accent-rgb), .11); }
.quiz-bar { height:6px; border-radius:99px; overflow:hidden; }
.quiz-bar i { display:block; height:100%; transition:width .35s cubic-bezier(.22,.8,.2,1); }

input, select, textarea { background: color-mix(in srgb, var(--surface-card) 92%, transparent); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .25s ease; }
input:focus, select:focus, textarea:focus { transform:translateY(-1px); }
.admin-shell { background: var(--line-soft); }
.admin-side, .admin-main { transition: background .3s ease; }
.admin-side { background: var(--surface-glass); backdrop-filter: blur(18px); }
.admin-side a.active { box-shadow: inset -3px 0 0 var(--accent), 0 8px 24px rgba(var(--accent-rgb), .05); }

@media (max-width: 900px) {
    .container { padding-inline:1rem; }
    .navbar .inner { min-height:62px; gap:.45rem; }
    .nav-links {
        display:none;
        position:absolute;
        top:62px;
        inset-inline:0;
        background:var(--surface-glass);
        padding:.8rem 1rem;
        border-bottom:1px solid var(--line-soft);
        flex-direction:column;
        align-items:stretch;
        gap:.2rem;
        overflow:auto;
        white-space:normal;
    }
    .nav-links.open { display:flex; }
    .nav-links a { font-size:.86rem; padding:.5rem .65rem; }
    .nav-link-inner { gap:.4rem !important; }
    .nav-links .ui-icon { width:16px; height:16px; }
    .nav-toggle { display:inline-flex; }
    .nav-actions { gap:.3rem; }
    .theme-toggle { width:38px; height:38px; }
    .hero { min-height:auto; padding:4.8rem 0 3.5rem; }
    .hero h1 { font-size:clamp(2.35rem,15vw,4rem); line-height:1.08; }
    .hero .cta { display:grid; grid-template-columns:1fr; }
    .hero .cta .btn { width:100%; }
    .grid-3,.grid-4 { grid-template-columns:1fr; }
    .reader-layout { grid-template-columns:1fr !important; }
    .timeline { position:relative; top:auto; z-index:30; overflow-x:auto; display:flex; gap:.4rem; padding:.5rem; white-space:nowrap; }
    .timeline a { flex:0 0 auto; white-space:nowrap; }
    .imv-box { min-height:320px; border-radius:16px; }
    .imv-toolbar { flex-wrap:wrap; gap:.35rem; }
    .article-body { font-size:.98rem; }
    .article-body h2 { font-size:1.25rem; }
    .quiz-shell { padding-top:1rem; }
    .q-card { border-radius:16px; }
    .choice-btn { min-height:50px; }
    .quiz-nav { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
    .quiz-nav .btn { width:100%; }
}

@media (max-width: 560px) {
    body { font-size:15px; }
    .nav-actions .btn-primary { display:none; }
    .navbar .inner { gap:.45rem; }
    .hero h1 { letter-spacing:.06em; }
    .card { border-radius:14px; }
    .section-title { font-size:1.12rem; }
    table { display:block; overflow-x:auto; white-space:nowrap; }
    .quiz-nav { grid-template-columns:1fr; }
    .q-card { padding:1rem; }
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after, .hero::before, .hero::after { animation:none; }
    *, *::before, *::after { scroll-behavior:auto; }
}