/* =========================================================================
   Background treatment, matched to luxurycoastlinecollection.com.

   These were previously sampled off assets/images/logo/logo-lcc.png
   (#c4812e / #eeb15a / #b67426) which sat a few degrees warmer than the
   reference. They now use the reference's own ramp so both properties
   read as one brand:
       #a96e2a -> #edb368 -> #f1c88b
   and its own page colour, #f2eee4 - a cream, not the near-white the
   page was tinting to.

   The metallics are saturated; used flat they would bury the body copy.
   So they appear here three ways instead:
     1. as the cream page base
     2. as wide, very low-alpha radial "light blooms" for depth
     3. at full strength only on the dark closing band, where gold belongs
   ========================================================================= */

:root {
  --logo-gold-deep: #a96e2a;
  --logo-gold-mid: #c6a664;
  --logo-gold-bright: #edb368;

  --bg-base: #f2eee4;   /* the reference's own body colour  */
  --bg-panel: #ece5d6;  /* raised panel band, one step down */
  --bg-panel-2: #f7f4ec;
}

/* ---------- 1. page base ---------- */
html {
  background-color: var(--bg-base);
}

body {
  background-color: transparent;
  position: relative;
}

/* ---------- 2. ambient light bloom ----------
   Fixed to the viewport so it reads as light in the room rather than
   as a texture that scrolls with the content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -5%, rgba(237, 179, 104, .20), transparent 60%),
    radial-gradient(48rem 38rem at 92% 22%, rgba(169, 110, 42, .13), transparent 62%),
    radial-gradient(52rem 42rem at 50% 108%, rgba(169, 110, 42, .12), transparent 60%);
}

/* ---------- 3. the raised panel (overview + configurations) ---------- */
.primary-bg {
  background-color: transparent !important;
  background-image:
    linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-panel-2) 45%, var(--bg-panel) 100%);
  position: relative;
}

/* gold hairline top and bottom - the logo gradient, 1px tall */
.primary-bg::before,
.primary-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      var(--logo-gold-mid) 18%,
      var(--logo-gold-bright) 50%,
      var(--logo-gold-mid) 82%,
      transparent);
  opacity: .55;
}

.primary-bg::before { top: 0; }
.primary-bg::after { bottom: 0; }

/* ---------- 4. section titles carry the gold gradient ----------
   Stops kept in the dark half of the ramp so the text stays legible on
   the cream base; the reference's bright stop is 1.87:1 here and can
   only lift the centre. */
.section-heading .section-title,
#sectionOverviewRef .sub-title {
  background: linear-gradient(100deg, #8f5c1e 0%, #a96e2a 45%, #8f5c1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #8f5c1e;                     /* fallback where clip is unsupported */
}

/* ---------- 5. closing band: gold on dark ----------
   The one place the logo's bright stop can run at full strength. */
section.section-contact {
  position: relative;
  background:
    radial-gradient(38rem 26rem at 50% 0%, rgba(237, 179, 104, .16), transparent 65%),
    var(--charcoal);
  overflow: hidden;
}

section.section-contact .contact-title {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary-light);
}

section.section-contact .custom-input {
  background-color: rgba(255, 255, 255, .07);
  border: 1px solid rgba(237, 179, 104, .28);
  color: #f6efe4;
}

section.section-contact .custom-input::-webkit-input-placeholder { color: #b9b1a4; }
section.section-contact .custom-input::-moz-placeholder { color: #b9b1a4; }
section.section-contact .custom-input:-ms-input-placeholder { color: #b9b1a4; }
section.section-contact .custom-input::placeholder { color: #b9b1a4; }

section.section-contact .custom-input:focus {
  background-color: rgba(255, 255, 255, .11);
  border-color: var(--logo-gold-bright);
  color: #fff;
}

section.section-contact .form-check-label,
section.section-contact .section-desc {
  color: #c9c2b6;
}

/* ---------- 6. footer sits on the same dark band ---------- */
footer {
  background: var(--charcoal);
  color: #c9c2b6;
}

footer .disc,
footer .copy-right,
footer .created p,
footer .qr-content .qr-txt {   /* must out-specify .qr-content .qr-txt */
  color: #a9a297;
}

footer .qr-content .qr-txt p:last-child {
  color: var(--primary-light);
}

footer hr {
  border-color: rgba(237, 179, 104, .22);
  opacity: 1;
}

/* the QR needs a light plate to stay scannable on the dark band */
footer .qr-content .qr-img {
  background: #fff;
  padding: 6px;
  border-radius: 6px;
}

@media only screen and (max-width: 767px) {
  body::before {
    background:
      radial-gradient(30rem 22rem at 8% -4%, rgba(237, 179, 104, .18), transparent 62%),
      radial-gradient(28rem 24rem at 96% 26%, rgba(169, 110, 42, .12), transparent 64%);
  }
}