/* =====================================================================
   light-mix.css — re-themes alternating content <section>s on the
   interior pages to readable LIGHT bands. Upgraded: two-tone alternation
   (white / warm paper), card depth + hover lift, a brand accent hairline,
   and hierarchy polish — so light sections read "considered" not bland.
   A section gets .lightband (and every 2nd one .lb-paper) from light-mix.js.
   Override layer only — never edits page markup.
   ===================================================================== */

/* full-bleed band background behind a centered max-w section */
section.lightband {
  position: relative;
  background: transparent;
  border-top-color: transparent !important;
}
section.lightband::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
  z-index: -1;
}
/* every 2nd light band = warm paper, so consecutive light bands differ */
section.lb-paper::before { background: #f3f5ec; }

/* brand accent hairline glow at the top edge of each light band */
section.lightband::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw; height: 2px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(52,194,141,0.55), transparent);
}

/* ---- text: light sage → readable ink; accents → deep green ---- */
section.lightband { color: #414c39 !important; }
section.lightband [class*="text-sage"] { color: #414c39 !important; }
section.lightband h1[class],
section.lightband h2[class],
section.lightband h3[class],
section.lightband h4[class],
section.lightband h5[class] { color: #0b2521 !important; }
section.lightband [class*="text-accent"] { color: #4a6130 !important; }
section.lightband em { color: #4a6130 !important; }
section.lightband [class*="text-white"] { color: #0b2521 !important; }

/* ---- hierarchy polish ---- */
section.lightband h1,
section.lightband h2 { letter-spacing: -0.02em; text-wrap: balance; }
section.lightband p { text-wrap: pretty; }

/* ---- surfaces: dark panels / ink blocks → light, with contrast vs band ---- */
section.lightband [class*="bg-panel"],
section.lightband [class*="bg-ink"] { background-color: #f6f7f0 !important; }
/* on paper bands, cards go pure white so they still separate from the bg */
section.lb-paper [class*="bg-panel"],
section.lb-paper [class*="bg-ink"] { background-color: #ffffff !important; }

/* ---- depth: bordered panels (cards) get a soft shadow + hover lift ----
   (filter: drop-shadow, not box-shadow — immune to Tailwind's --tw-shadow placeholder) */
section.lightband [class*="border-accent"][class*="bg-panel"],
section.lightband [class*="border-accent"][class*="bg-ink"] {
  --tw-drop-shadow: drop-shadow(0 14px 20px rgba(11,37,33,0.16)) !important;
  filter: drop-shadow(0 14px 20px rgba(11,37,33,0.16)) !important;
  transition: filter .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
}
section.lightband [class*="border-accent"][class*="bg-panel"]:hover,
section.lightband [class*="border-accent"][class*="bg-ink"]:hover {
  --tw-drop-shadow: drop-shadow(0 22px 30px rgba(11,37,33,0.22)) !important;
  filter: drop-shadow(0 22px 30px rgba(11,37,33,0.22)) !important;
  transform: translateY(-4px);
  border-color: rgba(11,37,33,0.30) !important;
}

/* ---- borders → dark hairlines on light ---- */
section.lightband [class*="border-accent"],
section.lightband [class*="border-sage"] { border-color: rgba(11,37,33,0.14) !important; }
section.lightband [class*="divide-accent"] > * + *,
section.lightband [class*="divide-sage"] > * + * { border-color: rgba(11,37,33,0.12) !important; }

/* ---- decorative grid textures → faint dark-on-light ---- */
section.lightband .grid-tex,
section.lightband .grid-tex-sm {
  background-image:
    linear-gradient(to right, rgba(11,37,33,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,37,33,0.05) 1px, transparent 1px) !important;
}

/* ---- soft radial accent glows: keep subtle on white ---- */
section.lightband [style*="radial-gradient"] { opacity: 0.5; }

/* solid accent buttons stay green-on-ink (bg-accent / text-ink not overridden) */