/* ============================================================
   JoCo (Garner / Johnston County, NC) local theme: ADDITIVE layer.

   Every value here is lifted from the client's JoCo mood board
   (brand_assets/Mood Board Photo Collage JoCo.pdf): the six-swatch
   palette printed under the country road, the sunset-over-the-water
   photograph, the JoCo lockup, the watercolour pelican, the pine
   road, the dock chairs, the "N.C" sand shot, and the two skyline
   frames.

   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-joco{
  /* --- mood board swatch grid, sampled verbatim --- */
  --joc-sky:#588BCA;        /* top-left swatch */
  --joc-cream:#EBD6C4;      /* top-middle swatch */
  --joc-deep:#074DAC;       /* top-right swatch */
  --joc-shell:#FDFDFE;      /* bottom-left swatch */
  --joc-brick:#A82821;      /* bottom-middle swatch (reserved; text accents use Badge Yellow) */
  --joc-taupe:#BEB09E;      /* bottom-right swatch */

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

/* ---------- Page ground: shell white over a warm sand wash ---------- */
body.theme-joco{background:var(--joc-shell);}
.theme-joco .surface-gray{background:rgba(190,176,158,.22);}
.theme-joco .surface-sky-tint{
  background:linear-gradient(180deg,var(--joc-shell) 0%,rgba(88,139,202,.15) 100%);
}
/* Cards sit on warm paper, not blue-gray paper */
.theme-joco .card,
.theme-joco .program,
.theme-joco .quote{
  background:color-mix(in srgb, var(--joc-shell) 92%, var(--joc-cream));
  border-color:rgba(190,176,158,.45);
  box-shadow:var(--joc-shadow);
}
.theme-joco .card:hover,
.theme-joco .program:hover{box-shadow:var(--joc-shadow-lift);}

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

/* =====================================================
   HERO: the Raleigh skyline photograph, full bleed.
   The photograph runs edge to edge at its own aspect ratio so the
   skyline stays whole, and the pelican stands at its lower right
   the way it stands on the mood board.
   ===================================================== */
.joc-hero{position:relative;background:var(--joc-shell);}
.joc-hero__stage{position:relative;}
.joc-hero__banner{
  position:relative;width:100%;
  aspect-ratio:2000/1014;
  max-height:min(66vh,40rem);
  overflow:hidden;
  background:var(--joc-deep);
}
.joc-hero__banner img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;}
/* Brand image treatment: a Police Blue multiply pass for cohesion,
   plus a darkening ramp so the header and pelican sit on something. */
.joc-hero__banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--police-blue);mix-blend-mode:multiply;opacity:.12;
}
.joc-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,.30),rgba(7,44,92,0) 32%);
}
.joc-hero__copy{
  max-width:min(100%,58rem);
  padding-block:clamp(2.25rem,4vw,3.25rem) clamp(.5rem,1.5vw,1.25rem);
}
.joc-hero h1{
  color:var(--police-blue-900);
  font-size:clamp(2.05rem,3.9vw,3.35rem);
  line-height:1.08;
}
.joc-hero .lead{color:var(--text-soft);max-width:52ch;margin-top:var(--s-5);}
.joc-hero .hero__rating{margin-top:var(--s-6);color:var(--text-soft);}

/* =====================================================
   Local photo strip: the rest of the mood board
   ===================================================== */
.joc-strip{
  display:grid;gap:var(--s-4);
  margin-top:var(--s-7);
}
@media(min-width:700px){.joc-strip{grid-template-columns:repeat(4,1fr);gap:var(--s-5);}}
.joc-shot{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  box-shadow:var(--joc-shadow);
  aspect-ratio:4/5;
}
.joc-shot img{width:100%;height:100%;object-fit:cover;}
.joc-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%);
}
/* Break the rhythm: the second and fourth frames ride lower. */
@media(min-width:700px){
  .joc-strip>*:nth-child(2n){transform:translateY(var(--s-5));}
}

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

/* =====================================================
   Promise band: the pine road, full bleed
   ===================================================== */
.joc-band{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4rem,11vw,8.5rem);
  text-align:center;color:var(--white);
}
.joc-band__media{position:absolute;inset:0;z-index:0;}
.joc-band__media img{width:100%;height:100%;object-fit:cover;object-position:50% 82%;}
.joc-band__media::after{
  content:"";position:absolute;inset:0;
  background:var(--police-blue);mix-blend-mode:multiply;opacity:.30;
}
.joc-band::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(7,44,92,.62),rgba(7,44,92,.34) 55%,rgba(7,44,92,.48));
}
.joc-band .container{position:relative;z-index:2;}
.joc-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);
}
.joc-band .lead{
  color:var(--joc-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;
   brick red is the JoCo accent on light ones. */
.joc-hl{color:var(--badge-yellow);-webkit-text-stroke:2.5px rgba(7,44,92,.85);paint-order:stroke fill;}
.theme-joco .accent{color:var(--joc-deep);}
.theme-joco .section-num{color:var(--joc-deep);}
.theme-joco .eyebrow::before{background:var(--badge-yellow);}
.theme-joco .btn-primary{background:var(--joc-sky);box-shadow:0 14px 30px rgba(7,77,172,.30);}
.theme-joco .btn-primary:hover{background:var(--joc-deep);}
.theme-joco .btn-secondary{color:var(--joc-deep);box-shadow:inset 0 0 0 2px var(--joc-deep);}
.theme-joco .btn-secondary:hover{background:var(--joc-deep);color:var(--white);}
.theme-joco .site-footer{background:var(--joc-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.
   ===================================================== */
.joc-hero{position:relative;isolation:isolate;background:var(--police-blue-900);}
.joc-hero__stage{position:absolute;inset:0;z-index:0;}
.joc-hero__banner{
  position:absolute;inset:0;
  width:100%;height:100%;
  aspect-ratio:auto;max-height:none;
}
.joc-hero__banner img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;}
.joc-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));
}
.joc-hero>.container{
  position:relative;z-index:3;
  min-height:clamp(25rem,54vh,37rem);
  display:flex;align-items:center;
}
.joc-hero__copy{
  max-width:min(100%,53rem);
  padding-block:clamp(3rem,7vw,5rem);
}
.joc-hero h1{color:var(--white);text-shadow:0 2px 28px rgba(7,44,92,.55);}
.joc-hero .lead{color:rgba(255,255,255,.94);text-shadow:0 1px 18px rgba(7,44,92,.5);}
.joc-hero .eyebrow{color:var(--badge-yellow);}
.joc-hero .eyebrow::before{background:var(--badge-yellow);}
.joc-hero .hero__rating{color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(7,44,92,.5);}
.joc-hero .btn-secondary{color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
.joc-hero .btn-secondary:hover{background:var(--white);color:var(--police-blue-900);}