/* ============================================================
   RFF v3 — CLEAN CSS (PART 1)
   GLOBAL RESET • BASE VARIABLES • TYPOGRAPHY • LAYOUT
   ============================================================ */

body.preload *,
body.preload *::before,
body.preload *::after {
    transition: none !important;
    animation: none !important;
}

/* -----------------------------
   RESET
----------------------------- */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    background: #0f172a;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Remove padding/margins from common tags */
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure {
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img, picture, video {
    max-width: 100%;
    display: block;
}

/* Utility class */
.noselect {
    user-select: none;
}

/* Base container */
.page-container, .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
/* ============================================================
   RFF v3 — CLEAN CSS (PART 2)
   HEADER • DESKTOP NAV • MOBILE NAV (A1) • DROPDOWNS
   ============================================================ */

/* -----------------------------
   HEADER WRAPPER
----------------------------- */
.site-header {
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0.75rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* Header layout */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 1rem;
}

/* Logo */
.site-logo-img {
    height: 46px;
    width: auto;
    display: block;
}

/* -----------------------------
   DESKTOP NAVIGATION
----------------------------- */
.nav-desktop {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-desktop a {
    color: white;
    opacity: 0.9;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.nav-desktop a:hover {
    opacity: 1;
}

/* -----------------------------
   DESKTOP DROPDOWN (Explore)
----------------------------- */
.nav-dropdown {
    position: relative;
}

.drop-btn {
    background: none;
    border: none;
    color: white;
    opacity: 0.9;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.drop-btn:hover {
    opacity: 1;
}

/* Dropdown menu container */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: #0f172a;
    padding: 0.75rem 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    z-index: 10000;
}

.dropdown-menu a {
    display: block;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    opacity: 0.85;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.dropdown-menu a:hover {
    background: rgba(255,255,255,0.1);
    opacity: 1;
}

/* Dropdown opens on hover (desktop only) */
@media (min-width: 861px) {
    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* -----------------------------
   HAMBURGER BUTTON (MOBILE)
----------------------------- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Open → transform into "X" */
.nav-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* -----------------------------
   MOBILE NAV (A1)
   Slide-down panel under header
----------------------------- */

/* Base hidden state */
#nav-mobile {
    display: none;
    flex-direction: column;
    background: #0f172a;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: absolute;
    top: 60px; /* directly under header */
    left: 0;
    width: 100%;
    z-index: 9998;
}

/* Mobile links */
#nav-mobile a {
    font-size: 1.1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#nav-mobile a:last-child {
    border-bottom: none;
}

/* Explore mobile submenu */
.mobile-dropdown {
    margin-top: 0.5rem;
}

.mobile-drop-btn {
    width: 100%;
    padding: 0.6rem 0;
    text-align: left;
    font-size: 1.15rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.mobile-dropdown-menu {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
    gap: 0.5rem;
}

.mobile-dropdown-menu.open {
    display: flex;
}

/* -----------------------------
   RESPONSIVE BREAKPOINTS
----------------------------- */
@media (max-width: 860px) {

    /* Hide desktop navigation */
    .nav-desktop {
        display: none !important;
    }

    /* Show hamburger */
    .nav-toggle {
        display: flex !important;
    }

    /* Slide-down menu when opened */
    #nav-mobile.open {
        display: flex !important;
    }
}

@media (min-width: 861px) {

    /* Desktop view — hide mobile */
    #nav-mobile {
        display: none !important;
    }

    .nav-toggle {
        display: none !important;
    }

    .nav-desktop {
        display: flex !important;
    }
}

/* ============================================================
   RFF v3 — CLEAN CSS (PART 4)
   HOMEPAGE CARDS • SNAPSHOTS • VALUE CARDS • TOOL GRID
   ============================================================ */

/* ------------------------------------------------------------
   VALUE CARDS (Home features)
------------------------------------------------------------ */

.rff-value-cards {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 1rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.rff-value-card {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.8rem 1.4rem;
    text-align: left;
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
}

.rff-value-card:hover {
    border-color: rgba(52,211,153,0.6);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.rff-value-card .icon {
    margin-bottom: 0.75rem;
}

.rff-value-card .icon i {
    width: 28px;
    height: 28px;
    color: #34d399;
}

.rff-value-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    margin-bottom: 0.3rem;
    opacity: 0.95;
}

.rff-value-card p {
    font-size: 0.95rem;
    opacity: 0.8;
    line-height: 1.45;
}

/* Mobile stacking */
@media (max-width: 900px) {
    .rff-value-cards {
        flex-direction: column;
        padding: 2.2rem 1rem;
    }
    .rff-value-card {
        padding: 1.6rem 1.3rem;
    }
}

/* ------------------------------------------------------------
   TODAY ON THE RIVER (Dashboard)
------------------------------------------------------------ */

.rff-today-river {
    margin: 2rem auto 3rem;
    padding: 1.8rem 1.4rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}

.rff-today-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.rff-today-item i {
    width: 28px;
    height: 28px;
    color: #34d399;
    flex-shrink: 0;
}

.rff-today-item h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    opacity: 0.95;
}

.rff-today-item p {
    font-size: 0.93rem;
    opacity: 0.8;
}

/* Mobile responsiveness */
@media (max-width: 900px) {
    .rff-today-river {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .rff-today-river {
        grid-template-columns: 1fr;
        padding: 1.4rem 1rem;
        gap: 1rem;
    }

    .rff-today-item h4 {
        font-size: 0.95rem;
    }

    .rff-today-item p {
        font-size: 0.85rem;
    }

    .rff-today-item i {
        width: 22px;
        height: 22px;
    }
}

/* ------------------------------------------------------------
   SNAPSHOT CARDS (Weather/Flows/Counts)
------------------------------------------------------------ */

.home-card,
.sol-widget-inner {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.8rem 1.4rem;
    margin: 2rem 0;
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.home-card:hover,
.sol-widget-inner:hover {
    border-color: rgba(52,211,153,0.5);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.home-card h2,
.sol-widget-header {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.home-card p,
.sol-widget-value,
.sol-widget-label {
    font-size: 0.95rem;
    opacity: 0.85;
}

.home-link {
    color: #34d399;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
}

.home-link:hover {
    text-decoration: underline;
}

/* Mobile spacing */
@media (max-width: 768px) {
    .home-card,
    .sol-widget-inner {
        padding: 1.6rem 1.2rem;
    }
}
@media (max-width: 600px) {
    .home-card,
    .sol-widget-inner {
        padding: 1.4rem 1.1rem;
        margin: 1.2rem 0;
    }

    .home-card h2,
    .sol-widget-header {
        font-size: 1.15rem;
        margin-bottom: 0.8rem;
    }
}

/* ------------------------------------------------------------
   WEATHER SNAPSHOT ROW (Home page small weather preview)
------------------------------------------------------------ */

.home-wx-row {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.home-wx-temp {
    font-size: 2rem;
    font-weight: 700;
}

.home-wx-meta {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: 0.3rem;
}

/* ------------------------------------------------------------
   TOOL GRID (Home Quick Tools)
------------------------------------------------------------ */

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.tool-item {
    background: #0f172a;
    border-radius: 0.75rem;
    padding: 1.3rem;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
    text-align: center;
    transition: background 0.25s ease;
}

.tool-item:hover {
    background: #1e293b;
}

.tool-item i {
    width: 32px;
    height: 32px;
    margin-bottom: 0.5rem;
}
/* ============================================================
   RFF v3 — CLEAN CSS (PART 5)
   SOLUNAR SYSTEM — MAP • CARDS • TIMELINE • TABLE • WIDGET
   ============================================================ */

/* ------------------------------------------------------------
   LOCATION BUTTONS (River / Bay / Upper / Middle / Lower etc.)
------------------------------------------------------------ */

.sol-location-bar,
#sol-locations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem auto;
}

.sol-loc-btn {
    background: #1e293b;
    color: #fff;
    border-radius: 2rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.sol-loc-btn:hover {
    background: #334155;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.sol-loc-btn.active {
    background: #22c55e !important;
    color: #0f172a !important;
    border-color: #22c55e;
    font-weight: 600;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34,197,94,0.35);
}

/* ------------------------------------------------------------
   SOLUNAR MAP (Geoapify static map)
------------------------------------------------------------ */

.sol-map {
    position: relative;
    margin: 2rem auto;
    max-width: 650px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.35);
}

.sol-map-img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover;
    display: block;
}

/* Bottom overlay gradient */
.sol-map::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(
        to top,
        rgba(15,23,42,0.85),
        rgba(15,23,42,0)
    );
    pointer-events: none;
}

/* Map label */
.sol-map-label {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(0,0,0,0.6);
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 10;
}

/* ------------------------------------------------------------
   SOLUNAR CARDS (Moon phase, major/minor, quality, etc.)
------------------------------------------------------------ */

.sol-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}

.sol-card {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 1.4rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: all 0.25s ease;
}

.sol-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.sol-card h3 {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 0.4rem;
}

.sol-value {
    font-size: 1.55rem;
    font-weight: 700;
}

/* Moon Image */
.moon-icon {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.35));
    margin-top: 0.4rem;
}

/* ------------------------------------------------------------
   ACTIVITY RATING CARD
------------------------------------------------------------ */

.sol-activity-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sol-rating-score {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.sol-rating-stars {
    display: flex;
    gap: 0.15rem;
    margin-bottom: 0.4rem;
}

.sol-rating-stars span {
    font-size: 1.2rem;
    color: #22c55e;
}

.sol-rating-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Glow by quality */
.sol-rating-glow-5 { text-shadow: 0 0 12px rgba(34,197,94,0.8); }
.sol-rating-glow-4 { text-shadow: 0 0 10px rgba(101,163,13,0.7); }
.sol-rating-glow-3 { text-shadow: 0 0 8px rgba(234,179,8,0.6); }
.sol-rating-glow-2 { text-shadow: 0 0 6px rgba(249,115,22,0.5); }
.sol-rating-glow-1 { text-shadow: 0 0 4px rgba(239,68,68,0.4); }
.sol-rating-glow-0 { text-shadow: 0 0 4px rgba(153,27,27,0.4); }

/* ------------------------------------------------------------
   TIMELINE (Major / Minor feeding windows)
------------------------------------------------------------ */

.sol-timeline {
    margin: 2rem auto 3rem;
    max-width: 650px;
    background: #0b1120;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ------------------------------------------------------------
   SOLUNAR DETAILS TABLE
------------------------------------------------------------ */

.sol-table-inner {
    width: 100%;
    margin: 2rem auto;
    border-collapse: collapse;
}

.sol-table-inner th {
    background: #1f2937;
    padding: 0.6rem;
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 600;
}

.sol-table-inner td {
    padding: 0.6rem;
    border: 1px solid rgba(255,255,255,0.12);
    opacity: 0.9;
}

/* ------------------------------------------------------------
   HOMEPAGE SOLUNAR WIDGET
------------------------------------------------------------ */

.sol-widget {
    max-width: 600px;
    margin: 2.5rem auto;
}

.sol-widget-inner {
    background: #0b1120;
    border-radius: 1rem;
    border: 1px solid rgba(148,163,184,0.4);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 30px rgba(15,23,42,0.6);
}

.sol-widget-header {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.sol-widget-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
}

.sol-widget-label {
    opacity: 0.75;
}

.sol-widget-value {
    font-weight: 600;
}

.sol-widget-link {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: #22c55e;
}
/* ============================================================
   RFF v3 — CLEAN CSS (PART 6)
   WEATHER PAGE — GRID • CARDS • DAILY • HOURLY • ICONS
   ============================================================ */

/* ------------------------------------------------------------
   WEATHER GRID LAYOUT
------------------------------------------------------------ */

.weather-grid {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ------------------------------------------------------------
   MAIN WEATHER CARD
------------------------------------------------------------ */

.weather-card {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.weather-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.weather-card h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------
   WEATHER ICONS
------------------------------------------------------------ */

.weather-icon {
    margin: 0.5rem 0;
}

.weather-icon i,
.wicon i,
.wicon-sm i {
    width: 42px;
    height: 42px;
    color: #ffffff;
    stroke-width: 1.8;
}

.weather-icon i {
    width: 48px;
    height: 48px;
}

.wicon-sm i {
    width: 28px;
    height: 28px;
}

/* ------------------------------------------------------------
   TEMPERATURE + META INFO
------------------------------------------------------------ */

.temp-main {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.sub-info {
    font-size: 0.95rem;
    opacity: 0.85;
    margin: 0.25rem 0;
}

.timestamp {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 0.75rem;
}

/* ------------------------------------------------------------
   DAILY FORECAST GRID
------------------------------------------------------------ */

.weather-daily-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px,1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.weather-daily-card {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.weather-daily-card .wday {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.weather-daily-card .wicon {
    font-size: 1.8rem;
    margin: 0.3rem 0;
}

.weather-daily-card .whigh {
    font-size: 1.2rem;
    font-weight: 700;
    color: #34d399;
}

.weather-daily-card .wlow {
    opacity: 0.65;
    margin-top: 0.15rem;
    font-size: 0.9rem;
}

/* ------------------------------------------------------------
   HOURLY FORECAST
------------------------------------------------------------ */

.weather-hourly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px,1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.weather-hour {
    background: #111827;
    border-radius: 0.75rem;
    padding: 0.75rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.weather-hour .time {
    font-size: 0.9rem;
    opacity: 0.85;
}

.wicon-sm {
    font-size: 1.45rem;
    margin: 0.25rem 0;
}

/* ------------------------------------------------------------
   MOBILE TUNING
------------------------------------------------------------ */

@media (max-width: 600px) {

    .weather-card {
        padding: 1.25rem;
    }

    .temp-main {
        font-size: 2.2rem;
    }

    .weather-daily-card {
        padding: 0.8rem;
    }

    .weather-hour {
        padding: 0.6rem;
    }
}
/* ============================================================
   RFF v3 — CLEAN CSS (PART 7)
   FLOWS + RIVER DETAIL PAGES
   ============================================================ */

/* ------------------------------------------------------------
   SECTION TITLES
------------------------------------------------------------ */

.flow-section-title {
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #ffffff;
    opacity: 0.9;
}

/* ------------------------------------------------------------
   FLOWS GRID
------------------------------------------------------------ */

.flows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

/* ------------------------------------------------------------
   FLOW CARD (Rivers & Lakes)
------------------------------------------------------------ */

.flow-card {
    display: block;
    padding: 1.4rem 1.4rem 1.2rem;
    border-radius: 14px;
    background: rgba(20,25,38,0.58);
    border: 1px solid rgba(255,255,255,0.08);
    color: white;
    text-decoration: none;
    backdrop-filter: blur(12px);
    transition: all 0.25s ease;
    cursor: pointer;
}

.flow-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

/* Title */
.flow-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
    line-height: 1.35;
}

/* Core Flow Value */
.flow-card-value {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: 0.3px;
}

/* Sub-info: trend, badges, temp */
.flow-card-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.9;
    align-items: center;
}

/* ------------------------------------------------------------
   FLOW QUALITY BADGES
------------------------------------------------------------ */

.flow-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.flow-badge.good {
    background: rgba(34,197,94,0.33);
    border: 1px solid rgba(34,197,94,0.55);
}

.flow-badge.fair {
    background: rgba(234,179,8,0.33);
    border: 1px solid rgba(234,179,8,0.55);
}

.flow-badge.low {
    background: rgba(96,165,250,0.33);
    border: 1px solid rgba(96,165,250,0.55);
}

.flow-badge.high {
    background: rgba(239,68,68,0.33);
    border: 1px solid rgba(239,68,68,0.55);
}

/* Temperature bubble */
.temp-badge {
    padding: 2px 6px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(59,130,246,0.33);
    border-radius: 6px;
}

/* Trend arrows */
.flow-trend {
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0.9;
}

/* Timestamp */
.flow-card-updated {
    font-size: 0.85rem;
    opacity: 0.55;
    margin-top: 0.3rem;
}

/* ------------------------------------------------------------
   SUMMARY CARD (River Detail Page)
------------------------------------------------------------ */

.river-summary-card {
    background: #1f2937;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 2rem auto;
}

.river-flow-number {
    font-size: 2rem;
    font-weight: 700;
}

.river-flow-trend {
    font-size: 2rem;
    font-weight: 700;
    opacity: 0.9;
}

/* ------------------------------------------------------------
   METRIC TOGGLE BUTTONS (Flow / Temp / Stage)
------------------------------------------------------------ */

.metric-toggle {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
}

.metric-toggle button {
    padding: 6px 12px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.metric-toggle button:hover {
    background: rgba(255,255,255,0.15);
}

.metric-toggle button.active {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
    font-weight: 600;
}

/* ------------------------------------------------------------
   USGS GRAPH WRAPPER
------------------------------------------------------------ */

.graph-wrapper {
    width: 100%;
    height: 220px;
    max-width: 1100px;
    margin: 1.75rem auto;
    padding: 0 1rem;
}

.graph-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   TIDE SUMMARY (Estuary Mode)
------------------------------------------------------------ */

.tide-card {
    background: rgba(255,255,255,0.08);
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.06);
    margin: 2rem auto;
    max-width: 1100px;
}

.tide-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}

.tide-card div {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------
   MOBILE OPTIMIZATION
------------------------------------------------------------ */

@media (max-width: 640px) {

    .flow-card {
        padding: 1.2rem;
    }

    .flow-card-value {
        font-size: 1.6rem;
    }

    .river-summary-card {
        padding: 1rem 1.25rem;
        margin: 1.5rem auto;
    }

    .river-flow-number,
    .river-flow-trend {
        font-size: 1.6rem;
    }

    .metric-toggle {
        flex-wrap: wrap;
    }

    .metric-toggle button {
        flex: 1 1 calc(50% - 0.4rem);
        text-align: center;
    }

    .graph-wrapper {
        height: 180px !important;
        margin-bottom: 1.5rem;
    }

    #tide-graph-wrapper {
        height: 180px !important;
    }
}
/* ============================================================
   RFF v3 — CLEAN CSS (PART 8)
   LOGBOOK SYSTEM — CARDS • FORMS • ACTIONS • TOAST
   ============================================================ */

/* ------------------------------------------------------------
   LOGBOOK HERO
------------------------------------------------------------ */

.logbook-hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
    background: linear-gradient(180deg,#0f172a,#111827);
}

.logbook-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.logbook-sub {
    max-width: 520px;
    margin: 0 auto;
    opacity: .75;
}

/* ------------------------------------------------------------
   LOGBOOK WRAPPER + FEED
------------------------------------------------------------ */

.logbook-wrapper {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.logbook-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ------------------------------------------------------------
   LOGBOOK ENTRY CARD
------------------------------------------------------------ */

.log-entry-card {
    background: rgba(31,41,55,0.6);
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    padding: 1rem;
    display: flex;
    gap: 1rem;
}

/* Thumbnail */
.log-entry-thumb {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: .75rem;
}

/* Body */
.log-entry-body h3 {
    font-size: 1.1rem;
    margin-bottom: .3rem;
}

.log-entry-meta {
    opacity: .7;
    font-size: .9rem;
    margin-bottom: .35rem;
}

.log-entry-fly {
    font-size: .95rem;
    opacity: .85;
    margin-bottom: .5rem;
}

/* Actions */
.log-entry-actions {
    margin-top: auto;
}

.log-entry-actions button {
    font-size: .85rem;
    padding: .45rem .8rem;
    border-radius: .45rem;
    border: none;
    cursor: pointer;
}

.log-entry-actions .log-edit {
    background: #22c55e;
    color: #0f172a;
}

.log-entry-actions .log-delete {
    background: #7f1d1d;
    color: #fff;
}

/* Mobile stack */
@media (max-width: 640px) {
    .log-entry-card {
        flex-direction: column;
    }
    .log-entry-thumb {
        width: 100%;
        height: 180px;
    }
}

/* ------------------------------------------------------------
   LOGBOOK PHOTO-HERO CARD (full-width trip entries)
------------------------------------------------------------ */

.log-card {
    background-color: rgba(31,41,55,0.6);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 2rem;
}

/* Large hero photo */
.log-card-photo-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.log-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay text */
.log-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem 1.25rem;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
}

.log-card-title {
    font-size: 1.4rem;
    font-weight: 700;
}

.log-card-sub {
    font-size: .95rem;
    opacity: .85;
}

/* Body */
.log-card-body {
    padding: 1.25rem 1.4rem;
}

/* Sections */
.log-section {
    margin-bottom: .85rem;
}

.log-section-label {
    opacity: .75;
    font-weight: 600;
    margin-bottom: .25rem;
}

/* ------------------------------------------------------------
   LOGBOOK FORM PANEL
------------------------------------------------------------ */

.logcard-form {
    background: rgba(17,25,40,0.7);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 2rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* Inputs */
.log-input,
.log-textarea,
.log-select,
#log-search,
#log-filter-species,
#log-sort {
    width: 100%;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .95rem;
    border-radius: .6rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    box-sizing: border-box;
}

.log-input:focus,
.log-textarea:focus {
    outline: none;
    border-color: #22c55e;
    background: rgba(255,255,255,0.1);
}

/* Textarea */
.log-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Dropdown arrows */
.log-select,
#log-sort,
#log-filter-species {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='white' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Photo preview */
.log-photo-preview {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: .5rem;
    margin-top: .75rem;
    border: 1px solid rgba(255,255,255,0.1);
    transition: opacity .25s ease, height .25s ease;
}

.log-photo-preview.hidden {
    opacity: 0;
    height: 0;
}

/* ------------------------------------------------------------
   TWO-COLUMN FORM GRID
------------------------------------------------------------ */

.log-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2.5rem;
}

.log-field-block {
    display: flex;
    flex-direction: column;
}

@media (max-width: 860px) {
    .log-form-grid {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
}

/* ------------------------------------------------------------
   FILTER BAR (sticky)
------------------------------------------------------------ */

.log-filter-bar {
    position: sticky;
    top: 60px;
    z-index: 900;
    background: rgba(15,23,42,0.85);
    backdrop-filter: blur(12px);
    padding: .75rem 1rem;
    border-radius: .75rem;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

@media (min-width: 860px) {
    .log-filter-bar {
        flex-direction: row;
        align-items: center;
    }
}

/* ------------------------------------------------------------
   CHIPS (Hot / Active / Filters)
------------------------------------------------------------ */

.log-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.log-chip {
    padding: .35rem .75rem;
    border-radius: .5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    font-size: .8rem;
    cursor: pointer;
    transition: all .2s ease;
}

.log-chip:hover {
    background: rgba(255,255,255,0.2);
}

.log-chip.active {
    background: #22c55e;
    border-color: #22c55e;
    color: #0f172a;
    transform: scale(1.08);
}

.log-chip.hot {
    background: rgba(34,197,94,0.25);
    border: 1px solid #22c55e;
    box-shadow: 0 0 10px rgba(34,197,94,0.25);
}

/* ------------------------------------------------------------
   STICKY ACTION BAR (Save / Cancel)
------------------------------------------------------------ */

.log-sticky-actions {
    position: sticky;
    bottom: 0;
    padding: 1rem;
    background: rgba(15,23,42,0.92);
    backdrop-filter: blur(10px);
    display: flex;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    justify-content: flex-end;
    z-index: 20;
}

@media (max-width: 640px) {
    .log-sticky-actions {
        justify-content: space-between;
    }
}

.log-btn {
    padding: .65rem 1.4rem;
    font-size: .95rem;
    border-radius: .5rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.log-btn-primary {
    background: #22c55e;
    color: #0f172a;
}

.log-btn-primary:hover {
    background: #16a34a;
}

.log-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: white;
}

.log-btn-secondary:hover {
    background: rgba(255,255,255,0.2);
}

/* ------------------------------------------------------------
   TOAST (Save notification)
------------------------------------------------------------ */

.log-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #22c55e;
    padding: .75rem 1.5rem;
    color: #0f172a;
    font-weight: 700;
    border-radius: .75rem;
    opacity: 0;
    z-index: 99999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    transition: all .35s ease;
}

.log-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* ============================================================
   RFF v3 — CLEAN CSS (PART 9)
   REPORTS + HISTORY PAGES — GRID • CARDS • ARTICLES
   ============================================================ */

/* ------------------------------------------------------------
   REPORTS HERO
------------------------------------------------------------ */

.reports-hero {
    text-align: center;
    padding: 3rem 1rem;
    background: linear-gradient(180deg, #0f172a, #111827);
}

.reports-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
}

.reports-tag {
    font-size: 1.05rem;
    opacity: 0.75;
    margin-top: 0.5rem;
}

/* ------------------------------------------------------------
   REPORT TABS (optional filters/categories)
------------------------------------------------------------ */

.report-tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem auto;
    flex-wrap: wrap;
}

.report-tab {
    padding: .7rem 1.2rem;
    border-radius: 2rem;
    background: #1f2937;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
    transition: .2s ease;
}

.report-tab:hover {
    background: #374151;
}

.report-tab.active {
    background: #22c55e;
    color: #0d1626;
}

/* ------------------------------------------------------------
   REPORTS GRID
------------------------------------------------------------ */

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.8rem;
    max-width: 1100px;
    padding: 0 1rem;
    margin: 2rem auto 3rem;
}

/* ------------------------------------------------------------
   REPORT CARD
------------------------------------------------------------ */

.report-card {
    background: #111827;
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    color: white;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: .25s ease;
}

.report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.report-card-img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: #1f2937;
}

.report-card-body {
    padding: 1rem 1.25rem 1.5rem;
}

.report-card-body h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.report-card-meta {
    font-size: .9rem;
    opacity: .7;
    margin-bottom: .7rem;
}

.report-card-excerpt {
    font-size: .95rem;
    opacity: .85;
    line-height: 1.45;
}

/* ------------------------------------------------------------
   SINGLE REPORT PAGE HERO
------------------------------------------------------------ */

.single-report-hero {
    text-align: center;
    padding: 4rem 1rem 2rem;
    background: linear-gradient(180deg, #0f172a, #111827);
}

.single-report-hero h1 {
    font-size: 2.4rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    margin-bottom: .75rem;
}

.single-report-meta {
    opacity: .75;
    font-size: 1rem;
}

/* ------------------------------------------------------------
   SINGLE REPORT COVER IMAGE
------------------------------------------------------------ */

.single-report-cover {
    width: 100%;
    border-radius: 1rem;
    margin: 2rem 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    object-fit: cover;
    max-height: 420px;
}

/* ------------------------------------------------------------
   SINGLE REPORT BODY
------------------------------------------------------------ */

.report-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    font-size: 1.15rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.92);
}

.report-body p {
    margin-bottom: 1.4rem;
    opacity: .95;
}

.report-body h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
}

.report-body h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    margin: 1.8rem 0 .8rem;
}

/* ------------------------------------------------------------
   SINGLE REPORT NAVIGATION
------------------------------------------------------------ */

.single-report-nav {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.single-report-nav-btn {
    padding: .75rem 1rem;
    background: #1f2937;
    border-radius: .6rem;
    text-decoration: none;
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
    transition: .2s ease;
}

.single-report-nav-btn:hover {
    background: #22c55e;
    color: #0d1626;
}

.report-back-btn {
    font-size: 1rem;
    opacity: .8;
    text-decoration: none;
    transition: .2s ease;
}

.report-back-btn:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ============================================================
   HISTORY HUB PAGE (CARD GRID)
============================================================ */

.history-hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: 2rem 1.5rem 0.5rem;
}

.history-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.history-hero p {
    font-size: 1.12rem;
    opacity: .8;
    max-width: 720px;
    margin: 0.5rem auto;
    line-height: 1.55;
}

/* CARD GRID */
.history-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}

/* INDIVIDUAL CARD */
.history-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    transition: .25s ease;
    backdrop-filter: blur(6px);
}

.history-card:hover {
    transform: translateY(-4px);
    border-color: rgba(52,211,153,0.45);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.history-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.history-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.history-card p {
    font-size: 0.96rem;
    opacity: .85;
    line-height: 1.45;
    margin-bottom: 1rem;
}

.history-card .read-more {
    color: #34d399;
    font-weight: 600;
    font-size: 0.93rem;
    text-decoration: none;
}

.history-card .read-more:hover {
    text-decoration: underline;
}

/* ============================================================
   HISTORY ARTICLE PAGE
============================================================ */

.single-report-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    line-height: 1.65;
    font-size: 1.05rem;
    color: #ffffff;
}

.single-report-body img {
    max-width: 100%;
    border-radius: 12px;
    margin: 1.5rem auto;
}

.single-report-body figure {
    margin: 2rem auto;
    text-align: center;
}

.single-report-body figcaption {
    margin-top: .4rem;
    opacity: .7;
    font-size: .9rem;
}

.single-report-body h1,
.single-report-body h2,
.single-report-body h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .75rem;
}

.single-report-body h2 {
    font-size: 1.7rem;
    margin-top: 2.2rem;
}

.single-report-body h3 {
    font-size: 1.28rem;
    margin-top: 1.8rem;
}

/* MOBILE TUNING */
@media (max-width: 600px) {
    .reports-grid,
    .history-card-grid {
        padding: 0 1rem;
    }
    .single-report-body {
        padding: 1.25rem;
    }
    .single-report-hero h1 {
        font-size: 2rem;
    }
}
/* ============================================================
   RFF v3 — CLEAN CSS (PART 10)
   SPONSOR ROTATOR • PHOTO GRIDS • HISTORY IMAGERY
   ============================================================ */

/* ------------------------------------------------------------
   SPONSOR ROTATOR — CLEAN + STABLE
------------------------------------------------------------ */

.rff-sponsor-rotator {
    max-width: 650px;       /* ← SHRINK IT HERE */
    width: 100%;
    margin: 2rem auto;
    padding: 1.3rem 1.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    text-align: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    transition: 0.25s ease;
}


.rff-sponsor-rotator:hover {
    border-color: #34d399;
    box-shadow: 0 6px 20px rgba(52,211,153,0.25);
    transform: translateY(-2px);
}

/* Stacking container */
.rotator-stack {
    position: relative;
    width: 100%;
    height: auto; /* height defined by active image */
    overflow: hidden;
}

/* Base image styling */
.rotator-img {
    width: 100%;
    height: auto;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Active image sets the height + visibility */
.rotator-img.active {
    position: relative;
    opacity: 1;
    z-index: 2;
}

/* Inactive stays below */
.rotator-img.inactive {
    opacity: 0;
    z-index: 1;
}

/* Sponsor tagline */
#sponsor-text {
    font-size: 1.05rem;
    opacity: 0.9;
    margin-top: 0.75rem;
}

/* Hide tagline if class "no-text" is applied */
.rff-sponsor-rotator.no-text #sponsor-text {
    display: none;
}

/* MOBILE */
@media (max-width: 600px) {
    .rff-sponsor-rotator {
        padding: 1rem !important;
        margin: 1.5rem auto;
        width: 100% !important;
    }

    #sponsor-image {
        width: 160px;
        height: auto;
    }

    #sponsor-text {
        font-size: .95rem;
    }
}

/* ------------------------------------------------------------
   PHOTO GRID (e.g., Rogers Ranch, Settlers, Gold Mining)
------------------------------------------------------------ */

.rff-photo-grid {
    max-width: 900px;
    margin: 2rem auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
}

.rff-photo-grid img {
    width: 210px;
    height: auto;
    max-height: 260px;
    object-fit: contain;          /* show entire image */
    background: #050b12;
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.28);
    transition: transform .25s ease, opacity .25s ease;
}

.rff-photo-grid img:hover {
    transform: scale(1.04);
    opacity: .92;
}

/* MOBILE */
@media (max-width: 600px) {
    .rff-photo-grid img {
        width: 100%;
        max-width: 340px;
        height: auto;
    }
}

/* ------------------------------------------------------------
   HISTORY PAGE INLINE IMAGES
------------------------------------------------------------ */

.history-img {
    display: block;
    width: 100%;
    max-width: 650px;
    margin: 1.5rem auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    object-fit: cover;
}

/* ------------------------------------------------------------
   GLOBAL SAFETY — STOP IMAGE OVERFLOW
------------------------------------------------------------ */

img, picture, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------------------------------------
   GLOBAL PREVENTION OF HORIZONTAL SCROLL
------------------------------------------------------------ */

html, body {
    overflow-x: hidden !important;
}

/* FIX FOOTER ALIGNMENT */
.rff-footer,
.rff-footer-links,
.rff-footer-brand,
.footer-col,
.rff-footer-bottom {
    text-align: center !important;
    justify-content: center !important;
}

.rff-footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 3rem !important;
}
/* FOOTER TEXT VISIBILITY FIX */
.rff-footer a {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

.rff-footer a:hover {
    opacity: 1 !important;
    color: #34d399 !important; /* neon green hover */
}

/* ============================================
   FIXED & CLEAN FOOTER LAYOUT
============================================ */

.rff-footer {
    background: #0a1220;
    padding: 3rem 1.5rem;
    margin-top: 4rem;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

.rff-footer-brand h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    margin-bottom: 0.3rem;
}

.rff-footer-brand p {
    opacity: 0.75;
    font-size: 0.95rem;
}

.rff-footer-links {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.footer-col {
    min-width: 150px;
    text-align: left;
}

.footer-col h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
    opacity: 0.9;
}

.footer-col a {
    display: block;
    color: #e4e4e4;
    text-decoration: none;
    font-size: 0.95rem;
    margin-bottom: 0.45rem;
    opacity: 0.75;
    transition: opacity .25s ease, color .25s ease;
}

.footer-col a:hover {
    opacity: 1;
    color: #34d399;
}

.rff-footer-bottom {
    margin-top: 2.5rem;
    opacit
}

/* ============================================================
   🔥 FINAL HARD OVERRIDE — SHRINK SPONSOR ROTATOR ON DESKTOP
   ============================================================ */
@media (min-width: 900px) {

    /* Force wrapper to actual size */
    .page-container > .rff-sponsor-rotator {
        max-width: 600px !important;   /* ← pick your size */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1rem !important;
    }

    /* Ensure stack does NOT expand past wrapper */
    .page-container > .rff-sponsor-rotator .rotator-stack {
        max-width: 600px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* FORCE images to scale inside new size */
    .page-container > .rff-sponsor-rotator .rotator-stack img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* ============================================================
   🔥 ABSOLUTE OVERRIDE — FORCE DESKTOP SPONSOR SHRINK
   ============================================================ */
@media (min-width: 900px) {

    body .page-container .rff-sponsor-rotator {
        max-width: 600px !important;   /* ← change size here */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0.5rem !important;
    }

    body .page-container .rff-sponsor-rotator .rotator-stack {
        max-width: 600px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    body .page-container .rff-sponsor-rotator .rotator-stack img {
        width: 100% !important;
        height: auto !important;
        max-height: 350px !important; /* optional height limit */
        object-fit: contain !important;
    }
}

/* ============================================
   RFF — FISH COUNTS PAGE STYLING
   ============================================ */

/* Page Hero */
.counts-hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
    background: linear-gradient(180deg, #0f172a, #111827);
}

.counts-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.counts-hero .muted {
    opacity: 0.8;
    font-size: 1.05rem;
    line-height: 1.6;
}


/* SECTION WRAPPER */
.counts-section {
    margin: 2.5rem auto;
    max-width: 900px;
}

.counts-section h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: .5rem;
}


/* ============================================
   FUN FACT BOX
============================================ */
.fun-fact-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 1.5rem 1.25rem;
    border-radius: 14px;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    line-height: 1.55;
}

.fun-fact-box h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.fact-link {
    color: #34d399;
    font-size: 0.95rem;
    font-weight: 500;
}

.fact-link:hover {
    text-decoration: underline;
}


/* ============================================
   DAILY COUNTS GRID — CARD SYSTEM
============================================ */

.count-label-muted {
    font-size: .9rem;
    opacity: .65;
}


/* ============================================
   HISTORY TABLE BLOCK
============================================ */
.counts-table {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.25rem 1.25rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    overflow-x: auto;
}

.counts-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.counts-table th {
    text-align: left;
    background: rgba(255,255,255,0.08);
    padding: .65rem;
    font-weight: 600;
}

.counts-table td {
    padding: .55rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    opacity: .85;
}

.counts-table tr:last-child td {
    border-bottom: none;
}


/* ============================================
   MOBILE TUNING
============================================ */
@media (max-width: 600px) {

    .counts-hero h1 {
        font-size: 2.2rem;
    }

    .counts-grid {
        grid-template-columns: 1fr;
    }

    .count-number {
        font-size: 1.75rem;
    }
}

/* ===============================
   FISH COUNTS PAGE — GLASS GRID
   (scope protected)
================================*/

/* MOBILE STACKING */
@media (max-width: 600px) {
    .counts-grid {
        grid-template-columns: 1fr;
    }
    .counts-grid .count-card {
        padding: 1.2rem;
    }
    .counts-grid .count-card .count-number {
        font-size: 1.7rem;
    }
}



/* FUN FACT BOX */
.fun-fact-box .fact-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(6px);
}

.fact-link {
    color: #5ec6ff;
    text-decoration: none;
    font-weight: 600;
}

.fact-link:hover {
    text-decoration: underline;
}
.fish-card {
    background:#111827;
    padding:1.5rem;
    border-radius:1rem;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 0 8px rgba(0,0,0,0.25);
    text-align:center;
}

.fish-card h2 {
    margin:0 0 1rem 0;
    font-size:1.2rem;
}

.fish-value {
    font-size:2rem;
    font-weight:700;
}
/* ===============================
   FISH COUNTS — MODERN GLASS CARDS
=============================== */

.fish-counts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.fish-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.fish-card:hover {
    transform: translateY(-4px);
    border-color: #34d399;
}

.fish-card h3 {
    margin-bottom: .75rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.fish-value {
    font-size: 2rem;
    font-weight: 700;
    margin-top: .25rem;
    opacity: .95;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .fish-card {
        padding: 1.2rem;
    }
    .fish-value {
        font-size: 1.6rem;
    }
}
/* ===============================
   FISH COUNTS — HORIZONTAL CARDS
=============================== */

.fish-count-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    margin: 2rem auto;
    flex-wrap: wrap; /* allows stacking on mobile */
}

.fish-card {
    flex: 1;
    min-width: 200px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 1.4rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform .25s ease, border-color .25s ease;
}

.fish-card:hover {
    transform: translateY(-4px);
    border-color: #34d399;
}

.fish-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.fish-value {
    font-size: 2rem;
    font-weight: 700;
    opacity: 0.95;
}

/* mobile friendly */
@media (max-width: 600px) {
    .fish-card {
        min-width: 100%;
    }
}


/* ===============================
   FISH COUNTS PAGE — GLASS GRID
   (scope protected)
================================*/

.counts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.counts-grid .count-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.counts-grid .count-card:hover {
    transform: translateY(-4px);
    border-color: #34d399;
}

.counts-grid .count-card h3 {
    font-size: 1.2rem;
    margin-bottom: .5rem;
    font-weight: 600;
}

.counts-grid .count-card .count-number {
    font-size: 2.2rem;
    font-weight: 700;
    opacity: .95;
}

/* MOBILE STACKING */
@media (max-width: 600px) {
    .counts-grid {
        grid-template-columns: 1fr;
    }
    .counts-grid .count-card {
        padding: 1.2rem;
    }
    .counts-grid .count-card .count-number {
        font-size: 1.7rem;
    }
}
.conditions-score.glass-card {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 1.7rem;
    margin: 2rem auto;
    color: #fff;
    max-width: 1100px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.28);
}

.score-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .8rem;
}

.score-number {
    font-size: 2.8rem;
    font-weight: 700;
    padding: 0.35rem 1.4rem;
    background: rgba(0,0,0,0.25);
    border-radius: 12px;
}

.score-rating {
    font-size: 1.4rem;
    opacity: .9;
    font-weight: 600;
}

.score-details p {
    margin: 0.25rem 0;
    font-size: 1rem;
}

.conditions-score small {
    opacity: .7;
}
.conditions-score.glass-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 18px;
    padding: 2rem;
    margin: 2.5rem auto;
    max-width: 1100px;
    color: #fff;
    box-shadow: 0 14px 32px rgba(0,0,0,0.35);
}

.cs-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    opacity: 0.95;
}

.cs-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cs-score {
    font-size: 3rem;
    font-weight: 800;
}

.cs-rating {
    font-size: 1.4rem;
    font-weight: 600;
    opacity: 0.85;
}

.cs-details p {
    margin: 0.4rem 0;
    line-height: 1.4;
    font-size: 1rem;
}

.cs-updated {
    display: block;
    margin-top: 1.5rem;
    opacity: 0.6;
    font-size: 0.85rem;
}
.conditions-score .cs-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.conditions-score .cs-score {
    font-size: 2.8rem;
    font-weight: 800;
}

.conditions-score .cs-rating {
    font-size: 1.3rem;
    font-weight: 600;
    opacity: 0.85;
}

.conditions-score .cs-details p {
    margin: 0.4rem 0;
    line-height: 1.45;
}

.conditions-score .cs-updated {
    display: block;
    margin-top: 1.5rem;
    opacity: 0.6;
    font-size: 0.85rem;
}
.conditions-score {
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .score-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .score-number {
        font-size: 2.2rem;
    }

    .score-rating {
        font-size: 1.1rem;
    }

    .score-details p {
        font-size: 0.95rem;
    }
}
.conditions-score-card {
    padding: 2rem;
}

.cs-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.cs-score {
    font-size: 2.6rem;
    font-weight: 800;
}

.cs-rating {
    font-size: 1.3rem;
    font-weight: 600;
    opacity: 0.85;
}

.cs-details p {
    margin: 0.35rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.cs-updated {
    display: block;
    margin-top: 1.3rem;
    font-size: 0.8rem;
    opacity: 0.6;
}
.where-fish-card p {
    margin: 0.35rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.where-fish-card .wf-section {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 0.4rem;
}

.where-fish-card .wf-hazards {
    margin-top: 0.6rem;
    color: #ffcc80;
}

.where-fish-card .wf-updated {
    display: block;
    margin-top: 1.1rem;
    font-size: 0.8rem;
    opacity: 0.55;
}
.disclaimer-card p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.disclaimer-card h2 {
    margin-bottom: 1rem;
}

.disclaimer-card strong {
    font-weight: 600;
}

.disclaimer-card .affiliate-disclaimer {
    margin-top: 1rem;
    opacity: 0.7;
    font-size: 0.85rem;
}
/* ===========================
   Solunar Timeline – Pill Style
   =========================== */

/* ===========================
   FORCE-RESET TIMELINE LAYOUT
   =========================== */


/* =========================================================
   APPLE WEATHER — MODERN SOLUNAR TIMELINE
   ========================================================= */

#sol-timeline {
    width: 100%;
    margin-top: 1.5rem;
}

#sol-timeline .timeline-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 18px 0;
}

#sol-timeline .timeline-label {
    width: 90px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
}

/* Dark track */
#sol-timeline .timeline-track {
    position: relative;
    flex: 1;
    height: 20px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}

/* Gradient pill */
#sol-timeline .timeline-pill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 6px rgba(0,0,0,0.35),
        inset 0 0 8px rgba(255,255,255,0.25);
    transition: all 0.25s ease;
}

/* Label inside pill */
#sol-timeline .timeline-pill-label {
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 0 10px;
    text-shadow:
        0 0 3px rgba(0,0,0,0.6),
        0 0 6px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* FINAL TIMELINE FORCE FIX */
.timeline-track {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    position: relative !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.timeline-pill {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* FINAL OVERRIDE — FORCE TIMELINE HEIGHT */
.timeline-track {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ensure pills fill track height */
.timeline-pill {
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    position: absolute !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ================================
   APPLE WEATHER–STYLE SOLUNAR UI
   ================================ */

/* Improve spacing between rows */
#sol-timeline .timeline-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 22px 0;
}

/* Move labels slightly right for better alignment */
#sol-timeline .timeline-label {
    width: 110px;
    text-align: left;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
}
/* Elegant dark track */
#sol-timeline .timeline-track {
    position: relative;
    flex: 1;
    height: 24px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.45),
        inset 0 0 4px rgba(255,255,255,0.1);
}

/* Gradient pill improvement */
#sol-timeline .timeline-pill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;

    /* soft glow */
    box-shadow:
        0 0 12px rgba(99,102,241,0.55),
        0 0 20px rgba(14,165,233,0.35),
        inset 0 0 12px rgba(255,255,255,0.25);

    /* subtle glossy sheen */
    background-blend-mode: overlay;
}

/* Text inside pill — slightly larger and more readable */
#sol-timeline .timeline-pill-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-shadow:
        0 1px 4px rgba(0,0,0,0.8),
        0 0 6px rgba(0,0,0,0.5);
}
/* Animate each pill sliding in from left smoothly */
#sol-timeline .timeline-pill {
    opacity: 0;
    transform: translateX(-20px);
    animation: pillSlideIn 0.9s ease forwards;
}

@keyframes pillSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Midnight-wrap segments get a dashed edge on the right */
#sol-timeline .timeline-pill.midnight-wrap {
    border-right: 2px dashed rgba(255,255,255,0.6);
}
/* Collapse into compact mode on small screens */
@media (max-width: 480px) {
    
    #sol-timeline .timeline-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #sol-timeline .timeline-label {
        font-size: 0.85rem;
        opacity: 0.85;
    }

    #sol-timeline .timeline-track {
        width: 100%;
        height: 18px;
    }

    #sol-timeline .timeline-pill-label {
        font-size: 0.7rem;
        padding: 0 6px;
    }
}

#sol-timeline {
    position: relative !important;
}

/* 24-hour faint timeline grid */
.sol-timeline {
    position: relative !important;
    overflow: hidden !important;
}

.sol-timeline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        transparent 1px,
        transparent calc((100% / 24))
    );
    pointer-events: none;
    opacity: .35;
}


#timeline-hours {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0 6px;
    font-size: 0.7rem;
    opacity: 0.4;
    letter-spacing: .5px;
}
.timeline-pill-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
}
.timeline-pill:hover::after {
    content: attr(data-duration);
    position: absolute;
    top: -32px;
    background: rgba(0,0,0,0.8);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.70rem;
    white-space: nowrap;
    color: #fff;
    opacity: 1;
    transform: translateY(0);
    pointer-events: none;
}

.timeline-pill::after {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}
.timeline-pill.active-period {
    animation: pulseGlow 1.8s infinite ease-in-out;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 10px rgba(99,102,241,0.5); }
    50% { box-shadow: 0 0 22px rgba(14,165,233,0.65); }
    100% { box-shadow: 0 0 10px rgba(99,102,241,0.5); }
}
/* Dashed split indicator for midnight wrap */
.timeline-pill.midnight-wrap {
    border-right: 2px dashed rgba(255,255,255,0.75);
}

/* Fade-blend the first and second half */
.timeline-pill.midnight-wrap {
    background: linear-gradient(
        90deg,
        rgba(14,165,233,0.8),
        rgba(99,102,241,0.8)
    ) !important;
}
@media (max-width: 480px) {
    #sol-timeline .timeline-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin: 16px 0;
    }

    #sol-timeline .timeline-track {
        height: 16px;
    }

    #sol-timeline .timeline-pill-label {
        font-size: 0.65rem;
    }
}
/* === FIX PILL MISALIGNMENT === */
.timeline-track {
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.timeline-pill {
    transform: translateX(0) !important;
}
/* ============================================================
   SOLUNAR TIMELINE — FIXED GRID + PERFECT ALIGNMENT
   ============================================================ */

/* Ensure the timeline component acts as the clipping container */
.sol-timeline {
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 2.2rem; /* space for hour labels */
}

/* Elegant 24-hour faint grid — properly clipped */
.sol-timeline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        transparent 1px,
        transparent calc(100% / 24)
    );
    pointer-events: none;
    opacity: .25;
    z-index: 0;
}

/* TIMELINE ROWS */
#sol-timeline .timeline-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 20px 0;
    position: relative;
    z-index: 2;
}

/* Labels */
#sol-timeline .timeline-label {
    width: 110px;
    font-size: 0.95rem;
    opacity: 0.9;
    text-align: left;
}

/* Track */
#sol-timeline .timeline-track {
    position: relative;
    flex: 1;
    height: 24px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.45),
        inset 0 0 4px rgba(255,255,255,0.15);
    z-index: 1;
}

/* Pill container */
#sol-timeline .timeline-pill {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;

    /* Glow */
    box-shadow:
        0 0 12px rgba(99,102,241,0.55),
        0 0 20px rgba(14,165,233,0.35),
        inset 0 0 10px rgba(255,255,255,0.25);

    /* Animation */
    opacity: 0;
    transform: translateX(-18px);
    animation: pillSlideIn 0.9s ease forwards;
}

/* Pill label text */
#sol-timeline .timeline-pill-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-shadow:
        0 1px 4px rgba(0,0,0,0.8),
        0 0 6px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Midnight wrap indicator */
#sol-timeline .timeline-pill.midnight-wrap {
    border-right: 2px dashed rgba(255,255,255,0.7);
}

/* Tooltip on hover (duration) */
.timeline-pill:hover::after {
    content: attr(data-duration);
    position: absolute;
    top: -30px;
    background: rgba(0,0,0,0.80);
    padding: 4px 8px;
    color: #fff;
    border-radius: 6px;
    font-size: 0.7rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
}

.timeline-pill::after {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

/* Pulse animation for currently active period */
.timeline-pill.active-period {
    animation: pulseGlow 1.8s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%   { box-shadow: 0 0 10px rgba(99,102,241,0.4); }
    50%  { box-shadow: 0 0 22px rgba(14,165,233,0.7); }
    100% { box-shadow: 0 0 10px rgba(99,102,241,0.4); }
}

/* Slide-in animation */
@keyframes pillSlideIn {
    0%   { opacity: 0; transform: translateX(-22px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* 0–24 hour markers */
#timeline-hours {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
    margin-top: -1rem;
    font-size: 0.7rem;
    opacity: 0.45;
    letter-spacing: 0.5px;
    z-index: 3;
    position: relative;
}

/* Mobile compact mode */
@media (max-width: 480px) {
    #sol-timeline .timeline-row {
        flex-direction: column;
        align-items: flex-start;
        margin: 16px 0;
    }

    #sol-timeline .timeline-track {
        height: 18px;
    }

    #sol-timeline .timeline-pill-label {
        font-size: 0.68rem;
    }
}


/* Steelhead Sam — Tooltip Bubble */
#sam-bubble {
    position: fixed;
    bottom: 128px;      /* sits above Sam */
    right: 18px;

    background: #ffffff;
    color: #000000;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 2px solid #00ff66;

    box-shadow: 0 0 12px rgba(0,255,102,0.35),
                0 2px 8px rgba(0,0,0,0.25);

    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;

    pointer-events: none;   /* Prevent click blocking */
    white-space: nowrap;
    z-index: 99996;         /* Below chat, above background */
}

/* Bubble arrow */
#sam-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 20px;
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Visible bubble */
#sam-bubble.show {
    opacity: 1;
    transform: translateY(0);
}

/* Hide bubble on tiny screens (prevents crowding) */
@media (max-width: 450px) {
    #sam-bubble {
        display: none;
    }
}
/* Sam Avatar Glow Pulse */
#sam-avatar {
    animation: samGlow 3s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(10,143,85,0.8));
    transition: transform 0.2s ease;
}

@keyframes samGlow {
    0% {
        filter: drop-shadow(0 0 4px rgba(10,143,85,0.5))
                drop-shadow(0 0 10px rgba(10,200,120,0.3));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(10,143,85,1))
                drop-shadow(0 0 18px rgba(10,200,120,0.6));
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(10,143,85,0.5))
                drop-shadow(0 0 10px rgba(10,200,120,0.3));
    }
}
/* ===============================
   ARTICLES PAGE
================================ */

.articles-hero {
    padding: 3rem 1.5rem 2rem;
    text-align: center;
}

.articles-hero h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.articles-tag {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    max-width: 700px;
    margin: 0 auto;
}

/* ===============================
   ARTICLES GRID
================================ */

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.75rem;
    margin-top: 2.5rem;
}

/* ===============================
   ARTICLE CARD
================================ */

.article-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 40px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ===============================
   ARTICLE IMAGE
================================ */

.article-img {
    width: 100%;
    max-height: 180px;        /* controls card height */
    object-fit: contain;     /* SHOW ENTIRE IMAGE */
    object-position: center;
    background: #0b1a2b;     /* fills empty space */
    border-radius: 12px 12px 0 0;
}


/* ===============================
   ARTICLE CONTENT
================================ */

.article-card h2 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 1rem 1.1rem 0.4rem;
}

.article-excerpt {
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
    margin: 0 1.1rem 0.8rem;
}

.article-date {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    margin: 0 1.1rem 1rem;
}

/* ===============================
   READ BUTTON
================================ */

.article-btn {
    margin: auto 1.1rem 1.2rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    color: #041019;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.article-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(56,189,248,0.45);
}
/* ===============================
   ARTICLE PAGE LAYOUT
================================ */

.article-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.article-hero h1 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.25;
    max-width: 800px;
    margin: 0 auto 0.75rem;
}

.article-meta {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
}

/* ===============================
   HERO IMAGE
================================ */

.article-cover {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    margin: 2rem 0 2.5rem;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ===============================
   ARTICLE BODY (READABILITY)
================================ */

.article-body {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.9);
}

/* Paragraphs */
.article-body p {
    margin: 1.25rem 0;
}

/* Headings from TinyMCE */
.article-body h2 {
    font-size: 1.45rem;
    font-weight: 600;
    margin: 3rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.article-body h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
}

/* Lists */
.article-body ul,
.article-body ol {
    margin: 1.25rem 0 1.25rem 1.5rem;
}

.article-body li {
    margin-bottom: 0.5rem;
}

/* Links */
.article-body a {
    color: #38bdf8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.article-body a:hover {
    color: #7dd3fc;
}

/* Blockquotes (nice for guides) */
.article-body blockquote {
    margin: 2rem 0;
    padding: 1rem 1.25rem;
    background: rgba(255,255,255,0.05);
    border-left: 4px solid #38bdf8;
    border-radius: 8px;
    font-style: italic;
    color: rgba(255,255,255,0.85);
}

/* ===============================
   BACK LINK
================================ */

.article-back {
    display: inline-block;
    margin-top: 3rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #38bdf8;
    text-decoration: none;
}

.article-back:hover {
    text-decoration: underline;
}

/* ===============================
   RESPONSIVE TWEAKS
================================ */

@media (max-width: 768px) {
    .article-hero h1 {
        font-size: 1.75rem;
    }

    .article-body {
        font-size: 1rem;
    }

    .article-cover {
        max-height: 300px;
    }
}

/* 🔥 GLOBAL SAFETY: REMOVE ANY DEBUG OVERLAYS */
body::before {
    content: none !important;
    display: none !important;
}

/* Prevent animation transforms from causing scrollbars */
html, body {
    overflow-x: hidden;
}

/* ============================================================
   RFF — Our Approach / Mission (Seed Styling)
   ============================================================ */

.rff-mission {
    max-width: 760px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    line-height: 1.75;
}

/* Headline */
.rff-mission h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}

/* Body text */
.rff-mission p {
    margin-bottom: 1.6rem;
    max-width: 42em;
}

/* Line breaks used intentionally */
.rff-mission p br {
    line-height: 2.2;
}

/* Closing line */
.rff-mission p:last-of-type {
    margin-top: 3rem;
    font-style: italic;
    opacity: 0.8;
}

/* Mobile restraint */
@media (max-width: 600px) {
    .rff-mission {
        padding: 3rem 1.25rem;
    }

    .rff-mission h1 {
        font-size: 1.9rem;
    }
}
/* ============================================================
   RFF Solunar — Intro Framing (Quiet)
   ============================================================ */

.solunar-intro {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    padding: 3rem 1.5rem 1.5rem;
    text-align: center;
}

.solunar-intro h1 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.solunar-intro .about-tag {
    font-size: 1.05rem;
    opacity: 0.8;
    margin-bottom: 1.25rem;
}

.solunar-context {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.7;
    max-width: 42em;
    margin: 0 auto;
}
/* ============================================================
   Immersive Page Lock (Sam Full View)
   ============================================================ */

body.immersive-chat {
    height: 100vh;
    overflow: hidden;
}

body.immersive-chat #page,
body.immersive-chat main {
    height: 100vh;
    overflow: hidden;
}