/* =========================================================================
   The Academy of Culinary Excellence — Cookie consent (banner, preferences,
   floating "Cookie settings" control)

   Modelled on the TLC Base widget (banner + preferences modal + floating
   button) and drawn in the Academy's own brand: paper and ink, the crimson
   accent, Playfair Display for titles, Cormorant Garamond for copy and Inter
   for labels and buttons. Square corners throughout, like the rest of the site.

   What it describes must stay true to cookies.php: two categories only —
   strictly necessary (the consent record itself) and analytics (Google
   Analytics). If a category is added, update cookies.php and the banner copy
   in js/cookie-consent.js together, and bump VERSION there.
   ========================================================================= */

#cc-root {
  --cc-paper: var(--paper, #FAFAF7);
  --cc-paper-deep: var(--paper-deep, #F2EFE7);
  --cc-ink: var(--ink, #161514);
  --cc-ink-60: var(--ink-60, rgba(22,21,20,.6));
  --cc-ink-40: var(--ink-40, rgba(22,21,20,.4));
  --cc-rule: var(--rule, rgba(22,21,20,.14));
  --cc-rule-soft: var(--rule-soft, rgba(22,21,20,.08));
  --cc-red: var(--red, #A0251A);
  --cc-red-deep: var(--red-deep, #7B1B12);
  --cc-display: var(--display, 'Playfair Display', Georgia, serif);
  --cc-body: var(--body, 'Cormorant Garamond', Georgia, serif);
  --cc-label: var(--label, 'Inter', 'Helvetica Neue', Arial, sans-serif);
  --cc-ease: cubic-bezier(.2,.6,.2,1);
  font-family: var(--cc-body);
  color: var(--cc-ink);
  line-height: 1.5;
}
#cc-root *, #cc-root *::before, #cc-root *::after { box-sizing: border-box; }
/* Baseline for bare elements, so the widget is not restyled by the host page.
   Specificity (1,0,1): any rule below that overrides part of it for one of
   these tags must carry #cc-root too, or the baseline quietly wins. Buttons are
   deliberately not reset here — each widget button styles itself fully. */
#cc-root :is(h2, h3, h4, p, ul, li, label) { margin: 0; padding: 0; }
#cc-root [hidden] { display: none !important; }

.cc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Banner (bottom-centre card) ------------------------------------- */
.cc-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, calc(100% + 40px));
  width: min(1100px, calc(100% - 32px));
  background: var(--cc-paper);
  color: var(--cc-ink);
  border: 1px solid var(--cc-ink);
  box-shadow: 0 18px 50px rgba(22,21,20,.22);
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: transform .5s var(--cc-ease), opacity .3s ease, visibility .3s;
}
.cc-banner::before {
  /* crimson hairline along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc-red);
}
.cc-banner.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.cc-banner__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.6rem 1.8rem 1.5rem;
}
.cc-banner__text { flex: 1 1 380px; min-width: 0; }
.cc-banner__kicker {
  font-family: var(--cc-label); font-weight: 500; font-size: .62rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--cc-red);
  display: inline-flex; align-items: center; gap: .8rem; margin-bottom: .55rem;
}
.cc-banner__kicker::before { content: ""; width: 18px; height: 1px; background: var(--cc-red); }
#cc-root .cc-banner__title {
  font-family: var(--cc-display); font-weight: 500; font-style: italic;
  font-size: 1.35rem; line-height: 1.15; letter-spacing: -.01em; margin-bottom: .45rem;
}
#cc-root .cc-banner__text p { font-family: var(--cc-body); font-size: 1.08rem; line-height: 1.5; color: var(--cc-ink); }
#cc-root .cc-banner__text a { color: var(--cc-ink); text-decoration: none; border-bottom: 1px solid var(--cc-red); padding-bottom: 1px; transition: color .3s; }
#cc-root .cc-banner__text a:hover { color: var(--cc-red); }
.cc-banner__actions { display: flex; gap: .7rem; flex: 0 0 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Buttons (the site's .btn, restated here so the widget is self-contained) */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  margin: 0;
  padding: .8rem 1.2rem;
  font-family: var(--cc-label); font-weight: 500; font-size: .64rem; line-height: 1.2;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .4s var(--cc-ease), color .4s var(--cc-ease), border-color .4s var(--cc-ease), transform .3s var(--cc-ease), box-shadow .4s var(--cc-ease);
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn:focus-visible { outline: 2px solid var(--cc-red); outline-offset: 3px; }
.cc-btn--red { background: var(--cc-red); color: var(--cc-paper); border-color: var(--cc-red); box-shadow: 0 3px 12px rgba(160,37,26,.2); }
.cc-btn--red:hover { background: var(--cc-red-deep); border-color: var(--cc-red-deep); box-shadow: 0 10px 24px rgba(160,37,26,.3); }
.cc-btn--ink { background: var(--cc-ink); color: var(--cc-paper); border-color: var(--cc-ink); }
.cc-btn--ink:hover { background: #252220; border-color: #252220; }
.cc-btn--ghost { background: transparent; color: var(--cc-ink); border-color: var(--cc-ink); }
.cc-btn--ghost:hover { background: var(--cc-ink); color: var(--cc-paper); }

/* ---- Overlay + preferences modal ------------------------------------ */
.cc-overlay {
  position: fixed; inset: 0;
  background: rgba(11,10,9,.55);
  z-index: 9100;
  opacity: 0;
  transition: opacity .3s ease;
}
.cc-overlay.is-open { opacity: 1; }
.cc-modal {
  position: fixed; inset: 0;
  z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .3s ease;
}
.cc-modal.is-open { opacity: 1; }
.cc-modal__panel {
  position: relative;
  background: var(--cc-paper);
  width: min(640px, 100%);
  max-height: min(88vh, 800px);
  border: 1px solid var(--cc-ink);
  box-shadow: 0 30px 80px rgba(11,10,9,.4);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(14px);
  transition: transform .45s var(--cc-ease);
}
.cc-modal__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc-red); }
.cc-modal.is-open .cc-modal__panel { transform: none; }
.cc-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.8rem 1.8rem 1.3rem;
  border-bottom: 1px solid var(--cc-rule-soft);
}
.cc-modal__kicker {
  font-family: var(--cc-label); font-weight: 500; font-size: .62rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--cc-red); margin-bottom: .5rem; display: block;
}
#cc-root .cc-modal__head h2 {
  font-family: var(--cc-display); font-weight: 500; font-style: italic;
  font-size: 1.7rem; line-height: 1.1; letter-spacing: -.01em; color: var(--cc-ink);
}
#cc-root .cc-modal__head h2 em { font-style: normal; color: var(--cc-red); }
.cc-modal__close {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; padding: 0; margin: 0;
  background: none; color: var(--cc-ink);
  border: 1px solid var(--cc-rule); border-radius: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .3s, color .3s, border-color .3s;
}
.cc-modal__close:hover { background: var(--cc-ink); color: var(--cc-paper); border-color: var(--cc-ink); }
.cc-modal__close:focus-visible { outline: 2px solid var(--cc-red); outline-offset: 3px; }
.cc-modal__body { padding: 1.4rem 1.8rem; overflow-y: auto; overflow-x: hidden; }
#cc-root .cc-modal__body > p { font-family: var(--cc-body); font-size: 1.08rem; line-height: 1.5; color: var(--cc-ink); margin-bottom: 1.2rem; }
#cc-root .cc-modal__body > p a { color: var(--cc-ink); border-bottom: 1px solid var(--cc-red); padding-bottom: 1px; text-decoration: none; }
#cc-root .cc-modal__body > p a:hover { color: var(--cc-red); }
.cc-modal__foot {
  display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end;
  padding: 1.2rem 1.8rem;
  border-top: 1px solid var(--cc-rule-soft);
  background: var(--cc-paper-deep);
}

/* ---- Category rows -------------------------------------------------- */
.cc-cat { padding: 1.1rem 0; border-top: 1px solid var(--cc-rule-soft); }
.cc-cat:first-of-type { border-top: 0; padding-top: .2rem; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#cc-root .cc-cat__title {
  font-family: var(--cc-display); font-weight: 500; font-size: 1.15rem; line-height: 1.2; color: var(--cc-ink);
}
#cc-root .cc-cat__desc { font-family: var(--cc-body); font-size: 1.02rem; line-height: 1.5; color: var(--cc-ink-60); margin-top: .4rem; }
#cc-root .cc-cat__desc a { color: var(--cc-ink); border-bottom: 1px solid var(--cc-red); text-decoration: none; }
.cc-cat__always {
  font-family: var(--cc-label); font-weight: 500; font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--cc-red); flex-shrink: 0;
}
.cc-cat__right { display: inline-flex; align-items: center; gap: .9rem; flex-shrink: 0; }

/* ---- Toggle switch --------------------------------------------------- */
#cc-root .cc-toggle { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-toggle > span[aria-hidden],
.cc-toggle--locked > span {
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--cc-ink-40); position: relative; transition: background .3s ease; display: block;
}
.cc-toggle > span[aria-hidden]::after,
.cc-toggle--locked > span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cc-paper); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .3s var(--cc-ease);
}
.cc-toggle input:checked + span { background: var(--cc-red); }
.cc-toggle input:checked + span::after { transform: translateX(20px); }
.cc-toggle input:focus-visible + span { outline: 2px solid var(--cc-red); outline-offset: 3px; }
.cc-toggle--locked > span { background: var(--cc-ink); opacity: .45; cursor: not-allowed; }
.cc-toggle--locked > span::after { transform: translateX(20px); }

/* ---- Gated embed placeholder (for any future embedded video etc.) ---- */
.cc-embed-blocked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center;
  width: 100%; min-height: 320px; height: 100%;
  padding: 2rem;
  background: var(--paper-deep, #F2EFE7);
  color: var(--ink, #161514);
  font-family: var(--body, 'Cormorant Garamond', Georgia, serif);
  border: 1px solid var(--rule, rgba(22,21,20,.14));
}
.cc-embed-blocked p { font-size: 1.08rem; max-width: 420px; margin: 0; }
.cc-embed-blocked .cc-btn { font-family: var(--label, 'Inter', sans-serif); }

/* ---- Floating "Cookie settings" control (bottom-right) --------------- */
.cc-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 8900;          /* below banner (9000) / overlay (9100) / modal (9200) */
  width: 48px; height: 48px; padding: 0; margin: 0;
  border-radius: 50%;
  background: var(--cc-ink);
  color: var(--cc-paper);
  display: grid; place-items: center;
  border: 1px solid var(--cc-ink);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  box-shadow: 0 8px 20px rgba(11,10,9,.28);
  transition: transform .3s var(--cc-ease), background .3s, box-shadow .3s;
}
.cc-fab svg { width: 24px; height: 24px; display: block; }
.cc-fab:hover { background: var(--cc-red); border-color: var(--cc-red); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(160,37,26,.35); }
.cc-fab:focus-visible { outline: 2px solid var(--cc-red); outline-offset: 3px; }

@media (max-width: 1000px) {
  .cc-banner__inner { flex-direction: column; align-items: stretch; gap: 1.2rem; padding: 1.4rem 1.3rem 1.3rem; }
  .cc-banner__text { flex-basis: auto; }
  .cc-banner__actions .cc-btn { flex: 1 1 auto; }
  .cc-modal__foot { justify-content: stretch; }
  .cc-modal__foot .cc-btn { flex: 1 1 auto; }
  .cc-modal__head, .cc-modal__body, .cc-modal__foot { padding-left: 1.3rem; padding-right: 1.3rem; }
}
@media (max-width: 480px) {
  .cc-banner { bottom: 12px; width: calc(100% - 24px); }
  .cc-banner__actions .cc-btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-overlay, .cc-modal, .cc-modal__panel, .cc-fab, .cc-btn,
  .cc-toggle > span[aria-hidden], .cc-toggle > span[aria-hidden]::after { transition: none; }
}
@media print { #cc-root { display: none; } }