@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap');

:root {
    --primary: #c2410f;
    --primary-dark: #9f2f0a;
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;

    /* ── Beach palette (added 2026) ──────────────────────────────
       Primary stays OB Sunset Orange. Secondaries are beach tones used
       sparingly as accents; the *-tint values are near-white section
       backgrounds for color "zoning" so the page isn't all-white. */
    --ocean-teal:   #0e7490;   /* deep ocean accent (AA on white) */
    --sky-blue:     #2563eb;   /* sky / water accent */
    --sea-glass:    #0f766e;   /* sea-glass green text-safe */
    --sea-glass-fill:#10b981;  /* green for dots/fills only (not text) */
    --sunset-coral: #be123c;   /* coral garnish (text-safe) */
    --featured-gold:#d97706;   /* paid/featured accent */

    /* Direction "Tide" — cool-led: deepen sky/seafoam as the anchor tints,
       keep sand/shell as muted warm garnish so the page reads ocean-led. */
    --tint-sand:     #f7eedf;  /* warm garnish (muted) */
    --tint-sky:      #d8e9f5;  /* cool anchor (deepened) */
    --tint-seafoam:  #d6f0e6;  /* fresh anchor (deepened) */
    --tint-shell:    #f5e8e2;  /* soft sunset garnish (muted) */
}

html.dark {
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;

    /* Beach tints → dark surfaces so zoned sections stay readable in dark mode */
    --tint-sand:    #241708;
    --tint-sky:     #0f2236;
    --tint-seafoam: #0a2b23;
    --tint-shell:   #2c141b;
}

/* ── Section color "zones" — float white cards on a soft beach tint ──
   Apply one of these classes to a section wrapper instead of bg-slate-*. */
.zone-sand    { background: var(--tint-sand); }
.zone-sky     { background: var(--tint-sky); }
.zone-seafoam { background: var(--tint-seafoam); }
.zone-shell   { background: var(--tint-shell); }

html.dark body { background: var(--bg) !important; color: var(--text); }
html.dark .bg-white { background: var(--surface) !important; color: var(--text); }
html.dark .bg-slate-50 { background: var(--bg) !important; }
html.dark .bg-slate-100 { background: #1e293b !important; }
html.dark .bg-slate-900 { background: #020617 !important; }
html.dark .border { border-color: var(--border) !important; }
html.dark .text-slate-500,
html.dark .text-slate-600,
html.dark .text-slate-700,
html.dark .text-slate-800 { color: var(--text-muted) !important; }
html.dark .text-slate-400 { color: #64748b !important; }
html.dark .bg-orange-50 { background: #422006 !important; color: #fdba74 !important; }

/* Surf tab photo background — light wash in light mode, dark wash in dark mode
   so headings/text stay readable over it either way. */
.surf-bg {
    background: linear-gradient(rgba(248,250,252,.84), rgba(248,250,252,.93)),
                url('../photos/Surf/surf-tab-bg.jpg') center / cover fixed;
}
html.dark .surf-bg {
    background: linear-gradient(rgba(2,6,23,.80), rgba(2,6,23,.88)),
                url('../photos/Surf/surf-tab-bg.jpg') center / cover fixed;
}
/* The surf intro callout uses bg-sky-50, which dark mode doesn't recolor —
   give it a readable dark surface so its (now light) text shows. */
html.dark .surf-intro { background: #0c2a3f !important; border-color: #155e75 !important; }

/* Food & Drink dropdown items: Tailwind's hover:bg-orange-50 paints a light
   background in dark mode (it isn't dark-aware), hiding the light text.
   Give the hover a readable dark surface in dark mode. */
html.dark .nav-dd-link:hover { background: #422006 !important; color: #fdba74 !important; }

html, body {
    overflow-x: hidden;
    width: 100%;
}
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1, h2, h3, .heading {
    font-family: 'Playfair Display', Georgia, serif;
}

/* === STRICT TAB SYSTEM === */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Navbar */
.nav-link {
    position: relative;
    padding-bottom: 4px;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.nav-link.active {
    color: var(--primary);
    font-weight: 600;
}
.nav-link.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary);
    border-radius: 2px;
}

/* Cards */
.business-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.business-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Open-now status pill */
.open-now { color: #16a34a; font-weight: 600; }
.closed-now { color: #dc2626; font-weight: 600; }
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* Featured / Sponsored */
.featured-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 10px;
    padding: 1px 9px;
    border-radius: 9999px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.sponsored {
    border: 2px solid #f59e0b !important;
}

/* Map */
.leaflet-container {
    /* responsive: never taller than 70% of the viewport on small screens */
    height: min(560px, 70vh);
    border-radius: 20px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    /* Contain Leaflet's internal stacking (tiles/markers/controls go up to
       z-index 1000) inside the map box, so the map can never paint OVER the
       site modals (Advertise, Search, etc.), which open at z-index 100+.
       Fixes the map "punching through" an open modal on every map tab. */
    position: relative;
    z-index: 0;
}

/* Marker cluster icon (Leaflet plugin) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(194, 65, 15, 0.4);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: rgba(194, 65, 15, 0.8);
    color: white;
    font-weight: 700;
}

/* Filter buttons */
.subtab {
    transition: all 0.2s ease;
    color: #374151;
    background: white;
    border: 1px solid #d1d5db;
}
.subtab:hover {
    background: #fff7ed;
    border-color: var(--primary);
    color: var(--primary);
}
.subtab.active {
    background-color: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}
html.dark .subtab { background: var(--surface); color: var(--text); border-color: var(--border); }

/* Hero — local pier sunset photo.
   "Tide" overlay: a deep ocean-teal → navy wash (instead of flat slate-black)
   so the sunset photo keeps its color while the page reads ocean-led. Kept dark
   enough that white headline text stays ≥4.5:1. */
.hero-bg {
    background: linear-gradient(135deg, rgba(7, 51, 64, 0.62), rgba(10, 26, 43, 0.45)),
                url('../photos/gallery/hero-pier-sunset.jpg') center/cover no-repeat;
    background-position: center 40%;
}

/* Gallery mode toggle */
.gallery-mode-btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.gallery-mode-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.gallery-mode-btn:hover:not(.active) { background: #f8fafc; }

/* Tab home button */
.tab-home-btn {
    position: fixed;
    top: 62px;
    right: 12px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: background .15s;
}
.tab-home-btn:hover { background: #fff7ed; }

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    transform: translateY(12px);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--primary-dark); }

/* Modal */
.modal {
    animation: fadeInScale 0.2s ease forwards;
    /* Safety net: any modal taller than the viewport scrolls instead of
       clipping its buttons off-screen (matters on short/landscape phones).
       Modals that set their own Tailwind max-h still scroll via this overflow. */
    max-height: 90vh;
    overflow-y: auto;
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mobile nav */
.mobile-nav-link {
    display: block;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s ease;
}

/* Gallery */
.gallery-img {
    transition: transform 0.35s ease;
    cursor: pointer;
}
.gallery-img:hover {
    transform: scale(1.06);
}

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.95);
    display: flex; align-items: center; justify-content: center;
    z-index: 200; padding: 24px;
}
.lightbox-img {
    max-width: 90vw; max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-caption {
    position: absolute;
    bottom: 24px; left: 0; right: 0;
    text-align: center;
    color: white;
    font-size: 14px;
    padding: 8px;
}
.lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    color: white;
    border: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    transition: background 0.2s;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close {
    position: absolute; top: 20px; right: 24px;
    background: rgba(255,255,255,0.15);
    border: none; color: white;
    width: 40px; height: 40px;
    border-radius: 50%; font-size: 20px;
    cursor: pointer;
}
.lightbox-counter {
    position: absolute; top: 20px; left: 24px;
    color: white; font-size: 14px;
    background: rgba(0,0,0,0.4);
    padding: 4px 12px; border-radius: 20px;
}

/* Calendar */
.cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 4px 4px;
    border-radius: 10px;
    border: 1px solid #e8eaee;          /* subtle grid lines so days read as cells */
    font-size: 13px;
    cursor: default;
    position: relative;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
html.dark .cal-day { border-color: #1e293b; }
.cal-day.has-event {
    background: #fff7ed;
    border-color: #fed7aa;              /* warm border highlights event days */
    cursor: pointer;
}
.cal-day.has-event:hover {
    background: #ffedd5;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(194,65,15,.12);
}
.cal-day.today {
    background: var(--primary);
    color: white;
    font-weight: 700;
    border-color: var(--primary);
}
html.dark .cal-day.has-event { background: #422006; border-color: #7c2d12; }
html.dark .cal-day.has-event:hover { background: #5a2d10; }
.cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 3px;
}
.cal-day.today .cal-dot { background: white; }


/* Listing card photo (advertiser perk) */
.card-photo {
    width: 100%;
    height: 160px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #f1f5f9;
}
.card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-photo-lg {
    height: 230px;
    border-radius: 0;          /* hero in the profile modal — square top corners handled by parent */
    margin-bottom: 0;
}
/* Featured ad photo on the RIGHT side of a listing card (Tier 1 perk).
   Sits above the Map + favorite controls in the card's right column. */
.card-photo-side {
    width: 120px;
    height: 90px;
    border-radius: 14px;
    margin-bottom: 4px;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .card-photo-side { width: 92px; height: 70px; }
}

/* ── TIER 2: Spotlight strip (sponsored, top of tab) ───────── */
.ad-spotlight-strip { margin: 0 0 22px; }
.ad-spotlight-header {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px;
}
.ad-spotlight-title {
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b45309;
}
.ad-spotlight-disclosure { font-size: 11px; color: #94a3b8; }
.ad-spotlight-rail {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 640px) {
    /* Collapse to a single swipeable row on mobile */
    .ad-spotlight-rail {
        grid-template-columns: none; grid-auto-flow: column;
        grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; padding-bottom: 4px;
    }
    .ad-spotlight-unit { scroll-snap-align: start; }
}
.ad-spotlight-unit {
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    background: linear-gradient(135deg, #fffaf2, #fff); color: inherit;
    border: 1.5px solid #f5d9b0; border-radius: 18px; padding: 14px;
    transition: box-shadow .18s, transform .18s;
}
a.ad-spotlight-unit:hover { box-shadow: 0 10px 24px -12px rgba(180, 83, 9, .45); transform: translateY(-1px); }
a.ad-spotlight-unit:focus-visible { outline: 3px solid #d97706; outline-offset: 2px; }
.ad-spotlight-photo {
    width: 84px; height: 84px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: #f1f5f9;
}
.ad-spotlight-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-spotlight-body { min-width: 0; flex: 1; }
.ad-label {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #92400e; background: #fde68a; border-radius: 6px; padding: 1px 6px; margin-bottom: 4px;
}
.ad-spotlight-name { font-weight: 700; font-size: 16px; line-height: 1.2; }
.ad-spotlight-tagline { font-size: 13px; color: #64748b; margin-top: 2px; }

/* ── TIER 3: Home spotlight card (Discover tab) ────────────── */
.home-spotlight-photo {
    width: 100%; max-width: 220px; height: 160px; border-radius: 18px;
    overflow: hidden; background: #f1f5f9; flex-shrink: 0;
}
.home-spotlight-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cursor — every interactive element shows a pointer */
button, [onclick], .nav-link, .mobile-nav-link,
.subtab, .cal-day.has-event, .business-card { cursor: pointer; }

/* Accessibility — visible keyboard focus ring (shows for keyboard users
   via :focus-visible, not on mouse click). */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible, [onclick]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Surf forecast grid — class-based (replaces a fragile inline-style
   attribute selector). 5 columns on desktop; horizontal scroll on phones. */
.surf-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    max-width: 700px;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .surf-grid { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
    .surf-grid > div { flex: 0 0 120px; }
}

/* Gallery category filter chips */
.gallery-chip {
    background: #fff; border: 1px solid var(--border); color: var(--text);
    padding: 6px 16px; border-radius: 9999px; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.gallery-chip:hover { border-color: var(--primary); color: var(--primary); }
.gallery-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
html.dark .gallery-chip { background: var(--surface); }

/* Lists scrollable */
#restaurant-results, #business-results {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
#restaurant-results::-webkit-scrollbar,
#business-results::-webkit-scrollbar { width: 4px; }
#restaurant-results::-webkit-scrollbar-thumb,
#business-results::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Forecast cards */
#forecast-container .ring-2 { box-shadow: 0 0 0 2px #fb923c; }

/* Search */
.search-result {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.search-result:hover { background: #f1f5f9; }
html.dark .search-result:hover { background: #334155; }
.search-result .res-cat {
    font-size: 10px;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px; left: 0;
    background: var(--primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    border-radius: 0 0 8px 0;
    transition: top .2s;
}
.skip-link:focus { top: 0; }

/* Tide chart */
.tide-svg {
    width: 100%;
    height: 160px;
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
    border-radius: 16px;
}
html.dark .tide-svg { background: linear-gradient(180deg, #0c4a6e 0%, #075985 100%); }

/* Toast */
.toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: white;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    animation: toastIn 0.3s ease;
}
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Favorite (heart) button on cards */
.fav-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    color: #94a3b8;
    transition: transform 0.15s, color 0.15s;
}
.fav-btn:hover { transform: scale(1.15); color: #f43f5e; }
.fav-btn.is-fav { color: #e11d48; }

/* Share button */
.share-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.share-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

/* Calendar event popover (replaces the title="" tooltip) */
/* (.cal-day already sets position:relative in the Calendar block above) */
.cal-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 260px;
    z-index: 60;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}
.cal-day.has-event:hover .cal-popover,
.cal-day.has-event:focus-within .cal-popover { opacity: 1; }
.cal-popover:after {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
}
.cal-event-label {
    font-size: 9px;
    text-align: center;
    color: var(--primary);
    line-height: 1.1;
    margin-top: 3px;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 2px;
    word-break: break-word;
}
.cal-day.today .cal-event-label { color: white; }
/* When a day has multiple events, clamp each label to one line + tighten
   spacing so both fit inside the square cell without overflowing. */
.cal-event-label.multi {
    -webkit-line-clamp: 1;
    margin-top: 2px;
}
.cal-event-label.multi + .cal-event-label.multi { margin-top: 1px; }

/* Webcam card */
.webcam-thumb {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
}
.webcam-thumb img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.webcam-thumb:hover img { transform: scale(1.04); }
.webcam-thumb .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px;
    color: white;
}
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(220, 38, 38, 0.95);
    color: white;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: absolute;
    top: 16px; left: 16px;
}
.live-pill:before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: white;
    animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Blog/article card */
.article-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: left;
    width: 100%;
}
.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -10px rgba(0,0,0,0.18);
}
.article-card .article-tag {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--primary);
}
.article-modal-content p {
    margin-bottom: 1em;
    line-height: 1.65;
}

/* You-are-here map pulse */
.you-are-here {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #2563eb;
    border: 3px solid white;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
    animation: youPulse 1.6s infinite;
}
@keyframes youPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Map pins (maps.js / directory.js). Colour + size come in as CSS
   variables so the markup stays themeable. */
.ob-pin {
    position: relative;
    width: var(--pin-size, 28px);
    height: var(--pin-size, 28px);
    border-radius: 50% 50% 50% 0;
    background: var(--pin-color, #2563eb);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    transform: rotate(-45deg);
}
/* Invisible larger hit area so pins are easy to tap on touch
   screens without changing the visible pin or its anchor. */
.ob-pin::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}
/* Featured (paid) pins are gold (#d97706) AND get a white ring + glow so the
   distinction never relies on colour alone (accessibility / colour-blind). */
.ob-pin[style*="--pin-color:#d97706"],
.ob-pin[style*="--pin-color: #d97706"] {
    border-width: 4px;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .35), 0 3px 10px rgba(0, 0, 0, .45);
}

/* Map legend — distinguishes standard pins from the gold "Sponsored" (paid
   placement) pins, so the gold/enlarged pins are clearly disclosed as ads. */
.ob-map-legend {
    background: rgba(255, 255, 255, .94);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 7px 10px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #475569;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.ob-map-legend-row { display: flex; align-items: center; gap: 7px; }
.ob-map-legend-dot {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ob-map-legend-dot-gold {
    width: 14px; height: 14px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, .4);
}

/* Map popups */
.ob-popup { font-family: Inter, sans-serif; min-width: 190px; line-height: 1.4; }
.ob-popup-name  { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.ob-popup-cat   { font-size: 11px; color: #6b7280; margin-bottom: 4px; }
.ob-popup-addr  { font-size: 12px; color: #374151; margin-bottom: 6px; }
.ob-popup-phone { font-size: 12px; font-weight: 600; display: block; color: var(--ob-accent, #2563eb); }
.ob-popup-price { font-size: 12px; font-weight: 600; display: block; color: #10b981; }
.ob-popup-dir   { font-size: 12px; font-weight: 600; display: block; margin-top: 4px; color: #2563eb; text-decoration: underline; }

/* Ad tier card */
.tier-card {
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    background: var(--surface);
    transition: transform 0.18s, box-shadow 0.18s;
}
.tier-card.recommended {
    border: 2px solid var(--primary);
    box-shadow: 0 16px 30px -12px rgba(194, 65, 15, 0.35);
    transform: translateY(-4px);
}

/* Dark-mode toggle icon */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: background 0.15s;
}
.theme-toggle:hover { background: #f1f5f9; }
html.dark .theme-toggle:hover { background: #334155; }


/* ──────────────────────────────────────────────────────────
   v4.0: Today panel, POTW, digest, tour, quiz, tag chips, CTAs
   ────────────────────────────────────────────────────────── */

/* Today panel (top of Discover) */
.today-panel {
    position: relative;
    z-index: 2;
    margin-top: -56px;
    padding: 0 24px;
}
.today-row {
    max-width: 1500px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,0.15);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1024px) { .today-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .today-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; } }
.today-card {
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bg);
}
html.dark .today-card { background: #0f172a; }
.today-card-highlight {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: var(--primary);
}
html.dark .today-card-highlight { background: linear-gradient(135deg, #5a2d10, #422006); color: #fdba74; }
.today-label  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-weight: 700; }
.today-value  { font-size: 18px; font-weight: 700; margin-top: 2px; color: var(--text); }
.today-sub    { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Photo of the week */
.potw-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
}
.potw-card img {
    width: 100%; height: 380px; object-fit: cover;
    transition: transform 0.4s ease;
}
.potw-card:hover img { transform: scale(1.03); }
.potw-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.78) 100%);
    color: white;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 24px;
}
.potw-caption { font-size: 18px; font-weight: 600; }
.potw-credit  { font-size: 12px; opacity: 0.85; margin-top: 4px; }

/* Weekly digest card */
.digest-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 16px 30px -16px rgba(0,0,0,0.08);
}
.digest-list { margin-top: 12px; }
.digest-list li {
    padding: 10px 0;
    border-top: 1px solid var(--border);
    display: flex; gap: 12px; align-items: flex-start;
    list-style: none;
}
.digest-list li:first-child { border-top: 0; }
.digest-kind {
    display: inline-block; min-width: 80px;
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.6px;
    background: var(--primary); color: white;
    padding: 4px 10px; border-radius: 999px; font-weight: 700;
    flex-shrink: 0;
}
.digest-footer { margin-top: 12px; }

/* Engagement CTA cards */
.cta-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
}
.cta-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 24px -10px rgba(0,0,0,0.18);
}

/* Walking tour stops */
.tour-stop {
    display: flex; gap: 12px;
    background: var(--bg);
    border-radius: 14px;
    padding: 12px;
    list-style: none;
}
.tour-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.tour-body { flex: 1; min-width: 0; }

/* Quiz */
.quiz-opt {
    display: block; width: 100%;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.quiz-opt:hover { background: #fff7ed; border-color: var(--primary); color: var(--primary); }
.quiz-correct { background: #dcfce7 !important; border-color: #16a34a !important; color: #166534 !important; }
.quiz-wrong   { background: #fee2e2 !important; border-color: #dc2626 !important; color: #991b1b !important; }
html.dark .quiz-opt:hover { background: #422006; }
html.dark .quiz-correct { background: #14532d !important; color: #bbf7d0 !important; }
html.dark .quiz-wrong   { background: #7f1d1d !important; color: #fecaca !important; }

/* Tag filter chips */
.tag-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tag-chip:hover { border-color: var(--primary); color: var(--primary); }
.tag-chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}


/* ── FIX: form inputs readable in dark mode ──────────────── */
html.dark input,
html.dark textarea,
html.dark select {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #94a3b8 !important; }
/* search inputs and the directory search specifically */
html.dark input[type="search"] { background: #1e293b !important; color: #f1f5f9 !important; }

/* ============================================================
   WCAG 2.1 AA contrast fixes (Lighthouse accessibility audit)
   ------------------------------------------------------------
   Two Tailwind utilities were used for small text below the
   4.5:1 contrast threshold:
     • text-orange-600 (#ea580c) → ~3.4:1 on white  (links/CTAs)
     • text-slate-400  (#94a3b8) → ~2.56:1 on white (captions)
   These overrides darken them to passing, on-brand values.
   Scoped to light mode only (html:not(.dark)) so dark mode —
   where light-gray muted text on dark backgrounds is already
   high-contrast — is left untouched. Specificity (0,2,1) beats
   Tailwind's utility (0,1,0), so no !important is needed.
   ============================================================ */
html:not(.dark) .text-orange-600 { color: #c2410f; } /* brand orange-700, ≈5.2:1 on white */
/* slate-400 captions on WHITE need darkening to pass. The dark footer
   (#site-footer, bg-slate-900) also uses text-slate-400, but there it already
   passes at ~7:1 — darkening it would REGRESS it to ~3.75:1. So exclude the
   footer from this override. (Specificity (1,2,1) still beats Tailwind.) */
html:not(.dark) .text-slate-400:not(#site-footer) { color: #64748b; } /* slate-500, ≈4.8:1 on white */

/* ── H7: contrast bump ───────────────────────────────────────
   text-slate-400 (#94a3b8 ≈ 2.8:1) and slate-500 (#64748b ≈ 4.0:1) on white
   fall short of WCAG AA for body text. Nudge them darker site-wide so small
   labels/captions pass ~4.5:1. The footer is dark (light text on dark bg), so
   it's explicitly excluded — its muted text is already high-contrast there. */
body:not(.footer) .text-slate-400,
main .text-slate-400,
nav .text-slate-400 { color: #5b6573 !important; }
main .text-slate-500,
nav .text-slate-500 { color: #56606e !important; }
/* Dark mode: keep these readable but don't over-darken (bg is dark). */
html.dark main .text-slate-400,
html.dark nav .text-slate-400 { color: #9aa6b6 !important; }
html.dark main .text-slate-500,
html.dark nav .text-slate-500 { color: #a3aebd !important; }

/* ════════════════════════════════════════════════════════════
   "Tide" direction — accents (2026-06-04)
   Cool-led palette touches that build on the deepened tint tokens.
   All low-risk: color-only, dark-mode aware, no layout changes.
   ════════════════════════════════════════════════════════════ */

/* Per-zone accent variable — each tab's tint gets a matching accent used for
   H2 underlines, active subtabs and chip hovers. Cool zones (sky/seafoam) lead;
   warm zones (sand/shell) keep the brand orange as their accent. */
.zone-sky     { --zone-accent: #2563eb; }
.zone-seafoam { --zone-accent: #0e7490; }
.zone-sand    { --zone-accent: #c2410f; }
.zone-shell   { --zone-accent: #be123c; }

/* H2 section headings inside a zone get a short accent underline. */
.zone-sky h2, .zone-seafoam h2, .zone-sand h2, .zone-shell h2 {
    border-bottom: 3px solid var(--zone-accent, var(--primary));
    padding-bottom: 6px;
    display: inline-block;
}
/* Active subtab + chip hover pick up the zone accent (falls back to brand). */
.zone-sky .subtab.active, .zone-seafoam .subtab.active,
.zone-sand .subtab.active, .zone-shell .subtab.active {
    background: var(--zone-accent, var(--primary));
    border-color: var(--zone-accent, var(--primary));
    color: #fff;
}
.zone-sky .tag-chip:hover, .zone-seafoam .tag-chip:hover,
.zone-sand .tag-chip:hover, .zone-shell .tag-chip:hover {
    border-color: var(--zone-accent, var(--primary));
    color: var(--zone-accent, var(--primary));
}

/* Category-tag deepening — bump the -700 text to -800 for stronger contrast
   on the pale tag fills (keeps WCAG AA comfortably). */
html:not(.dark) .text-orange-700  { color: #9a3412; }
html:not(.dark) .text-blue-700    { color: #1e40af; }
html:not(.dark) .text-emerald-700 { color: #065f46; }
html:not(.dark) .text-sky-700     { color: #075985; }

/* Discover feature cards — a thin colored top rule cycles through the ocean
   palette so the Discover grid reads colorful without heavy fills. */
#tab-0 .bg-white.border:nth-of-type(4n+1) { border-top: 3px solid #0e7490; }
#tab-0 .bg-white.border:nth-of-type(4n+2) { border-top: 3px solid #2563eb; }
#tab-0 .bg-white.border:nth-of-type(4n+3) { border-top: 3px solid #c2410f; }
#tab-0 .bg-white.border:nth-of-type(4n)   { border-top: 3px solid #be123c; }

/* Footer — a 3px ocean→sunset top border ties the palette together. */
#site-footer, footer.bg-slate-900, body > footer {
    border-top: 3px solid #0e7490;
}

/* ── Site alerts banner ──────────────────────────────────────
   Dismissible bars rendered from obData.alerts (see renderAlerts). */
.ob-alert {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; font-size: 14px; line-height: 1.4;
}
.ob-alert-text { flex: 1; }
.ob-alert-x {
    background: transparent; border: none; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px;
    color: inherit; opacity: .7;
}
.ob-alert-x:hover { opacity: 1; background: rgba(0,0,0,.08); }
.ob-alert-info   { background: #ecfeff; color: #0e5a6b; border-bottom: 1px solid #a5e8f2; }
.ob-alert-warn   { background: #fff7ed; color: #7c2d12; border-bottom: 1px solid #fed7aa; }
.ob-alert-urgent { background: #fef2f2; color: #991b1b; border-bottom: 1px solid #fecaca; }
html.dark .ob-alert-info   { background: #083344; color: #cffafe; border-bottom-color: #155e75; }
html.dark .ob-alert-warn   { background: #422006; color: #fed7aa; border-bottom-color: #7c2d12; }
html.dark .ob-alert-urgent { background: #450a0a; color: #fecaca; border-bottom-color: #7f1d1d; }

/* Happy-hour pill on listing cards */
.hh-on  { color: #b45309; font-weight: 600; }
.hh-off { color: #92400e; }
html.dark .hh-on  { color: #fbbf24; }
html.dark .hh-off { color: #d97706; }

/* Tide-pool callout (Weather tab, from NOAA hi/lo predictions) */
.tidepool-card {
    background: #ecfeff; border: 1px solid #a5e8f2; border-radius: 14px;
    padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #0e5a6b;
}
.tidepool-card.tidepool-muted { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
.tidepool-warn { color: #9a3412; font-weight: 600; }
html.dark .tidepool-card { background: #083344; border-color: #155e75; color: #cffafe; }
html.dark .tidepool-card.tidepool-muted { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html.dark .tidepool-warn { color: #fdba74; }