@layer site {
  /* Jerusalem theme — hero as a full-bleed background photo (deep navy
     blue, gradient overlay), golden details, light cream sections. First
     theme with its own structural overrides (full-screen hero, stacked
     celebrant) beyond color/font tokens — the other 3 themes only
     redefine `:root`, without touching any selector. */
  :root {
    --color-bg: #f5efe3;
    --color-bg-secondary: #ece4cf;
    --color-card: #ffffff;
    --color-surface: #ffffff;
    --color-primary: #b68a43;
    --color-primary-dark: #96702f;
    --color-text: #1c2530;
    --color-button: #16283c;
    --color-hero-bg: #16283c;
    --color-danger: #b91c1c;
    --color-danger-tint: rgba(185, 28, 28, 0.12);
    /* Bridge to system tokens */
    --c-radius: var(--radius-lg);
    --c-nav-h: 80px;
    --font-family: var(--font-sans);
    /* Serif only on headings (h1/h2/h3, see sites-base.css) — body text
       stays on --font-family (Inter). The only theme that sets this today;
       the others fall back and stay exactly as before. */
    --font-heading: "Playfair Display", Georgia, serif;
  }

  /* `--hero-contrast` needs to live on `.event-theme` (not on `:root`
     alongside the other tokens above) — a palette redefines
     `--color-title` on `.event-theme.palette-X` (a more specific element,
     not `:root`), and a `var()` only sees the winning value of ANOTHER
     variable when both resolve against the same element. Declared on
     `:root`, `var(--color-title)` stayed stuck on the fallback, ignoring
     any active palette (same bug as `_defaultHero` in `general.js`, see
     the editor's docs/dominios).

     `--color-title` is the variable every ready-made palette already
     pairs with the lightness of ITS OWN --color-hero-bg (see
     palette-colors.css — a dark hero always ships with a light title, and
     vice versa). In the other 3 themes this doesn't matter (hero-bg ==
     body-bg always), but here hero and body have different colors by
     design — using --color-bg (the BODY color) was wrong as soon as a
     palette moved the hero to a different color family. With no palette
     active, --color-title is never set by this file (only by the body,
     which uses --color-text) — falls back to the cream value below,
     Jerusalem's own look. Only used by hero/nav text — the rest of the
     page already uses --color-text/--color-primary normally, which every
     palette also pairs correctly. */
  .event-theme {
    --hero-contrast: var(--color-title, #f5efe3);
  }

  /*=========================
   HERO — full-bleed photo, centered text
   (in the other themes the hero is a split panel: text on the left,
   photo filling the right half with a horizontal fade — see
   .hero-panel-image in sites-base.css)
  =========================*/
  .event-theme section.hero {
    justify-content: center;
  }
  .event-theme .hero-content {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    padding: 100px 24px;
  }
  .event-theme .hero-content h1 {
    color: var(--hero-contrast);
  }
  .event-theme .hero-date {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 18px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    border-radius: 999px;
    font-size: calc(12px * var(--font-size-scale, 1));
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
  }
  .event-theme .hero-occasion {
    margin-top: 8px;
    font-size: calc(14px * var(--font-size-scale, 1));
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--hero-contrast) 85%, transparent);
  }
  .event-theme .hero-subtitle {
    text-align: center;
    color: color-mix(in srgb, var(--hero-contrast) 75%, transparent);
  }
  /* Simple centered row, buttons at their natural size (fit-content +
     padding) — see jardim.css for the full reasoning. An earlier attempt
     forced both to the same width (flex-grow, then grid), but that
     squeezed "Add to calendar" below what the Material Symbols icon
     needs (that icon measures ZERO width in layout, a font bug — without
     slack, the next icon overlaps the text). */
  .event-theme .hero-actions {
    justify-content: center;
    align-items: center;
    /* Zeroes out the base `margin-right: -70px` (sites-base.css) — see
       jardim.css for the full reasoning (default layout's "padding steal"
       hack, which here only threw the row off-center). */
    margin-right: 0;
  }
  /* Explicit request: no countdown timer in Jerusalem's hero. */
  .event-theme .hero-countdown-wrap {
    display: none;
  }
  /* `.btn-outline` (Add to calendar) uses --color-text/--color-border with
     !important — invisible over the dark hero. Scoped to the hero only. */
  .event-theme .hero-actions .btn-outline {
    color: var(--hero-contrast) !important;
    border-color: color-mix(in srgb, var(--hero-contrast) 45%, transparent) !important;
  }
  /* :hover switches to --color-bg-secondary (base) — in the non-hover
     version above it's already light, so hover would've been
     light-on-light (text disappears). Darkens/lightens using
     --color-hero-bg itself instead of reusing a token meant for the page
     body. */
  .event-theme .hero-actions .btn-outline:hover {
    background: color-mix(in srgb, var(--color-hero-bg) 70%, var(--hero-contrast)) !important;
    border-color: var(--hero-contrast) !important;
  }
  .event-theme .hero-panel-image img {
    object-position: center center;
  }
  .event-theme .hero-panel-image::before {
    /* Two layers: a soft radial gradient centered on the text (extra
       contrast only where needed, subtle) + the top-to-bottom linear
       gradient (keeps the photo readable as a whole, darker near the
       buttons). */
    background:
      radial-gradient(
        ellipse 55% 45% at 50% 48%,
        color-mix(in srgb, var(--color-hero-bg) 38%, transparent) 0%,
        transparent 72%
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-hero-bg) 55%, transparent) 0%,
        color-mix(in srgb, var(--color-hero-bg) 76%, transparent) 55%,
        color-mix(in srgb, var(--color-hero-bg) 95%, transparent) 100%
      );
  }

  /* Mobile — the other themes' default (sites-base.css) turns the photo
     into a separate 260px strip, with the text in a solid block below.
     Doesn't work here: Jerusalem's text is meant to sit OVER the whole
     photo, not after it — without this override, an empty dark strip was
     left between the 260px photo and the text. Keeps the same full-bleed
     as desktop. */
  @media (max-width: 768px) {
    .event-theme .hero-panel-image {
      position: absolute;
      inset: 0;
      height: auto;
    }
    .event-theme .hero-content {
      position: relative;
      z-index: 3;
      padding: 60px 20px;
    }
  }

  /*=========================
   NAV — always-dark bar (derived from --color-hero-bg), light links
  =========================*/
  .event-theme nav .nav-links a {
    color: color-mix(in srgb, var(--hero-contrast) 80%, transparent);
  }
  .event-theme nav .nav-links a:hover {
    color: var(--hero-contrast);
  }
  .event-theme .nav-menu-toggle {
    color: var(--hero-contrast);
  }

  /*=========================
   CELEBRANT — centered arched photo, text stacked below
   (in the other themes it's a 2-column grid, photo | text side by side)
  =========================*/
  .event-theme .celebrant-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 32px;
  }
  .event-theme .celebrant-bio .section-label {
    text-align: center;
  }
  .event-theme .celebrant-photo {
    --celebrant-photo-radius: 120px 120px 12px 12px;
    width: 220px;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 320px;
  }
  .event-theme .celebrant-bio {
    align-items: center;
    max-width: 640px;
  }
  .event-theme .celebrant-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .event-theme .celebrant-bio-text {
    text-align: center;
  }

  /*=========================
   EVENT DETAILS — no section title, straight to photo + content
  =========================*/
  .event-theme #about .info-text {
    display: none;
  }

  /*=========================
   MOMENTS — alternating zigzag (cards as they already are), with a
   center line connecting them (from the mockup reference)
  =========================*/
  .event-theme .moments-grid {
    grid-template-columns: 1fr;
    position: relative;
    gap: 24px;
  }
  .event-theme .moments-grid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: color-mix(in srgb, var(--color-primary) 45%, transparent);
    transform: translateX(-50%);
  }
  .event-theme .moment-card {
    position: relative;
    width: 48%;
    max-width: 470px;
  }
  .event-theme .moment-card::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-primary);
    transform: translateY(-50%);
  }
  /* `:nth-of-type` (not `:nth-child`) on purpose — Django's `{% if %}`
     around each card renders zero residual markup when a card is
     omitted, so this only ever counts the `.moment-card` divs that are
     actually present, in DOM order (Ceremony first, Party second). */
  .event-theme .moment-card:nth-of-type(odd) {
    justify-self: start;
  }
  .event-theme .moment-card:nth-of-type(odd)::before {
    right: -86px;
  }
  .event-theme .moment-card:nth-of-type(even) {
    justify-self: end;
  }
  .event-theme .moment-card:nth-of-type(even)::before {
    left: -86px;
  }

  /* Mobile — zigzag only makes sense in 2 columns. Below 768px (same
     breakpoint as sites-base.css) it goes back to a single full column,
     no center line or dots (doesn't fit/add value in a single column). */
  @media (max-width: 768px) {
    .event-theme .moments-grid::before {
      display: none;
    }
    .event-theme .moment-card::before {
      display: none;
    }
    .event-theme .moment-card,
    .event-theme .moment-card:nth-of-type(odd),
    .event-theme .moment-card:nth-of-type(even) {
      width: 100%;
      max-width: none;
      justify-self: stretch;
    }
  }

}

/* Outside `@layer site` on purpose — same reason documented in
   editor.css: in the editor (which loads core/components.css; the public
   site doesn't), `@layer core` is reopened there with
   `.event-theme .hero-cal-trigger { !important }` to beat a workspace
   !important. Between !importants, layer priority INVERTS — the layer
   declared first (core) beats the one declared later (site) — so that
   rule was beating ours above without even entering the fight. Reopening
   `@layer core` here too, with a more specific selector (3 classes vs. 2
   there), wins the tug-of-war within the same layer. */
@layer core {
  .event-theme .hero-actions .hero-cal-trigger {
    color: var(--hero-contrast) !important;
    border-color: color-mix(in srgb, var(--hero-contrast) 45%, transparent) !important;
  }
  .event-theme .hero-actions .hero-cal-trigger:hover {
    background: color-mix(in srgb, var(--color-hero-bg) 70%, var(--hero-contrast)) !important;
    border-color: var(--hero-contrast) !important;
  }
}