/* ── Islandwide Weather — Base Brand CSS ── */
:root {
  --iww-navy:         #2E4A8F;
  --iww-navy-dark:    #1C2F68;
  --iww-navy-light:   #3A5090;
  --iww-mint:         #4ECFB0;
  --iww-mint-light:   #7DE0CC;
  --iww-mint-dark:    #2DAF90;
  --iww-amber:        #F0C020;
  --iww-amber-dark:   #D4A010;
  --iww-bg:           #F2F6FF;
  --iww-surface:      #FFFFFF;
  --iww-text:         #1C2030;
  --iww-text-med:     #4A5580;
  --iww-border:       #D4DCF0;
  --iww-accent:       var(--iww-mint);
  --iww-font:         'Montserrat', sans-serif;
}

/* ── Global font application ── */
body,
input, button, select, textarea {
  font-family: 'Montserrat', sans-serif !important;
}
/* Apply Montserrat globally but exclude icon fonts */
body *:not(.dashicons):not(.dashicons-before):not([class*="dashicons"]) {
  font-family: 'Montserrat', sans-serif !important;
}

/* ── Divi-specific overrides ── */
.et_pb_text,
.et_pb_text *,
.et_pb_blurb,
.et_pb_blurb *,
.et_pb_button,
.et_pb_module,
.et_pb_module *,
.et-fixed-header,
.et-fixed-header *,
#main-header,
#main-header *,
#main-footer,
#main-footer *,
.et_pb_menu,
.et_pb_menu *,
h1, h2, h3, h4, h5, h6,
p, a, li, span, div {
  font-family: 'Montserrat', sans-serif !important;
}

/* ── Heading weights — Montserrat looks great heavy ── */
h1, .et_pb_slide_title             { font-weight: 800; letter-spacing: -0.02em; }
h2                                 { font-weight: 700; letter-spacing: -0.01em; }
h3                                 { font-weight: 700; }
h4, h5, h6                         { font-weight: 600; }
p, li                              { font-weight: 400; line-height: 1.7; }
strong, b                          { font-weight: 700; }

body { background: var(--iww-bg); color: var(--iww-text); }

/* ── Atmosphere layer ── */
#iww-atmosphere {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* ── Weather data card ── */
.iww-wx-card {
  background: var(--iww-surface);
  border: 1px solid var(--iww-border);
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color 0.2s;
}
.iww-wx-card:hover { border-color: var(--iww-mint); }
.iww-wx-card .temp  { font-size: 48px; font-weight: 800; color: var(--iww-navy); letter-spacing: -0.03em; }
.iww-wx-card .label { font-size: 11px; font-weight: 600; color: var(--iww-text-med); text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Alert banners ── */
.iww-alert-banner {
  background: var(--iww-amber);
  color: var(--iww-navy-dark);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.02em;
}
#iww-severe-banner { position: sticky; top: 0; z-index: 99999; }

/* ── Beacon mascot ── */
.iww-beacon    { max-width: 180px; }
.iww-beacon-sm { max-width: 80px; }

/* ── Radar wrapper ── */
.iww-radar-wrap { border-radius: 10px; overflow: hidden; background: var(--iww-navy-dark); }


/* ── Alert sign-up block ── */
.iww-alert-signup { background: var(--iww-navy); border-radius: 12px; padding: 32px; color: #fff; }
.iww-alert-signup h3 { color: var(--iww-mint); font-weight: 700; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Desktop / Tablet / Mobile
   ══════════════════════════════════════════════════════ */

/* ── Desktop (1025px+) — full layout ── */
@media (min-width: 1025px) {
  .iww-wx-card .temp { font-size: 48px; }
  .iww-radar-wrap    { min-height: 450px; }
}

/* ── Tablet (768px–1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .iww-wx-card .temp     { font-size: 36px; }
  .iww-wx-card           { padding: 16px 18px; }
  .iww-radar-wrap        { min-height: 340px; }
  #iww-severe-banner     { font-size: 13px; padding: 10px 14px; }
  h1                     { font-size: 34px !important; }
  h2                     { font-size: 26px !important; }

  /* 2-col card grid on tablet */
  .iww-conditions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .iww-wx-card .temp     { font-size: 32px; }
  .iww-wx-card           { padding: 14px 16px; }

  /* Radar: cap height so it doesn't eat the screen */
  .iww-radar-wrap        { max-height: 260px; }
  .iww-radar-wrap video  { object-fit: cover; }

  /* Stack condition cards single column */
  .iww-conditions-grid {
    grid-template-columns: 1fr !important;
  }

  #iww-severe-banner     { font-size: 12px; padding: 8px 12px; }
  h1                     { font-size: 26px !important; letter-spacing: -0.01em; }
  h2                     { font-size: 22px !important; }

  /* Divi column padding reduction on mobile */
  .et_pb_column          { padding: 0 12px !important; }
  .et_pb_section         { padding: 24px 0 !important; }
}

/* ── Very small screens (< 380px) ── */
@media (max-width: 379px) {
  .iww-wx-card .temp { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════
   BEACH PAGE — /beach/ mobile fixes
   ══════════════════════════════════════════════════════ */

/* Forecast section wrapper (replaces inline max-width:60%) */
.iw-beach-fc-wrap { max-width: 60%; }

@media (max-width: 1024px) {
  .iw-beach-fc-wrap { max-width: 92% !important; }

  /* Hero section — trim vertical padding on tablet */
  .iw-beach-hero { padding: 60px 20px 80px !important; }

  /* Beach zone pills — smaller on tablet */
  .iw-beach-zone-pill { padding: 8px 16px; font-size: 11px; }

  /* Stats section — reduce inner padding */
  .iw-beach-stats { padding: 40px 16px 50px; }
  .iw-beach-stats-inner { max-width: 100%; }

  /* Flags inner — already handled by Divi phone content but add safety override */
  .iw-flags-inner { max-width: 92% !important; }
}

@media (max-width: 767px) {
  .iw-beach-fc-wrap { max-width: 100% !important; }

  /* Hero — tighter on phone */
  .iw-beach-hero { padding: 48px 16px 64px !important; }
  .iw-beach-zones { gap: 7px; }
  .iw-beach-zone-pill { padding: 7px 14px; font-size: 11px; }

  /* Stats section */
  .iw-beach-stats { padding: 28px 14px 36px; }
  .iw-beach-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

  /* Flags */
  .iw-flags { padding: 40px 14px 52px !important; }
  .iw-flags-inner { max-width: 100% !important; width: 94%; }
  .iw-flag-legend { gap: 7px; }
  .iw-flag-legend-item { padding: 6px 12px; }

  /* Beach safety banner */
  .iw-beach-safety-inner { gap: 20px; }
  .iw-beach-safety-icon { width: 48px; height: 48px; font-size: 1.5rem; }
}

@media (max-width: 379px) {
  .iw-beach-hero { padding: 36px 12px 52px !important; }
  .iw-beach-stats-grid { grid-template-columns: 1fr 1fr !important; }
}