/* Soothing twilight palette — separate overrides preserve the approved light design. */
.theme-toggle{border:1px solid #b88a8c;border-radius:999px;padding:11px 15px;color:#17474a;background:#fff7f4;font-weight:700;white-space:nowrap;cursor:pointer}
.theme-toggle:focus-visible{outline:3px solid #c97978;outline-offset:3px}
html[data-theme="twilight"]{color-scheme:dark;--ink:#e2e9e4;--muted:#b5c4c0;--cream:#1b3034;--peach:#304347;--line:#496064;--white:#304247;--shadow:0 14px 35px rgba(0,0,0,.22)}
html[data-theme="twilight"] body{background:#1b3034;color:#e6eee9}
html[data-theme="twilight"] .site-header{background:rgba(26,47,51,.97);border-color:#435b5d}
html[data-theme="twilight"] .brand-copy strong,html[data-theme="twilight"] .brand-copy small,html[data-theme="twilight"] .nav-links,html[data-theme="twilight"] .nav-links a{color:#e6e8df}
html[data-theme="twilight"] .brand-mark{color:#e7a1a3;border-color:#d9a1a1}
html[data-theme="twilight"] .nav-links a.active{color:#f2b4b5;border-color:#d89a9c}
html[data-theme="twilight"] .theme-toggle{background:#3d5458;border-color:#9b8e90;color:#fff0e8}
html[data-theme="twilight"] .hero{background:#253e42}
html[data-theme="twilight"] .hero-photo{filter:brightness(.8) saturate(.76)}
html[data-theme="twilight"] .hero-overlay{background:linear-gradient(90deg,rgba(21,45,49,.06) 0%,rgba(28,50,53,.25) 38%,rgba(27,49,53,.88) 62%,rgba(27,49,53,.96) 100%)}
html[data-theme="twilight"] .hero h1,html[data-theme="twilight"] .hero .lede,html[data-theme="twilight"] .quick-links{color:#f1eee5}
html[data-theme="twilight"] .eyebrow,html[data-theme="twilight"] .quick-links i{color:#f1b3b1}
html[data-theme="twilight"] .search-panel{background:rgba(51,75,78,.9)}
html[data-theme="twilight"] .search-field{background:#304c4e;border-color:#627173}
html[data-theme="twilight"] .search-field span,html[data-theme="twilight"] .search-field select{color:#f1f3eb}
html[data-theme="twilight"] .search-field select option{background:#304c4e;color:#fff}
html[data-theme="twilight"] .trust-strip{background:linear-gradient(90deg,#32474b,#3d4d4d,#33494b);border-color:#536468}
html[data-theme="twilight"] .trust-grid article{border-color:#536468}
html[data-theme="twilight"] .trust-grid .icon{background:#4b6060;color:#f1b3b1}
html[data-theme="twilight"] .trust-grid strong,html[data-theme="twilight"] .section-head h2,html[data-theme="twilight"] .ad-frame h3,html[data-theme="twilight"] .provider-body h3,html[data-theme="twilight"] .get-listed h2,html[data-theme="twilight"] .sponsor-grid h2{color:#f2eee6}
html[data-theme="twilight"] .trust-grid small,html[data-theme="twilight"] .ad-frame p,html[data-theme="twilight"] .provider-body p,html[data-theme="twilight"] .provider-body small,html[data-theme="twilight"] .get-listed p,html[data-theme="twilight"] .sponsor-grid p,html[data-theme="twilight"] .display-ad-inner small{color:#c9d4ce}
html[data-theme="twilight"] .type-grid button,html[data-theme="twilight"] .provider-card,html[data-theme="twilight"] .ad-frame,html[data-theme="twilight"] .get-listed,html[data-theme="twilight"] .display-ad-inner{background:#30474b;border-color:#59686a;color:#f2eee6}
html[data-theme="twilight"] .type-grid button span{color:#e9a4a5}
html[data-theme="twilight"] .sponsor-section{background:#283f43}
html[data-theme="twilight"] .display-ad-inner strong{color:#e9f2e9}
html[data-theme="twilight"] footer{background:#112b2f}
html[data-theme="twilight"] .guide-panel{background:#273f42;border-color:#557073;color:#edf1e9}
html[data-theme="twilight"] .guide-head{background:#152f33}
html[data-theme="twilight"] .guide-message{background:#405657;color:#f2f0e7}
html[data-theme="twilight"] .guide-choices button,html[data-theme="twilight"] .guide-actions button:not(.guide-primary),html[data-theme="twilight"] .guide-footer button,html[data-theme="twilight"] .guide-input{background:#344e51;border-color:#617579;color:#f2f1e9}
html[data-theme="twilight"] .guide-footer{border-color:#597073}
html[data-theme="twilight"] .guide-label,html[data-theme="twilight"] .guide-note,html[data-theme="twilight"] .guide-status{color:#d0d9d4}
html[data-theme="twilight"] .guide-input::placeholder{color:#b4c5c1}
@media(max-width:650px){.nav-wrap{gap:7px}.theme-toggle{font-size:11px;padding:10px}.site-header .pill-btn{padding:10px 11px}}
@media(max-width:650px){html[data-theme="twilight"] .hero-overlay{background:linear-gradient(180deg,rgba(24,43,46,.22),rgba(25,44,48,.82) 44%,#1b3034 100%)}}

/* Hero photograph layout: soft transitions into the typography area. */
.hero-photo{background-position:32% 47%;background-size:cover}
.hero-overlay{background:linear-gradient(90deg,rgba(250,244,237,.03) 0%,rgba(252,246,240,.13) 32%,rgba(255,249,244,.72) 56%,rgba(255,249,244,.96) 78%)}
html[data-theme="twilight"] .hero-overlay{background:linear-gradient(90deg,rgba(21,45,49,.03) 0%,rgba(28,50,53,.16) 32%,rgba(27,49,53,.77) 56%,rgba(27,49,53,.97) 78%)}
@media(max-width:1000px){.hero-photo{background-position:25% center}.hero-overlay{background:linear-gradient(90deg,rgba(255,248,242,.30),rgba(255,248,242,.94))}html[data-theme="twilight"] .hero-overlay{background:linear-gradient(90deg,rgba(24,43,46,.32),rgba(25,44,48,.91))}}
@media(max-width:650px){.hero-photo{background-position:34% top}.hero-overlay{background:linear-gradient(180deg,rgba(255,248,242,.10),rgba(255,248,242,.82) 46%,#fff9f4 92%)}html[data-theme="twilight"] .hero-overlay{background:linear-gradient(180deg,rgba(24,43,46,.15),rgba(25,44,48,.80) 45%,#1b3034 92%)}}

/* Hero image staged for upload. Old hero remains as fallback until the file is present. */
.hero-photo{background-image:linear-gradient(90deg,rgba(23,52,53,.12),rgba(255,246,237,.04)),url('/assets/fl-birth-hero-2026.webp'),url('/assets/hero-black-baby-girl.webp');background-position:center,33% 46%,33% 46%;background-size:cover,cover,cover;background-repeat:no-repeat}
@media(max-width:650px){.hero-photo{background-position:center,36% top,36% top}}

/* Hero framing revision: display the baby at approximately natural hero height
   instead of scaling a 16:9 photo to fill the entire panoramic viewport. */
.hero-photo{
 background-image:linear-gradient(90deg,rgba(23,52,53,.02),rgba(23,52,53,.02)),url('/assets/fl-birth-hero-2026.webp'),linear-gradient(90deg,#e8dfd6,#e8dfd6);
 background-size:cover,auto 108%,cover;
 background-position:center,left center,center;
 background-repeat:no-repeat;
}
.hero-overlay{
 background:linear-gradient(90deg,rgba(255,249,244,0) 0%,rgba(255,249,244,0) 24%,rgba(255,249,244,.42) 42%,rgba(255,249,244,.92) 62%,rgba(255,249,244,.97) 100%);
}
html[data-theme="twilight"] .hero-photo{filter:none;background-image:linear-gradient(90deg,rgba(21,45,49,.10),rgba(21,45,49,.10)),url('/assets/fl-birth-hero-2026.webp'),linear-gradient(90deg,#263d41,#263d41)}
html[data-theme="twilight"] .hero-overlay{
 background:linear-gradient(90deg,rgba(27,49,53,.16) 0%,rgba(27,49,53,.22) 24%,rgba(27,49,53,.64) 43%,rgba(27,49,53,.94) 64%,rgba(27,49,53,.98) 100%);
}
@media(max-width:1000px){
 .hero-photo{background-size:cover,auto 106%,cover;background-position:center,left center,center}
 .hero-overlay{background:linear-gradient(90deg,rgba(255,249,244,.15),rgba(255,249,244,.92) 75%)}
 html[data-theme="twilight"] .hero-overlay{background:linear-gradient(90deg,rgba(27,49,53,.22),rgba(27,49,53,.94) 75%)}
}
@media(max-width:650px){
 .hero-photo{background-size:cover,auto 79%,cover;background-position:center,left top,center}
 .hero-overlay{background:linear-gradient(180deg,rgba(255,249,244,0) 0%,rgba(255,249,244,.48) 32%,rgba(255,249,244,.95) 63%,#fff9f4 100%)}
 html[data-theme="twilight"] .hero-overlay{background:linear-gradient(180deg,rgba(27,49,53,.12) 0%,rgba(27,49,53,.5) 31%,rgba(27,49,53,.96) 64%,#1b3034 100%)}
}

/* Hero edge fix: mask the PHOTO layer itself, eliminating the rectangular seam.
   The underlying hero shares the exact text-side surface color in each theme. */
.hero{background:#fff9f4}
.hero-photo,.hero-photo[style]{
  background:none!important;
  filter:none!important;
}
.hero-photo::before{
  content:"";
  position:absolute;inset:0;
  background:url('/assets/fl-birth-hero-2026.webp') left center / auto 108% no-repeat;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 23%,rgba(0,0,0,.93) 30%,rgba(0,0,0,.48) 40%,transparent 56%);
  mask-image:linear-gradient(to right,#000 0%,#000 23%,rgba(0,0,0,.93) 30%,rgba(0,0,0,.48) 40%,transparent 56%);
}
.hero-overlay{background:none!important;pointer-events:none}
html[data-theme="twilight"] .hero{background:#1b3135}
html[data-theme="twilight"] .hero-photo::before{filter:brightness(.74) saturate(.78)}
html[data-theme="twilight"] .hero-overlay{background:linear-gradient(90deg,rgba(27,49,53,.05),rgba(27,49,53,.12) 34%,transparent 62%)!important}
@media(max-width:1000px){
 .hero-photo::before{background-size:auto 105%;-webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.85) 22%,transparent 75%);mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.85) 22%,transparent 75%)}
}
@media(max-width:650px){
 .hero-photo::before{
  background-position:left top;background-size:auto 79%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.9) 22%,rgba(0,0,0,.35) 45%,transparent 67%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.9) 22%,rgba(0,0,0,.35) 45%,transparent 67%);
 }
 .hero-overlay{background:linear-gradient(to bottom,transparent 0%,rgba(255,249,244,.12) 35%,#fff9f4 80%)!important}
 html[data-theme="twilight"] .hero-overlay{background:linear-gradient(to bottom,transparent 0%,rgba(27,49,53,.12) 34%,#1b3135 80%)!important}
}

/* Photo-backed city discovery tiles — source images from Wikimedia Commons.
   Keep photo references here so attribution can be maintained. */
.city-card{
 isolation:isolate;
 transform:translateY(0);
 transition:transform .24s ease,box-shadow .24s ease,filter .24s ease;
 box-shadow:0 7px 18px rgba(23,52,53,.15);
 background-color:#456e70;
 background-position:center;
 background-size:cover;
}
.city-card::after{background:linear-gradient(180deg,rgba(11,32,35,.05) 5%,rgba(8,32,34,.25) 38%,rgba(8,32,34,.9) 100%)}
.city-card:hover,.city-card:focus-visible{
 transform:translateY(-7px);
 box-shadow:0 18px 28px rgba(19,48,49,.26);
 filter:saturate(1.08);
}
.city-card:focus-visible{outline:3px solid #cf8583;outline-offset:3px}
.city-orlando{background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Lake_eola_in_Orlando_Florida_with_fountain.jpg?width=600")}
.city-tampa{background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Tampa_night.jpg?width=600")}
.city-stpete{background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Downtown_St._Petersburg_from_St._Pete_Pier.jpg?width=600")}
.city-daytona{background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/DaytonaBeach-Pier.jpg?width=600")}
.city-kissimmee{background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Lakefront_Park_01.jpg?width=600")}
.city-apopka{background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Wekiwa_Springs_State_Park_springs01.jpg?width=600")}
.city-credits{margin:11px 0 0;text-align:right;font-size:11px;color:#60736f}
.city-credits a{text-decoration:underline;text-underline-offset:2px}
html[data-theme="twilight"] .city-credits{color:#bfcfca}
@media(prefers-reduced-motion:reduce){.city-card{transition:none}.city-card:hover,.city-card:focus-visible{transform:none;filter:none}}

/* Search section uses the same surfaces in both approved themes. */
.directory-results{scroll-margin-top:90px;background:#fbf7f1}
.directory-results[hidden]{display:none}
.directory-results .section-head{align-items:center}
.results-clear{background:transparent;border:1px solid #c97978;color:#ab5e62;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer}
.results-summary{color:#526b6a;font-size:15px;margin-bottom:14px}
.results-empty{background:#fffaf6;border:1px solid #eadbd3;border-radius:16px;padding:24px 28px;color:#334847}
.results-empty h3{font:700 23px Georgia,serif;margin:0 0 9px;color:#17474a}
.results-empty p{line-height:1.6;margin:8px 0}
html[data-theme="twilight"] .directory-results{background:#1b3034}
html[data-theme="twilight"] .results-empty{background:#30474b;border-color:#59686a;color:#d9e4dd}
html[data-theme="twilight"] .results-empty h3{color:#f2eee6}
html[data-theme="twilight"] .results-summary{color:#d0d9d4}
html[data-theme="twilight"] .results-clear{color:#f0b0b0}

/* Mobile usability refinement — desktop styling unchanged. */
.guide-launch-short{display:none}
@media(max-width:650px){
  .nav-wrap{gap:8px}
  .brand{min-width:0;gap:7px}
  .brand-copy strong{font-size:18px;line-height:1.05}
  .brand-mark{width:38px;height:38px;flex-shrink:0}
  .theme-toggle{padding:9px 10px;font-size:11px}
  .site-header .pill-btn{padding:10px 11px;font-size:11px;max-width:123px;text-align:center;line-height:1.15}
  .hero,.hero-grid{min-height:0}
  .hero-copy{padding:58px 0 26px}
  .hero h1{font-size:clamp(32px,8.6vw,38px);line-height:1.07;letter-spacing:-.018em;margin:9px 0 17px}
  .hero .eyebrow{font-size:10px;line-height:1.5;letter-spacing:.12em}
  .hero .lede{font-size:15px;line-height:1.52}
  .search-panel{gap:7px;padding:7px;margin-top:18px}
  .search-field select{height:45px}
  .search-panel button{height:46px}
  .quick-links{line-height:1.6;margin-top:12px;padding-right:5px}
  .hero-photo::before{
    background-size:auto 73%;
    background-position:left top;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 15%,rgba(0,0,0,.28) 30%,transparent 49%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 15%,rgba(0,0,0,.28) 30%,transparent 49%);
  }
  .hero-overlay{background:linear-gradient(to bottom,rgba(255,249,244,.08),rgba(255,249,244,.53) 19%,rgba(255,249,244,.95) 48%,#fff9f4 75%)!important}
  html[data-theme="twilight"] .hero-overlay{background:linear-gradient(to bottom,rgba(27,49,53,.25),rgba(27,49,53,.65) 19%,rgba(27,49,53,.98) 48%,#1b3135 75%)!important}
  .guide-launch{
    right:12px;
    bottom:max(78px,env(safe-area-inset-bottom,0px) + 65px);
    padding:11px 15px;
    font-size:13px;
    min-height:44px;
    max-width:158px;
  }
  .guide-launch-full{display:none}
  .guide-launch-short{display:inline}
  .guide-panel{bottom:max(130px,env(safe-area-inset-bottom,0px) + 115px);max-height:calc(100dvh - 155px)}
}
@media(max-width:370px){
  .brand-copy strong{font-size:16px}
  .hero h1{font-size:32px}
  .site-header .pill-btn{max-width:107px}
}


/* MOBILE HERO V2 — separate photo, copy and search. Desktop untouched.
   Explicitly undo earlier mobile overlay/masking rather than layering more fades. */
@media(max-width:650px){
  .hero{display:block;min-height:0;overflow:hidden}
  .hero-photo{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:clamp(205px,58vw,310px);
    background:none!important;
    overflow:hidden;
  }
  .hero-photo::before{
    content:"";
    position:absolute;
    inset:0;
    display:block;
    background-image:url('/assets/fl-birth-hero-2026.webp');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 48%;
    filter:none;
    -webkit-mask-image:none;
    mask-image:none;
  }
  html[data-theme="twilight"] .hero-photo::before{filter:none}
  .hero-overlay,html[data-theme="twilight"] .hero-overlay{display:none!important}
  .hero-grid{display:block;min-height:0}
  .hero-spacer{display:none}
  .hero-copy{
    width:100%;
    max-width:none;
    margin:0;
    padding:22px 0 25px;
  }
  .hero h1{
    font-size:clamp(32px,8.2vw,38px);
    line-height:1.09;
    letter-spacing:-.02em;
    margin:9px 0 14px;
  }
  .hero .eyebrow{margin:0;color:#a56a68}
  .hero .lede{margin:0;max-width:48ch}
  .search-panel{margin-top:19px}
  html[data-theme="twilight"] .hero{background:#1b3135}
  html[data-theme="twilight"] .hero .eyebrow{color:#f0b3b2}
  html[data-theme="twilight"] .hero-copy{color:#f2eee6}
}
