/* nav.css — shared desktop dropdown menus for corraoelena.com
   Base nav rules live inline in each page (header/brand/nav a). This file only
   ADDS the hover/focus dropdown layer, so it never fights the inline styles.
   Pure CSS: desktop opens on hover + keyboard focus; below 900px the whole
   top nav is hidden and the hamburger (mobile-nav.js) takes over, so submenus
   need no mobile logic here. Dark-cinematic brand: forest panel, gold accent. */

/* the parent <li> anchors the absolute panel */
nav li.has-menu{position:relative;}

/* down-caret so a menu parent reads as a menu */
nav li.has-menu > a{padding-right:16px;}
nav li.has-menu > a::before{
  content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.5;
  transition:opacity .3s var(--ease),transform .3s var(--ease);}
nav li.has-menu:hover > a::before,
nav li.has-menu:focus-within > a::before{opacity:1;transform:translateY(-30%) rotate(45deg);}

/* the panel */
.submenu{
  display:block;position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:214px;margin-top:15px;padding:11px 0;list-style:none;
  background:rgba(20,28,22,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(231,196,137,.18);border-radius:3px;
  box-shadow:0 20px 46px rgba(0,0,0,.44);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s linear .32s;
  z-index:var(--z-nav);}
/* invisible bridge across the gap so the panel doesn't drop mid-reach */
.submenu::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px;}

nav li.has-menu:hover > .submenu,
nav li.has-menu:focus-within > .submenu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .32s var(--ease),transform .32s var(--ease);}

.submenu li{display:block;}
.submenu a,
.submenu .soon{
  display:block;white-space:nowrap;padding:10px 24px;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;line-height:1.1;
  color:var(--cream);opacity:.82;
  transition:color .28s var(--ease),opacity .28s var(--ease),
             background .28s var(--ease),padding-left .28s var(--ease);}
/* the animated underline from the top nav shouldn't run inside the panel */
.submenu a::after{display:none;}
.submenu a:hover{opacity:1;color:var(--gold);
  background:rgba(231,196,137,.06);padding-left:28px;}

/* greyed, not-yet-built item — carries a quiet "soon" tag, not clickable */
.submenu .soon{opacity:.42;cursor:default;
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.submenu .soon::after{content:"soon";
  font-size:8.5px;letter-spacing:1.5px;color:var(--gold);opacity:.7;}

@media(prefers-reduced-motion:reduce){
  .submenu,
  nav li.has-menu > a::before{transition-duration:.001ms;}
}


/* ============================================================
   FOOTER — impeccable pass
   Reinterprets the existing footer parts (.seal / .tag / .fnav / .cr)
   into a real sign-off: the mark, then the tagline as a Didot closing
   line (not an all-caps label), a refined nav row, a quiet copyright.
   CSS-only + loaded after each page's inline <style>, so it overrides
   by source order and keeps every per-page tagline + the seal's
   secret /bookclub/ link untouched.
   ============================================================ */
footer{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  position:relative;overflow:hidden;
  padding:clamp(74px,9vw,120px) clamp(24px,6vw,64px) clamp(38px,5vw,54px);
  background:
    radial-gradient(120% 92% at 50% 0%, rgba(231,196,137,.055), transparent 58%),
    radial-gradient(90% 130% at 50% 128%, rgba(147,162,131,.08), transparent 70%),
    var(--forest-dd);
}
/* a single deliberate gold seam, softly faded, marks the threshold */
footer::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(78%,560px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,196,137,.5),transparent);
}

/* the seal — the mark, and the quiet door to the book club */
footer .seal{
  order:1;width:auto;height:96px;margin:0 0 28px;opacity:.9;
  transition:transform .5s var(--ease),opacity .4s ease,filter .5s var(--ease);
}
footer .seal a{display:block;width:100%;height:100%;}
footer .seal img{width:auto;height:100%;object-fit:contain;filter:none;}
footer .seal:hover{opacity:1;transform:translateY(-2px);
  filter:drop-shadow(0 7px 22px rgba(231,196,137,.34));}

/* the sign-off, in her hand — script signature above the tagline.
   Pinyon Script = the same hand as the header "Eleanora" wordmark, so
   the footer signs off in the logo's own script. */
footer .tag::before{
  content:"xo, Eleanora";display:block;
  font-family:'Pinyon Script','Allura',cursive;font-style:normal;font-weight:400;
  font-size:clamp(40px,4.6vw,58px);line-height:1.05;letter-spacing:0;
  color:var(--gold);opacity:1;margin-bottom:16px;
  text-shadow:0 2px 26px rgba(231,196,137,.22);
}
/* the tagline — now a quiet serif descriptor beneath the signature */
footer .tag{
  order:2;text-transform:none;letter-spacing:.5px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-style:normal;font-weight:400;
  font-size:clamp(12px,1.15vw,14px);line-height:1.6;color:var(--cream);opacity:.72;
  max-width:38ch;margin:0 0 34px;text-wrap:balance;
}

/* nav — the same gold underline as the top nav, grown from center */
footer .fnav{
  order:3;display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(16px,2.4vw,32px);margin:0 0 30px;
}
footer .fnav a{
  position:relative;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--sand);opacity:.72;
  transition:color .3s var(--ease),opacity .3s var(--ease);
}
footer .fnav a::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:0;height:1px;
  background:var(--gold);transform:translateX(-50%);transition:width .3s var(--ease);
}
footer .fnav a:hover{color:var(--gold);opacity:1;}
footer .fnav a:hover::after{width:100%;}

/* copyright — quiet, at the base; keeps the hand-signed x */
footer .cr{
  order:4;margin-top:0;font-size:11px;letter-spacing:1.4px;color:#8b9385;opacity:.92;
}
footer .cr .script{font-family:'Allura',cursive;font-size:19px;color:var(--gold);letter-spacing:0;}

@media(max-width:600px){
  footer .tag{font-size:12px;max-width:32ch;}
  footer .tag::before{font-size:clamp(34px,10vw,44px);}
  footer .fnav{gap:13px 18px;}
}
@media(prefers-reduced-motion:reduce){
  footer .seal,footer .fnav a,footer .fnav a::after{transition-duration:.001ms;}
}