/* CoastalDock brand kit v2 layer (2026-10-14). Loads after visual.css.
   Deep harbor header and footer, photo hero on home, gold hairline accents. */
:root{
  --deep:#16343A; --teal:#2E6B66; --teal2:#4A7F79; --paper:#FAF7F1; --sand:#F3EEE4;
  --gold:#DECDA0; --creek:#B0C4BE; --ink:#1C2A28; --muted:#5E6864; --hair:#C8BFB2;
}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,.hero__title{ font-family:var(--font-display); font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0; letter-spacing:-.012em; }
::selection{ background:var(--gold); color:var(--deep); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Header: deep harbor band */
.header{ background:var(--deep)!important; border-bottom:1px solid rgba(222,205,160,.28)!important; box-shadow:0 1px 0 rgba(0,0,0,.08); }
.header__logo{ color:var(--paper)!important; font-weight:600; letter-spacing:-.01em; }
.header__logo svg path{ fill:var(--paper); }
.header__logo svg circle{ fill:var(--teal); }
.header__link{ color:rgba(250,247,241,.82)!important; }
.header__link:hover{ color:var(--paper)!important; }
.header__link--active{ color:var(--gold)!important; }
.header__cta{ background:var(--gold)!important; color:var(--deep)!important; border:0!important; font-weight:600; }
.header__cta:hover{ background:#E8DAB4!important; }
.header__mobile-toggle{ color:var(--paper)!important; }
@media (max-width:900px){
  .header__nav{ background:var(--deep)!important; border-color:rgba(222,205,160,.28)!important; }
}

/* Home hero: photo with deep overlay, as on the X header */
.hero.hero--photo{
  position:relative; overflow:hidden; color:var(--paper);
  background:var(--deep) url('/img/hero-odens-dock.jpg') center 55%/cover no-repeat!important;
  padding:clamp(3rem,7vw,5.5rem) 1.25rem clamp(2.75rem,6vw,4.5rem)!important;
}
.hero.hero--photo::after{
  content:""; position:absolute; inset:0; pointer-events:none; display:block;
  background:
    linear-gradient(90deg, rgba(22,52,58,.88) 0%, rgba(22,52,58,.72) 45%, rgba(22,52,58,.50) 100%),
    linear-gradient(0deg, rgba(22,52,58,.55), rgba(22,52,58,0) 40%);
}
.hero.hero--photo > *{ position:relative; z-index:1; }
.hero--photo .hero__kicker{ font-family:var(--font-mono); color:var(--gold)!important; text-transform:uppercase!important; letter-spacing:.16em!important; font-size:.78rem; }
.hero--photo .hero__title{ color:var(--paper)!important; font-size:clamp(2.4rem,1.4rem + 4vw,4.6rem); line-height:1.02; font-weight:600; }
.hero--photo .hero__title::after{ content:""; display:block; width:56px; height:2px; background:var(--gold); margin:1.1rem 0 .2rem; }
.hero--photo .hero__subtitle{ color:rgba(250,247,241,.9)!important; font-size:clamp(1rem,.95rem + .3vw,1.15rem); line-height:1.6; }
.hero--photo .search-bar{ background:var(--paper)!important; border:1px solid rgba(222,205,160,.6)!important; box-shadow:0 18px 40px -18px rgba(0,0,0,.55); }
.hero--photo .search-bar__btn{ background:var(--teal)!important; color:var(--paper)!important; }
.hero--photo .search-bar__btn:hover{ background:#245753!important; }
.hero--photo .shop-chips a{ background:rgba(250,247,241,.1)!important; border:1px solid rgba(222,205,160,.45)!important; color:var(--paper)!important; backdrop-filter:blur(4px); }
.hero--photo .shop-chips a:hover{ background:rgba(222,205,160,.22)!important; }
.hero--photo .hero__count{ background:rgba(22,52,58,.55); border:1px solid rgba(222,205,160,.35); border-radius:14px; padding:1.5rem 1.6rem; backdrop-filter:blur(6px); align-self:center; }
.hero--photo .hero__count-num{ color:var(--paper)!important; }
.hero--photo .hero__count-lab{ color:var(--gold)!important; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; }
.hero--photo .hero__count-note{ color:rgba(250,247,241,.78)!important; }
.hero__credit{ position:absolute!important; right:14px; bottom:10px; z-index:1; margin:0; font-size:.7rem; color:rgba(250,247,241,.7); letter-spacing:.02em; }
.hero__credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:700px){
  .hero.hero--photo{ background-image:url('/img/hero-odens-dock-960.jpg')!important; }
  .hero--photo .hero__title{ font-size:2.2rem!important; color:var(--paper)!important; }
  .hero--photo .hero__subtitle{ color:rgba(250,247,241,.9)!important; }
}

/* Inner page heroes: paper with gold hairline */
.hero--paper:not(.hero--photo){ border-bottom:1px solid var(--hair); }
.hero--paper:not(.hero--photo) .hero__kicker{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; }

/* Buttons and links */
.btn--primary,.button--primary,.search-bar__btn{ background:var(--teal); color:var(--paper); }
a{ text-underline-offset:2px; }

/* Footer: deep with gold rule */
.footer{ background:var(--deep)!important; color:rgba(250,247,241,.82)!important; border-top:2px solid var(--gold)!important; }
.footer a{ color:rgba(250,247,241,.82)!important; }
.footer a:hover{ color:var(--gold)!important; }
.footer h3,.footer h4,.footer__heading,.footer__brand-name{ color:var(--paper)!important; }
.footer__brand-name svg path{ fill:var(--paper); }
.footer__brand-name svg circle{ fill:var(--teal); }
@media (max-width:700px){
  .hero.hero--photo{ padding:2rem 1rem 2.5rem!important; }
  .hero--photo .hero__content,.hero--photo .hero__copy{ min-width:0; max-width:100%; }
  .hero--photo .hero__content--shop{ grid-template-columns:minmax(0,1fr)!important; }
  .hero--photo .search-bar{ max-width:100%; width:100%; box-sizing:border-box; }
  .hero--photo .search-bar__input{ min-width:0; }
}

/* ===== Maps (Google Maps, lazy) ===== */
.cd-map{ position:relative; width:100%; min-height:280px; border-radius:14px; overflow:hidden; background:var(--deep); border:1px solid var(--hair); box-shadow:0 14px 34px -22px rgba(22,52,58,.55); }
.cd-map--wide{ height:clamp(340px,52vw,520px); }
.cd-map--yard{ height:100%; min-height:300px; }
.cd-map--inline{ height:320px; margin:0 0 var(--space-6,1.5rem); }
@media (max-width:700px){ .cd-map--wide{ height:360px; } .cd-map--yard,.cd-map--inline{ height:260px; min-height:260px; } }
.cd-map__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(ellipse 70% 80% at 50% 40%, #1f4a4f 0%, var(--deep) 70%); }
.cd-map__waves{ position:absolute; inset:0; width:100%; height:100%; }
.cd-map__ph-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:1.5rem; max-width:30rem; }
.cd-map__ph-label{ margin:0; font-family:var(--font-display); font-size:clamp(1.1rem,1rem + .6vw,1.45rem); color:var(--paper)!important; line-height:1.25; }
.cd-map__ph-link{ margin-top:.35rem; display:inline-flex; align-items:center; gap:.4rem; background:var(--gold); color:var(--deep)!important; font-weight:600; font-size:.9rem; padding:.6rem 1rem; border-radius:8px; text-decoration:none; }
.cd-map__ph-link:hover{ background:#E8DAB4; }
.cd-map__ph-link::after{ content:"\2197"; font-size:.85em; }
.cd-pin{ line-height:0; filter:drop-shadow(0 3px 4px rgba(22,52,58,.35)); transform-origin:50% 100%; transition:transform .15s; cursor:pointer; }
.cd-pin:hover{ transform:scale(1.12); }
.cd-cluster{ display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--deep); color:var(--gold);
  font-family:var(--font-mono); font-weight:500; font-size:.85rem; border:2px solid var(--gold); box-shadow:0 0 0 6px rgba(22,52,58,.22),0 4px 10px rgba(0,0,0,.25); cursor:pointer; }
.cd-pop{ font-family:var(--font-body); color:var(--deep); padding:2px 4px 4px; }
.cd-pop__type{ margin:0 0 .2rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); }
.cd-pop__name{ margin:0 0 .2rem; font-family:var(--font-display); font-size:1.08rem; line-height:1.2; font-weight:600; }
.cd-pop__city{ margin:0 0 .6rem; font-size:.85rem; color:var(--muted); }
.cd-pop__approx{ font-size:.75rem; }
.cd-pop__link{ display:inline-block; background:var(--deep); color:var(--paper)!important; text-decoration:none; font-weight:600; font-size:.82rem; padding:.42rem .8rem; border-radius:6px; }
.cd-pop__link:hover{ background:var(--teal); }
.cd-map .gm-style-iw-c{ border-radius:12px!important; box-shadow:0 10px 28px rgba(22,52,58,.3)!important; }
.cd-map-sec{ background:var(--sand); padding:clamp(2rem,5vw,3.5rem) 1.25rem; }
.cd-map-sec__inner{ max-width:80rem; margin:0 auto; }
.cd-map-sec__kicker{ margin:0 0 .3rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.cd-map-sec__title{ margin:0 0 1rem; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem); color:var(--deep); }
.cd-map-sec__note{ margin:.7rem 0 0; font-size:.8rem; color:var(--muted); }
.cd-map-sec--city{ padding:0 0 1.5rem; background:none; }
/* Map fallback: compact yard list */
.cd-map.cd-map--list{ height:auto!important; min-height:0!important; background:var(--paper); box-shadow:none; }
.cd-map--list:empty{ display:none; }
.cd-list{ padding:.9rem 1.1rem .5rem; }
.cd-list__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:.55rem; border-bottom:1px solid var(--gold); }
.cd-list__title{ margin:0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.cd-list__map{ font-size:.82rem; font-weight:600; color:var(--teal)!important; text-decoration:underline; text-underline-offset:3px; }
.cd-list__map::after{ content:" \2197"; font-size:.8em; }
.cd-list__ul{ list-style:none; margin:0; padding:0; }
.cd-list__item{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem; align-items:center; padding:.6rem 0; border-bottom:1px solid #E6DFD2; }
.cd-list__item:last-child{ border-bottom:0; }
.cd-list__name{ font-family:var(--font-display); font-size:1rem; color:var(--deep); line-height:1.25; }
.cd-list__city{ grid-column:1; font-size:.8rem; color:var(--muted); }
.cd-list__link{ grid-column:2; grid-row:1 / span 2; font-size:.8rem; font-weight:600; color:var(--paper)!important; background:var(--deep); padding:.38rem .7rem; border-radius:6px; text-decoration:none; white-space:nowrap; }
.cd-list__link:hover{ background:var(--teal); }
.cd-map--list + .cd-map-sec__note{ display:none; }

/* ===== Frontend review fixes (2026-10-14) ===== */
@media (max-width:480px){
  .upgrade-row{ grid-template-columns:1fr!important; }
  .fp, .fp *{ min-width:0; }
}
.search-bar__input-wrap, .search-bar__input{ min-width:0; }
.hero .search-bar__btn{ white-space:nowrap; flex-shrink:0; }
@media (max-width:420px){ .hero .search-bar__btn{ padding:0 .8rem!important; font-size:.9rem; } }
/* one map on the home sample card */
.shop-proof .dir-card__map{ display:none; }
/* contrast */
:root{ --muted:#4A5551; }
.hero__credit{ color:rgba(250,247,241,.85); }
.footer, .footer a{ color:rgba(250,247,241,.9)!important; }
.footer__copyright{ color:rgba(250,247,241,.75)!important; }
.cd-list__city, .cd-map-sec__note{ color:#4A5551; }
/* mobile chips: one scrolling row */
@media (max-width:700px){
  .shop-chips{ display:flex; flex-wrap:nowrap!important; overflow-x:auto; gap:.5rem; padding-bottom:.25rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .shop-chips::-webkit-scrollbar{ display:none; }
  .shop-chips li{ flex:0 0 auto; }
}
/* jump to regions (mobile directory) */
.cd-jump{ display:none; }
@media (max-width:700px){ .cd-jump{ display:inline-block; margin:.75rem 1rem 0; font-weight:600; font-size:.9rem; color:var(--teal)!important; text-decoration:underline; text-underline-offset:3px; } }
.cd-static .article-content{ max-width:46rem; }
.cd-404{ min-height:40vh; }
.cd-list-wrap{ background:var(--paper); border:1px solid var(--hair); border-radius:14px; margin-top:1rem; }
@media (max-width:600px){ .fp__lower, .fp__top{ grid-template-columns:1fr!important; } }
.shop-proof .dir-card{ align-self:start; }

/* 2026-10-15 QA: static fallback inside map containers (replaced by cd-map.js on render) */
.cd-map__fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1.5rem;color:#F4EEDF}
.cd-map__fb-k{margin:0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#DECDA0}
.cd-map__fb-a{display:inline-block;padding:.7rem 1.2rem;border-radius:10px;background:#DECDA0;color:#16343A;font-weight:600;text-decoration:none;min-height:24px}
.cd-map__fb-a:hover,.cd-map__fb-a:focus-visible{background:#F4EEDF}
.cd-map__fb--ns{background:var(--deep)}
.cd-map__fb--ns{z-index:1}