/* =================================================================
   BOSHOFF TROUE — Inligting Page Styles
   ================================================================= */

/* ── Inligting Hero ──────────────────────────────────────────────── */
.inligting-hero {
  background-color: var(--wedding-maroon);
  text-align: center;
  padding: 80px 0 0;
  position: relative;
}

.inligting-hero-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 40px 60px;
}

.inligting-title-svg {
  width: 100%;
  max-width: 500px;
  height: auto;
}

.inligting-lace-border {
  width: 100%;
  display: block;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* ── Shared section styles ───────────────────────────────────────── */
.inligting-section {
  padding: 80px 40px;
}

.inligting-inner {
  max-width: 700px;
  margin: 0 auto;
}

.inligting-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 16px;
}

.inligting-heading {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Explicit heading colour on the maroon sections — without this they
   inherit cream in theory, but Blocksy's own h2 colour rule overrides
   the inheritance and the headings render in its dark default. */
.inligting-verblyf .inligting-heading,
.inligting-geskenke .inligting-heading,
.inligting-vrae .inligting-heading {
  color: #FFFFFF;
}

.inligting-body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.85;
  margin-bottom: 40px;
}

/* ── Dress Code (Aantrek Kode) ───────────────────────────────────── */
.inligting-dress-code {
  background-color: var(--wedding-cream);
  color: var(--wedding-maroon);
  text-align: center;
}

.inligting-dress-code .inligting-subtitle {
  color: var(--wedding-maroon);
}

.inligting-dress-code .inligting-heading {
  color: var(--wedding-maroon);
}

.inligting-dress-code .inligting-body {
  color: var(--wedding-maroon);
}

.swatch-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.swatch-color {
  width: 100px;
  height: 100px;
  border-radius: 12px;
}

.swatch-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--wedding-maroon);
  text-align: center;
}

/* ── Verblyf (Accommodation) ─────────────────────────────────────── */
.inligting-verblyf {
  background-color: var(--wedding-maroon);
  color: var(--wedding-cream);
}

.venue-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

.venue-card {
  border: 1px solid #6E1F2A;
  background-color: #3F0511;
  border-radius: 12px;
  padding: 30px;
}

.venue-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--wedding-cream);
  margin-bottom: 8px;
}

.venue-price {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #DE989E;
  margin-bottom: 16px;
}

.venue-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--wedding-cream);
  opacity: 0.85;
  line-height: 1.7;
}

.venue-distance {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wedding-cream);
  opacity: 0.5;
  margin-bottom: 8px;
}

.venue-button {
  display: inline-block;
  margin-top: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wedding-maroon);
  background-color: var(--wedding-cream);
  padding: 12px 32px;
  border: none;
  text-decoration: none;
  transition: opacity 0.3s;
}

.venue-button:hover {
  opacity: 0.85;
}

/* ── Geskenke (Gifts) ────────────────────────────────────────────── */
.inligting-geskenke {
  background-color: var(--wedding-maroon);
  color: var(--wedding-cream);
}

.bank-detail {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--wedding-cream);
  opacity: 0.85;
  line-height: 1.8;
  margin-bottom: 0;
}

/* ── Vrae (Questions) ────────────────────────────────────────────── */
.inligting-vrae {
  background-color: var(--wedding-maroon);
  color: var(--wedding-cream);
}

/* ── Bottom Image ────────────────────────────────────────────────── */
.inligting-bottom-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.inligting-bottom-image .bottom-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Full-width overrides for Inligting page ─────────────────────── */
.inligting-hero,
.inligting-dress-code,
.inligting-verblyf,
.inligting-geskenke,
.inligting-vrae,
.inligting-bottom-image {
  width: calc(100vw - var(--scrollbar-width)) !important;
  max-width: calc(100vw - var(--scrollbar-width)) !important;
  margin-left: calc(-50vw + 50% + var(--scrollbar-width) / 2) !important;
  margin-right: calc(-50vw + 50% + var(--scrollbar-width) / 2) !important;
}

/* ── WordPress/Blocksy spacing & container overrides ─────────────── */
.page-template-default .entry-content,
.page-template-default .entry-content.is-layout-constrained {
  padding: 0 !important;
  max-width: 100% !important;
}

.page-template-default .site-main {
  padding: 0;
}

.page-template-default .entry-content > *,
.page-template-default .entry-content > *:first-child,
.page-template-default .entry-content > *:last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.page-template-default .entry-content.is-layout-constrained > * {
  max-width: 100% !important;
}

.page-template-default .ct-container,
.page-template-default .ct-container-full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-template-default article.post,
.page-template-default article.page {
  margin: 0;
  padding: 0;
}

/* Space between the bottom photo and the footer.
   Padding (not margin) so the section's own background fills it —
   needed so the pinned hero cannot show through this gap on mobile.
   No .entry-content ancestor so this works both on the default
   page template (block pattern flow) and on template-inligting.php. */
.page-template-default .entry-content > .inligting-bottom-image,
.inligting-bottom-image {
  padding-bottom: 100px !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .inligting-hero {
    padding: 60px 0 0;
  }

  .inligting-section {
    padding: 60px 20px;
  }

  .inligting-heading {
    font-size: 32px;
  }

  .swatch-row {
    gap: 24px;
  }

  .swatch-color {
    width: 75px;
    height: 75px;
  }

  .venue-card {
    padding: 20px;
  }

  /* Bottom image — taller crop, rounded corners, maroon borders.
     The maroon background also stops the pinned hero showing
     through the padding around the photo. */
  .inligting-bottom-image {
    padding: 0 10px !important;
    background-color: var(--wedding-maroon);
  }
  .inligting-bottom-image .bottom-photo {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 26px !important;
  }

  /* ── Hero scroll-reveal ──────────────────────────────────────────
     ux.js pins the hero to the top once it scrolls up to the
     viewport edge; the sections below sit on a higher layer so they
     slide up and cover it. Done in JS rather than CSS position:sticky
     because a parent element's overflow disables sticky on this page. */
  .inligting-section,
  .inligting-bottom-image,
  .wedding-footer-lace,
  .wedding-footer {
    position: relative;
    z-index: 1;
  }
  .inligting-hero.ux-hero-pinned {
    position: fixed !important;
    top: var(--site-header-height, 0);
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    z-index: 0;
  }

  /* The footer lace PNG has transparent gaps — back it with maroon
     so the pinned hero cannot show through them. */
  .wedding-footer-lace {
    background-color: var(--wedding-maroon);
  }

  /* When ux.js relocates the hero's lace out of the hero on mobile,
     it sits as a sibling just before the cream dress-code section.
     Break it out to full viewport width (its new parent is narrower
     than the hero was) and layer it above the pinned hero so it
     scrolls cleanly with the cream content. Background stays
     transparent so the PNG's transparent areas show through. */
  .inligting-lace-border.inligting-lace-relocated {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50% + var(--scrollbar-width, 0px) / 2);
    margin-right: calc(-50vw + 50% + var(--scrollbar-width, 0px) / 2);
    position: relative;
    z-index: 1;
  }
}