/* HOME PLUS — final gradient pass for all three themes.
   Gradients are restrained and theme-aware so text contrast stays predictable. */

/* ---------- Shared ---------- */
.topbar,
.footer,
.section-heading,
.link-card {
  background-repeat: no-repeat;
}

.section-heading {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 24px 28px;
  border-radius: 22px;
  border: 1px solid transparent;
}
.section-heading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 78% 0%, rgba(255,255,255,.13), transparent 36%);
}

/* =========================================================
   LIGHT choice (stored as data-theme="mixed")
   ========================================================= */
html[data-theme="mixed"] body {
  background:
    radial-gradient(circle at 9% 4%, rgba(123,74,36,.075), transparent 28rem),
    linear-gradient(145deg, #faf7f3 0%, #f3ece5 52%, #f8f4ef 100%) !important;
}

html[data-theme="mixed"] .topbar {
  position: sticky;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(100deg, #fffdfa 0%, #f4eae2 38%, #ead9ca 50%, #f5ece5 65%, #fffdfa 100%) !important;
  border-bottom-color: rgba(123,74,36,.18) !important;
  box-shadow: 0 8px 28px rgba(78,52,35,.075) !important;
}
html[data-theme="mixed"] .topbar::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(590px, 60vw);
  height: 150px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(180,126,84,.21) 0%,
    rgba(181,145,116,.12) 34%,
    transparent 73%);
}
html[data-theme="mixed"] .topbar > * { position: relative; z-index: 1; }

html[data-theme="mixed"] .hero {
  border-bottom-color: rgba(123,74,36,.16) !important;
  box-shadow: inset 0 -18px 45px rgba(71,45,29,.055);
}

html[data-theme="mixed"] .links-section {
  background: linear-gradient(150deg, #f8f3ed 0%, #f0e5dc 48%, #faf7f3 100%) !important;
}
html[data-theme="mixed"] .section-heading {
  color: #1c191b !important;
  background: linear-gradient(105deg, #fffdfa 0%, #f2e5da 48%, #e6d2c1 100%) !important;
  border-color: rgba(123,74,36,.16);
  box-shadow: 0 12px 34px rgba(72,48,33,.07);
}
html[data-theme="mixed"] .section-heading h2 { color: #1c191b !important; }
html[data-theme="mixed"] .section-heading .eyebrow { color: #7b4a24 !important; }

html[data-theme="mixed"] .link-card:not(.link-card--dark):not(.link-card--bronze):not(.link-card--sand):not(.link-card--image) {
  background: linear-gradient(145deg, #fffefa 0%, #f1e6dd 100%) !important;
}
html[data-theme="mixed"] .link-card--dark {
  background:
    radial-gradient(circle at 90% 8%, rgba(164,113,75,.18), transparent 32%),
    linear-gradient(145deg, #171416 0%, #2a2220 55%, #1a1718 100%) !important;
}
html[data-theme="mixed"] .link-card--bronze {
  background: linear-gradient(145deg, #f3e8df 0%, #dfc7b3 58%, #eddccf 100%) !important;
}
html[data-theme="mixed"] .link-card--sand {
  background: linear-gradient(145deg, #fffdfa 0%, #efe6de 52%, #e5d4c5 100%) !important;
}

html[data-theme="mixed"] .footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 84% 50%, rgba(181,132,94,.19) 0%, rgba(181,132,94,.09) 27%, transparent 57%),
    linear-gradient(105deg, #f2e8df 0%, #fffdfa 48%, #ead9cb 100%) !important;
  color: #3f3129 !important;
  border-top-color: rgba(123,74,36,.15) !important;
}
html[data-theme="mixed"] .footer-brand span { color: #5b4639 !important; }
html[data-theme="mixed"] .footer p,
html[data-theme="mixed"] .footer p span,
html[data-theme="mixed"] .footer-brand strong { color: #2c211c !important; }
html[data-theme="mixed"] .footer-logo {
  opacity: 1;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.65)) drop-shadow(0 0 11px rgba(123,74,36,.08)) !important;
}

/* =========================================================
   HYBRID — distinctly dark + light, with a clean independent
   heading ribbon so text never lands on a color boundary.
   ========================================================= */
html[data-theme="hybrid"] body {
  background: linear-gradient(145deg, #ece4dd 0%, #f5efe9 58%, #e9ddd3 100%) !important;
}
html[data-theme="hybrid"] .topbar {
  background: linear-gradient(100deg, #100e0f 0%, #211a18 31%, #4b3528 50%, #241c19 69%, #100e0f 100%) !important;
}
html[data-theme="hybrid"] .links-section {
  background: linear-gradient(150deg, #eee6df 0%, #f8f3ee 45%, #e7d9ce 100%) !important;
  padding-top: 34px !important;
}
html[data-theme="hybrid"] .section-heading {
  color: #fffaf5 !important;
  margin-bottom: 26px !important;
  background:
    radial-gradient(circle at 87% 12%, rgba(171,116,78,.20), transparent 30%),
    linear-gradient(102deg, #151214 0%, #282021 45%, #4a3428 100%) !important;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 15px 38px rgba(27,21,19,.17);
}
html[data-theme="hybrid"] .section-heading h2 { color: #fffaf5 !important; }
html[data-theme="hybrid"] .section-heading .eyebrow { color: #e1b188 !important; }

html[data-theme="hybrid"] .link-card--dark {
  background:
    radial-gradient(circle at 92% 5%, rgba(187,130,91,.20), transparent 31%),
    linear-gradient(145deg, #151315 0%, #282022 55%, #1a1618 100%) !important;
}
html[data-theme="hybrid"] .link-card--bronze {
  background: linear-gradient(145deg, #e3c9b5 0%, #c59f82 50%, #d8bba4 100%) !important;
}
html[data-theme="hybrid"] .link-card--sand {
  background: linear-gradient(145deg, #fffdfa 0%, #eadfd7 52%, #d9c4b4 100%) !important;
}
html[data-theme="hybrid"] .link-card:not(.link-card--dark):not(.link-card--bronze):not(.link-card--sand):not(.link-card--image) {
  background: linear-gradient(145deg, #fffdfa 0%, #e7dad0 100%) !important;
}
html[data-theme="hybrid"] .footer {
  background:
    radial-gradient(ellipse at 84% 50%, rgba(188,135,95,.30) 0%, rgba(146,101,73,.16) 29%, transparent 58%),
    linear-gradient(105deg, #100e0f 0%, #261e1c 49%, #151113 100%) !important;
}

/* Hybrid footer is intentionally allowed to inherit the lighter footer treatment
   from the logo-refine layer on some layouts. Force dark text so contrast remains
   correct on that rendered light gradient, without changing the background itself. */
html[dir][data-theme="hybrid"] .footer,
html[dir][data-theme="hybrid"] .footer p,
html[dir][data-theme="hybrid"] .footer p span,
html[dir][data-theme="hybrid"] .footer-brand span,
html[dir][data-theme="hybrid"] .footer-brand strong {
  color: #2f241f !important;
  opacity: 1 !important;
}
html[dir][data-theme="hybrid"] .footer-brand span {
  color: #5a4437 !important;
}

/* =========================================================
   DARK — layered dark gradients instead of flat black.
   ========================================================= */
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 4%, rgba(123,74,36,.11), transparent 32rem),
    linear-gradient(145deg, #100e0f 0%, #191516 52%, #0f0d0e 100%) !important;
}
html[data-theme="dark"] .topbar {
  background: linear-gradient(100deg, #0c0b0c 0%, #181315 29%, #493126 50%, #1c1516 70%, #0c0b0c 100%) !important;
}
html[data-theme="dark"] .links-section {
  background: linear-gradient(145deg, #100e0f 0%, #20191a 50%, #120f10 100%) !important;
}
html[data-theme="dark"] .section-heading {
  color: #fffaf5 !important;
  background:
    radial-gradient(circle at 86% 14%, rgba(188,126,86,.20), transparent 32%),
    linear-gradient(105deg, #21191b 0%, #3a2922 50%, #171315 100%) !important;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 14px 38px rgba(0,0,0,.20);
}
html[data-theme="dark"] .section-heading h2 { color: #fffaf5 !important; }
html[data-theme="dark"] .section-heading .eyebrow { color: #dca97f !important; }

html[data-theme="dark"] .link-card,
html[data-theme="dark"] .link-card--dark {
  background:
    radial-gradient(circle at 91% 7%, rgba(180,119,79,.17), transparent 30%),
    linear-gradient(145deg, #171416 0%, #282022 55%, #151214 100%) !important;
}
html[data-theme="dark"] .link-card--bronze {
  background:
    radial-gradient(circle at 8% 8%, rgba(205,151,111,.12), transparent 34%),
    linear-gradient(145deg, #3d2a22 0%, #5a3928 48%, #2a211f 100%) !important;
}
html[data-theme="dark"] .link-card--sand {
  background: linear-gradient(145deg, #30292a 0%, #44342f 48%, #211c1e 100%) !important;
}
html[data-theme="dark"] .footer {
  background:
    radial-gradient(ellipse at 84% 50%, rgba(190,137,97,.31) 0%, rgba(145,99,72,.17) 27%, transparent 58%),
    linear-gradient(105deg, #0d0b0c 0%, #241b19 48%, #100d0f 100%) !important;
  color: #f3e8de !important;
}
html[data-theme="dark"] .footer-brand span { color: #dec9b9 !important; }
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .footer p span,
html[data-theme="dark"] .footer-brand strong { color: #fffaf5 !important; }

/* LTR footer halo mirrors to the other side. */
html[dir="ltr"][data-theme="mixed"] .footer {
  background:
    radial-gradient(ellipse at 16% 50%, rgba(181,132,94,.19) 0%, rgba(181,132,94,.09) 27%, transparent 57%),
    linear-gradient(255deg, #f2e8df 0%, #fffdfa 48%, #ead9cb 100%) !important;
}
html[dir="ltr"][data-theme="hybrid"] .footer {
  background:
    radial-gradient(ellipse at 16% 50%, rgba(188,135,95,.30) 0%, rgba(146,101,73,.16) 29%, transparent 58%),
    linear-gradient(255deg, #100e0f 0%, #261e1c 49%, #151113 100%) !important;
}
html[dir="ltr"][data-theme="dark"] .footer {
  background:
    radial-gradient(ellipse at 16% 50%, rgba(190,137,97,.31) 0%, rgba(145,99,72,.17) 27%, transparent 58%),
    linear-gradient(255deg, #0d0b0c 0%, #241b19 48%, #100d0f 100%) !important;
}

@media (max-width: 620px) {
  .section-heading {
    padding: 20px 18px;
    border-radius: 18px;
  }
  html[data-theme="mixed"] .topbar::before {
    width: min(390px, 88vw);
    height: 126px;
  }
  html[data-theme="hybrid"] .links-section { padding-top: 26px !important; }
}