/* =============================================================================
 * bali.day — WATERCOLOR LAYER  (v2 Fable 5, "Watercolor Field-Guide")
 * -----------------------------------------------------------------------------
 * STAGED — NOT DEPLOYED. Design-only. No PHP, no JS, no plugin/theme settings.
 * Supersedes watercolor.css (Opus v1 draft, kept for reference).
 *
 * DEPLOY CANDIDATE. Enqueue AFTER main.css (dependency guarantees order):
 *
 *   wp_enqueue_style('bali-day-watercolor',
 *     get_stylesheet_directory_uri().'/assets/css/watercolor.css',
 *     array('bali-day-main-css'),
 *     filemtime(get_stylesheet_directory().'/assets/css/watercolor.css'));
 *
 * (ship this file AS assets/css/watercolor.css — one enqueue line to add,
 *  one line to remove for full rollback.)
 *
 * v2 engineering changes vs the v1 draft:
 *  1. BRUSH EDGES: v1 used `filter: url(data:...#e)` — a cross-document SVG
 *     filter reference that Chromium/WebKit DO NOT support (Firefox-only).
 *     v2 uses mask-image with self-contained SVG *images* (feTurbulence runs
 *     inside the rasterized SVG → works in all modern browsers), layered over
 *     organic border-radius + blur as the universal base.
 *  2. PAPER GRAIN: v1 used a position:fixed body::before + mix-blend-mode and
 *     lifted .main/.header with z-index:1 (stacking-context risk for Max Mega
 *     Menu dropdowns / Elementor popups; full-page composite layer on mobile).
 *     v2 bakes low-alpha warm noise into a tiled body background-image —
 *     zero pseudo-elements, zero blend modes, zero z-index changes.
 *  3. FOOTER: v1 force-reactivated the unknown legacy .footer-wash-overlay
 *     markup with !important. v2 paints its own wash on .watercolor-footer
 *     and leaves the legacy element hidden (as main.css set it).
 *  4. Removed unnecessary !important (main.css doesn't use it on buttons,
 *     footer, links — file order wins). Kept ONLY on body background-color,
 *     where main.css itself uses !important.
 *  5. Added widescreen composition (1680/1920/2560), mobile discipline
 *     (≤767px decoration reduction), hero paper-tear transition, map-container
 *     hard guards, and an overflow-x safety clip.
 *
 * Cascade contract: this file only recolors/reskins EXISTING main.css
 * selectors and adds new wc-* utilities. It never restructures layout,
 * never touches parent-theme/plugin selectors except the read-only map guard.
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * 1. TOKENS  (extends the palette; --c-* from main.css stays intact)
 * ---------------------------------------------------------------------------*/
:root {
  --wc-paper:        #F4EDDE;  /* coconut/limestone paper ground */
  --wc-paper-raised: #FBF7EE;  /* card surface */
  --wc-sand:         #E7DBC4;  /* raised band / footer */
  --wc-edge:         #D8C7A8;  /* hand-torn hairline */
  --wc-ink:          #26302A;  /* volcanic charcoal body — ~11:1 AAA on paper */
  --wc-ink-soft:     #55605A;  /* secondary — ~5.2:1 AA */
  --wc-ocean:        #123A40;  /* deep ocean ink — headings — ~9:1 AAA */
  --wc-rice:         #3C6B4E;  /* rice-field green accent */
  --wc-rice-deep:    #234E39;  /* link ink — ~7:1 */
  --wc-clay:         #BE6B3F;  /* warm accent / hover */
  --wc-clay-deep:    #9C5330;  /* primary CTA surface — paper text ~4.9:1 AA */
  --wc-sky:          #9DBFC7;  /* restrained wash only, never text */

  --wc-wash-strong: .30;
  --wc-wash-soft:   .16;

  /* Rough-edged blob mask — a self-contained SVG image (turbulence displaces
     the ellipse INSIDE the SVG, then the whole thing rasterizes). Cross-browser,
     unlike cross-document filter references. */
  --wc-blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='r' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='55'/%3E%3C/filter%3E%3Cellipse cx='300' cy='300' rx='225' ry='205' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");

  /* Horizontal torn-paper strip (hero → page transition). */
  --wc-tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='80' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3C/filter%3E%3Crect x='-20' y='26' width='1640' height='60' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
 * 2. PAPER GROUND  (noise baked into a tiled background image — no pseudo,
 *    no blend mode, no stacking-context changes anywhere)
 * ---------------------------------------------------------------------------*/
body {
  /* !important required: main.css sets body background-color !important */
  background-color: var(--wc-paper) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 0 0.20 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-repeat: repeat;
  color: var(--wc-ink);
  overflow-x: clip;               /* decorative blobs can never cause h-scroll */
}

h1, h2, h3, h4, h5, h6,
.site-title, .widget-title, .entry-title { color: var(--wc-ocean); }

a { color: var(--wc-rice-deep); }
a:hover { color: var(--wc-clay-deep); }

/* -----------------------------------------------------------------------------
 * 3. UTILITIES  (wc-* — additive, safe to drop into Elementor HTML widgets)
 * ---------------------------------------------------------------------------*/

/* Painted wash blob: gradient body + rough mask + soft blur = wet edge. */
.wc-wash {
  position: absolute; z-index: 0; pointer-events: none;
  opacity: var(--wc-wash-strong);
  border-radius: 42% 58% 55% 45% / 55% 45% 62% 38%;  /* organic fallback shape */
  filter: blur(6px);
  -webkit-mask-image: var(--wc-blob); mask-image: var(--wc-blob);
  -webkit-mask-size: 100% 100%;     mask-size: 100% 100%;
}
.wc-wash--rice { background: radial-gradient(closest-side, var(--wc-rice), transparent 74%); }
.wc-wash--clay { background: radial-gradient(closest-side, var(--wc-clay), transparent 74%); }
.wc-wash--sky  { background: radial-gradient(closest-side, var(--wc-sky),  transparent 72%); opacity: var(--wc-wash-soft); }

/* Brush underline for display headings (SVG-as-image: works everywhere). */
.wc-underline { position: relative; display: inline-block; }
.wc-underline::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.38em; height: .4em;
  pointer-events: none;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24'%3E%3Cpath d='M4 15 C 60 6 120 20 175 12 C 220 6 265 16 296 9' stroke='%23BE6B3F' stroke-width='7' fill='none' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M10 19 C 70 12 130 22 190 16 C 235 12 270 19 292 15' stroke='%239C5330' stroke-width='3' fill='none' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
}

/* Brush divider between sections: <div class="wc-divider" aria-hidden="true"></div> */
.wc-divider {
  display: block; width: min(100%, 1200px); margin: 0 auto;
  height: clamp(16px, 2.5vw, 28px);
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='28' preserveAspectRatio='none'%3E%3Cpath d='M8 18 C 200 8 340 24 560 15 C 760 8 900 24 1120 15 C 1160 13 1180 16 1192 14' stroke='%23D8C7A8' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wc-divider--rice {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='28' preserveAspectRatio='none'%3E%3Cpath d='M8 18 C 200 8 340 24 560 15 C 760 8 900 24 1120 15 C 1160 13 1180 16 1192 14' stroke='%233C6B4E' stroke-width='5' fill='none' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

/* Painted stamp badge: <span class="wc-stamp">Local-checked</span> */
.wc-stamp {
  display: inline-flex; align-items: center; gap: .5rem; position: relative;
  padding: .5rem 1rem; color: var(--wc-rice-deep); font-weight: 700;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
}
.wc-stamp::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 2px solid var(--wc-rice); opacity: .75;
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  transform: rotate(-1.2deg);
}

/* Warm band for alternating section rhythm. */
.wc-band--sand { background: var(--wc-sand); }

/* -----------------------------------------------------------------------------
 * 4. SKINS FOR EXISTING THEME SELECTORS  (restyle, never restructure)
 * ---------------------------------------------------------------------------*/

/* HERO — painted atmosphere behind the existing scrim… */
.hero-section::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: soft-light;
  background:
    radial-gradient(min(56vw, 900px) min(46vw, 700px) at 16% 18%, var(--wc-rice) 0%, transparent 62%),
    radial-gradient(min(50vw, 820px) min(42vw, 640px) at 84% 28%, var(--wc-sky)  0%, transparent 64%),
    radial-gradient(min(46vw, 760px) min(44vw, 660px) at 68% 98%, var(--wc-clay) 0%, transparent 62%);
}
/* …and a torn-paper lip where the hero dissolves into the page. Signature move:
   sits below .hero-content (z2), above the scrim (z1 → this is z1, later in
   paint order), clipped by the hero's existing overflow:hidden. */
.hero-section::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: -1%; right: -1%; bottom: -2px; height: clamp(30px, 5vw, 72px);
  background: var(--wc-paper);
  -webkit-mask-image: var(--wc-tear); mask-image: var(--wc-tear);
  -webkit-mask-size: 100% 100%;      mask-size: 100% 100%;
}

/* Search entry — soft paper container. */
.smart-search-bar {
  background: var(--wc-paper-raised);
  border-color: var(--wc-edge);
}

/* Eyebrows painted in clay. */
.section-eyebrow { color: var(--wc-clay-deep); }

/* Cards & panels — paper surface, hand-torn hairline. */
.glass-panel, .card, .mood-card {
  background: var(--wc-paper-raised);
  border-color: var(--wc-edge);
}
.mood-section { background: var(--wc-sand); }
.mood-ico { background: var(--wc-sand); color: var(--wc-rice-deep); }
.mood-card:hover { border-color: var(--wc-clay); }

/* Discovery tiles — ONE painted corner accent per tile, masked (real brush
   edge), screen-blended over the photo/gradient, never over the label side. */
.bento-item::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: -26%; right: -18%; width: 66%; height: 70%;
  background: radial-gradient(closest-side, var(--wc-clay), transparent 74%);
  -webkit-mask-image: var(--wc-blob); mask-image: var(--wc-blob);
  -webkit-mask-size: 100% 100%;      mask-size: 100% 100%;
  filter: blur(4px); opacity: .30; mix-blend-mode: screen;
}
.bento-pin { background: rgba(251, 247, 238, .94); color: var(--wc-rice-deep); }

/* Buttons — sunset clay carries every action (gold retired to heritage duty).
   No !important: main.css sets these without it; file order decides. */
.btn-primary, .btn-primary-small, .btn-search-icon {
  background-color: var(--wc-clay-deep);
  color: #FBF7EE;
}
.btn-primary:hover, .btn-primary-small:hover, .btn-search-icon:hover {
  background-color: var(--wc-clay);
  color: #FBF7EE;
}
.btn-secondary { color: var(--wc-rice-deep); border-color: var(--wc-rice); }
.btn-secondary:hover { background: var(--wc-rice-deep); color: var(--wc-paper-raised); }
.btn-circular { background: var(--wc-paper-raised); color: var(--wc-rice-deep); }
.btn-circular:hover { background: var(--wc-clay-deep); color: #FBF7EE; }

/* Driver CTA band — deep ocean ink with two painted washes framing the copy. */
.driver-cta-inner { position: relative; overflow: hidden; background: var(--wc-ocean); }
.driver-cta-inner::before,
.driver-cta-inner::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  -webkit-mask-image: var(--wc-blob); mask-image: var(--wc-blob);
  -webkit-mask-size: 100% 100%;      mask-size: 100% 100%;
  filter: blur(8px); opacity: .32; mix-blend-mode: screen;
}
.driver-cta-inner::before {
  left: -12%; top: -35%; width: 52%; height: 150%;
  background: radial-gradient(closest-side, var(--wc-rice), transparent 72%);
}
.driver-cta-inner::after {
  right: -10%; bottom: -40%; width: 46%; height: 140%;
  background: radial-gradient(closest-side, var(--wc-clay), transparent 72%);
}
.driver-cta-inner > * { position: relative; z-index: 1; }
.driver-cta-inner .section-eyebrow { color: var(--wc-clay); }

/* FOOTER — the guidebook's back page: warm sand paper, soft rising wash.
   Legacy .footer-wash-overlay stays hidden (as main.css set it) — we paint
   our own wash instead of resurrecting unknown live markup. */
.watercolor-footer {
  position: relative; overflow: hidden;
  background: var(--wc-sand);
  color: var(--wc-ink);
}
.watercolor-footer::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  bottom: max(-18vw, -260px); width: min(70vw, 1100px); height: min(36vw, 560px);
  background: radial-gradient(closest-side, var(--wc-rice), transparent 72%);
  -webkit-mask-image: var(--wc-blob); mask-image: var(--wc-blob);
  -webkit-mask-size: 100% 100%;      mask-size: 100% 100%;
  filter: blur(8px); opacity: var(--wc-wash-soft);
}
.watercolor-footer .footer-content { position: relative; z-index: 1; }
.watercolor-footer .footer-brand { color: var(--wc-ocean); }
.watercolor-footer .footer-nav a { color: var(--wc-ink-soft); }
.watercolor-footer .footer-nav a:hover { color: var(--wc-clay-deep); }
.watercolor-footer .footer-copy { color: var(--wc-ink-soft); }
.watercolor-footer .footer-social a {
  background: rgba(38, 48, 42, .08); color: var(--wc-ink);
}
.watercolor-footer .footer-social a:hover { background: var(--wc-clay-deep); color: #FBF7EE; }

/* -----------------------------------------------------------------------------
 * 5. MAP GUARD  (watercolor NEVER touches map canvases or their controls)
 * ---------------------------------------------------------------------------*/
.leaflet-container, .leaflet-container *,
[class*="wpgmza"], [class*="travelers-map"], [class*="cbis-map"],
.chbs-map, .chbs-map * {
  -webkit-mask-image: none !important; mask-image: none !important;
  mix-blend-mode: normal !important;
}
.leaflet-container::before, .leaflet-container::after { content: none !important; }

/* -----------------------------------------------------------------------------
 * 6. MOBILE-FIRST DISCIPLINE  (≤767px: calmer, lighter, faster)
 * ---------------------------------------------------------------------------*/
@media (max-width: 767px) {
  .hero-section::after { opacity: .34; }          /* quieter atmosphere */
  .hero-section::before { height: clamp(22px, 7vw, 34px); }
  .bento-item::after { display: none; }           /* photo tiles stay clean */
  .wc-wash { opacity: .20; filter: blur(8px); }   /* washes recede */
  .wc-wash--sky { opacity: .12; }
  .driver-cta-inner::before, .driver-cta-inner::after { opacity: .22; }
  .wc-divider { height: 14px; }
  .watercolor-footer::before { opacity: .10; }
}

/* -----------------------------------------------------------------------------
 * 7. WIDESCREEN COMPOSITION  (large screens feel designed, not stretched)
 * ---------------------------------------------------------------------------*/
@media (min-width: 1680px) {
  :root { --container: 1320px; }                  /* denser 4-col mosaic */
  .hero-section { min-height: clamp(560px, 68vh, 860px); }
  .tropical-editorial-front section { padding-block: clamp(4rem, 6vw, 7rem); }
  .hero-content { max-width: 980px; }
  .smart-search-bar { max-width: 880px; }
  .footer-content { max-width: 980px; }
}

@media (min-width: 1920px) {
  /* Frame the empty margins with two faint painted washes (front page only).
     position:relative alone creates NO stacking context; z-index:-1 keeps the
     washes behind all content, above the body paper. */
  .tropical-editorial-front { position: relative; }
  .tropical-editorial-front::before,
  .tropical-editorial-front::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: 12%; width: 460px; height: 640px;
    -webkit-mask-image: var(--wc-blob); mask-image: var(--wc-blob);
    -webkit-mask-size: 100% 100%;      mask-size: 100% 100%;
    filter: blur(10px);
  }
  .tropical-editorial-front::before {
    left: max(-160px, calc(50% - 78rem));
    background: radial-gradient(closest-side, var(--wc-rice), transparent 72%);
    opacity: .12;
  }
  .tropical-editorial-front::after {
    right: max(-160px, calc(50% - 78rem));
    top: 46%;
    background: radial-gradient(closest-side, var(--wc-sky), transparent 72%);
    opacity: .10;
  }
}

@media (min-width: 2560px) {
  /* Content never balloons; the paper + framing washes own the extra field. */
  :root { --container: 1400px; }
  .hero-section { min-height: 900px; }
}

/* -----------------------------------------------------------------------------
 * 8. PRINT + MOTION
 * ---------------------------------------------------------------------------*/
@media print {
  body { background-image: none !important; }
  .wc-wash, .wc-divider,
  .hero-section::before, .hero-section::after,
  .driver-cta-inner::before, .driver-cta-inner::after,
  .watercolor-footer::before,
  .bento-item::after,
  .tropical-editorial-front::before, .tropical-editorial-front::after { display: none !important; }
}
/* Motion: this layer adds no animation/transitions; main.css's
   prefers-reduced-motion block already covers everything. */