/* =============================================================================
   Calendar.lt — Production CSS
   Design: warm paper aesthetic (light) + cool slate (dark)
   Fonts: Cormorant Garamond (display) + Manrope (sans)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Custom Properties
   --------------------------------------------------------------------------- */
:root {
  --radius:        0.5rem;
  --radius-lg:     0.75rem;
  --radius-xl:     1rem;
  --radius-2xl:    1.25rem;
  --radius-full:   9999px;

  /* Warm paper light theme */
  --bg:            #f5f0e8;
  --bg-alt:        #ede8de;
  --paper:         #faf7f2;
  --paper-edge:    #e0d8cc;
  --ink:           #1a1a2e;
  --ink-soft:      #5f5f70;
  --ink-muted:     #666672;
  --border:        #d8d0c4;
  --border-soft:   #e8e2d8;
  --card:          #faf7f2;
  --card-hover:    #f7f3ec;

  --crimson:       #8b1a2a;
  --crimson-light: #c0394a;
  --crimson-bg:    rgba(139,26,42,0.08);
  /* Crimson for small text. Same as --crimson in light mode; dark mode lifts it
     toward the ink, where flat crimson only reaches ~3:1 on dark surfaces. */
  --crimson-text:  var(--crimson);
  --gold:          #b08040;
  --gold-light:    #c8a060;
  --gold-bg:       rgba(176,128,64,0.08);
  --gold-text:     #7a5c28;
  --c-muted:       #666672;
  --sunday:        #8b1a2a;

  --shadow-sm:     0 1px 3px rgba(26,26,46,0.08);
  --shadow-md:     0 4px 16px rgba(26,26,46,0.12);
  --shadow-paper:
    0 1px 0 rgba(26,26,46,0.06),
    0 2px 4px rgba(26,26,46,0.08),
    0 30px 60px -20px rgba(26,26,46,0.20),
    inset 0 1px 0 rgba(255,255,255,0.5);

  --font-display:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:     'Manrope', 'Inter', system-ui, sans-serif;

  --transition:    0.18s ease;
  --transition-md: 0.3s ease;
}

.dark {
  --bg:            #161625;
  --bg-alt:        #1e1e30;
  --paper:         #1e1e30;
  --paper-edge:    #2c2c44;
  --ink:           #eae8e0;
  --ink-soft:      #b0acaa;
  --ink-muted:     #959186;
  --border:        #2c2c44;
  --border-soft:   #252538;
  --card:          #1e1e30;
  --card-hover:    #252540;

  --crimson:       #c0394a;
  --crimson-light: #d4526a;
  --crimson-bg:    rgba(192,57,74,0.12);
  --crimson-text:  color-mix(in srgb, var(--crimson) 55%, var(--ink));
  --gold:          #c8a060;
  --gold-light:    #d8b878;
  --gold-bg:       rgba(200,160,96,0.10);
  --gold-text:     var(--gold);
  --sunday:        #c0394a;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.25);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.35);
  --shadow-paper:
    0 1px 0 rgba(0,0,0,0.3),
    0 2px 4px rgba(0,0,0,0.2),
    0 30px 60px -20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.04);

  /* --c-* aliases used by the event submission form */
  --c-ink:     #eae8e0;
  --c-paper:   #1e1e30;
  --c-card:    #252540;
  --c-muted:   #959186;
  --c-rule:    #2c2c44;
  --c-crimson: #c0394a;
}

/* ---------------------------------------------------------------------------
   2. Reset & Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* prevent horizontal scroll from swipe animations */
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--gold) 8%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--crimson) 6%, transparent) 0%, transparent 50%);
  -webkit-font-smoothing: antialiased;
}

.font-display,
h1, h2, h3 { font-family: var(--font-display); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Bootstrap overrides */
.container-xl { max-width: 1280px; }

/* ---------------------------------------------------------------------------
   3. Typography helpers
   --------------------------------------------------------------------------- */
.text-crimson   { color: var(--crimson); }
.text-gold      { color: var(--gold-text); }
.text-muted-light { color: var(--ink-muted); }

.section-eyebrow {
  font-size: 0.65rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.5rem;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.page-subtitle {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------------------------------------------------------------------------
   4. Header
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 64px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-icon {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Search */
.header-search {
  flex: 1;
  justify-content: center;
}

.search-form {
  position: relative;
  width: 100%;
  max-width: 360px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
  display: flex;
}

.search-input {
  width: 100%;
  height: 40px;
  padding: 0 1rem 0 2.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-bg);
}

.search-input::placeholder { color: var(--ink-muted); }

/* Header nav */
.header-nav {
  align-items: center;
  gap: 1.5rem;
  margin-left: 1.5rem;
}

.header-nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition);
}

.header-nav-link:hover { color: var(--crimson); }

/* Controls */
.header-controls {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

/* Language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 1px;
}

.lang-btn {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  transition: background var(--transition), color var(--transition);
  line-height: 1.4;
}

.lang-btn:hover { color: var(--ink); }

.lang-btn.active {
  background: var(--ink);
  color: var(--bg);
}

/* Icon buttons */
.icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.icon-btn:hover {
  background: var(--bg-alt);
  color: var(--ink);
}

/* Theme toggle icons */
#theme-toggle .icon-sun  { display: block; }
#theme-toggle .icon-moon { display: none; }
.dark #theme-toggle .icon-sun  { display: none; }
.dark #theme-toggle .icon-moon { display: block; }

/* ---------------------------------------------------------------------------
   5. Hero section
   --------------------------------------------------------------------------- */
/* The H1 is visually hidden (the card states the date), so this section opens
   straight onto the card — hence a smaller top pad than a titled section needs. */
.hero-section {
  padding: 2.25rem 0 4rem;
  overflow-x: clip; /* clip swipe card animation; `clip` avoids creating a scroll container */
}

/* ── Day card + month calendar split ───────────────────────────────────────
   Used on the homepage and every day page. Single column below 1200px (card
   first, month calendar under it); two columns on real desktop widths, where
   the month grid has room to stay legible without squeezing the card. */
.home-split {
  display: grid;
  gap: 3.5rem;
}

.home-month__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-bottom: 0.85rem;
}

.home-month__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.home-month__title a { color: inherit; }
.home-month__title a:hover { color: var(--gold-text); }

.home-month__link {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.home-month__link:hover { color: var(--gold-text); }

/* ── Upcoming dates, under the month grid ──────────────────────────────────
   On desktop this block is what fills the column down to the card's baseline.
   calendar/day.php picks the row count from the card's computed height; the
   flexible gap here takes up whatever that estimate leaves over, so the column
   ends flush with the card without a half-row being clipped. */
.home-upcoming {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

.home-upcoming__head { margin-bottom: 0.85rem; }

.home-upcoming__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.home-upcoming__all {
  align-self: flex-start;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.home-upcoming__all:hover { color: var(--gold-text); }

@media (min-width: 1200px) {
  /* The card's nav arrows sit 56px outside its edges, so the whole block is
     inset by that much: the prev arrow gets a gutter instead of overflowing the
     container, and the column gap keeps the next arrow clear of the grid. */
  .home-split {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 4.5rem;
    /* stretch (not start) so the sidebar column is exactly as tall as the card */
    align-items: stretch;
    padding-left: 56px;
  }

  /* Sidebar becomes a column: month grid at its natural height, upcoming list
     expanding into whatever is left. */
  .home-month { display: flex; flex-direction: column; }
  .home-upcoming { flex: 1 1 auto; min-height: 0; }
  .home-upcoming .upcoming-holidays { flex: 1 1 auto; justify-content: space-between; }

  /* Compact rows for the 340px column, and a two-line cap on the name so a row
     can never grow past the height the fit calculation assumes. */
  .home-upcoming .upcoming-link { padding: 0.7rem 0.85rem; gap: 0.7rem; }
  .home-upcoming .upcoming-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Left-aligned (not auto-centred) so the arrow gutter stays a fixed 56px. */
  .home-split .calendar-card-wrapper,
  .home-split .card-share { max-width: 620px; margin-left: 0; margin-right: 0; }

  /* Aligns the sidebar heading's text with the card's month name (measured, not
     equal to the card's padding — the two use different type sizes). */
  .home-month { padding-top: 1.75rem; }
}

/* The `.month-grid-wrap--compact` sizing overrides live with the rest of the
   month-grid rules in section 12b — they must come after the base
   `.month-grid-wrap` declarations to win on source order. */

/* ---------------------------------------------------------------------------
   6. Calendar Card
   --------------------------------------------------------------------------- */
.calendar-card-wrapper {
  position: relative; /* paper layers + nav arrows position against this box */
  max-width: 680px;
  margin: 0 auto;
}

/* Paper depth layers */
.paper-layer {
  position: absolute;
  border-radius: var(--radius-2xl);
  pointer-events: none;
}

.paper-layer--back {
  inset: 8px 8px -8px;
  background: var(--paper-edge);
  opacity: 0.6;
  transform: rotate(-0.8deg);
}

.paper-layer--mid {
  inset: 4px 4px -4px;
  background: var(--paper-edge);
  transform: rotate(0.3deg);
}

/* Main card */
.calendar-card {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  box-shadow: var(--shadow-paper);
  cursor: grab;
  user-select: none;
  transform-origin: center 80%;
  will-change: transform;
  transition: box-shadow var(--transition-md);
}

.calendar-card:active { cursor: grabbing; }

/* Corner ribbon — LAISVADIENIS / SUTRUMPINTA */
.card-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 164px;
  height: 164px;
  overflow: hidden;
  z-index: 20;
  pointer-events: none;
}
.card-ribbon span {
  position: absolute;
  display: block;
  top: 44px;
  right: -52px;
  width: 218px;
  padding: 11px 0;
  background: var(--crimson);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

/* Paper grain texture */
.paper-grain {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(26, 26, 46, 0.015) 0px 1px,
      transparent 1px 3px
    ),
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 60%);
}

/* Perforation strip */
/* ── Card typography ────────────────────────────────────────────────────────
   Modelled on the printed tear-off calendar: one centred column, generous type
   sizes, and no caption labels — position and icon identify each value, which
   is what lets the numbers and names be this large. Everything is set in the
   display serif so the card reads as a single printed page. */
.calendar-card {
  text-align: center;
  padding-bottom: 0.25rem;
  /* Cormorant Garamond ships oldstyle figures by default, which render "10" as
     glyphs easily misread as "IO". Force lining figures across the whole card —
     this is the single biggest legibility fix for the dates and times. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}

/* Month + year */
.card-month {
  padding: 1.9rem 1.5rem 0;
  line-height: 1.05;
}

.card-month__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.6vw, 2.35rem);
  font-weight: 700;
  color: var(--ink);
}

.card-month__year {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.2vw, 1.55rem);
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.1rem;
}

/* Sun + moon row */
.card-sky {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.75rem 0;
  text-align: left;
}

.card-sky__col {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

/* Moon block reads right-to-left so its icon sits nearest the card edge */
.card-sky__col--moon { flex-direction: row-reverse; }

.card-sky__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--ink);
  margin-top: 0.1rem;
  /* Unlit side of the moon disc — referenced from the inline SVG */
  --moon-shadow: color-mix(in srgb, var(--ink) 15%, var(--paper));
}

.card-sky__lines {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}

.card-sky__key { color: var(--ink-soft); }
.card-sky__val { font-weight: 700; }

/* Weather */
.card-forecast {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--ink);
  padding: 1.1rem 1.75rem 0;
  text-wrap: balance;
}

.card-forecast__temp { font-weight: 700; }

/* Day number + weekday — the card's anchor */
.card-day { padding: 1.5rem 1rem 0; }

.card-day__num {
  font-family: var(--font-display);
  font-size: clamp(7rem, 22vw, 11rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.card-day__dow {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 0.5rem;
}

/* Sundays and public holidays take the accent colour, as on the printed card */
.card-day.is-restday .card-day__num,
.card-day.is-restday .card-day__dow { color: var(--sunday); }

/* Name days */
.card-names {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  padding: 1.85rem 1.75rem 0;
  text-wrap: balance;
}

/* Holidays */
.card-holidays {
  padding: 1.6rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.card-holiday {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

.card-holiday--red { color: var(--sunday); }

/* Saying of the day */
.card-saying {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 3.1vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 1.85rem 1.75rem 0;
  margin: 0;
  text-wrap: balance;
}

.card-saying__by {
  display: block;
  font-style: normal;
  font-size: 0.95em;
  color: var(--ink-muted);
  margin-top: 0.3rem;
}

/* Footer: zodiac · eastern zodiac · day-of-year / week */
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 2rem 1.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 3vw, 1.08rem);
  color: var(--ink);
}

.card-foot__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Zodiac sign. U+264C has an emoji presentation on most platforms, which would
   drop a coloured glyph into an otherwise monochrome card — force the text form
   and prefer fonts that actually carry the astrological symbols. */
.card-foot__sym {
  font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', var(--font-display), serif;
  font-variant-emoji: text;
  font-size: 1.25em;
  line-height: 1;
  color: var(--ink-soft);
}

.card-foot__item--count { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Name-day gender badges — also used by the A–Z name days page */
.nd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}

.nd-badge--m {
  color: #1a6fa0;
  background: color-mix(in srgb, #1a6fa0 12%, transparent);
}

.nd-badge--f {
  color: #b5416e;
  background: color-mix(in srgb, #b5416e 12%, transparent);
}

/* Phones — a 7-column sun/moon row cannot hold this type size side by side, so
   stack the two blocks instead of shrinking the text. Also keeps the moon clear
   of the corner ribbon. */
@media (max-width: 575px) {
  .card-sky {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    padding-top: 1.35rem;
  }
  /* Icon back on the left once stacked */
  .card-sky__col--moon { flex-direction: row; }
  .card-sky__lines > div { white-space: nowrap; }
}

/* Narrow phones — pull the horizontal padding in, keep the type sizes */
@media (max-width: 400px) {
  .card-sky       { padding-left: 1.15rem;  padding-right: 1.15rem; }
  .card-sky__icon { width: 30px; height: 30px; }
  .card-sky__lines { font-size: 0.95rem; }
  .card-forecast,
  .card-names,
  .card-holidays,
  .card-saying    { padding-left: 1.15rem; padding-right: 1.15rem; }
  .card-foot      { padding-left: 1.15rem; padding-right: 1.15rem; gap: 0.4rem; }
}

/* Mobile hint */
.mobile-hint {
  padding: 1.25rem 1.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

/* ── Share this day ─────────────────────────────────────────────────────────
   A secondary action, so it takes the site's own neutral palette rather than
   Facebook blue (which fought the card) and sits quietly at the card's trailing
   edge instead of centred under it. The brand blue only appears on hover. */
.card-share {
  display: flex;
  justify-content: flex-end;
  /* Mirrors the card wrapper's own box (680px, centred) so the button's right
     edge lines up with the card rather than floating in the arrow gutter. */
  max-width: 680px;
  margin: 1rem auto 0;
}

.card-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.card-share__btn:hover {
  border-color: #1877F2;
  color: #1877F2;
  background: color-mix(in srgb, #1877F2 7%, transparent);
  text-decoration: none;
}

.card-share__btn svg { flex-shrink: 0; }

@media (max-width: 767px) {
  /* Under the prev/next buttons the trailing edge reads as cramped — centre it */
  .card-share { justify-content: center; margin-top: 1.25rem; }
}

/* Nav arrows */
.card-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  z-index: 2;
}

.card-nav:hover {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--ink);
}

.card-nav--prev { left:  -56px; }
.card-nav--next { right: -56px; }

/* Mobile nav */
.mobile-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 0.5rem;
}

.mobile-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition);
}

.mobile-nav-btn:hover {
  background: var(--bg-alt);
  border-color: var(--gold);
}

/* ---------------------------------------------------------------------------
   7. Card animation (horizontal swipe — Tinder style)
   --------------------------------------------------------------------------- */

/* Swipe indicator stamps */
.swipe-indicator {
  position: absolute;
  top: 2.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 1rem;
  border-radius: var(--radius);
  border: 2.5px solid;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s linear;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(4px);
}

.swipe-indicator--prev {
  left: 1.5rem;
  color: var(--crimson);
  border-color: var(--crimson);
  transform: rotate(-12deg);
}

.swipe-indicator--next {
  right: 1.5rem;
  color: var(--gold);
  border-color: var(--gold);
  transform: rotate(12deg);
}

/* Entry: slide in from right (next day / forward) */
@keyframes slide-in-from-right {
  0%   { transform: translateX(60%) rotate(7deg);  opacity: 0; }
  100% { transform: translateX(0)   rotate(0deg);  opacity: 1; }
}

/* Entry: slide in from left (prev day / backward) */
@keyframes slide-in-from-left {
  0%   { transform: translateX(-60%) rotate(-7deg); opacity: 0; }
  100% { transform: translateX(0)    rotate(0deg);  opacity: 1; }
}

/* Exit: fly out to the left (going to next day) */
@keyframes slide-out-to-left {
  0%   { transform: translateX(0)     rotate(0deg);  opacity: 1; }
  100% { transform: translateX(-120%) rotate(-14deg); opacity: 0; }
}

/* Exit: fly out to the right (going to prev day) */
@keyframes slide-out-to-right {
  0%   { transform: translateX(0)    rotate(0deg);  opacity: 1; }
  100% { transform: translateX(120%) rotate(14deg); opacity: 0; }
}

.calendar-card.animating-in-forward  { animation: slide-in-from-right 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.calendar-card.animating-in-backward { animation: slide-in-from-left  0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.calendar-card.animating-out-forward { animation: slide-out-to-left   0.32s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.calendar-card.animating-out-backward{ animation: slide-out-to-right  0.32s cubic-bezier(0.55, 0, 1, 0.45) forwards; }

/* ---------------------------------------------------------------------------
   8. Content grid sections
   --------------------------------------------------------------------------- */
.content-grid {
  padding: 4rem 0 3rem;
}

.widgets-section {
  padding: 0 0 5rem;
}

/* ---------------------------------------------------------------------------
   9. Historical Timeline
   --------------------------------------------------------------------------- */
.timeline-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.timeline-date {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.timeline-list {
  position: relative;
  border-left: 1px dashed var(--border);
  margin-left: 8px;
  padding: 0;
}

.timeline-item {
  position: relative;
  padding: 0 0 1.75rem 1.75rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease var(--delay, 0ms), transform 0.4s ease var(--delay, 0ms);
}

.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline-dot {
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--crimson);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--crimson);
}

.timeline-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--crimson);
  line-height: 1.2;
}

.timeline-event {
  color: var(--ink);
  margin: 0.25rem 0 0;
  line-height: 1.5;
  opacity: 0.9;
}

.timeline-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--gold-text);
  font-weight: 500;
  margin-top: 0.5rem;
  transition: opacity var(--transition);
}

.timeline-more-link:hover { opacity: 0.7; }

.event-category-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.event-category-badge--cultural  { background:#f0e8ff; color:#7c3aed; }
.event-category-badge--sports    { background:#dcfce7; color:#15803d; }
.event-category-badge--music     { background:#fff0f6; color:#be185d; }
.event-category-badge--art       { background:#fef3c7; color:#b45309; }
.event-category-badge--food      { background:#fff7ed; color:#c2410c; }
.event-category-badge--community { background:#e0f2fe; color:#0369a1; }
.event-category-badge--other     { background:#f1f5f9; color:#5c6c83; }

/* ---------------------------------------------------------------------------
   10. Upcoming holidays
   --------------------------------------------------------------------------- */
.upcoming-holidays { display: flex; flex-direction: column; gap: 0.625rem; }

.upcoming-item { border-radius: var(--radius-lg); overflow: hidden; }

.upcoming-link {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), background var(--transition);
}

.upcoming-link:hover {
  border-color: color-mix(in srgb, var(--crimson) 40%, transparent);
  background: var(--card-hover);
}

/* Date block: day over month. Stacking keeps it to a fixed narrow column, so a
   long month name can never reflow the row and change its height — which is what
   the row-count fit in calendar/day.php depends on. */
.upcoming-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 54px;
  font-family: var(--font-display);
  color: var(--crimson-text);
  line-height: 1.15;
}

.upcoming-date__day { font-size: 1.4rem; font-weight: 700; }
.upcoming-date__mon { font-size: 0.72rem; font-weight: 600; }

.upcoming-text { min-width: 0; }

.upcoming-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.3;
}

.upcoming-type {
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------------
   11. Widgets grid
   --------------------------------------------------------------------------- */
.widgets-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

@media (min-width: 576px) { .widgets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .widgets-grid { grid-template-columns: repeat(3, 1fr); } }

.widget-card {
  display: flex;
  flex-direction: column;
  padding: 1.375rem;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition:
    border-color var(--transition),
    transform 0.25s ease,
    box-shadow 0.25s ease;
  opacity: 0;
  transform: translateY(12px);
}

.widget-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.4s ease var(--delay, 0ms),
    transform 0.4s ease var(--delay, 0ms),
    border-color var(--transition),
    box-shadow 0.25s ease;
}

.widget-card:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md);
}

.widget-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-alt);
  margin-bottom: 0.875rem;
  color: var(--ink-soft);
  transition: background var(--transition), color var(--transition);
}

.widget-card:hover .widget-icon {
  background: var(--gold-bg);
  color: var(--gold);
}

.widget-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.375rem;
  line-height: 1.2;
}

.widget-desc {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

.widget-card--soon {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.widget-card--soon:hover {
  transform: none;
  box-shadow: none;
}

.widget-soon-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: transparent;
  border: 1px solid var(--gold-text);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  margin-left: 0.375rem;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   12. Page-level hero
   --------------------------------------------------------------------------- */
.page-hero {
  padding: 3rem 0 2rem;
}

.year-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.year-nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  color: var(--ink-soft);
  transition: border-color var(--transition), color var(--transition);
}

.year-nav-btn:hover { border-color: var(--gold); color: var(--ink); }
.year-current { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }

/* ---------------------------------------------------------------------------
   12b. Month calendar grid
   Shared by /YYYY/MM and the homepage sidebar (partials/month-grid.php).
   --------------------------------------------------------------------------- */
.month-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.month-nav-btn {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  color: var(--ink-soft);
  transition: border-color var(--transition), color var(--transition);
}
.month-nav-btn:hover { border-color: var(--gold); color: var(--ink); }
.month-nav-btn--holidays {
  border-color: color-mix(in srgb, var(--crimson) 35%, var(--border));
  color: var(--crimson);
}
.month-nav-btn--holidays:hover { border-color: var(--crimson); color: var(--crimson); }

.month-calendar-section { padding-bottom: 5rem; }
.month-grid-wrap { max-width: 600px; margin: 2rem auto; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.month-dow-header {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.5rem 0;
}

.month-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-soft);
  transition: background var(--transition), border-color var(--transition);
}
.month-cell:hover { background: var(--card-hover); border-color: var(--gold); }
.month-cell--empty { pointer-events: none; background: transparent; border-color: transparent; }
.month-day-num { z-index: 1; position: relative; font-size: 1.35rem; }

/* Sunday — red day number only, background left alone. Only holidays tint the
   cell, which keeps the background a reliable signal for "this is a holiday".
   Day numbers are small text, so they take the contrast-safe crimson. */
.month-cell--sunday .month-day-num { color: var(--crimson-text); }

/* Observance / informational day — gold */
.month-cell--holiday { background: var(--gold-bg); border-color: var(--gold); }

/* Public holiday / non-working day — red, strongest signal */
.month-cell--holiday-red {
  background: color-mix(in srgb, var(--crimson) 16%, var(--card));
  border-color: var(--crimson);
  border-width: 2px;
}
.month-cell--holiday-red .month-day-num { color: var(--crimson-text); }

/* Today — solid fill, so its number stays light whatever else the day is */
.month-cell--today { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.month-cell--today:hover { background: var(--ink); opacity: 0.9; }
.month-cell--today.month-cell--holiday-red .month-day-num,
.month-cell--today.month-cell--sunday .month-day-num { color: var(--bg); }

/* Day currently being viewed. Deliberately a ring rather than a fill: every
   other state (weekend tint, gold observance, red holiday, today) already uses
   the cell background, so a ring stays readable on top of any of them —
   including on today, where the offset gap separates it from the dark fill. */
.month-cell--selected {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  z-index: 2;
}
.month-cell--selected .month-day-num { font-weight: 800; }

.month-holiday-dot {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.month-cell--holiday-red .month-holiday-dot { background: var(--crimson); }
.month-cell--today .month-holiday-dot { background: var(--bg); }

/* Legend */
.month-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 1.75rem;
  margin-top: 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.month-legend-item { display: flex; align-items: center; gap: 0.5rem; }
.month-legend-swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.month-legend-swatch--holiday {
  background: color-mix(in srgb, var(--crimson) 16%, var(--card));
  border-color: var(--crimson);
}
.month-legend-swatch--observance { background: var(--gold-bg); border-color: var(--gold); }
.month-legend-swatch--selected { background: transparent; border: 2px solid var(--ink); }

/* Sunday needs no swatch — the label is set in the colour it describes */
.month-legend-item--sunday { color: var(--crimson-text); font-weight: 700; }

@media (min-width: 640px) {
  .month-grid-wrap { max-width: 760px; }
  .month-grid { gap: 10px; }
  .month-day-num { font-size: 1.7rem; }
  .month-dow-header { font-size: 1rem; }
  .month-holiday-dot { width: 8px; height: 8px; bottom: 10px; }
}

/* ── Compact variant: homepage sidebar (see .home-split, section 5) ─────────
   Declared after the base rules above so the single-class selectors below win
   on source order rather than needing inflated specificity. */
.month-grid-wrap--compact { margin: 0 auto; }

@media (min-width: 1200px) {
  /* Fills the fixed-width sidebar column and drops the centring margin. */
  .month-grid-wrap--compact { max-width: none; margin: 0; }
  .month-grid-wrap--compact .month-grid { gap: 5px; }
  .month-grid-wrap--compact .month-dow-header { font-size: 0.7rem; padding: 0.25rem 0; }
  .month-grid-wrap--compact .month-day-num { font-size: 1.05rem; }
  .month-grid-wrap--compact .month-cell { border-radius: var(--radius); }
  .month-grid-wrap--compact .month-holiday-dot { width: 5px; height: 5px; bottom: 4px; }
  .month-grid-wrap--compact .month-legend {
    justify-content: flex-start;
    gap: 0.4rem 1rem;
    margin-top: 1rem;
    font-size: 0.78rem;
  }
  .month-grid-wrap--compact .month-legend-swatch { width: 0.85rem; height: 0.85rem; }
}

/* ---------------------------------------------------------------------------
   13. Holidays page
   --------------------------------------------------------------------------- */
.holidays-list-section { padding-bottom: 5rem; }

.holidays-month-group { margin-bottom: 2.5rem; }

.holidays-month-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.holidays-list { display: flex; flex-direction: column; gap: 0.5rem; }

.holiday-item-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), background var(--transition);
}

.holiday-item-link:hover {
  border-color: color-mix(in srgb, var(--crimson) 40%, transparent);
  background: var(--card-hover);
}

.holiday-item-day {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--crimson);
  min-width: 2.5rem;
  line-height: 1;
}

.holiday-item-body { flex: 1; }

.holiday-item-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.holiday-item-name-en {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 0.1rem;
}

.holiday-type-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.badge-public      { background: var(--crimson-bg); color: var(--crimson); }
.badge-traditional { background: var(--gold-bg);    color: var(--gold-text); }
.badge-religious   { background: color-mix(in srgb, #6366f1 10%, transparent); color: #6366f1; }

.holidays-month-heading-link { color: inherit; transition: color var(--transition); }
.holidays-month-heading-link:hover { color: var(--gold-text); }

/* ---------------------------------------------------------------------------
   13b. Month holiday hub pages (šventės pagal mėnesį)
   --------------------------------------------------------------------------- */
.holidays-month-legal-section { padding-bottom: 3rem; }

.holidays-month-legal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.holidays-month-legal-box {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}

.holidays-month-legal-box p { color: var(--ink-soft); margin-bottom: 1rem; }

.holidays-month-legal-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.holidays-month-legal-item {
  padding: 0.625rem 0.875rem;
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink);
}

.holidays-month-legal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gold-text);
  transition: color var(--transition);
}

.holidays-month-legal-link:hover { color: var(--ink); }

.holidays-month-nav-section { padding-bottom: 4rem; }

.holidays-month-nav-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

.nameday-az-cell.nameday-az-cell--active {
  background: var(--ink);
  border-color: var(--ink);
}

.nameday-az-cell--active .nameday-az-letter,
.nameday-az-cell--active .nameday-az-count {
  color: var(--bg);
}

/* Month names are much longer than A-Z letters — wider, non-square cells */
.holidays-month-nav-section .nameday-az-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: none;
}

.holidays-month-nav-section .nameday-az-cell {
  aspect-ratio: auto;
  padding: 1rem 0.5rem;
}

.holidays-month-nav-section .nameday-az-letter {
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

@media (min-width: 576px) {
  .holidays-month-nav-section .nameday-az-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .holidays-month-nav-section .nameday-az-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
  .holidays-month-nav-section .nameday-az-grid { grid-template-columns: repeat(6, 1fr); }
}

.holidays-month-cross-links-section { padding-bottom: 5rem; }

.holidays-month-cross-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------------------
   14. Search page
   --------------------------------------------------------------------------- */
.search-section { padding-bottom: 5rem; }

.search-page-form { margin-bottom: 2rem; }

.search-input-wrap {
  display: flex;
  gap: 0.75rem;
  max-width: 640px;
}

.search-page-input {
  flex: 1;
  height: 48px;
  padding: 0 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.search-page-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-bg);
}

.search-results-header {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.search-results-list { display: flex; flex-direction: column; gap: 0.625rem; }

.search-result-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), background var(--transition);
}

.search-result-link:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  background: var(--card-hover);
}

.result-type-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.result-type-holiday { background: var(--crimson-bg); color: var(--crimson); }
.result-type-event   { background: var(--gold-bg);    color: var(--gold-text); }
.result-type-date    { background: var(--bg-alt);     color: var(--ink-soft); }
.result-type-nameday { background: #e8f4fd;           color: #1a6fa0; }

.result-title {
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

.result-date {
  font-size: 0.8rem;
  color: var(--ink-muted);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   15. Name days by letter page
   --------------------------------------------------------------------------- */

/* These pages target an older audience (vardadieniai are family-oriented) —
   use the plain sans-serif everywhere instead of the thin display serif,
   and size text generously for easy reading. */
.nameday-hero h1,
.nameday-hero .page-title {
  font-family: var(--font-sans);
}

.nameday-hero .page-subtitle {
  font-size: 1.2rem;
  line-height: 1.5;
}

.nameday-az-section { padding-bottom: 4rem; }

.nameday-az-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.875rem;
  max-width: 760px;
}

.nameday-az-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  aspect-ratio: 1 / 1;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.nameday-az-cell:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  background: var(--card-hover);
  transform: translateY(-2px);
}

.nameday-az-cell--disabled {
  opacity: 0.35;
}

.nameday-az-letter {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
}

.nameday-az-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.nameday-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
  transition: color var(--transition);
}

.nameday-back-link:hover { color: var(--gold-text); }

/* Compact A-Z nav on letter pages */
.nameday-az-nav-section {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.nameday-az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nameday-az-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.nameday-az-nav-link:hover { border-color: var(--gold); color: var(--ink); }

.nameday-az-nav-link.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.nameday-az-nav-link--disabled {
  border-color: var(--border-soft);
  color: var(--ink-muted);
  opacity: 0.4;
}

/* Name list — single column on mobile, multi-column on wider screens so the
   list doesn't stretch into thin, near-empty bars on desktop. */
.nameday-list-section { padding-bottom: 5rem; }

.nameday-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

@media (min-width: 768px) {
  .nameday-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .nameday-list { grid-template-columns: repeat(3, 1fr); }
}

.nameday-item-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), background var(--transition);
}

.nameday-item-card:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  background: var(--card-hover);
}

.nameday-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.nameday-item-name {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

/* One pill per name-day date — many names (e.g. "Jonas") are celebrated
   several times a year, so each date links to its own day page. */
.nameday-item-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.nameday-date-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: lowercase;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.nameday-date-pill:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: var(--card-hover);
}

/* ---------------------------------------------------------------------------
   16. Footer
   --------------------------------------------------------------------------- */
.site-footer {
  margin-top: 6rem;
  border-top: 1px solid var(--border-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  padding: 3rem 0 2rem;
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0 1.5rem; }
  .footer-brand { grid-column: auto; }
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.footer-tagline {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 32ch;
  margin: 0;
}

/* Push notification footer toggle */
.footer-push-wrap {
    margin-top: 1rem;
}
.footer-push-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem 0.45rem 0.65rem;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    line-height: 1;
}
.footer-push-btn:hover {
    border-color: var(--crimson);
    color: var(--ink);
}
/* ── Per-language pill UI (shown when subscribed) ───────────────────────── */
.footer-push-langs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.footer-push-langs__bell {
    color: var(--crimson);
    flex-shrink: 0;
    margin-right: 0.1rem;
}

/* Individual language pill */
.footer-lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.28rem 0.5rem;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    line-height: 1;
}
.footer-lang-pill:hover {
    border-color: var(--crimson);
    color: var(--ink);
}
.footer-lang-pill.active,
.footer-lang-pill[aria-pressed="true"] {
    border-color: var(--crimson);
    color: var(--crimson);
    background: var(--crimson-bg);
}
.footer-lang-pill:active { transform: scale(0.94); }

/* Unsubscribe text-link inside the pills row */
.footer-push-unsub-link {
    border: none;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0 0.15rem;
    margin-left: 0.05rem;
    transition: color var(--transition);
    line-height: 1;
}
.footer-push-unsub-link:hover { color: var(--crimson); }

/* PWA install button — inherits footer-push-btn styles, accent overrides */
.footer-install-btn:hover {
    border-color: var(--crimson);
    color: var(--crimson);
    background: var(--crimson-bg);
}
.footer-install-btn:disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* iOS "Add to Home Screen" install guide — bottom-sheet modal */
.pwa-ios-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1060;
    display: flex;
    align-items: flex-end;
    animation: pwaBackdropIn 0.2s ease;
}
.pwa-ios-modal--out {
    animation: pwaBackdropOut 0.25s ease forwards;
}
.pwa-ios-modal--out .pwa-ios-modal__sheet {
    animation: pwaSheetOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.pwa-ios-modal__sheet {
    background: var(--bg-card, #fff);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.25rem 1.5rem 2rem;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    animation: pwaSheetIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.pwa-ios-modal__handle {
    width: 2.5rem;
    height: 4px;
    background: var(--border-color, #ddd);
    border-radius: 2px;
    margin: 0 auto 1.25rem;
}
.pwa-ios-modal__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    text-align: center;
    color: var(--ink);
}
.pwa-ios-modal__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.pwa-ios-modal__step {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
    line-height: 1.4;
}
.pwa-ios-modal__step strong {
    color: var(--ink);
    font-weight: 600;
}
.pwa-ios-modal__step-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: var(--crimson-bg, #fdf0f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--crimson);
}
.pwa-ios-modal__close {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.pwa-ios-modal__close:hover {
    background: var(--crimson-bg, #fdf0f0);
    color: var(--crimson);
    border-color: var(--crimson);
}
@keyframes pwaBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pwaBackdropOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes pwaSheetIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes pwaSheetOut {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

.footer-nav-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}

.footer-nav-list { display: flex; flex-direction: column; gap: 0.55rem; }

.footer-nav-list a {
  font-size: 0.875rem;
  color: var(--ink-soft);
  transition: color var(--transition);
}

.footer-nav-list a:hover { color: var(--ink); }

.footer-nav-spacer {
  height: 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
  padding-top: 0.5rem;
  list-style: none;
}

.footer-nav-legal {
  font-size: 0.8rem !important;
  color: var(--ink-muted) !important;
}

.footer-nav-legal:hover { color: var(--crimson) !important; }

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.footer-bottom .footer-rss-link {
  justify-self: end;
}

.footer-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.footer-majevski-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.55;
  transition: opacity var(--transition);
}
.footer-majevski-link:hover { opacity: 1; }

.footer-majevski-logo {
  display: block;
  height: 40px;
  width: auto;
}

/* Invert the black logo in dark mode so it stays readable */
.dark .footer-majevski-logo {
  filter: invert(1);
}

.footer-rss-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--ink-muted);
  background: transparent;
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
}
.footer-rss-link:hover {
  color: #f26522;
  background: rgba(242, 101, 34, 0.08);
}
.footer-rss-icon {
  fill: currentColor;
  stroke: currentColor;
}

/* ---------------------------------------------------------------------------
   17. Buttons
   --------------------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition);
}

.btn-primary:hover { opacity: 0.85; color: var(--bg); }

.btn-primary.w-100 { width: 100%; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}

.btn-outline:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
}

/* ---------------------------------------------------------------------------
   18. Error page
   --------------------------------------------------------------------------- */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 5rem 0;
}

.error-content { max-width: 480px; margin: 0 auto; }

.error-number {
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 700;
  color: var(--crimson);
  line-height: 1;
  margin-bottom: 1rem;
}

.error-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.error-desc { color: var(--ink-soft); margin-bottom: 2rem; }

.error-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   19. Scroll-reveal
   --------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.45s ease var(--delay, 0ms),
    transform 0.45s ease var(--delay, 0ms);
}

.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Override for timeline items which use translateX */
.timeline-item.reveal-on-scroll {
  transform: translateX(-10px);
}

.timeline-item.reveal-on-scroll.visible {
  transform: translateX(0);
}

/* ---------------------------------------------------------------------------
   20. Alert / form helpers
   --------------------------------------------------------------------------- */
.alert-error {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--crimson-bg);
  border: 1px solid color-mix(in srgb, var(--crimson) 25%, transparent);
  color: var(--crimson);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   21. Admin styles (light weight, admin.css handles the heavy lifting)
   --------------------------------------------------------------------------- */
.admin-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg);
}

.admin-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}

.admin-login-logo {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.5rem;
}

.admin-login-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

/* ---------------------------------------------------------------------------
   22. Accessibility
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

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

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.875rem;
  z-index: 9999;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus { top: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   23. Responsive misc
   --------------------------------------------------------------------------- */

/* ── ≤ 767 px (tablets and below) ────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-section { padding: 2rem 0 3rem; }
  .content-grid { padding: 2.5rem 0 2rem; }

  .footer-bottom {
    padding: 1rem 0;
  }
}

@media (max-width: 575px) {
  .footer-bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 1.25rem 0 1rem;
  }
  /* Logo: first */
  .footer-majevski-link { order: 0; }
  /* Copyright lines: second & third */
  .footer-copy {
    order: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  .footer-copy-rights,
  .footer-copy-made {
    display: block;
    text-align: center;
  }
  /* RSS: pinned to top-right, untouched */
  .footer-bottom .footer-rss-link {
    position: absolute;
    top: 1.25rem;
    right: 0;
    justify-self: unset;
  }
}

/* ── ≤ 575 px (phones in portrait) ──────────────────────────────────────── */
@media (max-width: 575px) {
  /* Section headings */
  .section-heading { font-size: 1.5rem; margin-bottom: 1rem; }

  /* Mobile nav buttons: equal-width, centered label */
  .mobile-nav-btn { flex: 1; justify-content: center; }

  /* Widgets section padding */
  .widgets-section { padding-bottom: 3.5rem; }
}

/* ── ≤ 479 px (small phones: iPhone SE, narrow Androids) ────────────────── */
@media (max-width: 479px) {
  /* ─ Header: hide icon, keep text (smaller) to fit lang switcher + icons ─ */
  .logo-icon { display: none; }
  .logo-text { font-size: 1rem; }

  /* Compact language buttons */
  .lang-btn { padding: 4px 7px; font-size: 0.65rem; }

  /* ─ Calendar card: tighter top block on very narrow screens ─ */
  .card-month  { padding: 1.15rem 1rem 0; }
  .mobile-hint { padding: 1rem 1.25rem 0.875rem; }

  /* Keep the day number inside a 320 px card */
  .card-day__num { font-size: clamp(5.5rem, 24vw, 8rem); }
}

/* ── Push notification soft-prompt ──────────────────────────────────────── */
.push-prompt {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: var(--c-paper, #f5f0e8);
    border: 1px solid var(--c-edge, #d2cabc);
    border-radius: 14px;
    padding: 0.875rem 1rem;
    box-shadow: 0 8px 32px rgba(22,22,42,.13);
    width: min(calc(100vw - 2rem), 480px);
    transition: transform 0.4s cubic-bezier(.22,1,.36,1), opacity 0.4s;
    opacity: 0;
    pointer-events: none;
}
.push-prompt--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.push-prompt__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
}
.push-prompt__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--c-ink, #16162a);
}
.push-prompt__text strong {
    font-size: 0.88rem;
    font-weight: 700;
}
.push-prompt__btn {
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    line-height: 1;
    transition: opacity .15s, transform .1s;
}
.push-prompt__btn:active { transform: scale(.96); }
.push-prompt__btn--yes {
    background: var(--c-crimson, #8b1a1a);
    color: #fff;
}
.push-prompt__btn--yes:hover { opacity: .88; }
.push-prompt__btn--no {
    background: transparent;
    color: var(--c-muted, #a09caf);
    padding: 0.45rem 0.5rem;
}
.push-prompt__btn--no:hover { color: var(--c-ink, #16162a); }

@media (max-width: 480px) {
    .push-prompt { bottom: 1rem; gap: 0.6rem; padding: 0.75rem 0.875rem; }
    .push-prompt__icon { font-size: 1.3rem; }
    .push-prompt__text { font-size: 0.78rem; }
    .push-prompt__btn--yes { padding: 0.4rem 0.75rem; }
}

/* ─── Event Submission / Monetisation ───────────────────────────────────────── */

/* Payment method badges (CSS-only, no broken SVGs) */
.pmeth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    border-radius: 3px;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1;
    padding: .2rem .4rem;
    flex-shrink: 0;
    vertical-align: middle;
    user-select: none;
}
.pmeth.visa {
    background: #1a1f71;
    color: #fff;
    font-style: italic;
    font-family: 'Times New Roman', serif;
    padding: .2rem .5rem;
}
/* Mastercard: two overlapping circles */
.pmeth.mc {
    background: transparent;
    padding: 0;
    width: 32px;
    position: relative;
    gap: 0;
}
.pmeth.mc .mc-left,
.pmeth.mc .mc-right {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.pmeth.mc .mc-left  { background: #eb001b; left: 0; }
.pmeth.mc .mc-right { background: #f79e1b; left: 9px; mix-blend-mode: multiply; }
/* PayPal: two-tone text */
.pmeth.paypal {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #003087;
    font-family: Arial, sans-serif;
    font-style: normal;
}
.pmeth.paypal span { color: #009cde; }

/* Customer type toggle */
.sub-type-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}
.sub-type-btn {
    padding: 0.5rem 1.1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--c-muted, #a09caf);
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1.3;
}
.sub-type-btn + .sub-type-btn {
    border-left: 1px solid var(--c-rule, #e8e4de);
}
.sub-type-btn.active {
    background: var(--c-crimson, #8b1a1a);
    color: #fff;
}
.sub-type-btn:hover:not(.active) {
    background: var(--c-paper, #faf8f5);
    color: var(--c-ink, #16162a);
}

/* Invoice hint */
.sub-hint--invoice {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--c-muted, #a09caf);
    font-size: 0.8rem;
    margin: 0.25rem 0 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--c-paper, #faf8f5);
    border-radius: 6px;
    border: 1px solid var(--c-rule, #e8e4de);
}

/* Nav CTA */
.header-nav-link--cta {
    background: var(--c-crimson, #8b1a1a);
    color: #fff !important;
    border-radius: 6px;
    padding: 0.3rem 0.8rem !important;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: opacity .15s, transform .1s;
}
.header-nav-link--cta:hover { opacity: .88; transform: translateY(-1px); }
.header-nav-link--cta:active { transform: scale(.97); }

/* Mobile add-event (+) button */
.mobile-add-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--crimson, #8b1a2a);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--transition), transform .1s;
    box-shadow: 0 2px 8px rgba(139,26,42,0.35);
}
.mobile-add-btn:hover  { background: var(--crimson-light, #c0394a); }
.mobile-add-btn:active { transform: scale(.93); }

/* Page wrapper */
.sub-page { padding-bottom: 4rem; }

/* ── Event submission page layout ─────────────────────────────────────── */

.sub-page { background: var(--c-paper, #faf8f5); min-height: 70vh; }

/* Page header */
.sub-page-header {
    padding: 2.5rem 0 1.5rem;
    border-bottom: 1px solid var(--c-rule, #e8e4de);
    background: var(--c-card, #fff);
}
.sub-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-crimson, #8b1a1a);
    margin-bottom: 0.5rem;
}
.sub-page-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--c-ink, #16162a);
    margin: 0 0 0.5rem;
}
.sub-time-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.83rem;
    color: var(--c-muted, #a09caf);
    margin: 0;
}

/* Step bar */
.sub-steps-bar {
    background: var(--c-card, #fff);
    border-bottom: 1px solid var(--c-rule, #e8e4de);
    padding: 1rem 0;
}
.sub-steps {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
.sub-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sub-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--c-rule, #e8e4de);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-muted, #a09caf);
    flex-shrink: 0;
    transition: background .2s, border-color .2s, color .2s;
}
.sub-step--active .sub-step-num {
    background: var(--c-crimson, #8b1a1a);
    border-color: var(--c-crimson, #8b1a1a);
    color: #fff;
}
.sub-step--complete .sub-step-num {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.sub-step-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-muted, #a09caf);
    white-space: nowrap;
}
.sub-step--active .sub-step-label { color: var(--c-crimson, #8b1a1a); font-weight: 600; }
.sub-step--complete .sub-step-label { color: #16a34a; }
.sub-step-connector {
    flex: 1;
    height: 1px;
    background: var(--c-rule, #e8e4de);
    min-width: 2rem;
    margin: 0 0.75rem;
    transition: background .3s;
}
.sub-step-connector--done { background: #16a34a; }

/* Body two-column */
.sub-body { padding: 2.5rem 0 4rem; }
.sub-body-inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2.5rem;
    align-items: start;
}
.sub-main { min-width: 0; }
.sub-form { width: 100%; }

/* Numbered sections */
.sub-section {
    background: var(--c-card, #fff);
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}
.sub-section-hd {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.sub-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--c-paper, #faf8f5);
    border: 1px solid var(--c-rule, #e8e4de);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink, #16162a);
    flex-shrink: 0;
}
.sub-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-ink, #16162a);
    margin: 0;
}

/* Payment section in sidebar */
.sub-pay-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
    color: var(--c-muted, #a09caf);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.sub-pay-or::before,
.sub-pay-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-rule, #e8e4de);
}
.sub-paypal-wrap { /* PayPal SDK container */ }
.sub-ssl-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--c-muted, #a09caf);
    margin: 0.75rem 0 0;
    line-height: 1.5;
}

/* "Next step" mobile navigation buttons */
.sub-next-btn {
    display: none; /* shown only on mobile via media query */
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--c-crimson, #8b1a1a);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.sub-next-btn:hover { opacity: .88; }
.sub-next-btn:active { transform: scale(.98); }

/* Sidebar order card */
.sub-sidebar { position: sticky; top: 5rem; }
.sub-order-card {
    background: var(--c-card, #fff);
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(22,22,42,.06);
}
.sub-order-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c-ink, #16162a);
    margin: 0 0 1.25rem;
}
.sub-order-product {
    text-align: center;
    padding: 1rem 0 0.5rem;
}
.sub-order-product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--c-paper, #faf8f5);
    border: 1px solid var(--c-rule, #e8e4de);
    color: var(--c-ink, #16162a);
    margin-bottom: 0.75rem;
}
.sub-order-product-name {
    font-size: 0.85rem;
    color: var(--c-muted, #a09caf);
    margin: 0 0 0.4rem;
}
.sub-order-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--c-ink, #16162a);
    letter-spacing: -.03em;
    margin: 0 0 0.2rem;
}
.sub-order-price-label {
    font-size: 0.78rem;
    color: var(--c-muted, #a09caf);
    margin: 0;
}
.sub-order-divider {
    border: none;
    border-top: 1px solid var(--c-rule, #e8e4de);
    margin: 1rem 0;
}
.sub-order-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.sub-order-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--c-ink, #16162a);
    line-height: 1.4;
}
.sub-order-benefits li svg { flex-shrink: 0; margin-top: 1px; }
.sub-order-features-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-muted, #a09caf);
    margin: 0 0 0.6rem;
}
.sub-order-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.sub-order-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--c-ink, #16162a);
    line-height: 1.4;
}
.sub-order-features li svg { flex-shrink: 0; margin-top: 1px; color: var(--c-muted, #a09caf); }
.sub-order-accepted-label {
    font-size: 0.75rem;
    color: var(--c-muted, #a09caf);
    margin: 0 0 0.4rem;
}
.sub-order-payment-icons {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.sub-sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 55px;
    padding: 0 1rem;
    background: #15803d;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
    margin-top: 0.25rem;
}
.sub-sidebar-cta:hover { background: #166534; }
.sub-sidebar-cta:active { transform: scale(.98); }
.sub-sidebar-cta:disabled { opacity: .5; cursor: not-allowed; }

/* Payment buttons row — side by side on desktop */
.sub-pay-row {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    margin-top: 0.25rem;
}
.sub-pay-row .sub-sidebar-cta {
    flex: 1;
    margin-top: 0;
}
.sub-pay-row #paypal-button-container {
    flex: 1;
}

/* PayPal SDK container */
#paypal-button-container,
#paypal-button-container-sidebar {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

/* Stack on mobile */
@media (max-width: 560px) {
    .sub-pay-row {
        flex-direction: column;
    }
}

/* Coffee callout box */
.sub-coffee-callout {
    background: linear-gradient(135deg, #fdf6ec 0%, #fef9f2 100%);
    border: 1px solid #f0d9b5;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.sub-coffee-callout-hook {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #92400e;
    margin-bottom: 0.4rem;
}
.sub-coffee-callout-body {
    font-size: 0.83rem;
    color: #78350f;
    line-height: 1.55;
    margin: 0;
}

/* Trust bar */
.sub-trust-bar {
    border-top: 1px solid var(--c-rule, #e8e4de);
    padding: 1.75rem 0;
    background: var(--c-card, #fff);
}
.sub-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.sub-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--c-muted, #a09caf);
}
.sub-trust-item svg { flex-shrink: 0; margin-top: 1px; }
.sub-trust-item strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-ink, #16162a);
    margin-bottom: 0.15rem;
}
.sub-trust-item p {
    font-size: 0.78rem;
    color: var(--c-muted, #a09caf);
    margin: 0;
    line-height: 1.4;
}

/* Alert */
.sub-alert-error {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.sub-fieldset {
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.75rem;
    background: var(--c-card, #fff);
}
.sub-legend {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-muted, #a09caf);
    padding: 0 0.4rem;
}
.sub-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.sub-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.1rem; }
.sub-field:last-child { margin-bottom: 0; }
.sub-field label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--c-ink, #16162a);
}
.sub-field input,
.sub-field select,
.sub-field textarea {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 8px;
    background: var(--c-paper, #faf8f5);
    color: var(--c-ink, #16162a);
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.sub-field input:focus,
.sub-field select:focus,
.sub-field textarea:focus {
    outline: none;
    border-color: var(--c-crimson, #8b1a1a);
    box-shadow: 0 0 0 3px rgba(139,26,26,.1);
    background: var(--c-card, #fff);
}
.sub-field textarea { resize: vertical; min-height: 80px; }
.sub-hint {
    font-size: 0.78rem;
    color: var(--c-muted, #a09caf);
    margin: 0;
}
.sub-field-error {
    font-size: 0.78rem;
    color: #dc2626;
    margin: 0;
}
.sub-field.has-error input,
.sub-field.has-error select,
.sub-field.has-error textarea {
    border-color: #f87171;
}
.req { color: var(--c-crimson, #8b1a1a); }

/* Lang tabs */
.sub-lang-tabs-wrap { margin-bottom: 0; }
.sub-lang-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--c-rule, #e8e4de);
    padding-bottom: 0;
}
.sub-lang-tab {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 0.35rem 0.8rem 0.45rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--c-muted, #a09caf);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
    border-radius: 0;
}
.sub-lang-tab.active,
.sub-lang-tab:hover {
    color: var(--c-ink, #16162a);
    border-bottom-color: var(--c-crimson, #8b1a1a);
}
.sub-lang-panel { display: none; }
.sub-lang-panel.active { display: block; }

/* Payment options */
.sub-fieldset--payment .sub-payment-options {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
}
.sub-payment-card {
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 10px;
    padding: 1.25rem;
    background: var(--c-paper, #faf8f5);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.sub-payment-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--c-ink, #16162a);
}
.sub-card-badges { display: flex; gap: 0.3rem; margin-left: auto; }
.sub-payment-card-desc {
    font-size: 0.8rem;
    color: var(--c-muted, #a09caf);
    line-height: 1.5;
    margin: 0;
}
.sub-payment-or {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-muted, #a09caf);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sub-btn-stripe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--c-ink, #16162a);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    width: 100%;
    margin-top: auto;
}
.sub-btn-stripe:hover { opacity: .88; }
.sub-btn-stripe:active { transform: scale(.98); }
.sub-btn-stripe:disabled { opacity: .5; cursor: not-allowed; }

.sub-paypal-error {
    font-size: 0.82rem;
    color: #dc2626;
    padding: 0.4rem 0;
}
.sub-tos {
    font-size: 0.78rem;
    color: var(--c-muted, #a09caf);
    margin-top: 1rem;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Result pages */
.sub-result-page { padding: 4rem 0 6rem; }
.sub-result-card {
    max-width: 520px;
    margin: 0 auto;
    background: var(--c-card, #fff);
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(22,22,42,.06);
}
.sub-result-icon { margin-bottom: 1.25rem; }
.sub-result-icon svg { display: inline-block; }
.sub-result-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--c-ink, #16162a);
    margin-bottom: 0.75rem;
}
.sub-result-body {
    font-size: 0.95rem;
    color: var(--c-muted, #a09caf);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}
.sub-result-summary {
    background: var(--c-paper, #faf8f5);
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    text-align: left;
}
.sub-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--c-rule, #e8e4de);
    font-size: 0.88rem;
}
.sub-result-row:last-child { border-bottom: none; }
.sub-result-row span { color: var(--c-muted, #a09caf); }
.sub-result-paid { color: #16a34a; }
.sub-result-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.sub-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--c-crimson, #8b1a1a);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: opacity .15s, transform .1s;
}
.sub-btn-primary:hover { opacity: .88; color: #fff; transform: translateY(-1px); }
.sub-btn-secondary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--c-ink, #16162a);
    text-decoration: none;
    border: 1px solid var(--c-rule, #e8e4de);
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}
.sub-btn-secondary:hover { border-color: var(--c-ink, #16162a); background: var(--c-paper, #faf8f5); }

/* Responsive */
@media (max-width: 960px) {
    .sub-body-inner { grid-template-columns: 1fr; }
    .sub-sidebar { position: static; }
    .sub-order-card { max-width: 560px; }
}
@media (max-width: 720px) {
    /* Mobile: show one section at a time */
    .sub-next-btn { display: block; }

    /* Step bar — circles only, no labels */
    .sub-steps-bar { padding: 0.65rem 0; }
    .sub-step-label { display: none; }
    .sub-step-num {
        width: 24px;
        height: 24px;
        font-size: 0.72rem;
    }
    .sub-step-connector {
        min-width: 0;
        margin: 0 0.4rem;
    }

    /* Hide sections not matching current step (JS sets data-step on .sub-page) */
    .sub-page[data-step="1"] .sub-section:nth-of-type(2),
    .sub-page[data-step="1"] .sub-section:nth-of-type(3) { display: none; }

    .sub-page[data-step="2"] .sub-section:nth-of-type(1),
    .sub-page[data-step="2"] .sub-section:nth-of-type(3) { display: none; }

    .sub-page[data-step="3"] .sub-section:nth-of-type(1),
    .sub-page[data-step="3"] .sub-section:nth-of-type(2) { display: none; }

    /* Sidebar (order card with benefits) always visible on mobile, stacked below */
    .sub-sidebar { display: block !important; }
    .sub-order-card { max-width: 100%; margin-top: 1rem; }

    .sub-page-header { padding: 1.25rem 0 0.75rem; }
    .sub-body { padding: 1.25rem 0 2.5rem; }
    .sub-section { padding: 1.1rem 1rem; }
    .sub-row { grid-template-columns: 1fr; }
    .sub-result-card { padding: 1.75rem 1.25rem; }
    .sub-result-title { font-size: 1.6rem; }
}
@media (min-width: 721px) {
    /* Desktop: all sections always visible regardless of data-step */
    .sub-page[data-step] .sub-section,
    .sub-page[data-step] .sub-sidebar { display: revert; }
}

/* Dark mode adjustments */
.dark .sub-page-header,
.dark .sub-steps-bar,
.dark .sub-trust-bar { background: var(--c-card, #1e1e2e); border-color: var(--c-rule, #2a2a3e); }
.dark .sub-page { background: var(--c-paper, #111118); }
.dark .sub-section,
.dark .sub-order-card,
.dark .sub-result-card {
    background: var(--c-card, #1e1e2e);
    border-color: var(--c-rule, #2a2a3e);
}
.dark .sub-section-icon { background: #111118; border-color: var(--c-rule, #2a2a3e); }
.dark .sub-order-product-icon { background: #111118; border-color: var(--c-rule, #2a2a3e); }
.dark .sub-pay-or { color: var(--c-muted, #a09caf); }
.dark .sub-field input,
.dark .sub-field select,
.dark .sub-field textarea {
    background: #111118;
    color: var(--c-ink, #e8e4de);
    border-color: var(--c-rule, #2a2a3e);
}
.dark .sub-result-summary { background: #111118; border-color: var(--c-rule, #2a2a3e); }
.dark .sub-coffee-callout { background: linear-gradient(135deg, #1e1108 0%, #231506 100%); border-color: #4a2e10; }
.dark .sub-coffee-callout-hook { color: #fbbf70; }
.dark .sub-coffee-callout-body { color: #d4a36a; }
.dark .sub-alert-error { background: #1f0000; border-color: #7f1d1d; color: #fca5a5; }

/* ── Anti-spam honeypot — off-screen, invisible to real users ─────────── */
/* Uses position+translate rather than display:none so bots that skip hidden
   elements still see them as normal form fields and fill them.             */
.sub-hp-trap {
    position: absolute;
    left: -99999px;
    top: -99999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Cookie Consent — Banner, Modal, Toggles, Toast
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared button primitives ─────────────────────────────────────────────── */
.consent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius, 0.375rem);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    border: 1.5px solid transparent;
    white-space: nowrap;
    line-height: 1.4;
    font-family: inherit;
}
.consent-btn:focus-visible {
    outline: 2px solid var(--crimson);
    outline-offset: 2px;
}
/* Ghost — used on dark banner background */
.consent-btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.9);
}
.consent-btn--ghost:hover {
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}
/* Text-only — secondary action */
.consent-btn--text {
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.65);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.consent-btn--text:hover { color: #fff; }
/* Primary — crimson fill */
.consent-btn--primary {
    background: var(--crimson);
    border-color: var(--crimson);
    color: #fff;
}
.consent-btn--primary:hover { opacity: 0.88; }
/* Outline — for modal "Save" (on white card bg) */
.consent-btn--outline {
    background: transparent;
    border-color: var(--border-color, #ddd);
    color: var(--ink);
}
.consent-btn--outline:hover {
    border-color: var(--crimson);
    color: var(--crimson);
}
/* Modal ghost override (on white bg) */
.consent-modal .consent-btn--ghost {
    border-color: var(--border-color, #ddd);
    color: var(--ink-soft);
}
.consent-modal .consent-btn--ghost:hover {
    border-color: var(--crimson);
    color: var(--crimson);
}

/* ── Banner ───────────────────────────────────────────────────────────────── */
.consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #111;
    color: #fff;
    padding: 0.875rem 1.5rem;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.22);
    animation: consentSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.consent-banner--out {
    animation: consentSlideDown 0.28s ease forwards;
}
.consent-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.consent-banner__text {
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.8);
    margin: 0;
}
.consent-banner__text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.consent-banner__text a:hover { opacity: 0.8; }
.consent-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .consent-banner { padding: 1rem; }
    .consent-banner__inner { flex-direction: column; align-items: stretch; gap: 0.875rem; }
    .consent-banner__text { text-align: center; }
    .consent-banner__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .consent-banner__actions .consent-btn {
        justify-content: center;
    }
    .consent-banner__actions .consent-btn--primary {
        grid-column: 1 / -1;
    }
    .consent-banner__actions .consent-btn--text {
        border: 1.5px solid rgba(255,255,255,0.2);
        color: rgba(255,255,255,0.8);
        padding: 0.5rem 1rem;
        border-radius: var(--radius, 0.375rem);
    }
    .consent-banner__actions .consent-btn--text:hover {
        border-color: rgba(255,255,255,0.5);
        color: #fff;
    }
}

/* ── Modal overlay + box ─────────────────────────────────────────────────── */
.consent-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(0,0,0,0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: consentFadeIn 0.2s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.consent-modal--out { animation: consentFadeOut 0.22s ease forwards; }
.consent-modal__box {
    background: var(--bg-card, #fff);
    border-radius: 1rem;
    width: 100%;
    max-width: 520px;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    animation: consentScaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.consent-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0;
    flex-shrink: 0;
}
.consent-modal__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.consent-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    font-family: inherit;
}
.consent-modal__close:hover {
    color: var(--ink);
    background: var(--bg-muted, #f5f5f5);
}
.consent-modal__close:focus-visible {
    outline: 2px solid var(--crimson);
    outline-offset: 2px;
}

/* ── Modal body — categories ─────────────────────────────────────────────── */
.consent-modal__body {
    padding: 1rem 1.5rem 0.5rem;
    overflow-y: auto;
    flex: 1;
}
.consent-modal__category {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color, #eee);
}
.consent-modal__category:first-child { padding-top: 0.5rem; }
.consent-modal__category:last-child  { border-bottom: none; padding-bottom: 0.25rem; }
.consent-modal__cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.consent-modal__cat-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}
.consent-modal__cat-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    background: var(--bg-muted, #f0f0f0);
    padding: 0.2rem 0.55rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}
.consent-modal__cat-desc {
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0 0 0.5rem;
}
.consent-modal__cat-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.consent-modal__service-tag {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--crimson-bg, #fdf0f0);
    border: 1px solid var(--border-color, #eee);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
}

/* ── Modal footer ────────────────────────────────────────────────────────── */
.consent-modal__footer {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--border-color, #eee);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .consent-modal__footer {
        flex-direction: column-reverse;
    }
    .consent-modal__footer .consent-btn {
        width: 100%;
    }
}
body.consent-modal-open { overflow: hidden; }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.consent-toggle {
    position: relative;
    display: inline-block;
    width: 2.625rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
}
.consent-toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.consent-toggle__track {
    position: absolute;
    inset: 0;
    background: var(--border-color, #ccc);
    border-radius: 1rem;
    transition: background 0.2s;
}
.consent-toggle__track::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 1.125rem;
    height: 1.125rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.consent-toggle__input:checked + .consent-toggle__track {
    background: var(--crimson);
}
.consent-toggle__input:checked + .consent-toggle__track::after {
    transform: translateX(1.125rem);
}
.consent-toggle__input:focus-visible + .consent-toggle__track {
    outline: 2px solid var(--crimson);
    outline-offset: 2px;
    border-radius: 1rem;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.consent-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: #111;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.55rem 1.25rem;
    border-radius: 2rem;
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
}
.consent-toast--in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Marketing-denied state — suppress push UI ───────────────────────────── */
/* consent.js adds/removes this class; CSS hides push elements immediately   */
body.clt-no-marketing #footerPushWrap,
body.clt-no-marketing #push-prompt {
    display: none !important;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes consentSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes consentSlideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}
@keyframes consentFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes consentFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes consentScaleIn {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* =============================================================================
   Facebook / Social Share Components
   ============================================================================= */

/* ── Facebook Share button — primary blue CTA ───────────────────────────────
   Used below the calendar card (day view), on holidays page, success page.
   Opens fb dialog via window.open popup; no SDK required.
   ─────────────────────────────────────────────────────────────────────────── */
.btn-fb-share {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    background: #1877F2;
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    box-shadow: 0 1px 4px rgba(24,119,242,0.25);
    white-space: nowrap;
}
.btn-fb-share:hover {
    background: #166fe5;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(24,119,242,0.35);
    text-decoration: none;
}
.btn-fb-share:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(24,119,242,0.2);
}
.btn-fb-share svg { flex-shrink: 0; }

/* ── Share row — wraps share button + optional note ────────────────────────── */
.fb-share-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Facebook share block on success page ───────────────────────────────────── */
.fb-share-block {
    background: color-mix(in srgb, #1877F2 6%, transparent);
    border: 1px solid color-mix(in srgb, #1877F2 20%, transparent);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
}
.fb-share-block__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.35rem;
}
.fb-share-block__sub {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

html.dark .fb-share-block {
    background: color-mix(in srgb, #1877F2 10%, transparent);
    border-color: color-mix(in srgb, #1877F2 28%, transparent);
}

/* ── Footer Facebook follow link ─────────────────────────────────────────────
   Sits alongside push/install/cookie buttons in the footer brand column.
   ─────────────────────────────────────────────────────────────────────────── */
.footer-fb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.375rem 0.85rem;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, #1877F2 35%, transparent);
    background: color-mix(in srgb, #1877F2 7%, transparent);
    color: #1877F2;
    font-size: 0.775rem;
    font-weight: 600;
    font-family: var(--font-sans);
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    cursor: pointer;
    white-space: nowrap;
}
.footer-fb-link:hover {
    background: #1877F2;
    border-color: #1877F2;
    color: #fff;
    text-decoration: none;
}
html.dark .footer-fb-link {
    border-color: color-mix(in srgb, #1877F2 45%, transparent);
    background: color-mix(in srgb, #1877F2 12%, transparent);
}

/* ── App Store button — Calendar.lt iOS app ──────────────────────────────────
   Footer brand column, the /app page (--large) and the admin preview. The link is
   set in Admin › Nustatymai; while it is empty the button is greyed out, disabled
   and carries a red ribbon at 45° ("Jau greitai").
   ─────────────────────────────────────────────────────────────────────────── */
.footer-appstore-wrap {
    margin-top: 1.25rem;
}
.appstore-btn {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.5rem;
    padding: 0.45rem 3.75rem 0.45rem 0.85rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    line-height: 1.1;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
a.appstore-btn:hover,
a.appstore-btn:focus-visible {
    background: var(--crimson);
    border-color: var(--crimson);
    color: #fff;
    text-decoration: none;
}
.appstore-btn__icon {
    flex-shrink: 0;
}
.appstore-btn__text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    white-space: nowrap;
}
.appstore-btn__small {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.appstore-btn__big {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.appstore-btn--large {
    min-height: 4rem;
    padding: 0.55rem 4.35rem 0.55rem 1rem;
    gap: 0.75rem;
    border-radius: var(--radius-xl);
}
.appstore-btn--large .appstore-btn__icon {
    width: 26px;
    height: 26px;
}
.appstore-btn--large .appstore-btn__small { font-size: 0.75rem; }
.appstore-btn--large .appstore-btn__big   { font-size: 1.35rem; }

/* No App Store link yet: greyed out, disabled, red ribbon at 45°. */
.appstore-btn--soon,
.appstore-btn--soon:disabled {
    background: var(--bg-alt);
    border-color: var(--border);
    color: var(--ink-muted);
    opacity: 1;
    cursor: not-allowed;
}
.appstore-btn--soon .appstore-btn__icon,
.appstore-btn--soon .appstore-btn__text {
    opacity: 0.55;
}
/* The ribbon box is the square at the right end of the button (as wide as the button is
   tall); its label runs along that square's diagonal at 45°, which is the longest 45° line
   that fits, so the text stays readable at any button height. */
.appstore-btn__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 1 / 1;
    pointer-events: none;
}
.appstore-btn__ribbon > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    padding: 0.18rem 0;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--crimson-light);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.appstore-btn--large .appstore-btn__ribbon > span {
    font-size: 0.58rem;
    padding: 0.2rem 0;
}

/* /app page: button row under the lead */
.app-hero-actions {
    margin-top: 1.25rem;
}

/* /app and /app/privacy: the content-page look of the API docs page (api-docs.php keeps
   these rules inline for itself), scoped so that no other page changes. */
.app-page.apidoc-section { padding: 3rem 0 5rem; }
.app-page .apidoc-hero { margin-bottom: 3rem; border-bottom: 1px solid var(--border); padding-bottom: 2rem; }
.app-page .apidoc-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--ink); margin-bottom: 0.75rem; letter-spacing: -0.02em; }
.app-page .apidoc-lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 620px; line-height: 1.7; margin-bottom: 1rem; }
.app-page .apidoc-note { font-size: 0.875rem; color: var(--ink-muted); margin-top: 0.75rem; }
.app-page .apidoc-block { margin-bottom: 3rem; }
.app-page .apidoc-block h2 { font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.app-page .apidoc-h3 { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.app-page .apidoc-block p,
.app-page .apidoc-block li { line-height: 1.7; }
.app-page .apidoc-block ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem; }
.app-page .apidoc-block li { margin-bottom: 0.3rem; }
.app-page .apidoc-block li::marker { color: var(--crimson); }
.app-page .apidoc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: 1rem; }
.app-page .apidoc-table td { padding: 0.5rem 0.75rem; border: 1px solid var(--border); color: var(--ink); vertical-align: top; }
.app-page .apidoc-block code { background: var(--bg-alt); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.85em; word-break: break-all; }