/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:         #0b1622;
    --bg-card:    #132030;
    --bg-card2:   #1a2d40;
    --border:     #1e3a52;
    --text:       #e2eaf2;
    --muted:      #7a9ab8;
    --accent:     #0ea5e9;
    --accent2:    #06b6d4;

    --poor:       #ef4444;
    --fair:       #f97316;
    --fair-good:  #eab308;
    --good:       #22c55e;
    --epic:       #a855f7;

    --offshore:   #22c55e;
    --onshore:    #ef4444;
    --cross:      #eab308;
}

html { font-size: 16px; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
    background: #091018;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--accent2);
    text-transform: uppercase;
}

/* ── Location Hero ──────────────────────────────────────────── */
.location-hero {
    background: linear-gradient(160deg, #0c2a44 0%, #0b1622 60%);
    border-bottom: 1px solid var(--border);
    padding: 2rem 0 1.75rem;
}

.location-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.location-hero .region {
    color: var(--muted);
    margin-top: 0.25rem;
}

/* ── Sections ───────────────────────────────────────────────── */
.section {
    margin: 2rem 0;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.buoy-badge {
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--bg-card2);
    color: var(--muted);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}

/* ── Current Conditions Grid ────────────────────────────────── */
.conditions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.cond-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.cond-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.cond-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ── Direction Arrows ───────────────────────────────────────── */
.dir-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.arrow {
    display: inline-block;
    transform: rotate(calc(var(--deg) * 1deg));
    font-size: 1rem;
    line-height: 1;
    color: var(--accent2);
}

.dir-label {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 600;
}

.dir-na { color: var(--muted); }

/* Smaller arrows inside table */
.forecast-table .arrow { font-size: 0.85rem; }
.forecast-table .dir-label { font-size: 0.72rem; }

/* ── Forecast Table ─────────────────────────────────────────── */
.forecast-scroll {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.forecast-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    white-space: nowrap;
    background: var(--bg-card);
}

.forecast-table thead tr:first-child th {
    background: #0d2135;
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.forecast-table .subhead th {
    background: #0a1b2b;
    color: #4e7a9a;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
    border-bottom: 2px solid var(--border);
}

.forecast-row td {
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.forecast-row:last-child td { border-bottom: none; }

.forecast-row:hover td { background: #162c3f; }

.forecast-row.today td { background: #132a3e; }
.forecast-row.today:hover td { background: #173147; }

/* Left accent bar per rating */
.forecast-row.rating-poor  td:first-child { border-left: 3px solid var(--poor); }
.forecast-row.rating-fair  td:first-child { border-left: 3px solid var(--fair); }
.forecast-row.rating-fair-good td:first-child { border-left: 3px solid var(--fair-good); }
.forecast-row.rating-good  td:first-child { border-left: 3px solid var(--good); }
.forecast-row.rating-epic  td:first-child { border-left: 3px solid var(--epic); }

/* Day cell */
.td-day { min-width: 80px; }

.day-name {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}

.day-date {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.1rem;
}

/* Height cell */
.td-height {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent2);
    min-width: 80px;
}

/* Gust */
.gust {
    font-size: 0.72rem;
    color: var(--muted);
    margin-left: 0.2rem;
}

/* Wind type tags */
.wind-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wind-tag.offshore { background: #162b1c; color: var(--offshore); border: 1px solid #1e4226; }
.wind-tag.onshore  { background: #2b1616; color: var(--onshore);  border: 1px solid #422020; }
.wind-tag.cross    { background: #2b2516; color: var(--cross);    border: 1px solid #42391a; }

/* Rating */
.td-rating { min-width: 110px; }

.rating-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rating-label.rating-poor      { color: var(--poor); }
.rating-label.rating-fair      { color: var(--fair); }
.rating-label.rating-fair-good { color: var(--fair-good); }
.rating-label.rating-good      { color: var(--good); }
.rating-label.rating-epic      { color: var(--epic); }

.rating-dots {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
}

.forecast-row.rating-poor  .dot.filled { background: var(--poor); }
.forecast-row.rating-fair  .dot.filled { background: var(--fair); }
.forecast-row.rating-fair-good .dot.filled { background: var(--fair-good); }
.forecast-row.rating-good  .dot.filled { background: var(--good); }
.forecast-row.rating-epic  .dot.filled { background: var(--epic); }

/* ── Wave Height Chart ──────────────────────────────────────── */
.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1rem 1rem;
    position: relative;
    height: 260px;
}

.chart-card canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ── No Data ────────────────────────────────────────────────── */
.no-data {
    color: var(--muted);
    font-style: italic;
    padding: 1rem 0;
}

/* ── Data Credit ────────────────────────────────────────────── */
.data-credit {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.75rem;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--muted);
}

/* ── Continent Tabs (level 1) ───────────────────────────────── */
.continent-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.continent-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.continent-tab:hover:not(.empty) {
    background: var(--bg-card2);
    color: var(--text);
    border-color: var(--cont-color, var(--accent));
}

.continent-tab.active {
    background: var(--bg-card2);
    color: var(--text);
    border-color: var(--cont-color, var(--accent));
    box-shadow: 0 0 0 1px var(--cont-color, var(--accent)) inset;
}

.continent-tab.empty {
    opacity: 0.4;
    cursor: default;
}

.continent-tab .tab-count {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.07);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    color: var(--muted);
}

.continent-tab.active .tab-count {
    background: rgba(255,255,255,0.12);
    color: var(--text);
}

/* ── Region Tabs (level 2) ──────────────────────────────────── */
/* ── Region Tabs ────────────────────────────────────────────── */
.region-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    animation: slideDown 0.2s ease;
}

.region-tabs[hidden] { display: none; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.region-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.region-tab:hover {
    background: var(--bg-card2);
    color: var(--text);
}

.region-tab.active {
    background: var(--bg-card2);
    color: var(--text);
    border-color: var(--accent);
}

.tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tab-count {
    background: rgba(255,255,255,0.08);
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    color: var(--muted);
}

.region-tab.active .tab-count {
    background: rgba(14,165,233,0.15);
    color: var(--accent);
}

/* ── Map ────────────────────────────────────────────────────── */
.map-wrap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}

#surf-map {
    height: 520px;
    width: 100%;
    background: var(--bg);
}

/* Leaflet UI elements — match dark theme */
.leaflet-control-zoom a {
    background: var(--bg-card2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover {
    background: #243d52 !important;
}
.leaflet-control-attribution {
    background: rgba(9,16,24,0.75) !important;
    color: var(--muted) !important;
    font-size: 0.65rem !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }

/* Custom marker wrapper */
.swell-pin-wrap {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s;
}
.swell-pin-wrap:hover { transform: scale(1.15); }

/* Popup */
.swell-popup .leaflet-popup-content-wrapper {
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    color: var(--text);
    padding: 0;
}
.swell-popup .leaflet-popup-content {
    margin: 0;
    width: auto !important;
}
.swell-popup .leaflet-popup-tip {
    background: var(--bg-card2);
}
.swell-popup .leaflet-popup-close-button {
    color: var(--muted) !important;
    font-size: 1.1rem !important;
    padding: 6px 8px !important;
}

.map-popup {
    padding: 1rem 1.1rem 1rem;
    min-width: 200px;
}

.popup-region-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

.popup-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.popup-desc {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.popup-forecast-btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s;
}
.popup-forecast-btn:hover {
    background: #0284c7;
    text-decoration: none;
}

.popup-soon {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--muted);
    font-style: italic;
}

/* Region info bar */
.region-info-bar {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 0.85rem 1.1rem;
    flex-wrap: wrap;
}
.region-info-bar[hidden] { display: none; }

.ri-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ri-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ri-name {
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.ri-desc {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

/* Breadcrumb on forecast page */
.breadcrumb {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.breadcrumb a {
    color: var(--muted);
}
.breadcrumb a:hover { color: var(--text); }

/* ── Board recommendations ─────────────────────────────────── */
.boards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.board-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.board-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.15);
    text-decoration: none;
}

.board-image {
    background: #eef3f9;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5rem;
}
.board-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.board-image-fallback {
    color: #94a3b8;
    font-size: 0.85rem;
}

.board-body {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.board-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.board-type {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--muted);
}
.board-fit {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.board-fit.fit-great-match    { background: #162b1c; color: var(--offshore); border: 1px solid #1e4226; }
.board-fit.fit-good-match     { background: rgba(14, 165, 233, 0.12); color: var(--accent); border: 1px solid #1e3a52; }
.board-fit.fit-versatile-pick { background: rgba(255, 255, 255, 0.04); color: var(--muted); border: 1px solid var(--border); }

.board-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.25;
}
.board-desc {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
    flex: 1;
}
.board-vendor {
    font-size: 0.72rem;
    color: var(--accent);
    margin-top: 0.4rem;
    font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .location-hero h1 { font-size: 1.5rem; }
    .conditions-grid  { grid-template-columns: repeat(2, 1fr); }
    .cond-value       { font-size: 1.1rem; }

    /* ── Map page ────────────────────────────────────────────── */
    #surf-map { height: 320px; }

    .continent-tab {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }
    .continent-tab .tab-count { font-size: 0.65rem; }

    .region-tab {
        font-size: 0.78rem;
        padding: 0.4rem 0.75rem;
    }
    .tab-dot  { width: 7px; height: 7px; }

    .region-info-bar { padding: 0.65rem 0.85rem; }
    .ri-desc         { font-size: 0.8rem; }

    .map-popup   { min-width: 160px; padding: 0.85rem; }
    .popup-name  { font-size: 0.92rem; }
    .popup-desc  { font-size: 0.73rem; }

    /* ── Forecast table ──────────────────────────────────────── */
    .forecast-table { font-size: 0.8rem; }

    .forecast-table thead tr:first-child th,
    .forecast-table .subhead th,
    .forecast-row td { padding: 0.45rem 0.5rem; }

    /* Drop the grouped header row; subhead labels are clearer alone */
    .forecast-table thead tr:first-child { display: none; }

    /* Hide: Wind Swell Ht (6), Wind Swell Period (7), Wind Dir (9), Wind Type (10) */
    .forecast-table .subhead th:nth-child(6),
    .forecast-table .subhead th:nth-child(7),
    .forecast-table .subhead th:nth-child(9),
    .forecast-table .subhead th:nth-child(10),
    .forecast-row    td:nth-child(6),
    .forecast-row    td:nth-child(7),
    .forecast-row    td:nth-child(9),
    .forecast-row    td:nth-child(10) { display: none; }

    /* Sticky Day column so the row identity is always visible while scrolling */
    .forecast-table .subhead th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #0a1b2b;
    }
    .forecast-row .td-day {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bg-card);
    }
    .forecast-row.today      .td-day { background: #132a3e; }
    .forecast-row:hover      .td-day { background: #162c3f; }
    .forecast-row.today:hover .td-day { background: #173147; }

    /* Tighter column widths */
    .td-day    { min-width: 64px; }
    .td-height { min-width: 60px; }
    .td-rating { min-width: 80px; }

    /* Rating dots take too much space on small screens */
    .rating-dots { display: none; }

    /* ── Board cards ─────────────────────────────────────────── */
    .boards-grid { grid-template-columns: 1fr; gap: 0.6rem; }
    .board-card  { flex-direction: row; }
    .board-image {
        width: 120px;
        height: auto;
        min-height: 130px;
        flex-shrink: 0;
        padding: 0.4rem;
    }
    .board-body  { padding: 0.7rem 0.85rem; gap: 0.25rem; }
    .board-title { font-size: 0.92rem; }
    .board-desc  {
        font-size: 0.73rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 512px) {
    .forecast-table { font-size: 0.72rem; }

    .forecast-table .subhead th,
    .forecast-row td { padding: 0.35rem 0.35rem; }

    .td-day    { min-width: 54px; }
    .td-height { min-width: 52px; }
    .td-rating { min-width: 64px; }

    .day-name  { font-size: 0.8rem; }
    .day-date  { font-size: 0.65rem; }
    .gust      { display: none; }
}

@media (max-width: 442px) {
    .forecast-table { font-size: 0.65rem; }

    .forecast-table .subhead th,
    .forecast-row td { padding: 0.25rem 0.28rem; }

    .td-day    { min-width: 46px; }
    .td-height { min-width: 44px; }
    .td-rating { min-width: 52px; }

    .day-name  { font-size: 0.72rem; }
    .day-date  { font-size: 0.6rem; }

    /* ── Map page ────────────────────────────────────────────── */
    #surf-map { height: 260px; }

    .continent-tab {
        font-size: 0.73rem;
        padding: 0.35rem 0.6rem;
    }
    .continent-tab .tab-count { display: none; }

    .region-tab {
        font-size: 0.72rem;
        padding: 0.35rem 0.6rem;
    }
    .tab-dot { display: none; }
}