/*
 * siempre.css: the one palette the static pages share.
 *
 * privacy, terms, support and events are plain HTML and cannot import the
 * app's theme, so each used to declare the colours by hand. Four copies drift,
 * and they did: the site painted raw crail (#C15F3C) for months after the app
 * moved to the AA-corrected #C74423.
 *
 * The block below is GENERATED from palette.ts + theme.ts by
 * scripts/check-web-tokens.js, which npm run landing:check enforces. Change a
 * colour in the app and regenerate; do not edit between the markers.
 *
 * Page geometry and type stay in each page: the legal pages are a narrow prose
 * column, the events page is the landing's 1120 shell, and nothing upstream
 * defines either, so there is nothing for them to drift from.
 */

/* BEGIN generated from theme.ts: run node scripts/check-web-tokens.js --write */
/* Every colour on the static pages comes from the app's theme. Edit
   palette.ts / theme.ts and regenerate; never edit between the markers. */

/* lightTheme. Light: the app default (useTheme DEFAULT_SCHEME), so it is the
     unprefixed block here too. */
:root {
  --bg: #FFFFFF;
  --bg-alt: #F7F7F7;
  --surface: #FFFFFF;
  --text: #222222;
  --text-muted: #717171;
  --text-soft: #717171;
  --accent: #C74423;
  --accent-dark: #A1371C;
  --accent-pale: #FBF2EE;
  --border: #EBEBEB;
  --danger: #C75050;
  --success: #6B8F5E;
  --on-accent: #FFFFFF;
}

/* brownTheme. Espresso. */
html[data-siempre-scheme='brown'] {
  --bg: #1A1410;
  --bg-alt: #221C17;
  --surface: #2C2420;
  --text: #F4F3EE;
  --text-muted: #B1ADA1;
  --text-soft: #B1ADA1;
  --accent: #E17256;
  --accent-dark: #DB5230;
  --accent-pale: rgba(225, 114, 86, 0.10);
  --border: #3D3530;
  --danger: #E57373;
  --success: #81C784;
  --on-accent: #FFFFFF;
}

/* darkTheme. Night. */
html[data-siempre-scheme='dark'] {
  --bg: #121212;
  --bg-alt: #2A2A2A;
  --surface: #1E1E1E;
  --text: #F2F2F2;
  --text-muted: #A8A8A8;
  --text-soft: #A8A8A8;
  --accent: #E17256;
  --accent-dark: #DB5230;
  --accent-pale: rgba(225, 114, 86, 0.10);
  --border: #383838;
  --danger: #E57373;
  --success: #81C784;
  --on-accent: #FFFFFF;
}

/* END generated */

/*
 * The wordmark, painted rather than pictured.
 *
 * siempre-logo.svg has fill="#E17256" baked in, palette.crailOnDark, an
 * accent for DARK grounds. An <img> cannot be re-tinted, so every static page
 * was wearing the dark-mode logo on a white page while the app tinted the same
 * artwork to the light accent. Masking uses the file for its SHAPE only and
 * fills it with the live accent, so the logo follows the scheme the way
 * LandingPage's <SiempreLogo color={colors.accent} /> does.
 *
 * 120x38 is the app's own header size.
 */
.brand-logo {
  display: block;
  width: 120px;
  height: 38px;
  background-color: var(--accent);
  -webkit-mask: url("/siempre-logo.svg") no-repeat center / contain;
  mask: url("/siempre-logo.svg") no-repeat center / contain;
}

/*
 * The Siempre Events lockup: a rule, the live dot and EVENTS beside the
 * wordmark. Worn by the pages that are about events (the landing's own header
 * draws the same three pieces; see LandingPage.tsx's headerBrand and
 * public/index.html's .lp-brand). A page that does not add the two spans to
 * its .brand keeps the wordmark alone.
 *
 * The green is the mark's, not the theme's (palette.greenBright): it is the
 * same in every scheme, the way the app's live dot is.
 *
 * Shown at every width. It used to hide under 640px, which left the events
 * page with no name on a phone (Ramon, 2026-09-30); now the whole brand
 * shrinks there instead (the wordmark 96px, the word 11px), and the bar
 * makes room by moving Sign in and the language pill into the site menu.
 */
.brand-rule {
  display: block;
  width: 1.5px;
  height: 20px;
  margin: 0 8px;
  background: var(--border);
}

.brand-events {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.brand-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34C759;
}

@media (max-width: 639px) {
  .brand-logo {
    width: 96px;
    height: 30px;
  }
}

@media (min-width: 640px) {
  .brand-rule {
    height: 26px;
    margin: 0 12px;
  }

  .brand-events {
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.3em;
  }

  .brand-dot {
    width: 8px;
    height: 8px;
  }
}

/*
 * The site menu, worn by the pages whose header has more than a phone's bar
 * can hold (/events, /featured: the two doors, the language pill, Sign in
 * and a CTA). Under 980px those pages hide the doors, and used to hide them
 * with nothing in their place; now a round button beside the CTA opens a
 * panel under the bar with the doors, Sign in and the languages. From 980px
 * up the bar carries everything as before and none of this renders.
 *
 * The panel is markup, not script: its links are the same real links the
 * bar carries, and siempre-menu.js only toggles it open and closed. A
 * visitor with scripting off keeps the bar's own CTA and the footer's links,
 * as before; nothing here is load-bearing.
 *
 * The header is sticky, so it is the panel's containing block: the panel
 * hangs off its bottom edge at the page's full width. The scrim sits OUTSIDE
 * the header (the header's backdrop-filter would contain a fixed child) and
 * one layer below it.
 */
.site-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex: 0 0 auto;
}
.site-menu-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.site-menu-button:hover { border-color: var(--text-muted); }
.site-menu-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Both labels are in the button; the open state shows one and reads one. */
.site-menu-button__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.site-menu-button .site-menu-button__icon-close,
.site-menu-button[aria-expanded="true"] .site-menu-button__icon-open,
.site-menu-button[aria-expanded="true"] .site-menu-button__label--open,
.site-menu-button:not([aria-expanded="true"]) .site-menu-button__label--close {
  display: none;
}
.site-menu-button[aria-expanded="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.site-menu-button[aria-expanded="true"] .site-menu-button__icon-close { display: block; }

.site-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 11;
  padding: 4px var(--side-pad) 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.35);
}
.site-header--open .site-menu { display: block; }
.site-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.site-menu__link:hover { color: var(--accent); border-bottom-color: var(--border); }
.site-menu__link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The page the visitor is on: bolder, and the live dot in front of it, the
   same mark the lockup wears. */
.site-menu__link[aria-current="page"] { font-weight: 800; }
.site-menu__link[aria-current="page"]::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: #34C759;
  flex: 0 0 auto;
}
.site-menu__link[aria-current="page"] span { flex: 1 1 auto; }
.site-menu__lang {
  padding: 16px 4px 0;
}
.site-menu__lang-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* The panel's language control is the bar's switcher (.lang-switch below),
   the same globe pill and dropdown the landing page's menu draws. The panel
   has the width the bar lacks, so the pill keeps the language's name at
   every width, and the pill sits at the panel's left edge, so its list
   opens rightward from there instead of hanging off the left of the screen. */
.site-menu .lang-switch__current { display: inline; }
.site-menu .lang-switch__button { padding: 6px 10px; }
.site-menu .lang-switch__list {
  left: 0;
  right: auto;
}
.site-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: rgba(34, 34, 34, 0.32);
}
.site-menu-scrim[hidden] { display: none; }

@media (max-width: 979px) {
  .site-menu-button { display: inline-flex; }
  /* the bar keeps the wordmark and the CTA; the rest moves into the panel */
  .site-header--menu .site-header__end .lang-switch,
  .site-header--menu .header-signin { display: none; }
  .site-header--menu .site-header__end { gap: 8px; }
  /* the CTA pill stays one line beside the button: at 390px the lockup,
     the pill and the button share the bar, and a wrapped pill is taller
     than the bar it sits in */
  .site-header--menu .header-cta {
    white-space: nowrap;
    padding: 9px 14px;
    font-size: 13px;
  }
}

@media (min-width: 980px) {
  .site-menu,
  .site-menu-scrim { display: none !important; }
}

@media print {
  .site-menu-button,
  .site-menu,
  .site-menu-scrim { display: none; }
}

/*
 * The language switcher, shared by every static page.
 *
 * Built on <details>/<summary> so it works with no JavaScript: the options are
 * real <a> links to the generated /es/, /fr/ and /pt/ pages, so a visitor with
 * scripting off (and any crawler) can still reach and follow them.
 * siempre-lang.js only adds the niceties: remembering the choice in the same
 * storage slot the app's LanguageContext uses, and closing the menu on an
 * outside click or Escape.
 *
 * Geometry lives here rather than in each page because, unlike the prose
 * column and the events shell, this control is the SAME control everywhere.
 * The pages disagree about --max-width; they must not disagree about this.
 */
/* The nav and the switcher travel together on the right of the header. The
   pages set `justify-content: space-between` on .site-header__inner, so
   without this the nav would drift to the centre when the switcher joined it. */
.site-header__end {
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (max-width: 560px) {
  .site-header__end { gap: 14px; }
}

.lang-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.lang-switch__menu {
  position: relative;
}

/* The trigger. `list-style: none` + ::-webkit-details-marker kills the
   disclosure triangle in every engine. */
.lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44px is the app's own touch target (spacing.ts `sizes.touchTarget`);
     the nav links beside it are text-sized, this is tappable. */
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lang-switch__button::-webkit-details-marker { display: none; }

.lang-switch__button:hover,
.lang-switch__menu[open] .lang-switch__button {
  color: var(--text);
  border-color: var(--text-muted);
}

.lang-switch__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Globe, drawn rather than fetched: one more request for 16 pixels of chrome
   is not worth it, and an inline SVG would repeat in every generated page. */
.lang-switch__globe {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  position: relative;
}

.lang-switch__globe::before,
.lang-switch__globe::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

/* The meridian: a circle squeezed flat is the ellipse a globe shows. */
.lang-switch__globe::before { transform: scaleX(0.45); }
/* The equator: a single line, drawn as a collapsed circle. */
.lang-switch__globe::after  { transform: scaleY(0); }

.lang-switch__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.lang-switch__list li { margin: 0; }

.lang-switch__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  border-bottom: none;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch__list a:hover { background: var(--bg-alt); }

.lang-switch__list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* The active language earns the accent and a check, not just a colour: colour
   alone would be the only signal for a viewer who cannot distinguish it. */
.lang-switch__list a[aria-current="true"] {
  color: var(--accent);
  font-weight: 600;
}

.lang-switch__list a[aria-current="true"]::after {
  content: "";
  width: 6px;
  height: 11px;
  flex: 0 0 auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* On a narrow screen the trigger keeps the globe and drops the language name:
   the legal pages' nav already spends the width, and the menu still names
   every language in full. */
@media (max-width: 560px) {
  .lang-switch__current { display: none; }
  .lang-switch__button { padding: 6px 8px; }
}

/* The static pages hide their chrome when printed; the switcher is chrome. */
@media print {
  .lang-switch { display: none; }
}

/*
 * The translation notice on a generated legal page.
 *
 * Only the Spanish, French and Portuguese copies carry it (see LEGAL_NOTICE in
 * scripts/static-i18n-pages.js): it names English as the binding version. It
 * reads as an aside rather than a warning, because it is a fact about the
 * document, not a problem with it.
 */
.legal-notice {
  max-width: var(--max-width);
  margin: 0 auto 32px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  background: var(--accent-pale);
}

.legal-notice p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}