/* Header (floating double-pill nav) + Navy footer. Briefing §2.1 / §2.2. */

/* Hide GeneratePress leftovers, if any render. */
.generate-page-header,
#masthead .inside-navigation,
.main-navigation:not(.cav-nav){ display:none !important; }

.cav-skiplink{ position:absolute; left:-9999px; }
.cav-skiplink:focus{ left:16px; top:16px; background:#fff; padding:8px 14px; border-radius:8px; z-index:9999; }

/* ---------- HEADER (appearance is inline per SiteNav.dc.html; here: only
   display/responsive + hover/transition that inline can't express) ---------- */
.cav-navmenu{ display:flex; }            /* desktop: show nav pill */
.cav-burger{ display:none; }             /* desktop: hide burger */
.vlink{ transition: color .35s ease, transform .26s cubic-bezier(.4,.8,.3,1); }
.vlink:hover{ transform: translateY(-2px); }
.vico{ transition: transform .2s cubic-bezier(.4,.8,.3,1), background .15s ease; }
.vico:hover{ transform: translateY(-2px) scale(1.07); }
.vico:active{ transform: translateY(0) scale(.92); }

/* Header: transparent über dem Hero, aber beim Scrollen ein SOLIDER, unbewegter Balken
   (heller Blur-Hintergrund + Schatten + Rand) — so ist immer klar, wo die Nav sitzt.
   Padding lebt jetzt hier (nicht mehr inline), damit der Balken schlanker werden kann. */
.cav-header{ background: transparent; padding: 16px 20px 0;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease, padding .22s ease; }
.cav-logo{ transition: width .22s ease, height .22s ease; }

/* Logo + Wortmarke: legible Marken-Präsenz im Header (Icon allein war zu blass). */
.cav-logolink{ display:flex; align-items:center; gap:13px; text-decoration:none; }
/* Wortmarke in Amatic SC (Logo-Schrift), schwarz. Amatic ist schmal/hoch → größer setzen. */
.cav-wordmark{ display:flex; flex-direction:column; line-height:1.02; }
/* Ruhige, kräftige Fredoka-Wortmarke in Schwarz. „VERLAG" klein mit dezentem Abstand. */
.cav-wordmark b{ font-family: var(--cav-font-head,'Fredoka'),sans-serif; font-weight:600; font-size:21px;
  color:#1A1A1A; letter-spacing:-.005em; white-space:nowrap; }
.cav-wordmark > span{ font-family: var(--cav-font-head,'Fredoka'),sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#1A1A1A; margin-top:3px; }
.cav-header.is-scrolled .cav-wordmark b{ font-size:18px; }
@media (max-width:1080px){ .cav-wordmark b{ font-size:18px; } .cav-wordmark > span{ font-size:11px; } }
@media (max-width:980px){ .cav-wordmark{ display:none; } }  /* mobil: nur Icon */
.cav-header.is-scrolled{
  background: var(--cav-hafer);
  padding-top: 9px; padding-bottom: 9px;
}
/* Beim Scrollen: Logo schrumpft, Pillen verlieren ihren schweren Eigen-Schatten → EIN Balken */
.cav-header.is-scrolled .cav-logo{ width: 54px !important; height: 54px !important; }
.cav-header.is-scrolled .cav-navmenu,
.cav-header.is-scrolled .cav-actions{ box-shadow: none; }

/* Sticky header must clear the WordPress admin bar (otherwise the logo is cut). */
body.admin-bar .cav-header{ top: 32px; }
@media (max-width:782px){ body.admin-bar .cav-header{ top: 46px; } }

/* Account dropdown (speech-bubble) — emerge animation + row hover, per SiteNav.dc.html */
@keyframes caAcct{ from{ opacity:0; transform:scale(.35); } to{ opacity:1; transform:scale(1); } }
[data-cav-account]:not([hidden]),
[data-cav-account-tail]:not([hidden]){ animation: caAcct .26s cubic-bezier(.34,1.3,.5,1) both; }
.ca-acctrow{ transition: background .14s ease, transform .14s ease; text-decoration:none; }
.ca-acctrow:hover{ background:var(--cav-hafer-2); }
.ca-acctrow:active{ transform: scale(.985); }

/* ---------- FOOTER ---------- */
.cav-footer{
  background: var(--cav-navy); color:#fff;
  margin-top:64px; padding:56px 0 30px;
}
.cav-footer h3{ color:#fff; font-weight:800; font-size:15px; margin:0 0 14px; }
.cav-footer a{ color: rgba(255,255,255,.78); }
.cav-footer a:hover{ color:#fff; }
.cav-footer__grid{
  display:grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap:40px;
}
.cav-footer .cav-brand{ gap:12px; padding:0; }
.cav-footer .cav-brand__logo{ width:52px; height:52px; border-radius:50%; background:#fff; padding:3px; box-shadow:none; }
.cav-footer .cav-brand__name{ font-size:18px; line-height:1.1; }
.cav-footer__links a{ font-size:14.5px; padding:5px 0; display:block; }
.cav-footer__trust svg{ color: var(--cav-honey); }
.cav-footer__tagline{ margin:14px 0; max-width:30ch; font-size:14px; }
.cav-footer__trust{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.cav-footer__trust li{ display:flex; align-items:center; gap:8px; }
.cav-footer__trust svg{ color: var(--cav-honey); }
.cav-footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.cav-footer__bottom{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
  font-size:13px; color: rgba(255,255,255,.6);
}

/* ---------- Mobile drawer ---------- */
.cav-drawer{ justify-content:flex-start; }
.cav-drawer__panel{
  position:relative; width:min(340px,90vw); height:100%; background: var(--cav-hafer);
  display:flex; flex-direction:column; gap:14px; padding:20px;
  transform: translateX(-100%); transition: transform .36s var(--cav-ease, cubic-bezier(.16,1,.3,1)), box-shadow .36s ease; will-change: transform;
  box-shadow: 20px 0 60px -30px rgba(42,58,82,.6); overflow:auto;
}
.cav-overlay.is-open .cav-drawer__panel{ transform: translateX(0); }
.cav-drawer__head{ display:flex; align-items:center; justify-content:space-between; }
.cav-drawer__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cav-drawer__list a{ display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color: var(--cav-ink); font-weight:600; }
.cav-drawer__list a:hover{ background:#fff; }
.cav-drawer__auth{ display:flex; flex-direction:column; gap:9px; margin-top:auto; }

/* ---------- RESPONSIVE (§9) ---------- */
@media (max-width: 980px){
  .cav-navmenu{ display:none !important; }   /* collapse center pill to burger */
  .cav-burger{ display:flex !important; }    /* burger erscheint in der rechten Aktions-Pille */
  /* Mobile: durchgehend ein schlanker, solider Balken statt schwebender Einzel-Pillen —
     Logo kleiner, alles (Menü·Suche·Konto·Warenkorb) in EINER aufgeräumten Pille rechts. */
  .cav-header{ padding: 9px 14px !important; background: var(--cav-hafer); }
  .cav-logo{ width: 54px !important; height: 54px !important; }
  .cav-footer__grid{ grid-template-columns: 1fr 1fr; gap:26px; }
}
@media (max-width: 560px){
  .cav-footer__grid{ grid-template-columns: 1fr; }
}