/*
 * Dogwood Animal Rescue — homepage hero (FETCH)
 * Replaces the CrellySlider `[crellyslider alias="home_slider_05_02_2021"]`
 * shortcode block. Paste alongside dogwood-hero.js in a WordPress "Custom
 * HTML" block, in place of that shortcode.
 *
 * Layout: composited -- a solid brand-navy band (closer to the original
 * CrellySlider's graphic style) with title/tagline/CTA on one side and a
 * rotating background-removed cutout of a real adoptable pet "standing"
 * on the other side. No scrim needed since the background is a flat
 * color, not a photo -- text contrast is guaranteed regardless of which
 * pet is currently shown.
 *
 * Shares the --dw-* theming convention with dogwood-pets.css but is a
 * separate, independent stylesheet -- the hero has no dependency on the
 * pet-listing pages and shouldn't require loading their CSS/JS.
 */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Dancing+Script:wght@700&family=Poppins:ital,wght@0,500;0,800;1,500&display=swap");

:root {
  /* Dogwood's official palette */
  --dw-teal-light: #2a9cc1;
  --dw-teal-medium: #0085a8;
  --dw-teal-dark: #0a5b79;

  --dw-hero-bg: var(--dw-teal-dark);
  --dw-hero-bg-2: var(--dw-teal-medium);
  --dw-teal-deepest: #052e39; /* darker than --dw-teal-dark, for the left-side spotlight -- --dw-teal-dark itself is too close to the background gradient's own dark stop to read as a distinct glow */
  --dw-hero-text: #ffffff;
  --dw-hero-accent: #e8a33d;   /* placeholder gold CTA -- kept for contrast against the teal; swap if you'd rather stay monochrome-teal */
  --dw-hero-radius: 14px;

  /* Single source of truth for the cutout stage/image heights, so
     .dw-hero-caption-link (TEST 2026-08-09: positioned relative to the
     *photo's* bottom edge, not the stage's) can derive its position
     from the same numbers .dw-hero-cutout-stage/-img actually use,
     instead of a hand-tuned rem offset that silently drifts out of
     sync if either height ever changes. Desktop values here; the
     mobile media query below overrides both to its own clamp()s. */
  --dw-stage-h: 320px;
  --dw-img-h: 480px;
}

.dw-hero {
  position: relative;
  background: linear-gradient(135deg, var(--dw-hero-bg-2), var(--dw-hero-bg));
  color: var(--dw-hero-text);
  border-radius: var(--dw-hero-radius);
  /* deliberately NOT hidden -- the cutout is sized taller than this band
     on purpose so its lower half spills out below the rounded corners
     into the page (see .dw-hero-cutout-img). margin-bottom reserves
     room so that overflow lands on blank space, not on whatever
     WordPress content follows this block.

     This MUST stay >= the actual overflow or the overflowing content
     -- real DOM elements at z-index:1/2, not just painted pixels --
     covers *and blocks clicks on* whatever real content follows the
     hero, e.g. a live Donate button. Confirmed broken twice already
     (desktop AND mobile, different root causes, both fixed) before
     this became a calc() formula instead of a hand-tuned px guess.

     During the below-photo caption test (v1, since removed -- see
     .dw-hero-caption-link's comment) the caption itself was briefly
     the deepest point, needing img-h*1.3. Caption v2 (top: 66% of
     img-h) lands its bottom edge at 86% of img-h -- back INSIDE the
     photo's own extent -- so the photo is the deepest point again,
     same as before any caption-position testing started. Includes the
     Ken Burns pulse's max 6% growth (img-h*1.06) since that's a real,
     sustained state during rotation, not a transient -- confirmed via
     direct measurement through actual animation cycles when this
     first got tuned, not just this formula. One value covers both
     desktop and mobile/tablet since --dw-stage-h/--dw-img-h already
     resolve differently per tier (see the mobile media query, which
     doesn't need its own margin-bottom override). */
  overflow: visible;
  margin-bottom: calc(var(--dw-img-h) * 1.06 - var(--dw-stage-h) + 20px);
  font-family: inherit;
}

/* ---- decorative backdrop layer: logo watermark + soft spotlight glows.
   Clipped to the hero's own rounded rectangle (unlike the pet cutout,
   which is deliberately NOT clipped) via its own overflow:hidden, kept
   separate from .dw-hero itself so that clipping doesn't affect the
   cutout's intentional overflow. Sits behind .dw-hero-inner (z-index 0
   vs 1) and ignores pointer events entirely. ---- */
.dw-hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--dw-hero-radius);
  z-index: 0;
  pointer-events: none;
}

.dw-hero-watermark {
  position: absolute;
  top: 50%;
  right: -10%;
  width: 62%;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background-image: url("dogwood-logo-badge.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.09;
  /* recolor the badge to flat white regardless of its own blue tones,
     so it reads as a subtle texture rather than a second, competing
     logo-colored shape against the teal background */
  filter: brightness(0) invert(1);
}

.dw-hero-spotlight {
  position: absolute;
  border-radius: 50%;
  filter: blur(35px);
}

/* Opaque white glow. Light teal (the original color here) blended into
   the teal background gradient and was effectively invisible; black
   worked but read as a heavy dark cloud, especially on mobile where it
   sits behind the title/tagline. White contrasts just as reliably
   against any shade of teal but reads as a soft highlight instead. */
.dw-hero-spotlight-1 {
  width: 380px;
  height: 380px;
  right: 0%;
  top: -90px;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 35%, transparent 72%);
  opacity: 0.28;
}

/* Warm gold glow (the same accent used for the CTA button) as the
   second "spotlight" -- warm-against-cool is what actually makes two
   overlapping glows read as distinct shapes, not two shades of teal
   that blend into each other and the background. */
.dw-hero-spotlight-2 {
  width: 300px;
  height: 300px;
  right: 30%;
  bottom: -90px;
  background: radial-gradient(circle, var(--dw-hero-accent) 0%, var(--dw-hero-accent) 25%, transparent 70%);
  opacity: 0.45;
}

/* Deep-teal pool behind the org name/tagline on the left -- darkens that
   corner a bit so the white text (plus its own outline/shadow) reads
   with even more separation from the background, without needing an
   actual scrim across the whole hero. */
.dw-hero-spotlight-3 {
  width: 360px;
  height: 360px;
  left: -90px;
  top: 20%;
  transform: translateY(-50%);
  background: radial-gradient(circle, var(--dw-teal-deepest) 0%, var(--dw-teal-deepest) 35%, transparent 72%);
  opacity: 0.6;
}

.dw-hero * {
  box-sizing: border-box;
}

.dw-hero-inner {
  position: relative;
  z-index: 1; /* stay above .dw-hero-backdrop's watermark/spotlights */
  display: grid;
  /* minmax(0, Nfr), not bare Nfr -- a bare fr track won't shrink below
     its content's intrinsic width, and .dw-hero-title has white-space:
     nowrap, so its "intrinsic width" is the full unwrapped headline.
     Without the minmax(0, ...) floor, that alone was blowing the text
     column out to ~80% of the row and starving the pet column down to
     ~50px. minmax(0, ...) lets both tracks actually honor the 1.5:1
     ratio; the title's own font-size is what's tuned to fit within it. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 2.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Matches the actual header logo's typeface at the top of the live site
   (dogwood_animal_rescue_logo.png) -- a thin, elegant serif with very
   distinct capitals, not the bold sans used everywhere else in the
   hero. Cormorant Garamond is the closest Google Font match (checked
   side-by-side against the logo image, not guessed). Weight/stroke/
   spacing are all lighter than the old Poppins treatment on purpose --
   a heavy outline or tight tracking would fight the "thin letters"
   quality that's the whole point of matching the logo.

   font-size: the real constraint on this value isn't the column width
   at a comfortable desktop width (900px+, where there's 30+px of
   slack) -- it's the NARROWEST point the two-column layout still
   applies, i.e. just above the single-column breakpoint below. That
   was 861px when the breakpoint was 860px, where even 2.1rem only had
   ~7px of slack (measured, not calculated) and 2.2rem overflowed by
   14px. The breakpoint was raised to 900px specifically to move that
   pinch point out to 901px, where there's real room (measured ~18px
   slack at 2.2rem there). Re-measure the *narrowest* two-column width,
   not just a comfortable one, before ever increasing this again.

   #dw-hero-root prefix -- same specificity fight as .dw-hero-cta and
   .dw-hero-caption-link before it: the live theme has its own
   ".entry-content h1" font-size rules (TWO of them, presumably a base
   + a responsive variant, both class+element = (0,1,1)) which beat a
   bare ".dw-hero-title" (0,1,0) regardless of source order. Confirmed
   live 2026-08-09. #dw-hero-root gives this (1,1,0), which wins
   against any class/element combination no matter how many the theme
   stacks on. */
#dw-hero-root .dw-hero-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  -webkit-text-stroke: 0.5px rgba(10, 40, 50, 0.6);
  paint-order: stroke fill;
  white-space: nowrap;
}

/* Desktop/tablet: stays part of the same nowrap line as "Dogwood" (this
   is the default, inline). Mobile below forces it onto its own line
   instead -- see media query. #dw-hero-root prefix -- the theme also
   has a generic rule touching plain <span> elements (confirmed live);
   .dw-hero-title-line2 IS a span, so it needs the same specificity
   boost as everything else here. */
#dw-hero-root .dw-hero-title-line2 {
  display: inline;
}

#dw-hero-root .dw-hero-tagline {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.15rem;
  margin: 0 0 1.25rem;
  opacity: 0.92;
  white-space: nowrap;
}

/* #dw-hero-root prefix (not just .dw-hero-cta) on every rule below --
   same specificity fight as the cutout-img box-shadow fix: the live
   theme has rules like ".entry-content a:visited, .comment-content
   a:visited { color: ... }", which is class+pseudo-class+element,
   specificity (0,2,1). A bare ".dw-hero-cta:visited" is (0,2,0) -- b
   ties at 2, so the theme's extra "a" element selector (c=1) wins and
   silently recolors the button text, wrecking contrast against the
   gold background. #dw-hero-root gives these (1,2,0)/(1,1,0): the ID
   (a=1) beats any class/element-only selector regardless of count. */
#dw-hero-root .dw-hero-cta {
  display: inline-block;
  background: var(--dw-hero-accent);
  color: #2a2a2a;
  font-weight: 700;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  transition: filter 0.15s ease;
}

#dw-hero-root .dw-hero-cta:hover,
#dw-hero-root .dw-hero-cta:visited {
  color: #2a2a2a;
}

#dw-hero-root .dw-hero-cta:hover {
  filter: brightness(0.94);
}

/* ---- cutout stage: defines the "framed" area within the colored band.
   The image itself is taller than this (see .dw-hero-cutout-img) and
   top-anchored, so it's a big head/upper-body "headshot" at the top and
   the rest of the pet spills out past the stage and the hero band
   below it -- a deliberate "breaking the frame" effect, not a bug. ---- */
.dw-hero-cutout-stage {
  position: relative;
  height: var(--dw-stage-h);
}

.dw-hero-cutout-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--dw-img-h); /* taller than the stage/hero on purpose -- see above */
  width: 100%;
  object-fit: contain;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.9s ease;
  transform-origin: top center;
  z-index: 1; /* stay above whatever content follows the hero on the page */
  /* two stacked shadows: a tight rim shadow that hugs the whole cutout
     silhouette (so it reads as a distinct object against the flat
     background, not just flat art) plus a softer, larger ground shadow
     underneath it so it doesn't look like it's floating. */
  filter:
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5))
    drop-shadow(0 18px 16px rgba(0, 0, 0, 0.4));
}

/* The live theme applies its own default box-shadow (and border) to
   every <img> via a selector list like ".entry-content img, .widget
   img, img.wp-post-image" -- each of those is a class+element pair,
   specificity (0,1,1), which beats a plain ".dw-hero-cutout-img"
   (0,1,0) regardless of source order. Unlike filter:drop-shadow (which
   follows the PNG's actual alpha-masked silhouette), box-shadow traces
   the element's full rectangular box -- on a mostly-transparent cutout
   that's taller than the visible pet (see height:480px above), that
   theme box-shadow read as a faint rectangular border/frame floating
   around the cutout. Never showed up in local preview since that page
   never loaded the real theme's CSS -- only caught once tested on the
   live site. #dw-hero-root gives this (1,1,0) specificity, which beats
   any class+element combination no matter how many the theme lists. */
#dw-hero-root .dw-hero-cutout-img {
  box-shadow: none !important;
  border: none !important;
}

/* The pet's name itself, in a large script font, standing in for what
   was previously a small pill-button label -- no background chip, it's
   meant to read as part of the composition (like a signature/nameplate
   over the photo) rather than a UI control. Still the real link to that
   pet's detail page.

   TEST v2 (2026-08-09): positioned via `top`, not `bottom` --
   `top: calc(var(--dw-img-h) * 0.66)` puts the caption's top edge 66%
   of the way down the PHOTO (top is relative to the stage's top edge,
   same as the photo's own top:0, so no stage/photo coordinate
   conversion needed here, unlike the `bottom`-based v1 this replaced).
   Lands the name back OVERLAID on the photo's lower portion, roughly
   where v1 sat before it moved below the photo entirely -- but still
   only knows the photo's declared BOX height, not where each specific
   photo's visible pixels actually end (object-fit:contain can leave
   the box's lower portion transparent for a "wide" photo -- see
   crop_to_content's comment in build_hero_cutouts.py and the
   Buster test on 2026-08-09), so expect it to land solidly on some
   pets and float in empty space just past others, depending on that
   photo's own aspect ratio. margin-bottom is still sized for v1 (the
   caption no longer reaches past the photo, so it's over-provisioned
   right now, not broken -- fine to shrink back down later once a
   position is settled on). */
/* #dw-hero-root prefix -- same reason as .dw-hero-cta above: this is an
   <a> too (links to the pet's detail page), so without it the live
   theme's ".entry-content a" / ".entry-content a:visited" rules would
   win on specificity and silently override color:#ffffff, especially
   for anyone who's already clicked through to a pet's page once
   (:visited). Not yet reported broken like the CTA was, but it's the
   exact same pattern -- fixed proactively rather than waiting to hear
   about it. */
#dw-hero-root .dw-hero-caption-link {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--dw-img-h) * 0.66);
  z-index: 2;
  text-align: center;
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: calc(var(--dw-img-h) * 0.2);
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  /* ~3.65% of font-size -- matches the old fixed 3.5px at the old fixed
     6rem/96px desktop size, but now scales with it instead of needing
     its own separate mobile override (removed; was 2.5px, which this
     formula reproduces at the old mobile clamp's low end too). */
  -webkit-text-stroke: calc(var(--dw-img-h) * 0.0073) rgba(10, 40, 50, 0.85);
  paint-order: stroke fill;
  /* Real drop-shadow (glyph-silhouette-aware, same reasoning as the
     cutout <img>'s own filter:drop-shadow vs box-shadow) on top of the
     text-shadow/stroke above -- those alone were tuned for the text
     sitting on the teal band. Since the top:66% overlay test (2026-08-09)
     the name can also land in the photo's transparent lower padding,
     where it's the light page background showing through, not teal --
     a tight, fairly opaque dark shadow keeps it readable against
     either, not just the one background it used to always sit on. */
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.65));
  transform: rotate(-3deg);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

#dw-hero-root .dw-hero-caption-link:hover {
  transform: rotate(-3deg) scale(1.05);
  opacity: 0.88;
}

.dw-hero-toggle {
  /* positioned relative to .dw-hero itself (see JS: appended to `root`,
     not the cutout stage), so "bottom" anchors to the bottom edge of the
     actual colored band -- not the shorter inner stage box, and not the
     part of the pet cutout that intentionally spills past the band. */
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dw-hero-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

.dw-hero-status {
  padding: 1.5rem;
  text-align: center;
  opacity: 0.85;
}

/* Ken Burns -- a gentle scale-only "breathing" pulse rather than the
   pan+zoom used on full photos elsewhere: this cutout floats on a flat
   background with a fixed bottom anchor, so panning it would look like
   it's sliding off-center rather than exploring a photo. */
.dw-hero-kb {
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-name: dw-hero-kb-pulse;
}

@keyframes dw-hero-kb-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .dw-hero-kb {
    animation: none !important;
  }
}

/* Covers phones AND tablets (up to 900px, raised from 860px on
   2026-08-09 to give .dw-hero-title's two-column desktop size more
   room -- see that rule's comment), not just phones -- the two-column
   desktop layout (see .dw-hero-inner) splits width between the
   headline and the pet column, and at tablet widths that split left
   the pet column too narrow: object-fit:contain then shrank the
   rendered cutout to fit that width, so a lot of its height (esp. for
   the square Ninja cutout) was just empty transparent space in the box
   instead of visible pet, and it stopped reaching/overflowing past the
   stage's bottom edge like it's supposed to. Stacking to a single
   column here gives the cutout the *entire* viewport width to work
   with regardless of screen size, which is what actually guarantees
   the "hangs off the bottom" effect at any width in this range -- not
   just careful px tuning. Sizes use clamp(phone-size, Nvw, tablet-size)
   so phones still get the original small/tight numbers and tablets
   scale up toward (but not all the way to) the desktop numbers. Every
   clamp() upper bound in this block was re-verified empirically (not
   just recalculated) against the new 900px ceiling when it moved. */
@media (max-width: 900px) {
  /* No margin-bottom override needed here anymore -- the base rule's
     calc(var(--dw-img-h) * 1.3 - var(--dw-stage-h) + 20px) already
     resolves correctly at this tier too, because --dw-stage-h/--dw-img-h
     get redefined to their mobile clamp()s right below, and margin-
     bottom's calc() picks up whatever those resolve to on the same
     element. One formula, both tiers -- this is what the custom-
     property refactor bought over the old approach (separate hand-
     tuned clamp() formulas per tier, re-derived by hand each time
     something upstream changed, which is exactly how this file
     already broke twice before -- see the base rule's comment). */
  .dw-hero-inner {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem;
  }
  /* #dw-hero-root prefix on this and the two rules below it -- must
     match the base rules' specificity (see the theme .entry-content
     h1 / span fight explained above), same reason .dw-hero-cta's and
     .dw-hero-caption-link's mobile overrides needed it: without it,
     the now-more-specific base rule's desktop values win over these
     mobile-tuned ones regardless of source order. */
  #dw-hero-root .dw-hero-title {
    /* larger than the old single-line mobile size -- now that "Animal
       Rescue Project" breaks onto its own line (see .dw-hero-title-line2
       below), the longest line is ~22 chars instead of the full ~30,
       so a bigger size still fits without overflowing. */
    font-size: clamp(1.4rem, 5.5vw, 2.2rem);
    text-align: center;
  }
  #dw-hero-root .dw-hero-title-line2 {
    display: block;
  }
  #dw-hero-root .dw-hero-tagline {
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    text-align: center;
  }
  /* #dw-hero-root prefix -- must match the base rule's specificity (see
     the contrast fix above it in the file). Without it, the base rule's
     display:inline-block (now (1,1,0) thanks to that same #dw-hero-root
     prefix) outranks this media query's display:block regardless of
     source order, margin:auto centering does nothing on an inline-block
     box, and the button silently loses its mobile centering. */
  #dw-hero-root .dw-hero-cta {
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
  /* Redefines the SAME --dw-stage-h/--dw-img-h custom properties from
     :root, scoped to .dw-hero so every descendant that reads them
     (.dw-hero-cutout-stage/-img's height, .dw-hero-caption-link's
     calc()'d font-size/bottom) picks up the mobile clamp()s
     automatically -- no separate mobile overrides needed for any of
     those anymore, this is now the single place that changes. */
  .dw-hero {
    --dw-stage-h: clamp(220px, 32vw, 300px);
    --dw-img-h: clamp(340px, 50vw, 460px);
  }
  .dw-hero-watermark {
    /* centered and deliberately bigger than the band -- overridden off
       the base rule's right-anchored positioning entirely (left:50% +
       translate(-50%,-50%) instead of top:50% + translateY(-50%) with a
       right offset). .dw-hero-backdrop still clips it via overflow:
       hidden, so cropping at the edges here is expected, not a bug. */
    width: 130%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }
  .dw-hero-spotlight-1 {
    width: 220px;
    height: 220px;
    right: -20px;
    top: -60px;
  }
  .dw-hero-spotlight-2 {
    width: 180px;
    height: 180px;
    right: 30%;
    bottom: -60px;
  }
  .dw-hero-spotlight-3 {
    width: 240px;
    height: 240px;
    left: -70px;
    top: 10%;
  }
}