/**
 * Shared page CSS — Quadra Ferry Website
 * @version 1.0.0
 *
 * Sections hoisted verbatim out of the duplicated inline <style> blocks of
 * index.html / campbell-river.html / cortes-island.html, where they were
 * byte-identical (modulo comments and whitespace).
 *
 * LOAD ORDER MATTERS. This file must stay linked AFTER styles.css,
 * weather-card.css, travel-calculator.css and loading-estimate-card.css, and
 * BEFORE each page's remaining inline <style>. That is exactly where these
 * rules sat before being hoisted; moving them earlier (e.g. into styles.css)
 * would change which rules win.
 *
 * Pages that do not have a given section simply never match its selectors.
 */

/* ===== CARDS ===== */
        .card {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 1rem;
            transition: background-color 0.3s ease;
        }

        .card h2 {
            margin-bottom: 1rem;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .card-subtitle {
            font-size: 0.9rem;
            color: var(--text-tertiary);
            margin-top: -0.5rem;
            margin-bottom: 1rem;
        }

/* ===== COLLAPSIBLE SECTIONS ===== */
        .collapsible-section .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
            padding: 0.5rem 0;
        }

        .collapsible-section h2 {
            margin: 0;
            flex-shrink: 0;
        }

        .card-preview {
            flex: 1;
            text-align: center;
            font-size: 0.82rem;
            color: var(--text-secondary);
            padding: 0 0.75rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 1;
            transition: opacity 0.3s ease;
            line-height: 1.3;
        }

        .collapsible-section:not(.collapsed) .card-preview {
            opacity: 0;
            pointer-events: none;
        }

        .card-preview .preview-data {
            font-weight: 600;
            color: var(--text-primary);
        }

        .card-preview .preview-sep {
            color: var(--text-tertiary);
            margin: 0 0.15rem;
        }

        .card-preview .preview-wind {
            font-weight: 500;
        }

        .card-preview .preview-hint {
            display: block;
            font-size: 0.72rem;
            color: var(--text-tertiary);
            font-weight: 400;
        }

        /* Sea state preview color coding */
        .card-preview .sea-preview-calm { color: #137333; }
        .card-preview .sea-preview-slight { color: #2e7d32; }
        .card-preview .sea-preview-moderate { color: #1565c0; }
        .card-preview .sea-preview-rough { color: #e65100; }
        .card-preview .sea-preview-very-rough { color: #c62828; font-weight: 700; }

        [data-theme="dark"] .card-preview .sea-preview-calm { color: #81c995; }
        [data-theme="dark"] .card-preview .sea-preview-slight { color: #95d5b2; }
        [data-theme="dark"] .card-preview .sea-preview-moderate { color: #90caf9; }
        [data-theme="dark"] .card-preview .sea-preview-rough { color: #ffb74d; }
        [data-theme="dark"] .card-preview .sea-preview-very-rough { color: #ef9a9a; font-weight: 700; }

        @media (max-width: 480px) {
            .card-preview {
                font-size: 0.75rem;
                padding: 0 0.5rem;
            }
            .card-preview .preview-hint {
                display: none;
            }
        }

        /* The collapsible cards used to be <div onclick> — not focusable, no
           role, no state, so keyboard and switch users could not open any of
           them, and the ten controls inside the collapsed panels were still
           reachable by Tab while invisible. The toggle is now a real button
           inside the existing <h2> (the ARIA accordion pattern), so heading
           navigation still finds the card title. The stretched ::after keeps
           the whole header strip tappable rather than shrinking the target
           down to the title text. */
        .card-header-btn {
            background: none;
            border: 0;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }

        .card-header-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            /* .card-preview and .collapse-icon are later siblings, so without
               this they paint over the stretched hit area and the right-hand
               two thirds of the strip stops responding to taps. */
            z-index: 1;
        }

        .card-header-btn:focus-visible {
            outline: 3px solid var(--primary-blue);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .collapse-icon {
            font-size: 0.8rem;
            transition: transform 0.3s;
            flex-shrink: 0;
        }

        .collapsible-section.collapsed .collapse-icon {
            transform: rotate(180deg);
        }

        .collapsible-content {
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .collapsible-section.collapsed .collapsible-content {
            max-height: 0;
        }

/* ===== BENTO GRID (conditions cards) ===== */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        /* Equal tile heights, but only while all tiles are collapsed —
           a 1fr row would otherwise clamp an expanded card's content */
        .bento-grid:not(:has(.collapsible-section:not(.collapsed))) {
            grid-auto-rows: 1fr;
        }

        /* Center collapsed tile content vertically regardless of row height */
        .bento-grid .collapsible-section.collapsed {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .bento-grid .card {
            margin-bottom: 0;
        }

        /* Expanded card takes the full row width */
        .bento-grid .collapsible-section:not(.collapsed) {
            grid-column: 1 / -1;
        }

        /* Collapsed tiles: stack title over live preview, centered */
        .bento-grid .collapsible-section.collapsed .card-header {
            flex-direction: column;
            justify-content: center;
            gap: 0.4rem;
            text-align: center;
            min-height: 5.5rem;
            padding: 0.5rem 0;
        }

        .bento-grid .collapsible-section.collapsed h2 {
            font-size: 1.05rem;
        }

        .bento-grid .collapsible-section.collapsed .card-preview {
            white-space: normal;
            padding: 0;
            text-wrap: balance; /* avoid single-word orphan lines */
        }

        /* Whole tile is the tap target — chevron only needed when expanded */
        .bento-grid .collapsible-section.collapsed .collapse-icon {
            display: none;
        }

        @media (max-width: 480px) {
            .bento-grid { gap: 0.6rem; }
            .bento-grid .card { padding: 0.75rem; }
            .bento-grid .collapsible-section.collapsed h2 { font-size: 0.95rem; }
            /* Tiles with no live data yet would render empty —
               show the tap hint when it's all there is */
            .bento-grid .collapsible-section.collapsed .card-preview .preview-hint:only-child {
                display: block;
            }
        }

/* ===== WEATHER ===== */
        .weather-grid {
            display: grid;
            gap: 0.75rem;
        }

        .weather-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            background: var(--background-color);
            border-radius: 4px;
        }

        .weather-item .label {
            color: var(--text-tertiary);
            font-size: 0.9rem;
        }

        .weather-item .value {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1rem;
        }

/* ===== TIDES ===== */
        .tides-chart-container {
            position: relative;
            height: 180px;
            margin-top: 0.5rem;
        }

        .tide-current-level {
            text-align: center;
            margin-top: 0.75rem;
            padding: 0.75rem;
            background: var(--background-color);
            border-radius: 6px;
        }

        .tide-current-level .label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            display: block;
            margin-bottom: 0.25rem;
        }

        .tide-current-level .value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-blue);
        }

        .data-source {
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border-color);
            text-align: center;
            color: var(--text-tertiary);
            font-size: 0.75rem;
        }

/* ===== SEA STATE ===== */
        .sea-state-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .sea-state-item {
            text-align: center;
            padding: 0.75rem 0.5rem;
            background: var(--background-color);
            border-radius: 6px;
        }

        .sea-state-item .value {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-blue);
        }

        .sea-state-item .label {
            font-size: 0.7rem;
            color: var(--text-tertiary);
            margin-top: 0.25rem;
            line-height: 1.2;
        }

        .sea-state-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            margin-bottom: 0.75rem;
        }

        .sea-state-indicator .state-label {
            font-weight: 600;
            font-size: 1rem;
        }

        .sea-state-indicator .state-desc {
            font-size: 0.85rem;
            opacity: 0.9;
        }

        .sea-state-calm {
            background: #e6f4ea;
            color: #137333;
        }

        .sea-state-slight {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .sea-state-moderate {
            background: #e3f2fd;
            color: #1565c0;
        }

        .sea-state-rough {
            background: #fff3e0;
            color: #e65100;
        }

        .sea-state-very-rough {
            background: #ffebee;
            color: #c62828;
        }

        [data-theme="dark"] .sea-state-calm {
            background: #1b3d2f;
            color: #81c995;
        }

        [data-theme="dark"] .sea-state-slight {
            background: #1b4332;
            color: #95d5b2;
        }

        [data-theme="dark"] .sea-state-moderate {
            background: #0d2137;
            color: #90caf9;
        }

        [data-theme="dark"] .sea-state-rough {
            background: #3d2914;
            color: #ffb74d;
        }

        [data-theme="dark"] .sea-state-very-rough {
            background: #3d1f1f;
            color: #ef9a9a;
        }

        .sea-state-trend {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: var(--text-secondary);
            padding: 0.5rem;
            background: var(--background-color);
            border-radius: 6px;
        }

        .trend-icon {
            font-weight: bold;
            font-size: 1rem;
        }

        .trend-rising {
            color: #c62828;
        }

        .trend-falling {
            color: #2e7d32;
        }

        .trend-stable {
            color: var(--primary-blue);
        }

        [data-theme="dark"] .trend-rising {
            color: #ef9a9a;
        }

        [data-theme="dark"] .trend-falling {
            color: #81c995;
        }

        .trend-range {
            color: var(--text-tertiary);
            font-size: 0.8rem;
        }

        .sea-state-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border-color);
            font-size: 0.75rem;
            color: var(--text-tertiary);
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .sea-obs-row {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .refresh-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            padding: 0.15rem 0.25rem;
            border-radius: 4px;
            transition: opacity 0.2s, background 0.2s;
        }

        .refresh-btn:hover:not(:disabled) {
            background: var(--background-color);
        }

        .refresh-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        @media (max-width: 480px) {
            .sea-state-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .sea-state-indicator {
                flex-direction: column;
                gap: 0.25rem;
            }

            .sea-state-meta {
                justify-content: center;
                gap: 0.75rem;
            }
        }

/* ===== TOAST NOTIFICATIONS ===== */
        .toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--card-bg);
            color: var(--text-primary);
            padding: 1rem 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }