/* ======================================================================
   Emma & Patrick — Wedding theme styles
   Loaded after Blocksy parent so this file's selectors take precedence.
   ====================================================================== */

:root {
  --blush: #FEEDF5;
  --ivory: #FAF8F9;
  --champagne: #FAEFE5;
  --light-brown: #E6DDDA;
  --sage: #C3CABF;
  --sage-deep: #8a957f;
  --bark: #5a4f47;
  --ink: #2d2620;
  --rule: rgba(90, 79, 71, 0.18);

  --f-display: 'Great Vibes', cursive;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans: 'Lato', sans-serif;

  --nav-height: 88px;
  --radius: 8px;
}

/* ============ RESET / BLOCKSY OVERRIDES ============ */
html { scroll-behavior: smooth; }
body.font-classic, body.font-editorial, body.font-garamond, body.font-sans,
body {
  background: var(--ivory) !important;
  color: var(--ink);
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* Inline SVG icons rendered via epw_icon_render() / [epw_icon] shortcode. */
.epw-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* Blocksy wraps its main content in a few elements we need to neutralise so
   our sections sit edge-to-edge. */
#main-container,
.ct-main-container,
#site-main,
.ct-container,
.entry-content {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide Blocksy's parent header / footer if anything slips through. */
header[data-id="header"],
.ct-header,
footer[data-id="footer"],
.ct-footer { display: none !important; }

/* Push non-hero main content below the fixed nav. */
body:not(.has-hero) #site-main { padding-top: var(--nav-height); }

/* ============ TYPOGRAPHY VARIANTS ============ */
body.font-classic {
  --f-display: 'Great Vibes', cursive;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans: 'Lato', sans-serif;
}
body.font-editorial {
  --f-display: 'Great Vibes', cursive;
  --f-serif: 'Playfair Display', Georgia, serif;
  --f-sans: 'Lato', sans-serif;
}
body.font-garamond {
  --f-display: 'Great Vibes', cursive;
  --f-serif: 'EB Garamond', Georgia, serif;
  --f-sans: 'Lato', sans-serif;
}
/* Sans preset — repoints --f-serif at the same Lato stack used by --f-sans
   so every body-text rule and italic accent (numbers, success cards, leads)
   renders in sans. The Great Vibes display script is preserved. */
body.font-sans {
  --f-display: 'Great Vibes', cursive;
  --f-serif: 'Lato', sans-serif;
  --f-sans: 'Lato', sans-serif;
}

/* ============ NAV ============ */
nav.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 56px;
  z-index: 100;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
nav.topnav:not(.at-top),
nav.topnav.scrolled {
  background: rgba(250, 248, 249, 0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}
nav.topnav.at-top.scrolled {
  background: rgba(250, 248, 249, 0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}
nav.topnav .monogram {
  font-family: var(--f-display);
  font-size: 36px;
  color: var(--bark);
  line-height: 1;
  text-decoration: none;
  /* Optical correction: Great Vibes has tall ascenders, so the glyph centre
     sits above the geometric centre of its line-box. Nudge down to compensate. */
  transform: translateY(4px);
}
nav.topnav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.topnav a {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s, border-color 0.3s;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
nav.topnav a:hover { color: var(--ink); }
nav.topnav a.active { border-bottom-color: var(--sage-deep); color: var(--ink); }

/* Hamburger */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px; height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--ivory);
  z-index: 90;
  padding: 96px 32px 40px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  font-family: var(--f-serif);
  font-size: 26px;
  color: var(--bark);
  text-decoration: none;
  font-style: italic;
  padding: 6px 0;
  line-height: 1.2;
}
.mobile-menu .divider-dot {
  width: 5px; height: 5px;
}

/* Lock body scroll while the mobile menu is open. */
html.menu-open,
body.menu-open {
  overflow: hidden;
  height: 100%;
}

/* Force the top nav fully opaque while the mobile menu is open so the menu
   items underneath don't bleed through the translucent / at-top nav. */
body.menu-open nav.topnav,
body.menu-open nav.topnav.at-top {
  background: var(--ivory);
  backdrop-filter: none;
  border-bottom-color: var(--rule);
}

/* ============ HERO ============ */
.hero {
  height: 100vh;
  min-height: 760px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(170deg, var(--blush) 0%, var(--champagne) 45%, var(--light-brown) 100%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(254, 237, 245, 0.6), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(195, 202, 191, 0.4), transparent 55%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--bark);
  padding: 0 24px;
}
.hero-eyebrow {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-bottom: 32px;
  color: var(--bark);
  font-weight: 500;
}
.hero-eyebrow .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--sage-deep);
  transform: rotate(45deg);
  margin: 0 14px;
  vertical-align: middle;
}
.hero h1 {
  font-family: var(--f-display);
  font-size: clamp(64px, 13vw, 190px);
  word-break: break-word;
  font-weight: 400;
  line-height: 0.95;
  color: var(--bark);
  letter-spacing: 0.005em;
  margin: 0;
}
.hero h1 .amp {
  display: inline-block;
  margin: 0 -0.05em;
  font-size: 0.85em;
  transform: translateY(0.05em);
}
.hero-meta {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 22px;
  margin-top: 24px;
  letter-spacing: 0.04em;
  color: var(--bark);
}
.hero-meta strong {
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 14px;
  display: block;
  margin-top: 12px;
  color: var(--bark);
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 44px auto;
  max-width: 360px;
}
.hero-divider .line { flex: 1; height: 1px; background: rgba(90, 79, 71, 0.3); }
.hero-divider .diamond {
  width: 6px; height: 6px;
  background: var(--bark);
  transform: rotate(45deg);
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 36px;
}
.cd-cell { text-align: center; min-width: 84px; }
.cd-num {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--bark);
}
.cd-label {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-top: 12px;
  color: var(--bark);
  font-weight: 500;
}

.scroll-cue {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bark);
  opacity: 0.7;
  z-index: 3;
}
.scroll-cue::after {
  content: '';
  display: block;
  width: 1px; height: 28px;
  background: var(--bark);
  margin: 12px auto 0;
  opacity: 0.5;
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.2; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 0.7; }
}

/* ============ SECTIONS ============ */
section.std,
#welcome,
[data-page-section] {
  padding: 140px 56px;
  max-width: 1280px;
  margin: 0 auto;
}
.section-alt,
.section-blush,
.section-sage,
.program-section {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}
.section-alt   { background: var(--champagne); }
.section-blush { background: var(--blush); }
.section-sage  { background: var(--sage); color: var(--bark); }
.program-section { background: linear-gradient(to bottom, var(--blush) 0%, var(--champagne) 100%); }
.section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 56px;
}

/* When a [data-page-section] has the alt class, the inner should set padding,
   not the outer (or padding stacks). The weather sections also use
   .section-inner for their own bespoke padding, so they opt in here too. */
.section-alt[data-page-section],
.section-blush[data-page-section],
.section-sage[data-page-section],
.program-section[data-page-section],
.weather-now[data-page-section],
.weather-seasonal[data-page-section],
.game-stage[data-page-section],
.game-board[data-page-section],
.home-games[data-page-section] {
  padding: 0;
}

.section-eyebrow {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bark);
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
}
.section-title {
  font-family: var(--f-display);
  font-size: clamp(44px, 8vw, 92px);
  font-weight: 400;
  color: var(--bark);
  text-align: center;
  line-height: 1;
  margin: 0 0 32px;
}
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 64px;
  max-width: 220px;
}
.section-divider .line { flex: 1; height: 0.5px; background: var(--rule); }
.section-divider .diamond {
  width: 5px; height: 5px;
  background: var(--sage-deep);
  transform: rotate(45deg);
}

/* Lead paragraphs */
.lead,
.lead p {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  font-style: italic;
  font-size: 22px;
  line-height: 1.7;
  color: var(--bark);
}
.lead p:last-child { margin-bottom: 0; }

/* Body wrapper for generic page.php content */
.page-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.75;
  color: var(--bark);
}
.page-body p { margin-bottom: 18px; }
.page-body h2,
.page-body h3 {
  font-family: var(--f-display);
  color: var(--bark);
  font-weight: 400;
  line-height: 1.05;
  margin: 48px 0 14px;
}
.page-body h2 { font-size: 56px; }
.page-body h3 { font-size: 42px; }
.page-body a {
  color: var(--bark);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.page-body a:hover { text-decoration-thickness: 1px; }

/* Generic page header (page.php fallback) */
.page-header {
  padding: 120px 56px 0;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.page-header-inner { max-width: 880px; margin: 0 auto; }

/* Tighter top/bottom padding when a content section sits directly under the
   generic page header — the default template was rendering with ~180px of
   empty space between the divider and the first paragraph. */
.page-header + section.std {
  padding-top: 40px;
  padding-bottom: 100px;
}
.page-header + .section-alt > .section-inner,
.page-header + .section-blush > .section-inner,
.page-header + .section-sage > .section-inner {
  padding-top: 40px;
  padding-bottom: 100px;
}

/* The first block inside a generic .page-body shouldn't add its own top
   margin — the section's padding-top already provides the rhythm. Without
   this, an opening <h2> stacks its 48px margin on top of the section's
   padding and the gap balloons. */
.page-body > *:first-child { margin-top: 0; }

/* Optional closing block rendered above the Next CTA on any Page.
   Filled by whatever the admin writes *after* the More block in the main
   editor — supports any block (heading, paragraph, list, gallery, …).
   The outer .page-outro carries the background variant (matching the
   page's section_alt) so the colour continues from the section above.
   .page-outro-inner provides the 1280px max-width / section-style padding;
   text-style children inside it are constrained to a 720px reading
   column so paragraphs and headings stay readable. */
.page-outro { margin: 0; }
.page-outro-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 56px 120px;
  text-align: center;
  color: var(--bark);
}
.page-outro-inner > p,
.page-outro-inner > ul,
.page-outro-inner > ol,
.page-outro-inner > blockquote {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.page-outro-inner h1,
.page-outro-inner h2,
.page-outro-inner h3,
.page-outro-inner h4 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--bark);
  text-align: center;
  line-height: 1;
  margin: 0 0 32px;
}
.page-outro-inner h1,
.page-outro-inner h2 { font-size: clamp(44px, 8vw, 92px); }
.page-outro-inner h3 { font-size: clamp(44px, 6vw, 76px); }
.page-outro-inner h4 { font-size: clamp(28px, 4vw, 40px); }
.page-outro-inner p {
  margin: 0 auto 18px;
  max-width: 720px;
  font-style: italic;
  font-size: 22px;
  line-height: 1.7;
  text-align: center;
}
.page-outro-inner p:last-child { margin-bottom: 0; }
.page-outro-inner a {
  color: var(--bark);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.page-outro-inner a:hover { text-decoration-thickness: 1px; }
.page-outro-inner .gallery-grid,
.page-outro-inner .wp-block-gallery {
  margin-top: 32px;
  margin-bottom: 0;
}
.page-outro + .page-cta { padding-top: 60px; }

/* Optional bottom CTA on page.php */
.page-cta {
  text-align: center;
  padding: 80px 24px 120px;
  max-width: 720px;
  margin: 0 auto;
}
.page-cta .eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 14px;
}
.page-cta h3 {
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--bark);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 20px;
}
.page-cta a {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bark);
  text-decoration: none;
  border-bottom: 1px solid var(--bark);
  padding-bottom: 4px;
}

/* ============ HIGHLIGHT CARDS (front page) ============ */
.highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
}
.hl-card {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 40px 32px;
  text-align: center;
}
.hl-card .hl-icon {
  font-family: var(--f-display);
  font-size: 42px;
  color: var(--sage-deep);
  line-height: 1;
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 56px;
}
.hl-card .hl-icon svg { display: block; }
.hl-card h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--bark);
  margin: 0 0 10px;
}
.hl-card p {
  font-size: 16px;
  color: var(--bark);
  line-height: 1.65;
  margin: 0;
}
.hl-card a,
.travel-card a,
.lead a {
  color: var(--bark);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.hl-card a:hover,
.travel-card a:hover,
.lead a:hover { text-decoration-thickness: 1px; }

/* ============ NAV HUB (front page) ============ */
.nav-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 1280px;
  margin: 0 auto;
}
.nav-hub-card {
  position: relative;
  background: var(--ivory);
  padding: 56px 36px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.25s ease;
}
.nav-hub-card:has(.cta) { cursor: pointer; }
.nav-hub-card:has(.cta):hover { background: var(--blush); }
.nav-hub-card:has(.cta):hover .cta { opacity: 0.7; }
.nav-hub-card .cta::after {
  content: '';
  position: absolute;
  inset: 0;
}
.nav-hub-num {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bark);
  margin-bottom: 26px;
}
.nav-hub-card h3 {
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 400;
  color: var(--bark);
  line-height: 1;
  margin: 0 0 20px;
}
.nav-hub-card p {
  font-size: 16px;
  color: var(--bark);
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 30ch;
}
.nav-hub-card .cta {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bark);
  text-decoration: none;
  border-bottom: 1px solid var(--bark);
  padding-bottom: 4px;
  margin-top: auto;
  transition: opacity 0.2s;
}
.nav-hub-card .cta:hover { opacity: 0.7; }
@media (max-width: 1080px) {
  .nav-hub-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ INFO GRID ============ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 1080px;
  margin: 0 auto;
}
.info-item {
  background: var(--ivory);
  padding: 36px 40px;
}
.info-item h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--bark);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.info-item h4 .num {
  font-family: var(--f-display);
  font-size: 30px;
  color: var(--sage-deep);
  margin-right: 12px;
  vertical-align: -2px;
}
.info-item p {
  color: var(--bark);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.info-item p + p { margin-top: 10px; }
.info-item a {
  color: var(--bark);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.info-item a:hover { text-decoration-thickness: 1px; }

/* ============ COLOR PALETTE ============ */
.palette-section {
  text-align: center;
  margin-top: 80px;
}
.palette-section h3 {
  font-family: var(--f-display);
  font-size: 48px;
  color: var(--bark);
  margin-bottom: 14px;
  line-height: 1;
  font-weight: 400;
}
.palette-section .lead-small {
  font-style: italic;
  color: var(--bark);
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
}
.palette-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
}
.palette-row.primary { margin-bottom: 32px; }
.palette-row.primary .swatch { flex: 0 0 200px; }
.palette-row.complement .swatch { flex: 0 0 160px; }
.swatch {
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  text-align: left;
}
.swatch .sw-name {
  font-family: var(--f-serif);
  font-size: 16px;
  color: var(--bark);
}
.swatch .sw-hex {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
  margin-top: 4px;
}
.sw-blush { background: var(--blush); }
.sw-ivory { background: var(--ivory); }
.sw-champ { background: var(--champagne); }
.sw-brown { background: var(--light-brown); }
.sw-sage  { background: var(--sage); }
.palette-label {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 18px;
}
/* Left-aligned variant: [epw_palette align="left"] */
.palette-section--left { text-align: left; }
.palette-section--left .lead-small { margin-left: 0; margin-right: 0; }
.palette-section--left .palette-row { justify-content: flex-start; margin-left: 0; margin-right: 0; }

/* ============ PROGRAM ============ */
.program-day { margin-bottom: 64px; }
.program-day:last-child { margin-bottom: 0; }
.program-day-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 24px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.program-day-name {
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--bark);
  line-height: 1;
}
.program-day-date {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.program-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}
.program-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 18px 0;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
}
.program-row:last-child { border-bottom: none; }
.program-time {
  font-family: var(--f-sans);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--bark);
  font-weight: 500;
}
.program-event {
  font-family: var(--f-serif);
  font-size: 22px;
  color: var(--bark);
}
.program-event small {
  display: block;
  font-style: italic;
  font-size: 16px;
  color: var(--bark);
  opacity: 0.8;
  margin-top: 4px;
  line-height: 1.5;
}
.program-event .emoji {
  margin-left: 6px;
  font-style: normal;
}

/* ============ TRAVEL ============ */
.travel-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.travel-card {
  background: var(--ivory);
  padding: 36px 32px;
  text-align: center;
  border: 1px solid var(--rule);
}
.travel-card .icon {
  font-family: var(--f-display);
  font-size: 44px;
  color: var(--sage-deep);
  line-height: 1;
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 56px;
}
.travel-card .icon svg { display: block; }
.travel-card h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--bark);
  margin: 0 0 10px;
}
.travel-card p {
  font-size: 15px;
  color: var(--bark);
  line-height: 1.65;
  margin: 0;
}
.travel-card .airports {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--bark);
  font-weight: 500;
}
.travel-outro {
  text-align: center;
  max-width: 720px;
  margin: 60px auto 0;
  font-style: italic;
  color: var(--bark);
}
.travel-outro p { margin: 0; }

/* Optional transfer cards */
.transfer-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 60px auto 0;
}
.transfer-card {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 32px;
  text-align: left;
}
.transfer-card .eyebrow {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bark);
  font-weight: 500;
  margin-bottom: 14px;
}
.transfer-card h4 {
  font-family: var(--f-display);
  font-size: 36px;
  color: var(--bark);
  font-weight: 400;
  margin: 0 0 12px;
  line-height: 1;
}
.transfer-card p { font-size: 16px; line-height: 1.65; color: var(--bark); }
.transfer-card .transfer-meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--f-sans);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--bark);
}
.transfer-card .transfer-meta li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.transfer-card .transfer-meta li:last-child { border-bottom: 0; }
.transfer-card .transfer-meta .tm-key {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  font-weight: 500;
  color: var(--bark);
}
.transfer-card .transfer-meta a {
  color: var(--bark);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.transfer-card .transfer-cta {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bark);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--bark);
  padding-bottom: 4px;
}

/* Transfer section wrapper (eyebrow / title / intro above the cards) */
.transfer-section {
  background: var(--ivory);
}
.transfer-section .section-inner { padding: 120px 56px; }
.transfer-section .lead {
  font-size: 22px;
  margin-bottom: 60px;
}

/* ============ TRAVEL COMPARISON TABLE ============ */
.travel-compare-wrap {
  max-width: 1280px;
  margin: 100px auto 0;
}
.travel-compare-title {
  font-family: var(--f-display);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 400;
  color: var(--bark);
  text-align: center;
  line-height: 1;
  margin: 0 0 32px;
}
.travel-compare-wrap .section-divider { margin-bottom: 48px; }

.travel-compare {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) repeat(var(--compare-cols, 3), minmax(0, 2fr));
  border: 1px solid var(--rule);
  background: var(--ivory);
  font-family: var(--f-sans);
}
.tc-row { display: contents; }

.tc-label,
.tc-cell {
  padding: 26px 28px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: var(--champagne);
  color: var(--bark);
}
.tc-row:first-child .tc-label,
.tc-row:first-child .tc-cell { border-top: 0; }
.tc-row > .tc-label { border-left: 0; }

.tc-label {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bark);
  display: flex;
  align-items: center;
}

/* Cells default to ivory so rows alternate against the champagne label column. */
.tc-cell { background: var(--ivory); font-size: 15px; line-height: 1.55; }

/* Top header row */
.tc-row--header .tc-label--corner { background: var(--sage); }
.tc-row--header .tc-cell--airport {
  background: var(--champagne);
  padding-top: 30px;
  padding-bottom: 30px;
}
.tc-airport-name {
  font-family: var(--f-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--bark);
  line-height: 1.05;
  margin-bottom: 6px;
}
.tc-airport-code {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bark);
}

/* Flygtider */
.tc-cell--times { font-size: 15px; }
.tc-time { display: flex; gap: 18px; align-items: baseline; }
.tc-time + .tc-time { margin-top: 8px; }
.tc-time-date {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bark);
  flex: 0 0 auto;
  min-width: 80px;
}
.tc-time-range { color: var(--bark); font-size: 15px; }

/* Pris */
.tc-cell--price { line-height: 1.55; }
.tc-price {
  font-family: var(--f-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--bark);
  line-height: 1;
  margin-bottom: 6px;
}
.tc-price-meta {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bark);
  margin-bottom: 16px;
}
.tc-baggage {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--bark);
}
.tc-baggage li { padding: 2px 0; }

/* Direktflyg — keep the decorative script "Ja" / "Nej" */
.tc-cell--direct em {
  font-family: var(--f-display);
  font-style: normal;
  color: var(--bark);
  font-size: 40px;
  line-height: 1;
}

/* Boka */
.tc-cell--book a {
  color: var(--bark);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--bark);
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.tc-cell--book em { font-style: normal; }

.travel-compare-note {
  text-align: center;
  font-size: 14px;
  color: var(--bark);
  margin: 24px 0 0;
}

/* ============ FEATURE (image + text) — dress, venue, etc. ============ */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
.feature-grid--reverse { direction: rtl; }
.feature-grid--reverse > * { direction: ltr; }

.feature-image {
  position: sticky;
  top: 100px;
}
.feature-image-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  display: block;
  border-radius: var(--radius);
}
.feature-image-placeholder {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--light-brown), var(--sage));
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.feature-image-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(254, 237, 245, 0.4), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(90, 79, 71, 0.25), transparent 60%);
}
.feature-image-placeholder::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 24px; left: 24px;
  font-family: var(--f-display);
  font-size: 32px;
  color: var(--ivory);
  opacity: 0.9;
}

.feature-text .pill {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  background: var(--ivory);
  padding: 8px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  margin-bottom: 22px;
}
.feature-text h2,
.feature-text h3 {
  font-family: var(--f-display);
  font-size: 64px;
  color: var(--bark);
  line-height: 1;
  margin: 0 0 24px;
  font-weight: 400;
}
.feature-text p { color: var(--bark); margin: 0 0 14px; font-size: 18px; line-height: 1.7; }
.feature-text a {
  color: var(--bark);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}
.feature-text a:hover { text-decoration-thickness: 1px; }

/* ============ GALLERY ============ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
.g-tile {
  background: linear-gradient(135deg, var(--light-brown), var(--sage));
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.g-tile::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at var(--gx, 30%) var(--gy, 30%), rgba(254, 237, 245, 0.45), transparent 55%),
    radial-gradient(ellipse at var(--gx2, 70%) var(--gy2, 70%), rgba(90, 79, 71, 0.3), transparent 60%);
  z-index: 0;
}
.g-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.g-tile--1 { grid-row: span 2; --gx: 20%; --gy: 30%; }
.g-tile--4 { grid-column: span 2; --gx: 50%; --gy: 20%; }
.g-tile--7 { grid-row: span 2; --gx: 70%; --gy: 50%; }
.g-tile--2 { --gx: 60%; }
.g-tile--3 { --gx: 40%; --gy: 60%; }
.g-tile--5 { --gx: 25%; --gy: 75%; }
.g-tile--6 { --gx: 80%; --gy: 30%; }
.g-tile--8 { --gx: 50%; --gy: 50%; }
.gallery-outro {
  text-align: center;
  font-style: italic;
  color: var(--bark);
  margin: 40px auto 0;
  font-size: 16px;
  max-width: 720px;
}

/* ============ PAGINATION ============ */
/* Styles WordPress paginate_links() output — used on the Bilder page by the
   MLA Gallery that lists previously submitted photos, and available to any
   other paginated archive that may be added later. Centered editorial row;
   current page sits on a sage-deep tile, links read as quiet sans labels
   with a soft hover border. */
.mla-nav-div,
.mla_nav_div,
.mla-nav-links,
.mla_nav_links,
.mla-paginate-links,
nav.pagination,
nav.navigation.pagination .nav-links,
.page-numbers-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 48px auto 16px;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark);
  background: transparent;
  border: 1px solid rgba(90, 79, 71, 0.4);
  text-decoration: none;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
a.page-numbers:hover,
a.page-numbers:focus {
  color: var(--ivory);
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  outline: none;
}
.page-numbers.current {
  color: var(--ivory);
  background: var(--bark);
  border-color: var(--bark);
}
.page-numbers.dots {
  border-color: transparent;
  letter-spacing: 0;
}
.page-numbers.prev,
.page-numbers.next {
  padding: 0 16px;
  letter-spacing: 0.24em;
}

/* ============ FOOTER ============ */
footer.site-footer {
  background: var(--bark);
  color: var(--ivory);
  padding: 80px 56px 40px;
  text-align: center;
}
footer.site-footer .monogram {
  font-family: var(--f-display);
  font-size: 80px;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--ivory);
}
footer.site-footer .meta {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 40px;
}
footer.site-footer .footer-nav {
  margin: 0 0 32px;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
footer.site-footer .footer-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
footer.site-footer .footer-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer.site-footer .footer-nav a {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  opacity: 1;
}
footer.site-footer .footer-nav a:hover { opacity: 0.75; }
footer.site-footer .credits {
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  opacity: 0.85;
  padding-top: 32px;
  border-top: 1px solid rgba(250, 248, 249, 0.2);
  max-width: 600px;
  margin: 0 auto;
}
footer.site-footer .credits a { color: inherit; }

/* ============ FADE IN ============ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.fade-in.is-visible { opacity: 1; transform: none; }

/* ============ TWEAKS PANEL ============ */
#tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 6px 30px rgba(45, 38, 32, 0.12);
  font-family: var(--f-serif);
  font-size: 15px;
  z-index: 200;
  min-width: 280px;
}
#tweaks-panel h3 {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 16px;
}
.tweak-row { margin-bottom: 14px; }
.tweak-row > label {
  display: block;
  font-size: 13px;
  color: var(--bark);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.tweak-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tweak-options button {
  padding: 8px 6px;
  background: var(--champagne);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--f-serif);
  font-size: 13px;
  color: var(--bark);
  transition: all 0.2s;
}
.tweak-options button:hover { background: var(--light-brown); }
.tweak-options button.active {
  background: var(--bark);
  color: var(--ivory);
  border-color: var(--bark);
}

/* ============ FORMS / FORMINATOR ============ */
/* The bilder upload page renders a Forminator form inside .page-body.
   Selectors are scoped to .forminator-ui so non-Forminator content is
   untouched. !important is used throughout because Forminator's bundled
   stylesheet ships high-specificity selectors we need to override. */
.forminator-ui,
.forminator-ui.forminator-design--default {
  font-family: var(--f-sans) !important;
  color: var(--bark) !important;
  background: transparent !important;
}
.forminator-ui .forminator-row,
.forminator-ui .forminator-col,
.forminator-ui .forminator-field { background: transparent !important; }

/* Labels + required asterisk */
.forminator-ui .forminator-label {
  font-family: var(--f-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--bark) !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}
.forminator-ui .forminator-required,
.forminator-ui .forminator-label .forminator-required { color: var(--sage-deep) !important; }

/* Sub-description ("Välj bilder") */
.forminator-ui .forminator-description {
  font-family: var(--f-sans) !important;
  font-size: 13px !important;
  color: var(--bark) !important;
  opacity: 0.75 !important;
  margin: 0 0 10px !important;
}

/* Text-style inputs */
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select.forminator-select {
  font-family: var(--f-sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--ivory) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui select.forminator-select:focus {
  border-color: var(--sage-deep) !important;
  outline: none !important;
}

/* Multi-file upload dropzone */
.forminator-ui .forminator-multi-upload,
.forminator-ui .forminator-multi-upload-message {
  background: var(--champagne) !important;
  border: 1px dashed var(--rule) !important;
  border-radius: 0 !important;
  padding: 36px 24px !important;
  text-align: center !important;
  transition: border-color 0.25s, background 0.25s;
}
.forminator-ui .forminator-multi-upload:hover,
.forminator-ui .forminator-multi-upload-message:hover {
  border-color: rgba(90, 79, 71, 0.35) !important;
}
.forminator-ui .forminator-multi-upload-icon,
.forminator-ui .forminator-multi-upload-message svg {
  color: var(--bark) !important;
  fill: var(--bark) !important;
  opacity: 0.85 !important;
}
.forminator-ui .forminator-multi-upload-text,
.forminator-ui .forminator-multi-upload-message-text {
  font-family: var(--f-sans) !important;
  font-size: 14px !important;
  color: var(--bark) !important;
}

/* "Choose Files" trigger — rendered as <label> or <a> depending on browser.
   Match the inline-link convention (bark + underline). */
.forminator-ui .forminator-multi-upload-fileinput-label,
.forminator-ui .forminator-multi-upload-text a,
.forminator-ui .forminator-multi-upload-text label,
.forminator-ui .forminator-multi-upload-message a,
.forminator-ui .forminator-upload__file-pick {
  color: var(--bark) !important;
  background: transparent !important;
  font-family: var(--f-sans) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 0.5px !important;
  text-underline-offset: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.forminator-ui .forminator-multi-upload-fileinput-label:hover,
.forminator-ui .forminator-multi-upload-text a:hover,
.forminator-ui .forminator-multi-upload-text label:hover,
.forminator-ui .forminator-multi-upload-message a:hover,
.forminator-ui .forminator-upload__file-pick:hover {
  text-decoration-thickness: 1px !important;
}

/* Single-file upload variant */
.forminator-ui .forminator-upload__wrap,
.forminator-ui .forminator-input-file-upload {
  background: var(--champagne) !important;
  border: 1px dashed var(--rule) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}

/* Preview chips for uploaded files */
.forminator-ui .forminator-uploader-file-list,
.forminator-ui .forminator-multi-upload-list { margin-top: 18px !important; }
.forminator-ui .forminator-uploader-file,
.forminator-ui .forminator-multi-upload-file {
  border: 1px solid var(--rule) !important;
  background: var(--ivory) !important;
  border-radius: 0 !important;
}

/* Submit button */
.forminator-ui button.forminator-button,
.forminator-ui button.forminator-button-submit,
.forminator-ui .forminator-button-submit,
.forminator-ui .forminator-button.forminator-button-submit {
  font-family: var(--f-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  background: var(--sage-deep) !important;
  color: var(--ivory) !important;
  border: 1px solid var(--sage-deep) !important;
  border-radius: 0 !important;
  padding: 16px 32px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: opacity 0.25s;
}
.forminator-ui button.forminator-button:hover,
.forminator-ui button.forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:hover {
  opacity: 0.85 !important;
}
.forminator-ui button.forminator-button[disabled],
.forminator-ui button.forminator-button-submit[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Post-submit response — the "Tack för din bild!" card. Styled as an
   editorial confirmation panel so the success state reads as intentional
   rather than as plain leftover text. */
.forminator-ui .forminator-response-message {
  font-family: var(--f-serif) !important;
  font-style: italic !important;
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: var(--bark) !important;
  background: var(--champagne) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 32px 28px !important;
  margin: 24px 0 !important;
  text-align: center !important;
}
/* Inside the response box Forminator may render a <ul>/<li> or <blockquote>
   wrapper — strip their browser defaults so only our card styling shows. */
.forminator-ui .forminator-response-message ul,
.forminator-ui .forminator-response-message ol,
.forminator-ui .forminator-response-message blockquote,
.forminator-ui .forminator-response-message p {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
}
.forminator-ui .forminator-response-message li + li,
.forminator-ui .forminator-response-message p + p { margin-top: 8px !important; }

/* Inline field-level error — subtle, sans, no card. */
.forminator-ui .forminator-error-message {
  font-family: var(--f-sans) !important;
  font-size: 13px !important;
  color: var(--bark) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 8px 0 !important;
}

/* ============ CONTENT IMAGES & EMBEDS ============ */
/* Soft corners on any image dropped into a Page (block editor) so photos
   read as part of the editorial palette rather than as sharp inserts. */
.page-body img,
.page-outro-inner img {
  border-radius: var(--radius);
}

/* Iframe embeds inside page content (Google Maps, etc.).
   Inline `style="border:0"` from Google's embed code needs !important to
   override; aspect-ratio + width/height auto lets the map resize fluidly
   even though the embed code hardcodes 600×450. */
.page-body iframe,
.page-outro-inner iframe {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 24px auto;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius);
}
/* Desaturate Google Maps so its bright primary colours recede into the
   warm wedding palette without losing legibility. */
.page-body iframe[src*="google.com/maps"],
.page-outro-inner iframe[src*="google.com/maps"] {
  filter: grayscale(0.18) sepia(0.08) saturate(0.85);
}

/* ============ WEATHER ============ */
/* Subtitle variant — used for the "Närmsta veckan" / "Typiskt vid Gardasjön"
   section titles so the page <h1> still reads as the dominant headline. */
.section-title--sub {
  font-size: clamp(38px, 6vw, 72px);
}

/* Weather page header — full-width blush-to-ivory gradient that sets the
   summer-Italian-sky tone before the "Just nu" card lands on ivory. Overrides
   the default .page-header constraints so the gradient bleeds edge-to-edge. */
.page-header--weather {
  max-width: none;
  padding: 0;
  background: linear-gradient(to bottom, var(--blush) 0%, var(--blush) 35%, var(--ivory) 100%);
}
.page-header--weather .page-header-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 120px 56px 32px;
}
.page-header--weather .section-divider { margin-bottom: 0; }
.weather-forecast .section-eyebrow,
.weather-seasonal .section-eyebrow { margin-bottom: 20px; }
.weather-forecast .section-divider,
.weather-seasonal .section-divider { margin-bottom: 32px; }

/* "Just nu i Salò" — live current conditions card.
   Two-column layout: icon + temperature on the left, four stats on the right.
   Sits on a single ivory card with the rule border the rest of the theme uses. */
.weather-now .section-inner { padding: 32px 56px 40px; }
.weather-now-card {
  max-width: 960px;
  margin: 0 auto;
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 48px 56px 52px;
}
.weather-now-eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bark);
  margin-bottom: 32px;
}
.weather-now-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}
.weather-now-main { text-align: left; }
.weather-now-icon {
  color: var(--sage-deep);
  margin-bottom: 12px;
}
.weather-now-icon svg { display: block; }
.weather-now-temp {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  color: var(--bark);
  margin-bottom: 12px;
}
.weather-now-temp .unit {
  font-style: italic;
  font-size: 28px;
  vertical-align: 38px;
  margin-left: 6px;
  color: var(--bark);
}
.weather-now-desc {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--bark);
}
.weather-now-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  background: var(--rule);
  gap: 1px;
}
.wn-stat {
  background: var(--ivory);
  padding: 22px 24px 24px;
}
.wn-stat-label {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bark);
  margin-bottom: 8px;
}
.wn-stat-value {
  font-family: var(--f-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--bark);
  line-height: 1;
}
.wn-stat-value .unit {
  font-style: italic;
  font-size: 14px;
  color: var(--bark);
  margin-left: 4px;
  vertical-align: 10px;
}

/* 7-day forecast strip — sits in a champagne band (.section-alt).
   The .forecast-scroll wrapper centers the grid on desktop and turns into a
   horizontal scroller on narrow viewports (see responsive rules). */
.weather-forecast .section-inner { padding-top: 60px; padding-bottom: 64px; }
.forecast-scroll {
  max-width: 1080px;
  margin: 0 auto;
}
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.forecast-day {
  background: var(--champagne);
  padding: 24px 12px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.forecast-dow {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bark);
  font-weight: 500;
}
.forecast-date {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--bark);
  margin-top: -6px;
}
.forecast-icon {
  color: var(--sage-deep);
  margin: 4px 0 2px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.forecast-icon svg { display: block; }
.forecast-temps {
  font-family: var(--f-serif);
  color: var(--bark);
  line-height: 1.1;
}
.forecast-temps .t-max {
  font-size: 22px;
}
.forecast-temps .t-min {
  font-style: italic;
  font-size: 16px;
  color: var(--bark);
  margin-left: 6px;
}
.forecast-rain {
  font-family: var(--f-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark);
}
.forecast-credit {
  text-align: center;
  margin: 32px auto 0;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bark);
}
.forecast-credit a {
  color: var(--bark);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}

/* "Typiskt vid Gardasjön i början av september" — three temperature cards.
   Bottom padding is tight so the Next CTA doesn't sit in a sea of whitespace
   when the editor outro paragraph is empty. */
.weather-seasonal .section-inner { padding-top: 60px; padding-bottom: 32px; }
.weather-seasonal + .page-cta { padding-top: 40px; }
.seasonal-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.seasonal-card {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 40px 32px 36px;
  text-align: center;
}
.seasonal-icon {
  color: var(--sage-deep);
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.seasonal-icon svg { display: block; }
.seasonal-label {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bark);
  margin-bottom: 14px;
}
.seasonal-temp {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 52px;
  line-height: 1;
  color: var(--bark);
  margin-bottom: 18px;
}
.seasonal-card p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--bark);
  line-height: 1.6;
  margin: 0;
}
.weather-outro {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: center;
  font-style: italic;
  font-size: 18px;
  line-height: 1.7;
  color: var(--bark);
}
.weather-outro p { margin: 0 0 12px; }
.weather-outro p:last-child { margin-bottom: 0; }
.weather-outro a {
  color: var(--bark);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  :root { --nav-height: 64px; }
  nav.topnav { padding: 16px 24px; }
  nav.topnav ul { display: none; }
  .hamburger { display: flex; }
  section.std,
  #welcome,
  [data-page-section],
  .section-inner { padding: 120px 24px 80px; }
  .page-header { padding: 120px 24px 0; }
  .page-header + section.std,
  .page-header + .section-alt > .section-inner,
  .page-header + .section-blush > .section-inner,
  .page-header + .section-sage > .section-inner {
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid--reverse { direction: ltr; }
  .feature-image { position: static; }
  .travel-cards, .highlights, .transfer-cards { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .nav-hub-grid { grid-template-columns: 1fr; }
  .nav-hub-card { padding: 40px 24px; }
  .nav-hub-card h3 { font-size: 44px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .countdown { gap: 12px; }
  .cd-cell { min-width: 56px; }
  .cd-num { font-size: 34px; }
  .cd-label { font-size: 9px; letter-spacing: 0.2em; }
  .hero h1 { font-size: 72px; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.3em; }
  .program-row { grid-template-columns: 90px 1fr; gap: 18px; }
  .program-day-header { flex-direction: column; gap: 8px; text-align: center; }
  .program-day-name { font-size: 44px; }

  /* Weather — stack everything for narrow viewports. The forecast strip
     stays a horizontal scroller so the 7 days are still visible at a glance. */
  .weather-now .section-inner { padding: 24px 24px 32px; }
  .weather-now-card { padding: 32px 24px 36px; }
  .weather-now-grid { grid-template-columns: 1fr; gap: 32px; }
  .weather-now-temp { font-size: 64px; }
  .weather-now-temp .unit { font-size: 22px; vertical-align: 28px; }
  .wn-stat { padding: 18px 18px 20px; }
  .wn-stat-value { font-size: 26px; }

  .weather-forecast .section-inner { padding-top: 44px; padding-bottom: 48px; }
  .forecast-scroll {
    margin: 0 -24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: none;
  }
  .forecast-grid {
    grid-template-columns: repeat(7, 108px);
    width: max-content;
    min-width: 100%;
    border-left: 0;
    border-right: 0;
  }
  .forecast-day { padding: 22px 8px 24px; }

  .weather-seasonal .section-inner { padding-top: 44px; padding-bottom: 24px; }
  .seasonal-cards { grid-template-columns: 1fr; }
  .seasonal-card { padding: 32px 28px 28px; }
  .palette-row.primary .swatch,
  .palette-row.complement .swatch { flex: 0 0 130px; }
  footer.site-footer { padding: 60px 24px 32px; }
  footer.site-footer .monogram { font-size: 56px; }
  .transfer-section .section-inner { padding: 80px 24px; }

  /* Comparison table → horizontal scroll, sticky label column.
     The scroll container bleeds to the viewport edges (no inner padding)
     so the sticky label column sits flush against the left edge and nothing
     leaks through behind it as cells scroll past. */
  .travel-compare-wrap { margin-top: 60px; }
  .travel-compare-scroll {
    margin: 0 -24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .travel-compare {
    grid-template-columns: 132px repeat(var(--compare-cols, 3), minmax(200px, 1fr));
    width: max-content;
    min-width: 100%;
  }
  .tc-label,
  .tc-cell { padding: 18px 18px; font-size: 14px; }
  .tc-label {
    position: sticky;
    left: 0;
    z-index: 2;
    font-size: 14px;
    box-shadow: 1px 0 0 var(--rule);
  }
  .tc-airport-name { font-size: 26px; }
  .tc-price { font-size: 26px; }
  .tc-cell--book em { font-size: 16px; }
}

/* ============ FRONT-PAGE SCOREBOARD ============
   Live standings for the games, rendered by epw_game_render_home_board().
   Lives in the main stylesheet rather than game.css because the front page
   doesn't load the game assets. */

.home-games > .section-inner { padding: 120px 24px; }
@media (min-width: 720px) {
  .home-games > .section-inner { padding: 140px 56px; }
}
.home-games .lead p { margin-bottom: 56px; }

.home-games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .home-games-grid { grid-template-columns: repeat(2, 1fr); }
  .home-games-grid.is-single { grid-template-columns: 1fr; max-width: 460px; }
}

.home-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--ivory);
  padding: 44px 32px 38px;
  text-decoration: none;
  transition: background 0.25s ease;
}
.home-game-card:hover { background: var(--blush); }
.home-game-card:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: -2px; }

.home-game-eyebrow {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bark);
  margin-bottom: 14px;
}
.home-game-title {
  font-family: var(--f-display);
  font-size: 44px;
  line-height: 1;
  color: var(--bark);
  margin-bottom: 26px;
}

.home-game-board {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  width: 100%;
  max-width: 280px;
}
.home-game-board li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.home-game-board li:last-child { border-bottom: 0; }
.hg-rank {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--sage-deep);
}
.hg-name {
  font-family: var(--f-serif);
  font-size: 18px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-score {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--bark);
}
.home-game-board li.is-leader .hg-name { font-style: italic; }

.home-game-empty {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--bark);
  opacity: 0.7;
  margin-bottom: 28px;
  padding: 18px 0;
}

.home-game-cta {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bark);
  border-bottom: 1px solid var(--bark);
  padding-bottom: 4px;
  margin-top: auto;
  transition: opacity 0.2s ease;
}
.home-game-card:hover .home-game-cta { opacity: 0.7; }

@media (max-width: 560px) {
  .home-games > .section-inner { padding: 90px 20px; }
  .home-game-card { padding: 36px 24px 32px; }
  .home-game-title { font-size: 38px; }
}