/* ===========================================================================
   eu261.es/css/themeV0.01.css — LIGHT "apple-ish" theme for the Spanish site.

   THE VERSION IN THE FILENAME IS LOAD-BEARING. Served
   `Cache-Control: public, max-age=604800, immutable` (.htaccess), so browsers
   never revalidate it. Editing in place reaches only new visitors; everyone
   else keeps the old bytes for up to 7 days. Any change here must bump the
   filename (V0.01 -> V0.02) and update the ~24 `$BASE/css/themeV0.01.css`
   references, deployed together. Renamed from the unversioned theme.css on
   2026-07-23 when the cookie banner was added — see plan/12 §11.

   Two jobs:
     1) define the light --fc-* palette that ../shared/css/board.css consumes
        (board, search, cards, autocomplete);
     2) provide this site's OWN standalone chrome (body, header, content boxes,
        footer, typography) — eu261.es does NOT load quiescence's homeV0.01.css
        or topbar. Clean, white, generous whitespace, system font stack (no
        bundled/copyrighted fonts), soft shadows, rounded corners. No inline
        styles, no external assets (strict CSP).
   =========================================================================== */

:root {
  --fc-bg:        #ffffff;
  --fc-panel:     #ffffff;
  --fc-panel-2:   #f5f5f7;
  --fc-border:    #d2d2d7;
  --fc-text:      #1d1d1f;
  --fc-muted:     #6e6e73;
  --fc-primary:   #0066cc;   /* calm, generic blue accent (not brand-locked); AA on white (5.5:1) */
  --fc-on-primary:#ffffff;

  --fc-delayed:   #8a5a00;  --fc-delayed-bg:   #fff3e0;
  --fc-cancelled: #b3261e;  --fc-cancelled-bg: #fdecea;
  --fc-diverted:  #5b21b6;  --fc-diverted-bg:  #f2ecfd;
  --fc-late:      #7a5c00;  --fc-late-bg:      #fbf4d8;
  --fc-ontime:    #1a7f37;  --fc-ontime-bg:    #e7f5ec;

  --fc-shadow:       0 6px 24px rgba(0, 0, 0, .08);
  --fc-color-scheme: light;
  --fc-radius:       14px;
  --fc-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* The [hidden] attribute must win over utility classes that set `display`
   (e.g. .eu-btn inline-block, .wiz-step grid) — JS toggles [hidden] to show/hide. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fc-font);
  color: var(--fc-text);
  background: var(--fc-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--fc-primary); }

.eu-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--fc-primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  z-index: 100;
}
.eu-skip:focus { left: 0; }

/* ---- header ------------------------------------------------------------- */
.eu-header {
  position: fixed; inset: 0 0 auto 0; height: 56px; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--fc-border);
}
.eu-brand {
  font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em;
  color: var(--fc-text); text-decoration: none;
}
.eu-brand b { color: var(--fc-primary); font-weight: 700; }
.eu-tagline { color: var(--fc-muted); font-size: .9rem; }

/* ---- main + hero -------------------------------------------------------- */
.eu-main {
  max-width: 1040px; margin: 0 auto;
  padding: 92px 20px 40px;   /* clears the fixed header */
}
.fc-hero { text-align: center; margin: 8px 0 26px; }
.fc-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;
  letter-spacing: -.022em; line-height: 1.08; margin: 0 0 14px;
}
.fc-hero__sub { color: var(--fc-muted); font-size: 1.16rem; max-width: 42rem; margin: 0 auto; }
.fc-hero__sub strong { color: var(--fc-text); font-weight: 600; }

/* ---- content boxes ------------------------------------------------------ */
.content-box {
  background: var(--fc-panel);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 26px 28px;
  margin: 18px 0;
  box-shadow: var(--fc-shadow);
}
.content-box > :first-child { margin-top: 0; }
.content-box > :last-child { margin-bottom: 0; }
.content-box h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.012em; margin: 0 0 12px; }
.content-box h3 { font-size: 1.12rem; font-weight: 600; margin: 20px 0 6px; }
.content-box p { margin: 0 0 12px; }
.content-box ul, .content-box ol { margin: 0 0 12px; padding-left: 22px; }
.content-box li { margin: 5px 0; }
.content-box a { text-decoration: none; }
.content-box a:hover { text-decoration: underline; }

.fc-count { text-align: left; }

.fc-guide-link { margin: 16px 0 0; }
.fc-guide-link a { color: var(--fc-primary); text-decoration: none; font-weight: 500; }
.fc-guide-link a:hover { text-decoration: underline; }

/* ---- footer ------------------------------------------------------------- */
.eu-footer {
  margin-top: 36px; border-top: 1px solid var(--fc-border);
  background: var(--fc-panel-2);
  padding: 26px 20px; text-align: center;
  color: var(--fc-muted); font-size: .85rem; line-height: 1.6;
}
.eu-footer p { max-width: 52rem; margin: 0 auto 8px; }
.eu-footer span { padding-left: 5px; }
.eu-footer-nav { max-width: 52rem; margin: 0 auto 16px; }
.eu-footer-nav__title { font-weight: 600; color: var(--fc-text); margin: 0 0 8px; }
.eu-footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.eu-footer-nav a { color: var(--fc-primary); text-decoration: none; }
.eu-footer-nav a:hover { text-decoration: underline; }

/* ---- cookie consent banner ---------------------------------------------- */
/* Mirrors quiescence.eu's banner, restyled in the light --fc-* palette. Starts
   hidden (display:none); js/consent.js adds .cookie-banner-visible on first
   visit. Fixed to the bottom so it overlays rather than shifts layout — no CLS. */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;                 /* above the header's z-index: 40 */
  display: none;
  padding: 16px 20px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--fc-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
}
.cookie-banner.cookie-banner-visible { display: block; }

.cookie-wrap {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  justify-content: space-between;
}
.cookie-text {
  flex: 1;
  min-width: 240px;
  margin: 0;
  color: var(--fc-muted);
  font-size: .9rem;
}

.cookie-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cookie-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--fc-text);
  background: var(--fc-panel-2);
  padding: 6px 12px;
  border: 1px solid var(--fc-border);
  border-radius: 8px;
  cursor: pointer;
}
.cookie-option input { accent-color: var(--fc-primary); }

.cookie-actions { display: flex; gap: 10px; }
.cookie-btn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--fc-border);
  background: var(--fc-panel);
  color: var(--fc-text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.cookie-btn:hover { background: var(--fc-panel-2); }
.cookie-accept {
  background: var(--fc-primary);
  border-color: var(--fc-primary);
  color: var(--fc-on-primary);
}
.cookie-accept:hover { filter: brightness(1.05); background: var(--fc-primary); }

/* ---- mobile ------------------------------------------------------------- */
@media (max-width: 560px) {
  .eu-tagline { display: none; }
  .eu-main { padding: 80px 14px 32px; }
  .content-box { padding: 20px 18px; border-radius: 14px; }
  .fc-hero__sub { font-size: 1.05rem; }

  /* stack the banner and let the buttons span the width for easy tapping */
  .cookie-wrap { align-items: stretch; }
  .cookie-actions { justify-content: flex-end; }
}