/* ============================================================================
   honeycomb.css  —  BeatlesAnswers.org HOUSE STYLE  ·  "Honeycomb" (light)
   ----------------------------------------------------------------------------
   This is the SITE-WIDE SKIN for v12. It is loaded AFTER base.css on every
   page and re-skins the structural skeleton base.css provides.

     base.css           →  structure & layout (the skeleton)
     honeycomb.css      →  the skin: colour, type, glass panels  ← THIS FILE
     honeycomb_dark.css →  optional dark variant (created, not yet wired)

   THE LOOK ("Honeycomb"):
     • Warm honey palette — amber accent on a soft cream-to-gold gradient.
     • Fraunces (display serif) headings over Plus Jakarta Sans body type.
     • Translucent, blurred "honey-glass" panels with generous rounding.
     • No photographic backgrounds — the v9 page-photo system is retired.

   WHY THERE ARE NO !important RULES HERE:
     The old skin lived in a page-level <style> block and had to out-shout
     base.css + images.css with !important. Now the skin is a real stylesheet
     loaded after base.css (and images.css is gone), so it wins the cascade
     by load order at equal specificity. Keep it that way — if a rule ever
     fails to apply, fix the selector, don't reach for !important.

   SWITCHING THEMES (future):
     Light is the default (:root below). To support a light/dark toggle,
     also load honeycomb_dark.css and set <html data-theme="dark"> — the dark
     file only activates under that attribute, so it is inert otherwise.
     To swap in a different house style later, replace this <link> with the
     new theme file; the theme owns its own fonts (see @import), so pages
     never need editing.
   ============================================================================ */

/* Theme fonts — owned by the theme so a theme swap swaps the type too.
   (Perf note: an @import chains after this file downloads. If first-paint
   type latency matters, add <link rel="preconnect"> + the font <link> to the
   page <head> instead; left as @import here to keep pages theme-agnostic.) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');


/* ---- 1. HONEYCOMB DESIGN TOKENS -------------------------------------------
   These override the fallback tokens in base.css :root by load order.
   Edit colours/fonts here to re-tune the light house style.
   ---------------------------------------------------------------------------- */
:root{
  /* palette anchors */
  --honey-dark:#3a2e1d;          /* deepest brown — display headings, glyph   */
  --honey-amber:#d49a3b;         /* primary accent — links hover, rules       */
  --honey-gold:#f2b84b;          /* brightest honey — reserved highlight       */
  --honey-light:#fffcf4;         /* near-white cream — page floor              */

  /* base.css design tokens, remapped onto the honey palette */
  --bg:#fdf7ea;                  /* page background floor (under the gradient) */
  --paper:rgba(255,253,247,.82); /* translucent panel / card fill              */
  --ink:#2b2318;                 /* body text                                  */
  --ink-soft:#70624e;            /* secondary text (captions, meta, cite)      */
  --rule:rgba(212,154,59,.34);   /* hairline border                            */
  --rule-soft:rgba(212,154,59,.20);
  --link:#9c6b1f;                /* link (warm amber-brown)                    */
  --link-visited:#7a5a3a;
  --accent:#d49a3b;              /* unified site accent (per-album accents     */
  --accent-soft:rgba(212,154,59,.14);  /* retired in favour of one honey amber)*/

  /* type */
  --font:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-headline:'Fraunces','Source Serif 4',Georgia,serif;

  /* elevation — warm-tinted shadows */
  --shadow-sm:0 2px 8px rgba(58,46,29,.07);
  --shadow-md:0 8px 24px rgba(58,46,29,.10);
  --shadow-lg:0 20px 40px rgba(58,46,29,.13);
}


/* ---- 2. PAGE CANVAS -------------------------------------------------------
   Warm honey gradient replaces the retired full-bleed photo. Fixed so it
   stays put on scroll (degrades to a scrolling gradient on iOS — acceptable).
   ---------------------------------------------------------------------------- */
html{ background:var(--honey-light); }
body{
  background:linear-gradient(170deg,#fffdf6 0%,#fdf2da 46%,#f6e4bd 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font);
  line-height:1.7;
}
/* Belt-and-suspenders: any residual v9 photo layer stays hidden. */
.page-bg{ display:none; }


/* ---- 3. CONTENT PANEL (honey-glass card) ---------------------------------- */
main.container{
  background:var(--paper);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  max-width:1080px;
  padding:1.6rem 1.6rem 2.2rem;
  margin:1.2rem auto 2rem;
}
main.container .hero .top-band{ margin:0 -1.6rem 1rem; }  /* accent strip to card edge */


/* ---- 4. TYPOGRAPHY --------------------------------------------------------- */
h1,h2,h3,.hero h1,.essay-section h2,h2.section,.faq-section h2{
  font-family:var(--font-headline);
  color:var(--honey-dark);
  letter-spacing:-.01em;
}
.hero h1{ font-weight:600; }
.essay-section h2,h2.section{ border-bottom:1px solid var(--rule); }
.essay p,.lead-paragraph{ font-family:var(--font); color:var(--ink); }
.essay p:first-of-type::first-letter{ color:var(--honey-amber); }  /* drop cap */


/* ---- 5. SITE HEADER / NAV (frosted cream bar) ----------------------------- */
header.site{
  background:rgba(255,253,247,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  box-shadow:var(--shadow-sm);
}
header.site .brand{ font-family:var(--font-headline); color:var(--honey-dark); }
header.site .brand .glyph rect{ fill:var(--honey-dark); }   /* overrides inline SVG fill */
header.site nav a{ color:var(--ink-soft); }
header.site nav a:hover{ color:var(--honey-amber); }
.header-search input{
  background:rgba(255,255,255,.55);
  border:1px solid var(--rule);
  color:var(--ink);
}
.header-search input::placeholder{ color:var(--ink-soft); }


/* ---- 6. LINKS -------------------------------------------------------------- */
a{ color:var(--link); }
a:visited{ color:var(--link-visited); }
a:hover{ color:var(--honey-amber); }


/* ---- 7. QUICK-FACTS INFOBOX + "ON THIS PAGE" TOC (lighter glass) ----------- */
.infobox,.toc{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}
.infobox .ib-title{ background:var(--honey-dark); color:#fff; }
.infobox th{ background:rgba(212,154,59,.10); color:var(--ink-soft); }
.infobox .ib-section-h{ background:var(--accent-soft); color:var(--honey-dark); }
.infobox .ib-cover,.infobox .ib-foot{ background:rgba(255,255,255,.4); }


/* ---- 8. CARDS / KEY-VALUE TABLES / FAQ / ADSENSE PANELS -------------------- */
.card,.related a,.ig,table.kv,.faq-section .faq-item,.adsense-spot,.car-card{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
}
table.kv th{ background:rgba(212,154,59,.10); color:var(--ink-soft); }
/* marquee frame: surface already token-skinned; match the card-family corner radius */
.carousel{ border-radius:16px; }


/* ---- 9. DISTINCTIVE CALLOUT + PULL-QUOTE ---------------------------------- */
.distinctive{
  background:var(--accent-soft);
  border-left:3px solid var(--honey-amber);
  border-radius:0 12px 12px 0;
}
.distinctive h3{ color:var(--honey-amber); font-family:var(--font); }
.quote{
  background:rgba(255,255,255,.5);
  border-left:3px solid var(--honey-amber);
  border-radius:12px;
}
.quote .cite{ color:var(--ink-soft); }


/* ---- 10. BADGES (Amazon affiliate CTA → honey pill) ----------------------- */
.badge{ background:rgba(255,255,255,.6); border:1px solid var(--rule); }
.badge:hover{ border-color:var(--honey-amber); color:var(--honey-amber); }
.badge-affiliate{
  background:var(--honey-dark); border:1px solid var(--honey-dark);
  color:#fff; border-radius:50px; font-weight:500;
}
.badge-affiliate:hover{ background:var(--honey-amber); border-color:var(--honey-amber); color:#fff; }


/* ---- 11. FAQ MARKER + FOOTNOTE SOURCE HIGHLIGHT --------------------------- */
.faq-section .faq-item summary::before{ color:var(--honey-amber); }
.source-list li:target{ background:var(--accent-soft); }


/* ---- 12. FOOTER ----------------------------------------------------------- */
footer.site{ background:rgba(255,253,247,.7); border-top:1px solid var(--rule); color:var(--ink-soft); }
footer.site a:hover,footer.site .legal-row a:hover{ color:var(--honey-amber); }


/* ---- 13. MOBILE (≤780px) — tighten the card geometry ---------------------- */
@media (max-width:780px){
  main.container{ border-radius:16px; padding:1.1rem 1rem 1.6rem; margin:.6rem .5rem 1.2rem; max-width:none; }
  main.container .hero .top-band{ margin:0 -1rem 1rem; }
}


/* ---- 14. PRINT — drop the gradient, plain white card ---------------------- */
@media print{
  body{ background:#fff; }
  main.container{ background:#fff; box-shadow:none; border:none; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
