/**
 * @file
 * Homepage-specific styles for Lotus Vows.
 *
 * Design tokens reference:
 *   primary: #83505b (rose)
 *   secondary: #38693b (stem green)
 *   surface: #fcf9f6
 *   surface-container: #f0edea
 *   on-surface: #1b1c1a
 *   on-surface-variant: #514345
 */

/* ── Smooth scroll for anchor navigation ── */
html {
  scroll-behavior: smooth;
}

/* Offset in-page anchor jumps so the target clears the fixed header instead of
   landing underneath it. */
.anchor {
  scroll-margin-top: var(--navbar-height);
}

/* Size the navbar logo by height, not width, so a non-horizontal logo doesn't
   stretch the bar taller than --navbar-height. Overrides the theme's
   width:100% rule, which inflates square/tall logos. */
.homepage-header .branding img {
  width: auto !important;
  max-height: calc(var(--spacing) * 14);
}

/* Prevent typographic orphans across homepage copy: balance heading line
   lengths, and stop paragraphs from dropping a single word onto the last line. */
.homepage :is(h1, h2, h3) {
  text-wrap: balance;
}

.homepage p {
  text-wrap: pretty;
}

/* ── Hero-billboard stacking context fix ──
   Mercury applies a default surface background to all sections. The hero-billboard
   uses z-index:-1 on its media wrapper, which paints BELOW the section background
   unless the section creates its own stacking context. `isolation: isolate` does
   exactly that: media renders above the background but below the text overlay. */
.homepage .cq-full {
  isolation: isolate;
}

/* ── Glassmorphism header on homepage ── */
/* backdrop-filter is on ::before, not the element itself. A fixed descendant
   (the mobile menu overlay) would be positioned relative to an ancestor with
   backdrop-filter instead of the viewport — clipping it to navbar height. */
.homepage-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  box-shadow: 0 1px 40px -10px oklch(0.22 0.01 60 / 0.04);
}

.homepage-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: oklch(0.98 0.005 80 / 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Hero section ────────────────────────────────────────────────────────────
   Mercury hero-billboard (sdc.mercury.hero-billboard) DOM structure:
     section.cq-full:has(#hero)
       ├─ div.absolute.z-[-1].h-full     <- media wrapper
       │    └─ img.object-cover
       ├─ div.absolute.inset-0.bg-black/40  <- overlay
       └─ div.container.mx-auto          <- content wrapper
*/

/* Hero section: ensure site background shows through the faded image */
.homepage section:has(#hero) {
  background-color: var(--background);
  overflow: visible !important;
  height: 75dvh !important;
  min-height: 32rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Media wrapper: ensure it doesn't clip the corner accent bleed */
.homepage section:has(#hero) > div:first-child {
  overflow: visible;
}

/* Hero Image: lower opacity so it reads as a subtle background texture */
.homepage section:has(#hero) img {
  opacity: 0.22;
  filter: sepia(20%) contrast(90%);
}

/* Overlay: blend the faded image into the site background at the base.
   We use a gradient from transparent to var(--background) at the bottom.
   A z-index: 1 ensures it sits ON TOP of the image (since img has auto/no z-index). */
.homepage section:has(#hero) > div:first-child > div:first-child {
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    var(--background) 100%
  ) !important;
}

/* Content wrapper: alignment and vertical spacing */
.homepage section:has(#hero) > div:last-child {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.875rem;
  max-width: 72%;
  margin: 0 auto;
  padding-top: calc(var(--navbar-height) + 3rem);
}

@media (min-width: 768px) {
  .homepage section:has(#hero) > div:last-child {
    padding-top: calc(var(--navbar-height) + 4rem);
  }
}

@media (min-width: 1280px) {
  .homepage section:has(#hero) > div:last-child {
    padding-top: calc(var(--navbar-height) + 5rem);
  }
}

@media (max-width: 767px) {
  .homepage section:has(#hero) > div:last-child {
    max-width: 90%;
    gap: 1.25rem;
  }
}

/* Title: larger, tighter line-height, 0.04em letter-spacing.
   Changed color to 'Warm Charcoal' (#3a3530) as defined in the Color Palette style guide. */
.homepage section:has(#hero) h1 {
  font-family: 'Cormorant Garamond', serif;
  color: #3a3530;
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
}

/* Ornament: 1px blush rule below the heading */
.homepage section:has(#hero) h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: oklch(0.76 0.07 10 / 0.4);
  margin: 0.875rem auto 0;
}

@media (max-width: 767px) {
  .homepage section:has(#hero) h1::after {
    display: none;
  }
}

/* Subtitle: responsive Jost text.
   Changed color to on-surface-variant (#514345) for better contrast. */
.homepage section:has(#hero) p {
  color: #514345;
  font-family: 'Jost', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.7;
  max-width: 40rem;
}

/* ── Section layout ── */
.homepage-section {
  padding: 4rem 1rem;
}

@media (min-width: 768px) {
  .homepage-section {
    padding: 5rem 2rem;
  }
}

@media (min-width: 1280px) {
  .homepage-section {
    padding: 6rem 2rem;
  }
}

.homepage-section--muted {
  background-color: #f0edea;
}

.homepage-section--surface {
  background-color: #fcf9f6;
}

.homepage-section__inner {
  max-width: 80rem;
  margin: 0 auto;
}

.homepage-section__inner--narrow {
  max-width: 56rem;
  margin: 0 auto;
}

.homepage-section__heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--foreground);
  text-align: center;
  margin-bottom: 3rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* ── About section ───────────────────────────────────────────────────────────
   50-50 grid: tall editorial photo left, bio text right with blush left-border.

   Verified DOM structure (from Mercury templates):
     section:has(#about)
       div.container.px-4 [&_.cq-full]:mx-0
         div.@container.flex.flex-col
           div.grid
             figure (class="")          ← Mercury image = <figure>, NOT <div>
               div.cq-full.aspect-3/2
                 img.object-cover
             div[&_h2]:mt-8...           ← Mercury text = <div>
*/

/* Equal-height columns */
.homepage section:has(#about) .grid {
  align-items: stretch;
}

/* Image column — <figure> must stretch to grid row height */
.homepage section:has(#about) .grid > figure {
  align-self: stretch;
}

/* Override aspect-ratio so the image fills the figure's height. Cap the height so
   a portrait-orientation photo doesn't tower over the copy beside it. */
.homepage section:has(#about) .grid > figure .cq-full {
  aspect-ratio: auto;
  height: 100%;
  min-height: 24rem;
  max-height: 30rem;
}

/* Centered vertical rule: sits at 50% of grid, aligning with the ornament icon
   above the section heading. Using ::after on the grid rather than border-left
   on the text column, because border-left lands at 50%+gap/2 (off-center). */
.homepage section:has(#about) .grid {
  position: relative;
}

.homepage section:has(#about) .grid::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: oklch(0.76 0.07 10 / 0.28);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Text column: vertically centered.
   No extra padding-left — the grid gap already provides equal gap/2 on
   both sides of the center rule. Adding padding here would push text
   further right and make the spacing asymmetric. */
.homepage section:has(#about) .grid > div {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Bio paragraphs — lead size so the copy holds its own beside the photo */
.homepage section:has(#about) .grid > div p {
  font-family: 'Jost', sans-serif;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.85;
  color: var(--muted-foreground);
  margin-bottom: var(--space-5);
}

/* Only de-emphasise a trailing paragraph when there's more than one; a lone
   paragraph stays at full lead size (otherwise it reads as tiny text). */
.homepage section:has(#about) .grid > div p:last-child {
  margin-bottom: 0;
}

.homepage section:has(#about) .grid > div p:last-child:not(:only-child) {
  font-size: 0.95rem;
  color: var(--subtle-foreground);
}

/* Mobile: stack vertically, hide center rule */
@media (max-width: 767px) {
  .homepage section:has(#about) .grid::after {
    display: none;
  }

  .homepage section:has(#about) .grid > div {
    padding-left: 0;
    padding-top: var(--space-6);
  }

  .homepage section:has(#about) .grid > figure .cq-full {
    min-height: 20rem;
  }
}

/* ── Floral Designer row: editorial "meet the designer" block ────────────────
   Text-led, portrait contained (not a stretched landscape crop), quote set as a
   pull-quote. Scoped to .lv-designer-bio so it overrides the shared About grid
   rules (which carry #about specificity via :has). */

/* Text leads; portrait sits in a narrower column. No 50% centre rule here. */
@media (min-width: 768px) {
  .homepage section:has(#about) .grid.lv-designer-bio {
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    column-gap: 3.5rem;
  }
}

.homepage section:has(#about) .grid.lv-designer-bio::after {
  display: none;
}

/* Portrait: contained 4:5 frame, centred in its column */
.homepage section:has(#about) .grid.lv-designer-bio > figure {
  align-self: center;
}

.homepage section:has(#about) .grid.lv-designer-bio > figure .cq-full {
  aspect-ratio: 4 / 5;
  height: auto;
  min-height: 0;
  max-width: 22rem;
  margin: 0 auto;
}

/* Name + role heading */
.homepage section:has(#about) .grid.lv-designer-bio > div h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--foreground);
  margin-bottom: 1.25rem;
}

/* Bio copy */
.homepage section:has(#about) .grid.lv-designer-bio > div p {
  font-family: 'Jost', sans-serif;
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.85;
  color: var(--muted-foreground);
}

/* Pull-quote: Cormorant italic with a blush rule */
.homepage section:has(#about) .grid.lv-designer-bio > div blockquote {
  margin: 1.75rem 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid oklch(0.76 0.07 10 / 0.45);
}

.homepage section:has(#about) .grid.lv-designer-bio > div blockquote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.45;
  color: var(--foreground);
}

/* ── About section (2-column: image + text) ── */
.homepage-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .homepage-about__grid {
    grid-template-columns: 2fr 3fr;
    gap: 3.5rem;
  }
}

.homepage-about__image-wrapper {
  overflow: hidden;
  border-radius: 0.5rem;
}

.homepage-about__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 28rem;
  border-radius: 0.5rem;
}

@media (max-width: 767px) {
  .homepage-about__image {
    max-height: 20rem;
  }
}

.homepage-about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.homepage-about__text {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #514345;
  margin: 0;
}

@media (max-width: 767px) {
  .homepage-about__text {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — editorial upgrade
   Ornament rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Allow corner accent to bleed below the hero fold into gallery seam. */
.homepage section:has(#hero) {
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY INTRO — single-column centered (matches other section heading pattern)
   section:has(#gallery) targets only the intro section (4a); masonry is unaffected.
   ═══════════════════════════════════════════════════════════════════════════ */

.homepage section:has(#gallery) .container > div,
.homepage section:has(#gallery) .\@container {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSULTATIONS & COMMITMENT — centered intro band.
   The #contact anchor lives here, so the nav "Contact" / "Event Inquiries"
   links land on it. The inquiry form is a separate section below; its styling
   is keyed off the form class (not the section) so it works wherever it sits.
   ═══════════════════════════════════════════════════════════════════════════ */

.homepage section:has(#contact) .container > div,
.homepage section:has(#contact) .\@container {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Phone/email links: coloured, underline on hover (no resting underline — it
   reads as a stray divider under centred contact info). */
.homepage section:has(#contact) a[href^="tel:"],
.homepage section:has(#contact) a[href^="mailto:"] {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s;
}

.homepage section:has(#contact) a[href^="tel:"]:hover,
.homepage section:has(#contact) a[href^="mailto:"]:hover {
  color: #dc9eaa;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Inquiry form: 2-column field grid, centered in its own section ──────────
   [Name | Email] / [Phone | Date] / [Venue full-width] / [Submit] */
.homepage .webform-submission-contact-form-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 0.625rem;
  max-width: 40rem;
  margin-inline: auto;
}

/* grid handles row spacing; neutralise any default form-item margin */
.homepage .webform-submission-contact-form-form .form-item,
.homepage .webform-submission-contact-form-form .js-form-item {
  margin-bottom: 0;
}

/* Venue (5th field) and submit button span both columns */
.homepage .webform-submission-contact-form-form .js-form-item:nth-child(5),
.homepage .webform-submission-contact-form-form .form-actions {
  grid-column: 1 / -1;
}

.homepage .webform-submission-contact-form-form input[type="text"],
.homepage .webform-submission-contact-form-form input[type="email"],
.homepage .webform-submission-contact-form-form input[type="tel"],
.homepage .webform-submission-contact-form-form input[type="date"],
.homepage .webform-submission-contact-form-form textarea {
  /* 16px font prevents iOS auto-zoom; 0.75rem top/bottom gives ~44px touch target */
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
  min-height: 44px;
}

/* Mobile: single-column form */
@media (max-width: 767px) {
  .homepage .webform-submission-contact-form-form {
    grid-template-columns: 1fr;
  }

  .homepage .webform-submission-contact-form-form .js-form-item:nth-child(5),
  .homepage .webform-submission-contact-form-form .form-actions {
    grid-column: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: Touch targets (44×44px minimum)
   Ensures all interactive elements meet WCAG 2.5.5 minimum touch target size
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buttons: ensure minimum 44px height with padding */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a[role="button"],
.homepage a.group {
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Links: add padding to increase clickable area */
a {
  padding: 0.25rem 0.375rem;
  display: inline-block;
}

/* Navigation and menu links: ensure adequate spacing */
nav a,
[role="navigation"] a,
.menu a {
  min-height: 44px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
}

/* Gallery links: ensure adequate hover area */
.homepage section:has(#gallery) a {
  min-height: 44px;
}

/* Form inputs: already have adequate height via min-height: 44px in CSS (line 849) */

/* Focus indicator: visible on all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--primary, #83505b);
  outline-offset: 2px;
}

/* Additional link padding for better click targets */
.homepage a {
  padding: 0.25rem 0.375rem;
}

/* Ensure gallery, card, and service area links meet minimum touch target */
.homepage a[href]:not([class]) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Footer location text */
.site-footer .flex.flex-col.gap-6 > div > p:nth-child(3) {
  color: var(--meta-foreground);
}