/* ALROUF theme extras: nav states, reveal, parallax — layered on the compiled app.css */

/* Skip link */
.skip-link{position:absolute;left:1rem;top:-100px;z-index:100;padding:.75rem 1.25rem;background:var(--color-forest);color:var(--color-alabaster);border-radius:9999px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;transition:top .2s ease-out}
.skip-link:focus{top:1rem}

/* Nav: transparent over hero, glossy on scroll */
#site-nav{will-change:background,backdrop-filter}
#site-nav .nav-link{color:rgba(27,35,80,.55)}
#site-nav .nav-link:hover{color:var(--color-forest)}
#site-nav #nav-logo{content:url(assets)}
#site-nav #nav-cta{background:var(--color-forest)}
#site-nav #nav-cta:hover{background:rgba(27,35,80,.85)}
#site-nav.nav-solid{background:rgba(249,248,244,.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(227,229,236,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px -14px rgba(27,35,80,.18)}
#site-nav.nav-transparent{background:transparent}
#site-nav.nav-transparent .nav-link{color:rgba(249,248,244,.72)}
#site-nav.nav-transparent .nav-link:hover{color:#fff}
#site-nav.nav-transparent #nav-cta{background:var(--color-amber)}
#site-nav.nav-transparent #nav-toggle{color:#fff}
#nav-toggle{color:var(--color-forest);font-size:22px;line-height:1;background:none;border:0;cursor:pointer}

/* Reveal (in case not present in app.css) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal.reveal-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* Parallax hero layer */
.hero-parallax{will-change:transform}

/* Mobile menu */
#mobile-menu{position:fixed;inset:0;z-index:39;background:var(--color-alabaster);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;opacity:0;pointer-events:none;transition:opacity .4s ease}
#mobile-menu.open{opacity:1;pointer-events:auto}
#mobile-menu a{font-family:var(--font-playfair),"Playfair Display",serif;font-size:1.75rem;color:var(--color-forest)}

/* Editable page/post content (agent-written) — brand rhythm for plain HTML */
.alrouf-content h2{font-family:var(--font-playfair),"Playfair Display",serif;font-weight:700;color:var(--color-forest);font-size:2rem;line-height:1.15;margin:2.2rem 0 1rem}
.alrouf-content h3{font-family:var(--font-playfair),"Playfair Display",serif;font-weight:600;color:var(--color-forest);font-size:1.4rem;margin:1.8rem 0 .8rem}
.alrouf-content p{margin:0 0 1.15rem;font-size:1.05rem;line-height:1.75;color:var(--color-muted)}
.alrouf-content a{color:var(--color-amber);text-decoration:underline}
.alrouf-content ul{margin:0 0 1.15rem 1.25rem;list-style:disc;color:var(--color-muted)}
.alrouf-content li{margin:.4rem 0;line-height:1.6}
.alrouf-content img{border-radius:16px;margin:1.5rem 0}