/* ==========================================================================
   Epic Curiosity — the shell: palette, header bar, footer.
   --------------------------------------------------------------------------
   ONE file for every page that wears the Epic Curiosity brand: the public
   site, the brand page, the inquiry Worker's own pages (thank-you, check
   your details) and the cockpit. The markup is written in exactly one place,
   web/ec_shell.py. The palette lives here and nowhere else; style.css and
   the brand page ask for it by name.

   Every class and token is prefixed ec- -- modifiers too -- so this sheet can
   sit on top of any app's own stylesheet: the cockpit has its own .btn, .brand,
   .app and --ink, and an unprefixed "app" modifier once turned this bar into a
   full-height flex box there.
   ========================================================================== */

:root{
  --ec-navy:#3C4E8A;       /* primary -- headings, buttons, rules, the letters of the mark */
  --ec-navy-dark:#2E3D6E;  /* link hover */
  --ec-gold:#D4AF37;       /* the accent rule, the button underline, the fork */
  --ec-body:#8A94A3;       /* body copy */
  --ec-muted:#A9B2BE;      /* hairlines, placeholders, inactive text */
  --ec-slate:#64748B;      /* form labels, inactive dish names */
  --ec-ink:#334155;        /* text the visitor types */
  --ec-band:#F4F6F8;       /* the menus band background */
  --ec-paper:#FFFFFF;
  --ec-sans:'Alegreya Sans',Helvetica,Arial,sans-serif;
  --ec-sc:'Alegreya Sans SC',Georgia,serif;   /* small caps -- headings and buttons */
  --ec-max:1000px;
}

/* ---------- header bar ----------
   The lockup is the master file itself (brand/svg/1a-wordmark-color.svg), so
   the bar and the official logo cannot drift apart. 1a's minimum is 160 px
   wide; 168 keeps it above that floor on every screen.                        */
.ec-head{position:sticky;top:0;z-index:50;background:var(--ec-paper);border-bottom:1px solid var(--ec-muted)}
.ec-head-in{max-width:var(--ec-max);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:16px;
  font-family:var(--ec-sans)}
.ec-lockup{display:flex;align-items:center;text-decoration:none;line-height:0;flex:none}
.ec-lockup img{display:block;width:168px;height:auto}
.ec-lockup:focus-visible{outline:2px solid var(--ec-gold);outline-offset:4px}
.ec-app{font:700 15px/1 var(--ec-sc);letter-spacing:.08em;color:var(--ec-slate);white-space:nowrap;
  padding:3px 0 3px 16px;border-left:1px solid var(--ec-muted)}
.ec-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.ec-actions a{font:500 15px var(--ec-sans);color:var(--ec-navy);text-decoration:none}
.ec-actions a:hover{color:var(--ec-navy-dark)}
.ec-actions a:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
.ec-actions a.ec-cta{background:var(--ec-navy);color:var(--ec-paper);font:700 15px var(--ec-sc);letter-spacing:.1em;
  padding:8px 24px;transition:box-shadow .15s}
.ec-actions a.ec-cta:hover{color:var(--ec-paper);box-shadow:inset 0 -3px 0 var(--ec-gold)}
/* A tool's bar runs the full width of the window, like the tool itself. */
.ec-head.ec-tool .ec-head-in{max-width:none;padding:12px 20px}

/* ---------- footer ----------
   Contact details added 1 Sep 2026 -- until then the live site carried no
   email, no phone and no service area anywhere, which made the form the only
   way to reach the business. build.py refuses a build with no mailto: on the
   home page, and the values come from site/business.json so the page and the
   LocalBusiness JSON-LD cannot disagree with each other or with the Google
   Business Profile.                                                           */
.ec-foot{border-top:1px solid var(--ec-muted);background:var(--ec-paper);font-family:var(--ec-sans);color:var(--ec-body)}
.ec-foot-in{max-width:var(--ec-max);margin:0 auto;padding:24px;display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.ec-name{font:700 15px var(--ec-sc);letter-spacing:.08em;color:var(--ec-navy)}
.ec-fine{font-size:13px}
.ec-contact{display:flex;gap:20px;flex-wrap:wrap;font-size:13px}
.ec-contact a{color:var(--ec-slate);text-decoration:none;border-bottom:1px solid var(--ec-muted)}
.ec-contact a:hover{color:var(--ec-navy-dark);border-bottom-color:var(--ec-navy)}
.ec-contact a:focus-visible{outline:2px solid var(--ec-navy);outline-offset:3px}
.ec-foot.ec-slim .ec-foot-in{max-width:none;padding:14px 20px}

/* Phones: less height, same side gutter as the page's own .wrap (24px), so the
   lockup, the hero and the footer all start on one line. */
@media (max-width:600px){
  .ec-head-in,.ec-head.ec-tool .ec-head-in{padding-top:12px;padding-bottom:12px}
  .ec-app{padding-left:12px}
  .ec-foot-in,.ec-foot.ec-slim .ec-foot-in{padding-top:20px;padding-bottom:20px}
}