/* ============================================================
   Katy, TX local theme: ADDITIVE layer.

   Every value here is lifted from the client's Katy mood board
   (brand_assets/Mood Board Photo Collage Katy TX.pdf): the
   six-swatch palette printed beside the windmill, the skyline
   reflection photograph, the Katy lockup, the TEXAS stamp, the
   sombrero, the flag bunting, the longhorn, the neighbourhood
   aerial and the Texas stone marker.

   Palette rule: the Blue Line K-9 brand colors are untouched.
   Police Blue, Badge Yellow and Alert Red are used exactly as
   specified in CLAUDE.md. The mood board swatches are added
   alongside them as the location accent set.

   To revert completely:
     1. Delete this file.
     2. Remove the <link ... theme.css> line and the
        <!-- local-theme:start --> ... <!-- local-theme:end -->
        blocks in index.html.
   ============================================================ */

.theme-katy{
  /* --- mood board swatch grid, sampled verbatim --- */
  --kat-paleblue:#E2F4FF;   /* top-left swatch */
  --kat-cream:#EBD6C4;      /* top-middle swatch */
  --kat-deep:#074DAC;       /* top-right swatch */
  --kat-shell:#FDFDFE;      /* bottom-left swatch */
  --kat-red:#DE1225;        /* bottom-middle swatch (reserved; text accents use Badge Yellow) */
  --kat-taupe:#BEB09E;      /* bottom-right swatch */

  /* atmosphere, built only from the six swatches above */
  --kat-shadow:0 1px 2px rgba(7,77,172,.10),0 16px 36px -14px rgba(7,77,172,.32);
  --kat-shadow-lift:0 2px 5px rgba(7,77,172,.16),0 28px 56px -18px rgba(7,77,172,.42);
}

/* ---------- Page ground: shell white under a big pale sky ---------- */
body.theme-katy{background:var(--kat-shell);}
.theme-katy .surface-gray{background:rgba(190,176,158,.20);}
.theme-katy .surface-sky-tint{
  background:linear-gradient(180deg,var(--kat-shell) 0%,var(--kat-paleblue) 100%);
}
.theme-katy .card,
.theme-katy .program,
.theme-katy .quote{
  background:color-mix(in srgb, var(--kat-shell) 92%, var(--kat-cream));
  border-color:rgba(190,176,158,.42);
  box-shadow:var(--kat-shadow);
}
.theme-katy .card:hover,
.theme-katy .program:hover{box-shadow:var(--kat-shadow-lift);}

/* The Katy lockup is squarer than the national one, so it needs its
   own height to keep the header's optical weight the same. */
.theme-katy .nav__logo img{height:clamp(74px,9vw,112px);}

/* =====================================================
   HERO: the skyline reflection photograph, full bleed.
   The photograph runs edge to edge at its own aspect ratio so the
   reflection stays whole, and the TEXAS stamp sits over its lower
   left corner the way it sits on the mood board.
   ===================================================== */
.kat-hero{position:relative;background:var(--kat-shell);}
.kat-hero__stage{position:relative;}
.kat-hero__banner{
  position:relative;width:100%;
  aspect-ratio:1282/625;
  max-height:min(66vh,40rem);
  overflow:hidden;
  background:var(--kat-deep);
}
.kat-hero__banner img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
/* Brand image treatment: a Police Blue multiply pass for cohesion,
   plus a darkening ramp so the header and stamp sit on something. */
.kat-hero__banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--police-blue);mix-blend-mode:multiply;opacity:.12;
}
.kat-hero__banner::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(7,44,92,.40),rgba(7,44,92,0) 26%),
    linear-gradient(to top,rgba(7,44,92,.28),rgba(7,44,92,0) 30%);
}
.kat-hero__copy{
  max-width:min(100%,58rem);
  padding-block:clamp(2.25rem,4vw,3.25rem) clamp(.5rem,1.5vw,1.25rem);
}
.kat-hero h1{
  color:var(--police-blue-900);
  font-size:clamp(2.05rem,3.9vw,3.35rem);
  line-height:1.08;
}
.kat-hero .lead{color:var(--text-soft);max-width:52ch;margin-top:var(--s-5);}
.kat-hero .hero__rating{margin-top:var(--s-6);color:var(--text-soft);}

/* The TEXAS stamp, franked over the corner of the photograph. */
.kat-stamp{
  position:absolute;z-index:4;
  right:clamp(.5rem,4vw,4.5rem);
  bottom:clamp(-4.5rem,-4vw,-2rem);
  width:clamp(6rem,13vw,12rem);
  height:auto;pointer-events:none;
  transform:rotate(-4deg);
  filter:drop-shadow(0 18px 30px rgba(7,44,92,.34));
}
@media(max-width:640px){.kat-stamp{bottom:-2.25rem;right:.5rem;}}

/* =====================================================
   Local photo strip: the rest of the mood board
   ===================================================== */
.kat-strip{display:grid;gap:var(--s-4);margin-top:var(--s-7);}
@media(min-width:700px){.kat-strip{grid-template-columns:repeat(4,1fr);gap:var(--s-5);}}
.kat-shot{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  box-shadow:var(--kat-shadow);
  aspect-ratio:4/5;
}
.kat-shot img{width:100%;height:100%;object-fit:cover;}
.kat-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0) 52%);
}
@media(min-width:700px){
  .kat-strip>*:nth-child(2n){transform:translateY(var(--s-5));}
}

/* =====================================================
   Split: copy beside a photograph
   ===================================================== */
.kat-split{display:grid;gap:var(--s-6);align-items:center;}
.kat-split h2{font-size:clamp(1.75rem,2.9vw,2.4rem);}
@media(min-width:900px){
  .kat-split{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);}
}
.kat-photo{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:var(--kat-shadow-lift);
  aspect-ratio:4/5;
}
.kat-photo img{width:100%;height:100%;object-fit:cover;}

/* =====================================================
   Promise band: the windmill at sundown, full bleed
   ===================================================== */
.kat-band{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4rem,11vw,8.5rem);
  text-align:center;color:var(--white);
}
.kat-band__media{position:absolute;inset:0;z-index:0;}
.kat-band__media img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;}
.kat-band__media::after{
  content:"";position:absolute;inset:0;
  background:var(--police-blue);mix-blend-mode:multiply;opacity:.30;
}
.kat-band::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(7,44,92,.62),rgba(7,44,92,.32) 55%,rgba(7,44,92,.46));
}
.kat-band .container{position:relative;z-index:2;}
.kat-band h2{
  color:var(--white);
  font-size:clamp(1.85rem,4.2vw,3.35rem);line-height:1.12;
  text-shadow:0 2px 24px rgba(7,44,92,.6);
}
.kat-band .lead{
  color:var(--kat-shell);margin-top:var(--s-4);
  text-shadow:0 1px 14px rgba(7,44,92,.55);
}

/* =====================================================
   Accents
   ===================================================== */
/* Badge Yellow stays the brand signature on dark surfaces;
   the mood board red is the Katy accent on light ones. */
.kat-hl{color:var(--badge-yellow);-webkit-text-stroke:2.5px rgba(7,44,92,.85);paint-order:stroke fill;}
.theme-katy .accent{color:var(--kat-deep);}
.theme-katy .section-num{color:var(--kat-deep);}
.theme-katy .eyebrow::before{background:var(--badge-yellow);}
.theme-katy .btn-primary{background:var(--sky-blue);box-shadow:0 14px 30px rgba(7,77,172,.30);}
.theme-katy .btn-primary:hover{background:var(--kat-deep);}
.theme-katy .btn-secondary{color:var(--kat-deep);box-shadow:inset 0 0 0 2px var(--kat-deep);}
.theme-katy .btn-secondary:hover{background:var(--kat-deep);color:var(--white);}
.theme-katy .site-footer{background:var(--kat-deep);}


/* =====================================================
   HERO OVERLAY TREATMENT
   The photograph fills the whole hero and the copy sits on top of it,
   instead of the copy stacking underneath the picture.

   Brand image treatment per CLAUDE.md is preserved: the Police Blue
   multiply pass stays, and the darkening ramp is strengthened into a
   left-weighted scrim so white type stays legible over any photograph.

   To revert: delete this block. The rules above restore the stacked layout.
   ===================================================== */
.kat-hero{position:relative;isolation:isolate;background:var(--police-blue-900);}
.kat-hero__stage{position:absolute;inset:0;z-index:0;}
.kat-hero__banner{
  position:absolute;inset:0;
  width:100%;height:100%;
  aspect-ratio:auto;max-height:none;
}
.kat-hero__banner img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.kat-hero__banner::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to right,rgba(7,44,92,.86),rgba(7,44,92,.60) 44%,rgba(7,44,92,.30) 70%,rgba(7,44,92,.22)),
    linear-gradient(to bottom,rgba(7,44,92,.42),rgba(7,44,92,.06) 34%,rgba(7,44,92,.52));
}
.kat-hero>.container{
  position:relative;z-index:3;
  min-height:clamp(25rem,54vh,37rem);
  display:flex;align-items:center;
}
.kat-hero__copy{
  max-width:min(100%,53rem);
  padding-block:clamp(3rem,7vw,5rem);
}
.kat-hero h1{color:var(--white);text-shadow:0 2px 28px rgba(7,44,92,.55);}
.kat-hero .lead{color:rgba(255,255,255,.94);text-shadow:0 1px 18px rgba(7,44,92,.5);}
.kat-hero .eyebrow{color:var(--badge-yellow);}
.kat-hero .eyebrow::before{background:var(--badge-yellow);}
.kat-hero .hero__rating{color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(7,44,92,.5);}
.kat-hero .btn-secondary{color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
.kat-hero .btn-secondary:hover{background:var(--white);color:var(--police-blue-900);}