/* ============================================================
   Scenic Land & Farms — Topographic Texture System
   Tone-on-tone background motif. Designed to read as texture,
   not decoration. Pattern fades toward edges; opacities are
   tuned so the topo is almost invisible at first glance.

   Brand palette:
     Navy  #002349
     Tint  #6b8bb5  (lighter navy used for tone-on-tone on navy)

   Approved settings (refined 2026-05-21):
     On navy   -> tint contours, ~10% (whisper)
     On white  -> navy contours, ~4%  (near-invisible)
     Footer    -> white contours, ~7% (just barely visible)
   ============================================================ */

:root {
  --slf-navy: #002349;
  --slf-navy-tint: #6b8bb5;

  /* Defaults: tuned for restraint. Override per-block with the
     palette presets below, or with the intensity overrides. */
  --slf-tex-scale: 145% auto;           /* wider spacing between contours */
  --slf-tex-position: center;
  --slf-tex-fade: radial-gradient(ellipse at center,
                                  rgba(0,0,0,1) 32%,
                                  rgba(0,0,0,0) 88%);
}

/* --- Core texture utility ----------------------------------- */
/* Any block with class="slf-tex slf-tex-<county> slf-tex-on-<navy|white>"
   gets a tone-on-tone topo overlay as a ::before. The overlay is
   double-masked: the SVG contour mask AND a radial fade mask, so the
   pattern attenuates toward the edges instead of running to the border. */

.slf-tex {
  position: relative;
  overflow: hidden;
}
.slf-tex > * { position: relative; z-index: 2; }

.slf-tex::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-color: var(--slf-tex-color);

  /* Double mask: SVG contours intersected with a radial fade.
     Both must be opaque for a pixel to show, so the pattern
     dissolves toward corners without any visible edge. */
  -webkit-mask-image: var(--slf-tex-url), var(--slf-tex-fade);
          mask-image: var(--slf-tex-url), var(--slf-tex-fade);
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: var(--slf-tex-scale), 100% 100%;
          mask-size: var(--slf-tex-scale), 100% 100%;
  -webkit-mask-position: var(--slf-tex-position), center;
          mask-position: var(--slf-tex-position), center;
  -webkit-mask-composite: source-in;     /* webkit legacy */
          mask-composite: intersect;     /* spec */

  opacity: var(--slf-tex-opacity, 0.08);
}

/* Fallback for browsers without mask-composite (rare): the radial
   fade is dropped, opacity is lowered an extra tick so the pattern
   still reads as texture rather than decoration. */
@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .slf-tex::before {
    -webkit-mask-image: var(--slf-tex-url);
            mask-image: var(--slf-tex-url);
    -webkit-mask-size: var(--slf-tex-scale);
            mask-size: var(--slf-tex-scale);
    opacity: calc(var(--slf-tex-opacity, 0.08) * 0.75);
  }
}

/* --- Texture sources (one per county + composite) ----------- */
.slf-tex-composite  { --slf-tex-url: url('svgs/topo-middle-tn-composite.svg'); }
.slf-tex-cheatham   { --slf-tex-url: url('svgs/topo-cheatham.svg'); }
.slf-tex-davidson   { --slf-tex-url: url('svgs/topo-davidson.svg'); }
.slf-tex-maury      { --slf-tex-url: url('svgs/topo-maury.svg'); }
.slf-tex-robertson  { --slf-tex-url: url('svgs/topo-robertson.svg'); }
.slf-tex-rutherford { --slf-tex-url: url('svgs/topo-rutherford.svg'); }
.slf-tex-sumner     { --slf-tex-url: url('svgs/topo-sumner.svg'); }
.slf-tex-williamson { --slf-tex-url: url('svgs/topo-williamson.svg'); }
.slf-tex-wilson     { --slf-tex-url: url('svgs/topo-wilson.svg'); }

/* --- Palette + intensity presets ---------------------------- */
/* Navy blocks: tint contours barely above the base navy */
.slf-tex-on-navy  { --slf-tex-color: var(--slf-navy-tint); --slf-tex-opacity: 0.10; }
/* White blocks: navy contours at a whisper */
.slf-tex-on-white { --slf-tex-color: var(--slf-navy);      --slf-tex-opacity: 0.04; }
/* Footer: white contours, barely there */
.slf-tex-footer   { --slf-tex-color: #ffffff;              --slf-tex-opacity: 0.07; }

/* Optional intensity overrides if a single block needs a touch more */
.slf-tex-whisper   { --slf-tex-opacity: 0.04 !important; }
.slf-tex-subtle    { --slf-tex-opacity: 0.10 !important; }
.slf-tex-statement { --slf-tex-opacity: 0.16 !important; }

/* --- "Terrain at a Glance" content block -------------------- */
/* For county guide pages. Pairs with a .slf-tex on-white whisper block. */
.slf-terrain {
  background: #fafafa;
  border-left: 3px solid var(--slf-navy);
  padding: 32px 36px;
  margin: 28px 0;
}
.slf-terrain h4 {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  margin: 0 0 14px;
  color: var(--slf-navy);
  font-weight: 400;
}
.slf-terrain dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 8px;
  font-size: 13px;
  margin: 0;
}
.slf-terrain dt {
  color: #666;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
}
.slf-terrain dd { margin: 0; color: var(--slf-navy); }
.slf-terrain .src {
  margin-top: 18px;
  font-size: 11px;
  color: #666;
  letter-spacing: 0.5px;
}
.slf-terrain .src a { color: var(--slf-navy); }

@media (max-width: 640px) {
  .slf-terrain dl { grid-template-columns: 1fr; row-gap: 4px; }
  .slf-terrain dt { margin-top: 8px; }
}