/* CoastalNow C2 Tide design: Balanced, Data-First.
   Applied to every live Tide location; region classes provide hero fallbacks. */
.c2-tide{
  --c2-navy:#082d4a;
  --c2-blue:#2e86d6;
  --c2-blue-deep:#1168b3;
  --c2-teal:#18a8a6;
  --c2-mist:#eef6fb;
  --c2-sand:#f5efe4;
  --c2-border:#d7e4ed;
  --c2-text:#153247;
  --c2-muted:#6b8090;
  --c2-hero-image:url("/assets/malibu-c2-hero.svg");
  --c2-hero-position:center 48%;
  --c2-hero-size:cover;
  background:#f6f9fc;
  color:var(--c2-text);
}
.c2-region-california{--c2-hero-image:url("/assets/hero-los-angeles.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-region-florida-atlantic{--c2-hero-image:url("/assets/hero-miami-beach.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-region-florida-gulf{--c2-hero-image:url("/assets/hero-miami-beach.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-region-florida-keys{--c2-hero-image:url("/assets/hero-miami-beach.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-region-outer-banks{--c2-hero-image:url("/assets/hero-oceanside.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-region-carolinas{--c2-hero-image:url("/assets/hero-oceanside.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-region-oregon{--c2-hero-image:url("/assets/hero-malibu.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-region-northeast{--c2-hero-image:url("/assets/hero-malibu.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-malibu{--c2-hero-image:url("/assets/hero-malibu.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-los-angeles{--c2-hero-image:url("/assets/hero-los-angeles.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-oceanside{--c2-hero-image:url("/assets/hero-oceanside.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-miami-beach{--c2-hero-image:url("/assets/hero-miami-beach.avif?v=20261008-rollout-2");--c2-hero-position:center 48%;--c2-hero-size:cover}
.c2-tide .wrap{width:min(1180px,calc(100% - 36px))}
.c2-tide .site-header{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e1e9ef;
  box-shadow:0 4px 24px rgba(8,45,74,.04);
}
.c2-tide .header-inner{height:64px}
.c2-tide .brand{
  color:var(--c2-navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.28rem;
  letter-spacing:-.025em;
}
.c2-tide .logo-mark{
  width:28px;height:28px;border-radius:9px;
  background:linear-gradient(145deg,var(--c2-blue-deep),var(--c2-teal));
  box-shadow:none;
}
.c2-tide .nav{gap:20px;color:#4b677b;font-size:.84rem}
.c2-tide .nav a:hover{color:var(--c2-blue-deep)}
.c2-tide .search-pill{padding:8px 11px;background:#f8fbfd;border-color:#dce7ef}
.c2-tide .breadcrumbs{padding-top:14px;color:#708596}
.c2-tide .hero{
  min-height:302px;
  margin-top:12px;
  border:0;
  border-radius:20px;
  box-shadow:0 18px 48px rgba(8,45,74,.13);
  background:
    linear-gradient(90deg,rgba(4,31,51,.76) 0%,rgba(4,31,51,.44) 45%,rgba(4,31,51,.10) 100%),
    var(--c2-hero-image) var(--c2-hero-position)/var(--c2-hero-size) no-repeat;
}
.c2-tide .hero::after{
  content:"";
  position:absolute;inset:auto 0 0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(2,26,43,.22));
  pointer-events:none;
}
.c2-tide .hero-inner{
  min-height:302px;
  padding:38px 40px 34px;
  grid-template-columns:minmax(0,1fr) 255px;
  align-items:end;
}
.c2-tide .hero .eyebrow{color:#b9e6ee;text-shadow:0 1px 8px rgba(0,0,0,.18)}
.c2-tide h1{
  max-width:700px;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.55rem,5vw,4.4rem);
  font-weight:500;
  letter-spacing:-.045em;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.c2-tide .hero-copy{
  max-width:680px;
  color:rgba(255,255,255,.88);
  font-size:.95rem;
  text-shadow:0 1px 10px rgba(0,0,0,.22);
}
.c2-tide .hero-date{
  color:#fff;
  background:rgba(5,36,58,.50);
  border:1px solid rgba(255,255,255,.28);
  border-radius:15px;
  padding:15px 17px;
  box-shadow:none;
}
.c2-tide .hero-date span,.c2-tide .hero-date small{color:rgba(255,255,255,.73)}
.c2-tide .hero-wave,.c2-tide .hero-bubble{display:none}

.c2-tide .c2-section-tabs{
  position:relative;
  z-index:4;
  margin:-17px auto 0;
  width:min(760px,calc(100% - 40px));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px;
  border:1px solid #dce8ef;
  border-radius:999px;
  background:rgba(255,255,255,.97);
  box-shadow:0 12px 30px rgba(8,45,74,.10);
}
.c2-tide .c2-section-tabs a{
  flex:1;
  min-width:0;
  padding:9px 13px;
  border-radius:999px;
  color:#526d80;
  text-align:center;
  font-size:.78rem;
  font-weight:750;
  white-space:nowrap;
}
.c2-tide .c2-section-tabs a:first-child{
  color:#fff;
  background:linear-gradient(135deg,var(--c2-blue),var(--c2-blue-deep));
}
.c2-tide .c2-section-tabs a:hover{background:#edf5fb;color:var(--c2-blue-deep)}
.c2-tide .c2-section-tabs a:first-child:hover{color:#fff;background:var(--c2-blue-deep)}

.c2-tide .section{margin-top:20px}
.c2-tide .section-head{margin-bottom:0}
.c2-tide .section-head h2,.c2-tide .chart-top h2,.c2-tide .info-card h2{
  color:var(--c2-navy);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:-.025em;
}
.c2-tide .eyebrow{color:var(--c2-blue-deep);letter-spacing:.11em}

.c2-tide #overview{
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr;
  gap:12px;
  margin-top:18px;
}
.c2-tide #overview>.section-head{grid-column:1/-1}
.c2-tide #overview .tide-answer{
  grid-column:1;
  margin:0;
  min-height:168px;
  display:block;
  padding:20px 21px;
  border:0;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(145deg,#3496eb,#176fc2);
  box-shadow:0 12px 28px rgba(31,125,207,.20);
}
.c2-tide #overview .tide-answer .eyebrow,
.c2-tide #overview .tide-answer-kind,
.c2-tide #overview .tide-answer-height,
.c2-tide #overview .tide-answer small{color:#fff}
.c2-tide #overview .tide-answer .eyebrow{opacity:.82}
.c2-tide #overview .tide-answer-time{font-size:2.55rem;margin-top:9px}
.c2-tide #overview .tide-answer-height{font-size:.96rem;opacity:.9}
.c2-tide #overview .tide-answer-stats{display:none}
.c2-tide #overview .tide-grid{
  grid-column:2/4;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.c2-tide #overview .tide-card{
  min-height:168px;
  padding:20px;
  border-radius:17px;
  border:1px solid var(--c2-border);
  background:#fff;
  color:var(--c2-text);
  box-shadow:0 8px 24px rgba(8,45,74,.055);
}
.c2-tide #overview .tide-card.high{
  color:var(--c2-text);
  border-color:var(--c2-border);
  background:#fff;
}
.c2-tide #overview .tide-card .label{color:#688096;opacity:1}
.c2-tide #overview .tide-card .arrow-icon{
  background:#e9f4fe;
  color:var(--c2-blue-deep);
}
.c2-tide #overview .tide-time{font-size:2.05rem;margin-top:22px;color:var(--c2-navy)}
.c2-tide #overview .tide-height{color:#49687d}
.c2-tide #overview .tide-meta{right:18px;bottom:17px;color:#718695;opacity:1}
.c2-tide #overview .card-wave{display:none}
.c2-tide #overview .status-strip{
  grid-column:1/-1;
  margin-top:0;
  padding:10px 13px;
  border-radius:12px;
  background:#edf8f5;
  border-color:#d2ebe5;
  font-size:.79rem;
}
.c2-tide .activity-primary-section{display:none}

.c2-tide .chart-card,
.c2-tide .forecast,
.c2-tide .info-card{
  border:1px solid var(--c2-border);
  border-radius:18px;
  box-shadow:0 8px 28px rgba(8,45,74,.055);
}
.c2-tide .chart-card{padding:23px 24px 17px}
.c2-tide .line{stroke:#2585d7;stroke-width:3}
.c2-tide .dot-high{fill:#1b77c6}
.c2-tide .dot-low{fill:#28a6a8}
.c2-tide .area{opacity:.72}
.c2-tide .legend{color:#6b8293}
.c2-tide .event{border-top-color:#e2ebf1}
.c2-tide .event strong{color:var(--c2-navy)}

.c2-tide .forecast{padding:22px}
.c2-tide .desktop-table{display:block;width:100%}
.c2-tide .desktop-table thead{display:none}
.c2-tide .desktop-table tbody{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
}
.c2-tide .desktop-table tr{
  display:block;
  min-width:0;
  padding:11px 8px;
  border:1px solid #e0e9f0;
  border-radius:13px;
  background:#fbfdff;
}
.c2-tide .desktop-table td{
  display:block;
  width:auto!important;
  padding:0;
  border:0;
}
.c2-tide .desktop-table td+td{margin-top:9px}
.c2-tide .desktop-table .day strong{color:var(--c2-navy);font-size:.84rem}
.c2-tide .desktop-table .day span{font-size:.66rem}
.c2-tide .forecast-events{display:grid;gap:3px}
.c2-tide .pill-event{
  display:block;
  margin:0;
  padding:4px 5px;
  border-radius:7px;
  color:#365970;
  background:#eef6fc;
  font-size:.65rem;
  white-space:normal;
}
.c2-tide .pill-event.low{background:#f0f7f7}

.c2-tide .local-search-context .info-card{
  padding:24px 26px;
  background:linear-gradient(135deg,#f1f8fe,#fbfdff);
  border-color:#d5e5f1;
}
.c2-tide .local-search-context .info-card h2{font-size:1.35rem}
.c2-tide .local-search-context .info-card p{max-width:900px}
.c2-tide .local-search-links a{color:var(--c2-blue-deep)}

.c2-tide .lower-grid{gap:12px;grid-template-columns:1.2fr .8fr}
.c2-tide .info-card{padding:21px}
.c2-tide .nearby{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.c2-tide .place{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  border-radius:11px;
  background:#f8fbfd;
  border-color:#dce7ef;
  color:#35566d;
}
.c2-tide .place::after{content:"›";margin-left:auto;color:var(--c2-blue);font-size:1.1rem}
.c2-tide .place:hover{transform:none;background:#eef6fc;border-color:#b9d7ed}
.c2-tide .source-row{border-top-color:#e1eaf0}
.c2-tide .activity-parent-section .directory-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.c2-tide .activity-parent-card{display:block;height:100%}
.c2-tide .activity-parent-card:hover{border-color:#b9d7ed;background:#fbfdff}

.c2-tide footer{margin-top:36px;background:#082d4a}
.c2-tide .footer-inner{min-height:125px}
.c2-tide .footer-copy{color:#adc0ce}
.c2-tide .footer-links{color:#d1dee7}

@media(max-width:900px){
  .c2-tide #overview{grid-template-columns:1fr 1fr}
  .c2-tide #overview>.section-head{grid-column:1/-1}
  .c2-tide #overview .tide-answer{grid-column:1/-1;min-height:150px}
  .c2-tide #overview .tide-grid{grid-column:1/-1}
  .c2-tide .hero-inner{grid-template-columns:1fr;align-items:end}
  .c2-tide .hero-date{justify-self:start;width:auto;min-width:215px}
}
@media(max-width:800px){
  .c2-tide .desktop-table{display:none}
  .c2-tide .mobile-days{display:grid}
  .c2-tide .lower-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .c2-tide{--c2-hero-position:center 48%;--c2-hero-size:cover}
  .c2-tide .wrap{width:min(100% - 24px,1180px)}
  .c2-tide .header-inner{height:58px}
  .c2-tide .brand{font-size:1.13rem}
  .c2-tide .hero{min-height:256px;border-radius:15px}
  .c2-tide .hero-inner{min-height:256px;padding:28px 20px 22px}
  .c2-tide h1{font-size:2.48rem}
  .c2-tide .hero-copy{font-size:.83rem;line-height:1.45}
  .c2-tide .hero-date{display:none}
  .c2-tide .c2-section-tabs{
    width:100%;
    margin:-13px auto 0;
    padding:5px;
    gap:1px;
    justify-content:stretch;
    overflow-x:visible;
    border-radius:18px;
  }
  .c2-tide .c2-section-tabs a{
    flex:1 1 20%;
    min-width:0;
    padding:8px 2px;
    font-size:.66rem;
    white-space:nowrap;
  }
  .c2-tide #overview>.section-head,
  .c2-tide .activity-parent-section>.section-head{
    padding-inline:5px;
  }
  .c2-tide .chart .point-label{font-size:22px;font-weight:850}
  .c2-tide .chart .axis-label{font-size:18px;font-weight:700}
  .c2-tide #overview{grid-template-columns:1fr;gap:9px}
  .c2-tide #overview .tide-answer,
  .c2-tide #overview .tide-grid,
  .c2-tide #overview .status-strip{grid-column:1}
  .c2-tide #overview .tide-grid{grid-template-columns:1fr 1fr;gap:9px}
  .c2-tide #overview .tide-card{min-height:145px;padding:16px}
  .c2-tide #overview .tide-time{font-size:1.62rem}
  .c2-tide #overview .tide-meta{position:static;text-align:left;margin-top:7px;font-size:.69rem}
  .c2-tide .chart-card,.c2-tide .forecast,.c2-tide .info-card{border-radius:15px}
  .c2-tide .chart-card{padding:18px 16px 13px}
  .c2-tide .forecast{padding:18px 15px}
  .c2-tide .nearby{grid-template-columns:1fr}
  .c2-tide .activity-parent-section .directory-grid{grid-template-columns:1fr}
}
@media(max-width:430px){
  .c2-tide #overview .tide-grid{grid-template-columns:1fr}
  .c2-tide #overview .tide-card{min-height:132px}
}


/* A source-grounded, accessible seven-day comparison (not another forecast). */
.c2-tide .c2-weekly-card{padding:22px 25px;border:1px solid #d7e4ed;border-radius:18px;background:#fff}
.c2-tide .c2-weekly-lead{margin:0 0 18px;color:#153247;line-height:1.65;font-size:.95rem}
.c2-tide .c2-weekly-bars{padding:0;margin:0;list-style:none;display:grid;gap:11px}
.c2-tide .c2-weekly-row{display:grid;grid-template-columns:116px minmax(0,1fr) 72px;gap:13px;align-items:center}
.c2-tide .c2-weekly-day{color:#425d70;font-size:.86rem}
.c2-tide .c2-weekly-track{height:12px;border-radius:999px;background:#e8f1f7;overflow:hidden}
.c2-tide .c2-weekly-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#20ada9,#2779be)}
.c2-tide .c2-weekly-value{text-align:right;font-size:.86rem;font-variant-numeric:tabular-nums;color:#153247}
.c2-tide .c2-weekly-note{margin:17px 0 0;font-size:.78rem;line-height:1.6;color:#60788a}
@media(max-width:600px){
 .c2-tide .c2-weekly-card{padding:18px 16px}
 .c2-tide .c2-weekly-row{grid-template-columns:82px minmax(0,1fr) 57px;gap:8px}
 .c2-tide .c2-weekly-day,.c2-tide .c2-weekly-value{font-size:.75rem}
}
