/* TDC deliberate CSS overrides.
 *
 * Loaded AFTER the three Webflow stylesheets so those stay byte-identical
 * to the export in _source (the parity gate depends on that). Every rule
 * here is an intentional deviation with a stated reason, the CSS
 * equivalent of scripts/content-overrides.mjs.
 *
 * ---------------------------------------------------------------------
 * 1. Floating CTA must not intercept clicks  (CLAUDE.md section 25)
 *
 * .section-31 is a full-width position:fixed bar pinned to the bottom of
 * the viewport, and .floating-buttons-container adds 20px/80px/10px of
 * transparent padding around two 50%-width children that are mostly empty
 * space. Without pointer-events handling, that entire strip is a live hit
 * target: form fields, selects and date pickers scrolling underneath it
 * cannot be clicked. The wedding and event package pages carry 130+ inputs
 * each, and at <=479px .whatsapp-button-div switches to column flow, which
 * makes the dead zone roughly 90px tall across the full screen width.
 *
 * The directive records this as a previously solved problem; the Webflow
 * export did not carry the fix, so it is reapplied here. The wrapper goes
 * transparent to clicks and only the real controls take them back.
 */

.section-31,
.floating-buttons-container,
.floating-button-div,
.whatsapp-button-div {
  pointer-events: none;
}

.section-31 a,
.section-31 button,
.section-31 input,
.section-31 select,
.section-31 textarea,
.section-31 [role="button"],
.section-31 [data-clickable="true"] {
  pointer-events: auto;
}

/* ---------------------------------------------------------------------
 * 2. Floating CTA must sit above page content  (CLAUDE.md sections 24, 45)
 *
 * Separate from the pointer-events bug and independently verified: the bar
 * ships at z-index 0 while hero/section containers are position:relative
 * with z-index 1, so ordinary page content paints OVER the floating CTA.
 * At the top of the wedding packages page all four controls (View
 * Packages, WhatsApp, phone, Check Availability) were unreachable, with
 * hit-testing landing on .award-div and .vanity-line. Section 24 makes
 * this bar the primary action path, so it must never be buried.
 *
 * 100 clears every content layer in the site stylesheet (max 5) while
 * staying below .pop-up-wrapper (300), the Webflow nav overlay (1000) and
 * the lightbox (2000), so menus and modals still cover the bar correctly.
 */

.section-31 {
  z-index: 100;
}

/* ---------------------------------------------------------------------
 * 3. Thank-you pages  (deviation 8, Liam 2026-09-11)
 *
 * components/SuccessPage.tsx builds /success and /success/<audience> from
 * the home page's own classes. Every rule here is scoped to a tdc-success-*
 * class that exists only on those pages, so no other page moves.
 *
 * (a) The home hero is 130vh so its video fills the screen. Here "what
 *     happens next" has to arrive sooner, so above 479px the hero sizes to
 *     its content with a 70vh floor; the top padding gives the text the
 *     room home's 130vh centring gave it. Phones already get height:auto
 *     from Webflow's own max-width:479px rule, and 479.02px is its exact
 *     complement, so no fractional width (e.g. under browser zoom) falls
 *     between the two.
 * (b) The hero photo stands in for home's background video, whose cover
 *     fit came from webflow.js. The position keeps the couple clear of the
 *     dark gradient under the text.
 * (c) .hero-paragraph is hidden at 767px and below, because home repeats
 *     it as bullet points. This one says what happens next, so it stays
 *     visible, capped at a readable line length.
 * (d) The music-details page has three hero buttons, so the row may wrap.
 * (e) container-41 has no gutter of its own (the tiles' 80px comes from
 *     .flex-block), so the explore buttons get the same inset. .new-buttons
 *     carries a 20px right margin above 479px, which would pull the centred
 *     row off-centre, so the row's gap does the spacing instead.
 */

@media screen and (min-width: 479.02px) {
  .landing-page-hero.home.tdc-success-hero {
    height: auto;
    min-height: 70vh;
    padding-top: 140px;
    padding-bottom: 80px;
  }
}

.tdc-success-hero-image {
  object-fit: cover;
  object-position: 70% 35%;
}

.hero-paragraph.tdc-success-paragraph {
  max-width: 760px;
}

@media screen and (max-width: 767px) {
  .hero-paragraph.tdc-success-paragraph {
    display: block;
  }
}

.tdc-success-actions {
  flex-wrap: wrap;
}

.tdc-success-explore {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 40px 80px 0;
}

.tdc-success-explore .new-buttons {
  margin-right: 0;
}

@media screen and (max-width: 479px) {
  .tdc-success-explore {
    padding: 20px 0 0;
  }
}