/* ============================================
   OZYDE — Gradient field
   Loaded LAST on every page so it can override the flat backgrounds set in
   components.css / global.css / pricing.css.

   2026-09-09, rebuilt around client-supplied references (two mood images plus
   the page-hero reference: espresso → rust → peach → blush → near-white).
   Two earlier same-week passes (a burnt-oxide-then-chocolate-brown rust ramp
   applied uniformly, then that same idea re-tuned) are both fully superseded
   — the uniform "dark section, long flat hold" treatment was rejected
   outright as too stark and too elongated. The site now varies:

     PAGE-HERO (rentals/custom/bridal/gallery/about — NOT the homepage, which
     has its own carousel hero) is the one place using the exact reference
     gradient: espresso, briefly, only as tall as the header, then a long
     gentle ease down through rust/peach/blush/white into cream. This is the
     "dark, around the nav" moment, kept deliberately short.

     EVERYTHING ELSE that used to be a full-bleed dark section — the rest of
     a rentals/custom/about page's body, the footer, the CTA/contact/price
     cards — flips to mostly-light (--paper, dark --ink text) with a soft,
     low-opacity glow in the reference palette, positioned differently per
     surface so the page doesn't repeat one look end to end. This is the
     same idea already live in .reviews-light / blush-glow-bg.jpg on the
     homepage, extended sitewide.
   ============================================ */

:root {
  /* THE PAGE-HERO RAMP, light → dark: cream → white → blush → peach → rust →
     espresso. Only --grad-ink/--grad-black is ever a flat background with
     real text on it (the header's nav sits on it); every stop between it and
     cream is transitional — the hero eases through them, nothing is typeset
     on top of them.

     Measured contrast of --cream (#FBF5EA):
       --grad-rust  3.86:1 (transitional only — see --grad-rust-deep, used
                            only where real button text sits on rust)
       --grad-peach / --grad-blush / --grad-white: near-white, never paired
       with cream text.
       --grad-ink / --grad-black  14.11:1 — comfortably clears AA. */
  --grad-cream:  #FBF5EA;  /* = --cream */
  --grad-white:  #FDFDFD;
  --grad-blush:  #FFEDE3;
  --grad-peach:  #FFCAAE;
  --grad-rust:   #BB652A;
  --grad-rust-deep: #A75B27;  /* functional twin of --grad-rust: darkened just enough that cream
                                  text clears 4.5:1 (4.64:1). Used only for the primary button's
                                  hover state — not part of the visual ramp. */
  --grad-ink:    #332118;  /* espresso */
  --grad-black:  #332118;  /* == --grad-ink on purpose: the header-overlaid top of the hero and
                               its held dark surface are one continuous tone, not two. */

  /* 2026-09-14 — new client-directed palette, shared by .page-hero and
     .site-footer on purpose: one signature 3-stop ramp (cream/peach/brown) bookends the page at both ends, mirrored — .site-footer
     runs it light-to-dark (cream at its top easing to solid --grad-brown), .page-hero runs the same 3 colours dark-to-light (held --grad-
     brown-deep behind the header/heading, easing down to cream). Same
     colours, same proportions, reversed direction. Deliberately NOT reusing
     --grad-ink/--grad-rust/--grad-peach/--grad-blush above — that's a
     separate reference ramp still used elsewhere in this file (.btn-primary
     / .back-to-top / .mobile-drawer / .site-header.is-scrolled), untouched. */
  --grad-peach-soft: #FFBF91;
  --grad-brown:      #8D6854;
}

/* ============================================================
   PAGE-HERO — dark for the header + heading block, then a long, gentle ease
   into cream. .page-hero's own padding-top (components.css) is
   header-h + 48px before the eyebrow/h1/lede even start, and that text is
   still hardcoded to cream — so the solid dark hold has to reliably clear
   that content, not just the header strip, or the heading renders on a
   mid-transition colour. 320px covers a two-line headline on every current
   page-hero with margin to spare; verified against rentals/custom/bridal/
   gallery/about, not just eyeballed. Still meaningfully shorter than the
   previous "100% minus a short fade" hold for anything but the shortest
   hero, since a hero's total height is bounded by its own content.

   Stops are .site-footer's ramp run backwards — same 3 colours, same
   distance-from-the-solid-end at each stop (footer: cream 0% / amber 42% /
   rust 74% / brown-deep 100%; here: brown-deep held / rust at the mirrored
   26% / amber at the mirrored 58% / cream 100%) — so the two bookends read
   as one deliberate signature gradient, not two unrelated ones. */
.page-hero {
  background: linear-gradient(
    180deg,
    var(--grad-brown) 0,
    var(--grad-brown) 320px,
    var(--grad-peach-soft) calc(320px + 45%),
    var(--grad-cream)      100%
  );
}

/* ============================================================
   SOFT LIGHT SECTIONS — the rest of a page's dark-styled surfaces, now
   mostly-light with a low-opacity glow instead of a full dark hold.
   Each gets its own glow position/mix so the page doesn't repeat one look
   end to end — that variation is deliberate, not arbitrary.
   ============================================================ */

/* .section-ink → rentals.html, custom.html. Glow top-left (peach) and
   bottom-right (blush), echoing the reference photo's corner bloom. */
.section-ink {
  background:
    radial-gradient(60% 55% at 12% 10%, rgba(255, 202, 174, 0.55), transparent 70%),
    radial-gradient(55% 50% at 90% 92%, rgba(255, 237, 227, 0.75), transparent 70%),
    var(--paper);
  color: var(--ink);
}

/* .dark-section → about.html. Mirrored glow (top-right / bottom-left) so it
   doesn't read as a copy-paste of .section-ink two pages over. */
.dark-section {
  background:
    radial-gradient(58% 55% at 88% 8%, rgba(255, 202, 174, 0.5), transparent 70%),
    radial-gradient(52% 48% at 8% 94%, rgba(187, 101, 42, 0.14), transparent 70%),
    var(--paper);
  color: var(--ink);
}
.dark-section h2, .dark-section h3, .dark-section h4 { color: var(--ink); }
.dark-section .eyebrow { color: var(--gold-deep); }

/* Footer — 2026-09-14: back to a solid dark surface (--grad-brown),
   superseding the 2026-09-09 light-with-glow treatment above for this one
   surface only (.section-ink / .dark-section / .cta-banner etc. are
   unchanged).

   The transition down from the page's cream lives INSIDE .site-footer's own
   padding-top, as a sized background layer — not an absolutely-positioned
   ::before hung off `bottom: 100%`. That first version overlapped whatever
   section happened to sit right before the footer on a given page (on
   rentals.html, .path-switch's "Then it probably wants making..." copy and
   its "See Custom Pricing" button) because giving .site-footer
   `position: relative` lifts it into the positioned-elements paint layer,
   which renders above normal in-flow siblings regardless of DOM order —
   it was hiding real content, not adding space for itself. Sizing the
   gradient as a background layer confined to the footer's own padding-top
   avoids that entirely: it can only occupy space that belongs to the
   footer, never a section before it.

   --footer-fade-h drives both the padding and the background-size so they
   can't drift apart: .footer-top always starts exactly where the gradient
   has already resolved to solid --grad-brown, so the cream text on it
   is never sitting mid-transition. */
.site-footer {
  --footer-fade-h: clamp(140px, 20vw, 220px);
  padding-top: var(--footer-fade-h);
  background:
    linear-gradient(
      180deg,
      var(--grad-cream)      0%,
      var(--grad-peach-soft) 55%,
      var(--grad-brown) 100%
    ) top / 100% var(--footer-fade-h) no-repeat,
    var(--grad-brown);
  color: var(--grad-cream);
}

/* Footer children were tuned in components.css for the light footer above —
   dark ink text/lines on --paper. Re-pin the ones that were hardcoded to
   --ink or --line rather than inheriting .site-footer's own color, now that
   the footer itself is dark again. */
.site-footer .footer-col h3 { color: var(--grad-cream); opacity: 0.6; }
.site-footer .footer-top { border-bottom-color: rgba(255, 255, 255, 0.14); }
.site-footer .footer-social a { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.site-footer .footer-social a:hover { background: rgba(255, 255, 255, 0.1); }

/* ============================================================
   CARDS — a contained soft-glow corner instead of a diagonal dark descent,
   matching the reference card mock (soft blob, not a hard band).
   ============================================================ */
.cta-banner,
.contact-panel,
.price-card.is-highlight {
  background:
    radial-gradient(75% 70% at 85% 15%, rgba(255, 202, 174, 0.6), transparent 65%),
    radial-gradient(60% 60% at 10% 100%, rgba(187, 101, 42, 0.12), transparent 70%),
    var(--paper);
  color: var(--ink);
}

/* ============================================================
   REDUCED MOTION / LOW-END RENDERING
   Multi-stop and layered radial gradients can band badly on low bit-depth
   displays. Honouring a forced-colors request matters more than a texture
   fallback: drop to flat fills so the OS palette wins.
   ============================================================ */
@media (forced-colors: active) {
  .page-hero { background: var(--grad-ink); }
  .section-ink,
  .dark-section,
  .site-footer,
  .cta-banner,
  .contact-panel,
  .price-card.is-highlight { background: var(--paper); }
}

/* ============================================================
   SOLID DARK CONTROLS — unaffected by the section re-light above. These are
   buttons/chrome, not sections, and stay deliberately dark for contrast
   against a now mostly-light page.
   ============================================================ */
.site-header.is-scrolled { background: rgba(51, 33, 24, 0.94); }
.mobile-drawer { background: var(--grad-ink); }

.btn-primary { background: var(--grad-ink); }
.btn-primary:hover { background: var(--grad-rust-deep); }
.back-to-top { background: var(--grad-ink); }

/* ============================================================
   IN-CONTENT LINKS AS BUTTONS — every text link inside page content (FAQ
   answers, the locked-service swap, pop-up and confirmation contact links)
   uses the same outline-pill look as .link-arrow. Nav, footer columns and
   the skip link are deliberately left as plain links.
   ============================================================ */
.faq-a a,
.locked-service__swap,
.oz-modal__body a:not(.btn),
.confirm-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  margin: 2px 0;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: 1;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.faq-a a:hover,
.locked-service__swap:hover,
.oz-modal__body a:not(.btn):hover,
.confirm-contact a:hover {
  background: var(--ink);
  color: var(--cream);
}