@layer site {
  /* Jardim theme — hero as a full-bleed background photo (sage green,
     vertical gradient overlay), light card contained inside the hero (not
     floating between sections — see history below), sage-toned details,
     light cream sections.

     Design revised: the first version had a "Save The Date" card that was
     a SIBLING of `<section class="hero">`, pulled up with negative margin
     to float half over the hero, half over the body. Replaced with a card
     fully contained inside `.hero-content` (the same element Jerusalem
     uses, just with a card background/shadow instead of text directly
     over the photo) — content structure is now the same as Jerusalem
     (name + occasion line + divider + description + countdown + buttons),
     with the top date removed (badge hidden) and the countdown reused
     right below the description, above the buttons. */
  :root {
    --color-bg: #f7f4eb;
    --color-bg-secondary: #efe9d9;
    --color-card: #ffffff;
    --color-surface: #ffffff;
    --color-primary: #7c8b6a;
    --color-primary-dark: #5f6b50;
    --color-text: #33362e;
    --color-button: #7c8b6a;
    --color-hero-bg: #5c6b52;
    --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);
    /* Same font as Inverno (Cormorant Garamond) — already loaded in
       sites/layouts/base.html, no new link needed. */
    --font-heading: "Cormorant Garamond", Georgia, serif;
  }

  /* Same reason as Jerusalem/Inverno: only used by the nav, which always
     sits over the hero's raw photo (see jerusalem.css for the full
     reasoning). The hero content itself no longer uses this variable —
     it now lives inside a light card, so it uses the normal text colors
     (--color-title/--color-text), like any other section on the page. */
  .event-theme {
    --hero-contrast: var(--color-title, #f7f4eb);
  }

  /*=========================
   HERO — full-bleed photo, centered and contained light card (same
   content structure as Jerusalem: name + occasion + divider + description
   + countdown + buttons).
  =========================*/
  .event-theme section.hero {
    justify-content: center;
  }
  .event-theme .hero-content {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    padding: 56px 48px;
    /* `--color-surface` (not `--color-card`) on purpose: it's one of the 8
       fields the editor's palettes override (see palette-colors.css) —
       under a "dark" palette (e.g. midnight blue), the card follows its
       dark tone, keeping the h1/text (which use --color-title/--color-text,
       deliberately light under those palettes) readable. `--color-card`
       NEVER changes with the palette (it's only for small details, see
       gallery-item/avatar in sites-base.css) — used here by mistake in the
       first version, which left the title nearly invisible (light-on-light)
       as soon as any dark palette was applied. */
    background: var(--color-surface);
    border-radius: var(--c-radius);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35);
  }
  /* Top date hidden (explicit request) — markup kept (reuses Jerusalem's
     hero.html almost as-is), just never shown here; the countdown below
     the description already covers the date/time info. */
  .event-theme .hero-date {
    display: none;
  }
  .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: var(--color-primary);
  }
  .event-theme .hero-content .hero-subtitle {
    text-align: center;
  }
  .event-theme .hero-content .hero-bottom {
    justify-content: center;
  }
  /* Simple centered row, buttons at their natural size (fit-content +
     padding) — no attempt to equalize the two widths. An earlier attempt
     forced both to the same width (flex-grow, then grid), but that
     squeezed the "Add to calendar" button below what the Material Symbols
     icon needs: that icon measures ZERO width in layout (a font bug, not
     ours — confirmed even with the font fully loaded), so any button
     without slack leaves too little room and the next icon overlaps the
     text. Without forcing the width, fit-content's natural slack absorbs
     that zero-width with no visual issue. */
  .event-theme .hero-content .hero-actions {
    justify-content: center;
    align-items: center;
    /* Zeroes out the base `margin-right: -70px` (sites-base.css) — that
       "padding steal" hack exists for the default layout (split panel,
       text on the left), to fit both buttons without wrapping. Here the
       row is already centered; the negative margin only pushed the whole
       group left, off the card's true center. */
    margin-right: 0;
  }
  /* Countdown boxes inside the light card — the default dark tone
     (`--hero-count-bg`, derived from `--color-hero-bg`) would clash inside
     a white card; swapped for the theme's own secondary (cream) tone. */
  .event-theme .hero-count-box {
    background: var(--color-bg-secondary);
  }
  .event-theme .hero-panel-image img {
    object-position: center center;
    /* Same reasoning as Inverno: filter on the photo itself, not just the
       overlay below — guarantees minimum readability on any photo the
       user picks, not just the demo one. */
    filter: brightness(0.75) saturate(1.05);
  }
  .event-theme .hero-panel-image img.hero-filter-sepia {
    filter: brightness(0.75) saturate(1.05) sepia(0.65);
  }
  .event-theme .hero-panel-image img.hero-filter-grayscale {
    filter: brightness(0.75) saturate(1.05) grayscale(1);
  }
  .event-theme .hero-panel-image::before {
    /* Covers the whole hero with a semi-transparent sage tint, a bit
       stronger at the bottom (same pattern as Inverno) — the light card
       already guarantees text readability, this is just to keep the photo
       from looking "raw". */
    background: linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-hero-bg) 65%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-bg) 45%, transparent) 50%,
      color-mix(in srgb, var(--color-hero-bg) 55%, transparent) 100%
    );
  }

  /* Same fix as Jerusalem (see jerusalem.css) — this is a full-bleed hero
     (photo fills the whole section, card overlaid on top), not the
     default split panel. Without this, sites-base.css's mobile default
     turns the photo into a separate 260px strip ABOVE the card instead of
     staying behind it, pushing the card (and every section after it) down
     with an empty gap where the overlay used to be. */
  @media (max-width: 768px) {
    .event-theme .hero-panel-image {
      position: absolute;
      inset: 0;
      height: auto;
    }
  }

  /*=========================
   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);
  }

  /*=========================
   EVENT DETAILS — same as Inverno: title first, celebrant (circular
   photo, centered) after, cards last — same order as every other theme
   except Jerusalem (which hides the title entirely). Used to reverse
   this via `order` (celebrant → title), which pushed the title out of
   view below the fold on mobile — the bug it was meant to look
   intentional turned out to just be confusing.
  =========================*/
  .event-theme #about {
    display: flex;
    flex-direction: column;
    /* Subtle diamond pattern behind the celebrant photo/mini bio — two
       crossed repeating-linear-gradients instead of an image, to avoid a
       new asset dependency (same mechanism as Inverno). */
    background-image:
      repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--color-text) 6%, transparent) 0 1px,
        transparent 1px 26px
      ),
      repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--color-text) 6%, transparent) 0 1px,
        transparent 1px 26px
      );
  }
  .event-theme #about .info-text {
    margin-bottom: 40px;
  }
  .event-theme .celebrant-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 24px;
  }
  .event-theme .celebrant-bio .section-label {
    text-align: center;
  }
  .event-theme .celebrant-photo {
    --celebrant-photo-radius: 50%;
    width: 220px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 220px;
  }
  .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;
  }

  /*=========================
   MOMENTS — alternating zigzag (cards as they already are), with a
   center line connecting them. Same as Jerusalem (copied directly, see
   jerusalem.css for the full `:nth-of-type` reasoning).
  =========================*/
  .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;
    }
  }

}