/* ============================================================
   Miami (South Florida) local theme: ADDITIVE layer.

   Every value here is lifted from the client's Miami mood board
   (brand_assets/miami Mood Board.png): the six-swatch palette
   printed under the lifeguard tower, the sand "MIAMI" photograph,
   the Miami lockup, the palm/sunset sticker, the flamingo, the
   coral frond, the palms-and-skyline shot and the South Florida
   road map.

   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, the same way the
   JoCo theme adds its warm sand ramp.

   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-miami{
  /* --- mood board swatch row, sampled verbatim --- */
  --mia-ocean:#598CCA;      /* top-left swatch  */
  --mia-coral:#FB7D68;      /* top-middle swatch */
  --mia-deep:#074DAD;       /* top-right swatch */
  --mia-shell:#FDFDFE;      /* bottom-left swatch */
  --mia-red:#F12E34;        /* bottom-middle swatch (reserved; text accents use Badge Yellow) */
  --mia-flamingo:#FA6E99;   /* bottom-right swatch */

  /* atmosphere, built only from the six swatches above */
  --mia-wash:rgba(89,140,202,.12);
  --mia-coral-wash:rgba(251,125,104,.14);
  --mia-shadow:0 1px 2px rgba(7,77,173,.10),0 16px 36px -14px rgba(7,77,173,.34);
  --mia-shadow-lift:0 2px 5px rgba(7,77,173,.16),0 28px 56px -18px rgba(7,77,173,.44);
}

/* ---------- Page ground: shell white over ocean wash ---------- */
.theme-miami body,
body.theme-miami{background:var(--mia-shell);}
.theme-miami .surface-sky-tint{
  background:linear-gradient(180deg,var(--mia-shell) 0%,rgba(89,140,202,.13) 100%);
}
.theme-miami .surface-gray{background:rgba(89,140,202,.10);}

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

/* =====================================================
   HERO: the sand "MIAMI" photograph, full bleed.
   The photograph runs edge to edge at its own aspect ratio so the
   word stays whole, and the palm/sunset sticker hangs off its lower
   right exactly the way it sits on the mood board.
   ===================================================== */
.mia-hero{position:relative;background:var(--mia-shell);}
.mia-hero__banner{
  position:relative;
  width:100%;
  aspect-ratio:2400/1045;
  max-height:min(66vh,40rem);
  overflow:hidden;
  background:var(--mia-deep);
}
.mia-hero__banner img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 52%;
}
/* Brand image treatment: a Police Blue multiply pass for cohesion,
   plus a darkening ramp so the header and sticker sit on something. */
.mia-hero__banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--police-blue);
  mix-blend-mode:multiply;
  opacity:.13;
}
.mia-hero__banner::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(7,44,92,.42),rgba(7,44,92,0) 26%),
    linear-gradient(to top,rgba(7,44,92,.34),rgba(7,44,92,0) 34%);
}

.mia-hero__stage{position:relative;}
.mia-hero__copy{
  max-width:min(100%,58rem);
  padding-block:clamp(2.25rem,4vw,3.25rem) clamp(.5rem,1.5vw,1.25rem);
}
.mia-hero h1{
  color:var(--police-blue-900);
  font-size:clamp(2.05rem,3.9vw,3.35rem);
  line-height:1.08;
}
.mia-hero .lead{color:var(--text-soft);max-width:52ch;margin-top:var(--s-5);}
.mia-hero .hero__rating{margin-top:var(--s-6);color:var(--text-soft);}

/* The palm + sunset sticker, hanging off the photograph. */
.mia-palm{
  position:absolute;z-index:4;
  right:clamp(.25rem,2.5vw,2.75rem);
  bottom:clamp(-6rem,-5vw,-2.5rem);
  width:clamp(5.5rem,19vw,18rem);
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 20px 34px rgba(7,44,92,.34));
}
@media(max-width:640px){
  .mia-palm{bottom:-2.75rem;right:.25rem;}
}

/* =====================================================
   Section motifs: coral frond, flamingo
   ===================================================== */
.mia-motif{position:relative;overflow:hidden;}
.mia-frond{
  position:absolute;pointer-events:none;user-select:none;z-index:0;
  width:clamp(8rem,17vw,15rem);
  opacity:.42;
}
.mia-frond--tr{top:1.5rem;right:-2.5rem;transform:rotate(18deg);}
.mia-frond--bl{bottom:2.5rem;left:-4rem;transform:rotate(-162deg);opacity:.34;}
@media(max-width:899px){.mia-frond{display:none;}}
.mia-motif>.container{position:relative;z-index:1;}

.mia-flamingo{
  width:clamp(5.5rem,9vw,8.5rem);
  height:auto;
  flex:none;
  filter:drop-shadow(0 12px 22px rgba(7,77,173,.18));
}

/* =====================================================
   Offer list: three things, no repeated icon boxes
   ===================================================== */
.mia-offers{
  display:grid;
  gap:var(--s-6);
  margin-top:var(--s-7);
  counter-reset:mia;
}
@media(min-width:820px){.mia-offers{grid-template-columns:repeat(3,1fr);gap:var(--s-7);}}
.mia-offer{
  position:relative;
  padding-top:var(--s-5);
  border-top:3px solid var(--mia-coral);
}
.mia-offer:nth-child(2){border-top-color:var(--mia-ocean);}
.mia-offer:nth-child(3){border-top-color:var(--mia-flamingo);}
.mia-offer h3{color:var(--police-blue-900);font-size:clamp(1.15rem,2vw,1.4rem);}
.mia-offer p{color:var(--text-soft);margin-top:var(--s-3);font-size:1rem;}

/* =====================================================
   Photo panels: lifeguard tower, map
   ===================================================== */
.mia-split{
  display:grid;gap:var(--s-6);align-items:center;
}
@media(min-width:900px){
  .mia-split{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);}
  .mia-split--flip>*:first-child{order:2;}
}
.mia-photo{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--mia-shadow-lift);
}
.mia-photo img{width:100%;height:100%;object-fit:cover;}
.mia-photo--tall{aspect-ratio:1/1;}
.mia-photo--map{aspect-ratio:5/4;}
.mia-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,0) 46%);
}
.mia-photo__tag{
  position:absolute;z-index:2;left:var(--s-5);bottom:var(--s-5);
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.7rem;letter-spacing:1.6px;
  color:var(--white);
  background:rgba(7,77,173,.82);
  padding:.5rem .85rem;border-radius:var(--r-pill);
}
.mia-photo__tag--top{top:var(--s-5);bottom:auto;}

/* Service-area chips, drawn from the mood board's road map */
.mia-areas{
  display:flex;flex-wrap:wrap;gap:.55rem;
  margin-top:var(--s-5);
}
.mia-areas li{
  font-family:var(--font-display);
  font-size:.72rem;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--mia-deep);
  background:rgba(89,140,202,.16);
  border-radius:var(--r-pill);
  padding:.5rem .9rem;
  transition:transform .3s var(--ease-spring);
}
.mia-areas li:hover{transform:translateY(-2px);}

/* =====================================================
   Promise band: palms and the Miami skyline, full bleed
   ===================================================== */
.mia-band{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4rem,11vw,8.5rem);
  text-align:center;
  color:var(--white);
}
.mia-band__media{position:absolute;inset:0;z-index:0;}
.mia-band__media img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;}
.mia-band__media::after{
  content:"";position:absolute;inset:0;
  background:var(--police-blue);mix-blend-mode:multiply;opacity:.28;
}
.mia-band::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(7,44,92,.58),rgba(7,44,92,.30) 55%,rgba(7,44,92,.46));
}
.mia-band .container{position:relative;z-index:2;}
.mia-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);
}
.mia-band p{
  color:var(--mia-shell);margin-top:var(--s-4);
  font-size:clamp(1.02rem,1.6vw,1.25rem);
  text-shadow:0 1px 14px rgba(7,44,92,.55);
}

/* =====================================================
   Notify block
   ===================================================== */
.mia-notify{
  display:grid;gap:var(--s-7);align-items:center;
}
@media(min-width:900px){.mia-notify{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,4.5rem);}}
.mia-notify__sign{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-6);}
.mia-notify__sign p{
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:.5px;
  color:var(--mia-deep);line-height:1.5;
}
.theme-miami .ghl-placeholder{
  border-color:rgba(89,140,202,.45);
  background:var(--mia-shell);
  box-shadow:var(--mia-shadow);
}
.theme-miami .ghl-placeholder__tag{background:var(--mia-deep);color:var(--white);}

/* Inline emphasis: Badge Yellow stays the brand's signature on dark
   surfaces; coral is the Miami accent on light ones. */
.mia-hl{color:var(--badge-yellow);-webkit-text-stroke:2.5px rgba(7,44,92,.85);paint-order:stroke fill;}
.theme-miami .accent{color:var(--mia-deep);}
.theme-miami .section-num{color:var(--mia-deep);}
.theme-miami .eyebrow::before{background:var(--badge-yellow);}
.theme-miami .surface-sky-tint .eyebrow::before,
.theme-miami .section .eyebrow::before{background:var(--badge-yellow);}

/* Buttons pick up the Miami blues without changing the brand shapes */
.theme-miami .btn-primary{
  background:var(--mia-ocean);
  box-shadow:0 14px 30px rgba(7,77,173,.32);
}
.theme-miami .btn-primary:hover{background:var(--mia-deep);}
.theme-miami .btn-secondary{color:var(--mia-deep);box-shadow:inset 0 0 0 2px var(--mia-deep);}
.theme-miami .btn-secondary:hover{background:var(--mia-deep);color:var(--white);}
.theme-miami .site-footer{background:var(--mia-deep);}
.theme-miami .stars{color:var(--badge-yellow);}


/* =====================================================
   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.
   ===================================================== */
.mia-hero{position:relative;isolation:isolate;background:var(--police-blue-900);}
.mia-hero__stage{position:absolute;inset:0;z-index:0;}
.mia-hero__banner{
  position:absolute;inset:0;
  width:100%;height:100%;
  aspect-ratio:auto;max-height:none;
}
.mia-hero__banner img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;}
.mia-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));
}
.mia-hero>.container{
  position:relative;z-index:3;
  min-height:clamp(25rem,54vh,37rem);
  display:flex;align-items:center;
}
.mia-hero__copy{
  max-width:min(100%,53rem);
  padding-block:clamp(3rem,7vw,5rem);
}
.mia-hero h1{color:var(--white);text-shadow:0 2px 28px rgba(7,44,92,.55);}
.mia-hero .lead{color:rgba(255,255,255,.94);text-shadow:0 1px 18px rgba(7,44,92,.5);}
.mia-hero .eyebrow{color:var(--badge-yellow);}
.mia-hero .eyebrow::before{background:var(--badge-yellow);}
.mia-hero .hero__rating{color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(7,44,92,.5);}
.mia-hero .btn-secondary{color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
.mia-hero .btn-secondary:hover{background:var(--white);color:var(--police-blue-900);}