/* ============================================================
   Sanchez Family Legacy — shared site UI
   Header dropdown menu (with the dark/light toggle as its final
   item) + the Isaiah congratulations announcement band.
   Loaded after the page's inline styles and theme-light.css.
   ============================================================ */

/* ---------- header menu ---------- */
/* The in-fold countdown/actions bar is a sibling of the nav row. Keep it in a
   lower stacking context so the dropdown panel always paints above it instead
   of cutting off the first items / letting the countdown show through. */
.headbar{ position:relative; z-index:0; }
.nav-right{ display:flex; align-items:center; gap:10px; }
.navmenu{ position:relative; }
.menu-btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:none;
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.04em;
  padding:9px 15px; border-radius:999px; color:var(--gold-bright);
  background:rgba(18,13,10,.6); box-shadow:inset 0 0 0 1px var(--line);
  transition:background .15s, transform .15s, box-shadow .15s;
}
.menu-btn:hover{ transform:translateY(-1px); background:rgba(201,162,74,.12); box-shadow:inset 0 0 0 1px rgba(201,162,74,.45); }
.menu-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.navmenu-panel{
  position:absolute; right:0; top:calc(100% + 12px); min-width:264px; z-index:80;
  padding:9px; border-radius:16px; transform-origin:top right;
  background:linear-gradient(180deg, rgba(14,10,8,.98), rgba(6,5,4,.99));
  box-shadow:inset 0 0 0 1px var(--line), 0 30px 70px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.navmenu-panel.open{ opacity:1; visibility:visible; transform:none; }
.navmenu-panel a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--muted);
  transition:background .15s, color .15s;
}
.navmenu-panel a:hover{ background:rgba(201,162,74,.1); color:var(--gold-bright); }
.navmenu-panel a.active,
.navmenu-panel a[aria-current="page"]{ color:var(--gold-bright); }
.menu-sep{ height:1px; margin:8px; background:var(--line-soft); }
.navmenu-panel .theme-toggle{ width:100%; justify-content:flex-start; margin-top:2px; padding:11px 14px; border-radius:10px; }
.navmenu-panel .theme-toggle .tt-label{ margin-left:auto; }
html[data-theme="light"] .menu-btn{ background:rgba(255,252,245,.75); }
html[data-theme="light"] .menu-btn:hover{ background:rgba(184,137,46,.14); }
html[data-theme="light"] .navmenu-panel{ background:linear-gradient(180deg,#FFFDF7,#F6EEDD); box-shadow:inset 0 0 0 1px var(--line),0 30px 70px rgba(90,70,30,.25); }
@media (max-width:520px){ .menu-btn .menu-txt{ display:none; } .menu-btn{ padding:9px 12px; } }

/* ---------- Isaiah announcement band ---------- */
.announce{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.announce-bg{
  position:absolute; inset:0; z-index:0;
  background:url('/draft/sanchezlegacy/isaiah-hilton.webp') center 22% / cover no-repeat;
  opacity:0; transform:scale(1.07);
  transition:opacity 1.4s ease, transform 2.6s ease;
}
.announce.in .announce-bg{ opacity:.58; transform:scale(1); }
.announce::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(5,4,4,.95) 0%, rgba(5,4,4,.8) 46%, rgba(5,4,4,.32) 100%);
}
.announce-in{ position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:26px 24px; display:flex; align-items:center; gap:26px; }
.announce-badge{
  flex:0 0 auto; width:86px; height:86px; border-radius:16px; object-fit:cover; object-position:center 20%;
  box-shadow:inset 0 0 0 1px rgba(240,209,137,.35), 0 18px 44px rgba(0,0,0,.55);
}
.announce-copy{ flex:1 1 auto; min-width:0; }
.announce-kicker{ display:inline-flex; align-items:center; gap:9px; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:#F0D189; }
.announce-kicker .gi{ width:16px; height:16px; }
.announce-h{ font-family:var(--serif); font-weight:700; font-size:clamp(20px,2.4vw,28px); line-height:1.16; color:#F5EDDB; margin-top:8px; }
.announce-h .accent{ color:#F0D189; font-style:italic; }
.announce-p{ margin-top:9px; font-size:13px; line-height:1.6; color:rgba(239,231,214,.82); max-width:680px; }
.announce-cta{ flex:0 0 auto; }
.announce .gi{ stroke:url(#goldGrad); }
html[data-theme="light"] .announce .gi{ stroke:url(#goldGrad); filter:drop-shadow(0 0 7px rgba(240,209,137,.5)); }

/* the details slide's folded copy turns light in light mode, so its text must darken */
html[data-theme="light"] .fold-copy .kicker{ color:var(--gold-deep); }
html[data-theme="light"] .fold-copy .detail-list li{ color:var(--text); }
html[data-theme="light"] .fold-copy .detail-list b{ color:var(--gold-bright); }
.announce-fade{ opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease; }
.announce.in .announce-fade{ opacity:1; transform:none; }
.announce.in .announce-fade.d1{ transition-delay:.12s; }
.announce.in .announce-fade.d2{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .announce-bg{ opacity:.58; transform:none; transition:none; }
  .announce-fade{ opacity:1; transform:none; transition:none; }
}
@media (max-width:820px){
  .announce-in{ flex-direction:column; align-items:flex-start; gap:16px; padding:22px 20px; }
  .announce-cta{ width:100%; }
  .announce-cta .btn{ width:100%; justify-content:center; }
}