/* marine-forecast.css — public Marine Forecast page on metoffice.gov.tt
 * Depends on _theme-vars.css for the --teal-* palette tokens. */

*{box-sizing:border-box}

.marine-shell{
  --ink:#0d2c33; --muted:#6b7c83; --bg:#f3f7f8;
  --line:rgba(0,77,90,.08);
  --shadow-sm:0 2px 4px rgba(0,0,0,.06);
  --shadow:0 4px 8px rgba(0,77,90,.10);
  --high:#c0392b; --low:#2980b9;
  background:var(--bg); color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.marine-brand-bar{
  background:var(--gradient-header,linear-gradient(135deg,#006D77,#0097A7,#26C6DA));
  color:#fff; padding:14px 24px;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-sm);
}
.marine-brand-bar .ttms-mark{
  width:38px; height:38px; background:#fff; border-radius:8px;
  display:grid; place-items:center; color:var(--teal-dark,#006D77);
  font-weight:800; font-size:13px; letter-spacing:.04em;
}
.marine-brand-bar .title{font-weight:700; letter-spacing:.02em; font-size:18px}
.marine-brand-bar .subtitle{font-size:12px; opacity:.85; margin-left:auto; font-variant-numeric:tabular-nums}

.marine-page{max-width:1200px; margin:0 auto; padding:24px}
@media (max-width:600px){.marine-page{padding:12px 8px}}

.marine-page-header{margin:0 0 16px}
.marine-page-header h1{
  margin:0; font-size:1.5rem; font-weight:700; letter-spacing:-.01em;
  color:var(--teal-darkest,#004D5A);
}
.marine-page-header p{
  margin:4px 0 0; font-size:.9rem; color:var(--muted);
  background:transparent;
}

.marine-loc-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.marine-chip{
  background:#fff; border:1px solid var(--line);
  padding:8px 14px; border-radius:999px; font-size:13px;
  color:var(--teal-dark,#006D77); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-sm); transition:all .2s ease;
  font-weight:500;
}
.marine-chip:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.marine-chip.active{background:var(--teal-dark,#006D77); color:#fff; border-color:transparent}
.marine-chip .dot{width:8px; height:8px; border-radius:50%; background:var(--teal-bright,#26C6DA)}

.card-mdemo{
  background:#fff; border:none; border-radius:8px;
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease; height:100%;
}
.card-mdemo:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.card-mdemo .ch{
  background:var(--gradient-card,linear-gradient(145deg,#004D5A,#006D77,#0097A7));
  color:rgba(255,255,255,.96); padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius:8px 8px 0 0;
}
.card-mdemo .ch h3{
  margin:0; font-size:.95rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
}
.card-mdemo .ch .ch-meta{font-size:11px; opacity:.85}
.card-mdemo .cb{padding:12px 14px; background:#fff}

.marine-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:18px; align-items:stretch}
@media (max-width:900px){.marine-grid{grid-template-columns:1fr}}

.marine-hero .ch{padding:10px 14px; flex-direction:column; align-items:flex-start; gap:2px}
.marine-hero .where{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-light,#B2EBF2)}
.marine-hero h1{margin:0; font-size:1.1rem; letter-spacing:-.01em; color:#fff; font-weight:700; line-height:1.15}
.marine-hero .coords{font-size:11px; color:var(--teal-light,#B2EBF2); font-variant-numeric:tabular-nums; opacity:.85}

.marine-hero-now{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:linear-gradient(180deg,#fff,#f8fcfd);
  border-bottom:1px solid var(--line);
}
.marine-hero-now .icon{
  width:52px; height:52px; background:var(--teal-lightest,#E0F7FA);
  border-radius:10px; display:grid; place-items:center; flex-shrink:0;
}
.marine-hero-now .icon img,.marine-hero-now .icon svg{max-width:42px; max-height:42px}
.marine-hero-now .copy{min-width:0}
.marine-hero-now .copy .cond{font-size:1rem; font-weight:700; color:var(--teal-darkest,#004D5A); margin:0; text-transform:capitalize}
.marine-hero-now .copy .desc{
  color:var(--muted); font-size:.8rem; margin-top:1px; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis;
}

.marine-countdown{
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:var(--teal-lightest,#E0F7FA); border-bottom:1px solid var(--line);
}
.marine-countdown .badge-evt{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--teal-dark,#006D77); color:#fff; font-weight:700; font-size:10px;
  padding:4px 9px; border-radius:999px; letter-spacing:.07em; text-transform:uppercase;
}
.marine-countdown .text{flex:1; min-width:0}
.marine-countdown .text strong{font-size:15px; color:var(--teal-darkest,#004D5A); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.marine-countdown .text small{display:block; color:var(--muted); font-size:11px; margin-top:1px}
.marine-countdown .height-big{
  font-variant-numeric:tabular-nums; font-size:1.2rem; font-weight:700;
  color:var(--teal-darkest,#004D5A); text-align:right; line-height:1.1;
}
.marine-countdown .height-big small{font-size:9px; color:var(--muted); font-weight:400; display:block; text-transform:uppercase; letter-spacing:.06em; margin-top:1px}

.marine-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
}
@media (max-width:600px){.marine-stats{grid-template-columns:repeat(3,1fr)}}
.marine-stat{background:#fff; padding:8px 10px; text-align:center; min-width:0}
.marine-stat .k{font-size:9px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-weight:600}
.marine-stat .v{font-size:.95rem; font-weight:700; color:var(--teal-darkest,#004D5A); margin-top:3px; font-variant-numeric:tabular-nums}
.marine-stat .sub{font-size:10px; color:var(--muted); margin-top:1px}

.tide-events{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px}
@media (max-width:600px){.tide-events{grid-template-columns:repeat(2,1fr)}}
.te{
  border:1px solid var(--line); border-radius:6px; padding:7px 6px;
  background:linear-gradient(180deg,#fff,#fafdfd); text-align:center;
  min-width:0;
}
.te .tag{
  display:inline-flex; align-items:center; gap:3px;
  font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; border-radius:999px; font-weight:700;
}
.te.high .tag{background:rgba(192,57,43,.08); color:var(--high)}
.te.low  .tag{background:rgba(41,128,185,.08); color:var(--low)}
.te .arrow{font-size:11px}
.te.high .arrow{color:var(--high)} .te.low .arrow{color:var(--low)}
.te .time{font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; color:var(--teal-darkest,#004D5A)}
.te .h{font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:1px}
.te.missing{
  background:repeating-linear-gradient(45deg,#f3f7f8 0 6px,#fff 6px 12px);
}
.te.missing .tag{background:#e7eaeb; color:#a0a8aa}
.te.missing .time{color:var(--muted); letter-spacing:.2em}

#marine-map{
  height:clamp(420px, 60vh, 720px);
  border-radius:8px; box-shadow:var(--shadow-sm); margin-bottom:18px;
}
.leaflet-popup-content-wrapper{border-radius:8px; padding:0; max-height:80vh; overflow-y:auto}
.leaflet-popup-content{margin:0}
.leaflet-popup-content .card-mdemo{height:auto}

/* Mobile: pin popup width to (viewport - margin). Leaflet sets a measured
   `width:<n>px` inline on .leaflet-popup-content based on a nowrap natural
   measurement, which ignores popup options on narrow screens. We override
   that inline width with a viewport-relative one so the card uses the full
   width available without spilling off-screen. */
@media (max-width:600px){
  .leaflet-popup-content-wrapper{max-width:calc(100vw - 32px) !important}
  .leaflet-popup-content{width:calc(100vw - 32px) !important; max-width:100% !important}
}

/* Enlarge Leaflet's default popup close button — its 14px default is too
   small to be a comfortable tap target on a 340–420px popup. */
.leaflet-popup-close-button{
  width:32px !important; height:32px !important;
  font-size:24px !important; line-height:30px !important;
  padding:0 !important; top:4px !important; right:4px !important;
  color:var(--teal-dark,#006D77) !important;
  border-radius:50%; background:rgba(255,255,255,.85);
  text-align:center; font-weight:700;
}
.leaflet-popup-close-button:hover{
  background:#fff; color:#000;
}

.marine-banner-error{
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px;
}

.marine-freshness{
  margin-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:14px 18px; border:1px solid var(--line); border-radius:8px;
  color:var(--muted); font-size:12px; background:#fff; box-shadow:var(--shadow-sm);
}
.marine-freshness .ok{color:var(--teal-mid,#0097A7); font-weight:700; display:inline-flex; align-items:center; gap:6px}

/* Kiosk variant — full screen.
   z-index needed because BigTree's site nav/footer have positioned
   children that otherwise paint on top of a position:fixed overlay. */
.marine-kiosk{
  position:fixed; inset:0; padding:24px;
  background:linear-gradient(135deg,#004D5A,#006D77,#0097A7);
  color:#fff; overflow:hidden; z-index:9999;
}
.marine-kiosk .marine-shell{background:transparent}
.marine-kiosk .card-mdemo{height:auto}