/* ==========================================
   DESIGN TOKENS (CSS VARIABLES)
   ==========================================
   These variables define colors, spacing, fonts, and effects
   used throughout the site. Change them here to update the 
   entire design instantly!
   ========================================== */

:root {
    /* Colors for backgrounds */
    --bg: #f6f4ef;           /* Page background (light beige) */
    --surface: #ffffff;      /* Card/component background (white) */
    --surface-muted: #f8faf9; /* Lighter card backgrounds */

    /* Text colors */
    --text: #111827;         /* Main text (dark gray/black) */
    --text-muted: #6b7280;   /* Secondary text (medium gray) */

    /* Borders and dividers */
    --border: #e5e7eb;       /* Light border color */
    --border-strong: #d1d5db; /* Darker border color for contrast */

    /* Brand colors */
    --primary: #2563eb;      /* Blue - buttons, links, active states */
    --primary-soft: #eff6ff; /* Light blue background for highlights */

    /* Spacing and styling */
    --radius: 24px;          /* Standard border radius */
    --shadow: 0 20px 40px rgba(15, 23, 42, 0.05); /* Subtle shadow */

    /* Font families */
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Body text */
    --font-serif: Georgia, "Times New Roman", serif; /* Headings */
}

/* ==========================================
   RESET & GLOBAL STYLES
   ==========================================
   These styles remove browser defaults and 
   establish baseline consistency.
   ========================================== */

/* Make box-sizing consistent (includes padding/border in width/height) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Enable smooth scrolling when clicking anchor links */
html {
    scroll-behavior: smooth;
}

/* Body baseline: font, spacing, color consistency */
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans); /* Use the sans-serif font defined above */
    line-height: 1.6;              /* Space between lines (1.6x font size) */
    color: var(--text);            /* Dark text color */
    background-color: var(--bg);   /* Light beige background */
    font-size: 15px;               /* Base font size for all text */
}

/*
    Sticky header:
    position: sticky keeps the navbar attached to the top of the screen
    while the visitor scrolls down long pages.
*/
header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Make images responsive (don't overflow container) */
img,
video {
    max-width: 100%;
    display: block;
}

/* Remove underlines from links by default */
a {
    color: inherit;           /* Use parent text color */
    text-decoration: none;    /* No underline */
}

/* Form elements: inherit the body font */
button,
input,
select,
textarea {
    font: inherit;
}

/* Button styling: remove defaults for clean customization */
button {
    border: none;
    background: transparent;
    cursor: pointer;
}

/* ==========================================
   NAVBAR (Header Navigation)
   ==========================================
   The navbar appears at the top of every page.
   It has the site logo, navigation links, and search button.
   The "active" page is highlighted with a light blue pill shape.
   ========================================== */

.navbar {
    height: 66px;                                    /* Fixed height for consistent spacing */
    display: grid;
    grid-template-columns: 220px 1fr 44px;           /* Logo | Links | Search */
    align-items: center;                             /* Vertically center items */
    gap: 24px;
    padding: 0 56px;                                 /* Side padding */
    background-color: rgba(255, 255, 255, 0.96);   /* Semi-transparent white */
    border-top: 1px solid #e7eef3;
    border-bottom: 1px solid #e8e1d7;              /* Subtle line below navbar */
    box-shadow: 0 8px 24px rgba(20, 32, 51, 0.025); /* Soft shadow */
    color: var(--text);
}

/*
    GLOBAL NAV SEARCH
    -----------------
    JavaScript creates this panel when someone clicks the search icon.
    Keeping the styling here means the panel looks the same on every page.
*/
.site-search-panel {
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    z-index: 999;
    display: none;
    padding: 14px 20px;
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #e8e1d7;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.site-search-panel.is-open {
    display: block;
}

.site-search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    width: min(100%, 760px);
    margin: 0 auto;
}

.site-search-form input {
    min-height: 40px;
    border: 1px solid #d8ddd8;
    border-radius: 10px;
    padding: 0 14px;
    color: #334155;
}

.site-search-form button {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background-color: #277da8;
    color: #ffffff;
    font-weight: 800;
}

.site-search-message {
    width: min(100%, 760px);
    margin: 8px auto 0;
    color: #b91c1c;
    font-size: 0.88rem;
}

/* Brand area */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: var(--text);
    text-decoration: none;
}

.brand-text {
    display: grid;
    gap: 1px;
    line-height: 1;
}

.brand-text strong {
    font-family: var(--font-serif); /* Serif font for elegance */
    font-size: 1.05rem;
    line-height: 1;
}

.brand-text small {
    color: #7d8a99;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;    /* Wide letter spacing */
    text-transform: uppercase;  /* All caps subtitle */
}

/* Navigation links: Home, What's Happening, Directory */
.nav-links {
    display: flex;
    justify-content: center;    /* Center the links */
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 11px;        /* Slightly rounded pill shape */
    color: #5a6878;             /* Medium gray text */
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth animation */
}

/* Hover and active states: light blue background with darker blue text */
.nav-links a:hover,
.nav-links a.active {
    background-color: #e8f3f8; /* Light blue background */
    color: #1f6f97;             /* Darker blue text */
}

/* Search button (magnifying glass icon) */
#search-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 999px;       /* Perfect circle */
}

#search-btn:hover {
    background-color: #f1f5f9;  /* Light gray on hover */
}

/* Search icon drawn with CSS (circle) */
#search-btn::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 12px;
    height: 12px;
    border: 1.8px solid #111827; /* Dark circle */
    border-radius: 50%;
}

/* Search icon drawn with CSS (diagonal line) */
#search-btn::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    width: 8px;
    height: 1.8px;
    background-color: #111827;
    border-radius: 999px;
    transform: rotate(45deg);     /* Diagonal line */
    transform-origin: left center;
}

/* Hide search text for screen readers only (accessibility) */
.search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* ==========================================
   HERO SECTION (Homepage Banner)
   ==========================================
   Large banner at the top of the home page with
   background image, heading, description, and buttons.
   ========================================== */

.hero {
    min-height: calc(100vh - 66px);  /* Full screen minus navbar height */
    background-image: linear-gradient(180deg, rgba(10, 25, 47, 0.24), rgba(10, 25, 47, 0.60)), url("../images/hero.jpg");
    background-size: cover;         /* Image fills entire space */
    background-position: 40% center; /* Position image nicely */
    display: flex;
    align-items: center;            /* Center content vertically */
    color: white;
}

.hero-inner {
    width: min(100% - 48px, 1160px);  /* Responsive width with max constraint */
    margin: 0 auto;
    padding-left: 0;
}

.hero h1 {
    font-family: var(--font-serif);   /* Serif font for elegance */
    font-size: clamp(3.2rem, 7vw, 6rem); /* Scales based on viewport */
    line-height: 1.02;                /* Tight line spacing */
    margin: 0 0 10px;
    letter-spacing: -0.035em;         /* Tighten spacing for impact */
    text-shadow: 0 2px 0 rgba(0,0,0,0.12); /* Subtle shadow for readability */
}

/* Blue accent color in heading */
.hero h1 .hero-accent {
    color: var(--primary);  /* Blue color */
}

.hero p {
    font-size: 1.08rem;
    max-width: 650px;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.92); /* Slightly transparent white */
    line-height: 1.75;
}

/* Container for buttons */
.hero-buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

/* Button styling */
.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 999px;       /* Pill shape */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero-btn:hover {
    transform: translateY(-1px);  /* Move up slightly on hover */
}

/* Primary button (blue background) */
.hero-btn-primary {
    background-color: var(--primary); /* Blue */
    color: white;
}

.hero-btn-primary::before {
    content: "🔍";  /* Magnifying glass emoji */
    font-size: 1rem;
}

/* Secondary button (transparent with border) */
.hero-btn-secondary {
    background-color: rgba(255, 255, 255, 0.18); /* Transparent white */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4); /* White border */
}

.hero-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.28); /* More visible on hover */
}


/* ==========================================
   QUICK ACCESS SECTION
   ==========================================
   Grid of colorful cards linking to main areas:
   Restaurants, Shops, Accommodation, etc.
   ========================================== */

.quick-access {
    max-width: 1200px;
    margin: 0 auto 84px;
    padding: 0 20px;
    
}

/* Section header (title + description) */
.section-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    padding-top: 52px;
    text-align: center;
}

.section-header h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.25rem); /* Responsive heading size */
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0;
    color: #101827;
}

.section-header p {
    margin: 6px 0 0;
    color: #52667a;
    font-size: 1rem;
    line-height: 1.6;
    
}

/* Grid of quick access cards */
.quick-access-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 cards per row */
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Individual card styling */
.card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease; /* Smooth animation */
}

/* Card hover effect: move up slightly */
.card:hover {
    transform: translateY(-3px);
}

/* Color variants for different category cards */
.restaurants { background: #fff7ed; color: #f97316; }  /* Orange */
.shops { background: #eff6ff; color: #3b82f6; }        /* Blue */
.accommodation { background: #f0fdf4; color: #16a34a; } /* Green */
.surf-schools { background: #eff6ff; color: #0284c7; }  /* Cyan blue */
.wellness { background: #ecfeff; color: #0f766e; }      /* Teal */
.whats-happening { background: #fdf2f8; color: #db2777; } /* Pink */
.town-news { background: #fffbeb; color: #d97706; }    /* Yellow */
.explore { background: #f5f3ff; color: #7c3aed; }       /* Purple */




/* ==========================================
   EVENTS PREVIEW & FEATURED BUSINESSES SECTIONS
   ==========================================
   Grid layouts showing upcoming events and
   featured business cards with images.
   ========================================== */

.events-preview,
.featured-businesses {
    max-width: 1200px;
    margin: 0 auto 84px;
    padding: 0 20px;
}

.events-link,
.section-link {
    color: #1d4ed8;           /* Blue link text */
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;      /* Keep link on one line */
}

/* Event and business grid: 3 columns on desktop */
.event-grid,
.business-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* 2 columns on medium screens */
@media (max-width: 980px) {
    .event-grid,
    .business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1 column on small screens */
@media (max-width: 640px) {
    .event-grid,
    .business-grid {
        grid-template-columns: 1fr;
    }
}

/* Card styling: used for both events and businesses */
.event-card,
.business-card,
.weekly-event-card,
.directory-card,
.news-card,
.directory-info-card {
    border-radius: 14px;
    border: 1px solid #e6e2d9;
    background-color: #ffffff;
    box-shadow: 0 16px 36px rgba(20, 32, 51, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Lift card slightly on hover */
.event-card:hover,
.business-card:hover,
.weekly-event-card:hover,
.directory-card:hover,
.news-card:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
}

/* Card content padding */
.event-card,
.business-card-content,
.weekly-event-card,
.news-card,
.directory-card-content {
    padding: 22px;
}

/* Event card layout */
.event-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event-card h3,
.business-card h3,
.weekly-event-card h3,
.directory-card h2,
.news-card h3 {
    font-family: var(--font-serif);
    font-size: 1.13rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    color: #101827;
}

.event-card p,
.business-card p,
.weekly-event-card p,
.directory-card p,
.news-card p {
    margin: 0;
    color: #52667a;
    line-height: 1.8;
}

/* Event meta info: date, time, location */
.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #6b7280;
    font-size: 0.95rem;
}

.event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Icons for event meta */
.event-meta span::before {
    content: '•'; /* Default bullet */
    opacity: 0.6;
}

.event-meta span:nth-child(1)::before { content: '📅'; } /* Date icon */
.event-meta span:nth-child(2)::before { content: '⏰'; } /* Time icon */
.event-meta span:nth-child(3)::before { content: '📍'; } /* Location icon */

/* Event category tag/pill */
.event-tag,
.business-pill,
.directory-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 10px;
    border-radius: 999px;      /* Pill shape */
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    width: fit-content;
}

/* Event category colors */
.event-tag-sport { background-color: #eff6ff; color: #1d4ed8; }       /* Blue */
.event-tag-market { background-color: #ecfdf5; color: #166534; }      /* Green */
.event-tag-social { background-color: #f5f3ff; color: #7c3aed; }      /* Purple */
.event-tag-wellness { background-color: #ecfccb; color: #365314; }    /* Yellow-green */
.event-tag-kids { background-color: #fef3c7; color: #b45309; }        /* Amber */
.event-tag-community { background-color: #ccfbf1; color: #0f766e; }   /* Teal */

/* Business card: has image at top */
.business-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.business-card-image {
    width: 100%;
    height: 210px;
    object-fit: cover;        /* Crop image to fit */
}

.business-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Business category pill colors */
.business-pill-accent { background-color: #ede9fe; color: #7c3aed; }  /* Purple */
.business-pill-cream { background-color: #fef3c7; color: #b45309; }   /* Amber */

/* Business meta: location, phone */
.business-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #6b7280;
    font-size: 0.95rem;
}

/* ==========================================
   TOWN NEWS & ALERTS SECTION
   ==========================================
   List of news items with icons and color-coded
   alert types (alert, info, urgent).
   ========================================== */

.town-news-alerts {
    max-width: 1200px;
    margin: 0 auto 84px;
    padding: 0 20px;
}

.town-news-coming-soon {
    width: 100%;
    margin: 0;
    padding: 28px 0;
    border-top: 1px solid rgba(36, 91, 100, .18);
    color: #60747a;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.news-list {
    display: grid;
    gap: 18px;
}

/* Individual news card */
.news-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border-radius: 18px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    background-color: white;
    transition: box-shadow 0.2s ease;
}

.news-card:hover {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* Icon box for news card */
.news-card-icon {
    flex-shrink: 0;              /* Don't shrink the icon */
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;         /* Center icon inside box */
    border-radius: 16px;
    font-size: 1.2rem;
    background-color: #f7faf9;   /* Softer light background */
}

.news-card h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.news-card p {
    margin: 0 0 12px;
    color: #4b5563;
    line-height: 1.7;
}

.news-card span {
    display: inline-block;
    color: #9ca3af;
    font-size: 0.92rem;
}

/* Small thumbnail for homepage news cards */
.news-card-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 10px;
}

.news-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Alert type colors */
.news-card-alert {
    border-color: #fcd34d;      /* Yellow border */
    background-color: #fffbeb;  /* Light yellow background */
}

.news-card-info {
    border-color: #fde68a;      /* Light yellow border */
    background-color: #fffbeb;  /* Light yellow background */
}

.news-card-urgent {
    border-color: #fca5a5;      /* Red border */
    background-color: #fef2f2;  /* Light red background */
}


/* ==========================================
   FOOTER
   ==========================================
   Dark footer with logo, links, and contact info
   displayed in a multi-column layout.
   ========================================== */

footer {
    background-color: #172029;  /* Dark blue-gray */
    color: white;
    padding: 50px 0;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top section: brand + columns */
.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
}

/* Each column in footer */
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 220px;
}

.footer-brand-column {
    flex: 1.5;                 /* Make brand column wider */
    min-width: 280px;
}

/* Brand display in footer */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-brand-column h2 {
    margin: 0;
    font-size: 1.35rem;
    font-family: var(--font-serif);
}

/* Footer links styling */
.footer-column a {
    color: #b7c3cc;            /* Light gray text */
    text-decoration: none;
    font-size: 0.95rem;
}

.footer-column a:hover {
    color: #ffffff;            /* White on hover */
}

/* Footer paragraphs (descriptions) */
.footer-column p {
    color: #b7c3cc;
    max-width: 420px;
    line-height: 1.8;
}

/* Bottom section: copyright and links */
.footer-bottom {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #2f3745; /* Divider line */
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    color: #b7c3cc;
    font-size: 14px;
}

.footer-bottom p {
    margin: 0;
}

/* Stack footer vertically on mobile */
@media (max-width: 820px) {
    .footer-top {
        flex-direction: column;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================
   WHAT'S HAPPENING PAGE
   ==========================================
   Events organized by day with filtering buttons.
   Each day shows a grid of event cards.
   ========================================== */

.whats-page {
    background-color: #fbfaf7;  /* Slightly tan background */
}

/* Page sections with responsive width */
.whats-hero,
.weekly-guide {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
}

.whats-hero {
    padding: 52px 0 34px;
}

.whats-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: #101827;
}

.whats-hero p {
    color: #50677a;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.weekly-guide {
    padding-bottom: 84px;
}

/* Day filter buttons at top */
.day-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
}

.day-filter button,
.directory-category-filter button {
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid #ded8ce;
    border-radius: 999px;       /* Pill shape */
    background-color: #ffffff;
    color: #3e4f61;
    font-size: 0.88rem;
    font-weight: 650;
    box-shadow: 0 8px 18px rgba(20, 32, 51, 0.04);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.day-filter button:hover,
.directory-category-filter button:hover {
    border-color: #c9dbe4;
    background-color: #f5fbff;   /* Light blue on hover */
}

.day-filter button.selected,
.directory-category-filter button.selected {
    background-color: #277da8;   /* Dark blue when selected */
    border-color: #277da8;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(39, 125, 168, 0.18);
}

/* Hide days that aren't selected */
.day-section.is-hidden {
    display: none;
}

.day-section {
    scroll-margin-top: 84px;     /* Space when scrolling to section */
    margin-bottom: 42px;
}

.day-section h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.2;
    color: #101827;
}

/* Blue dot before day heading */
.day-section h2::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #83b5cf;
}

/* Grid of event cards per day (2 per row on desktop) */
.weekly-event-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Single column on mobile */
@media (max-width: 760px) {
    .weekly-event-grid {
        grid-template-columns: 1fr;
    }
}

/* Weekly event card specific styles */
.weekly-event-card {
    min-height: 155px;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid transparent;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.weekly-event-card h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
}

.weekly-event-card p {
    margin: 0;
    color: #50677a;
    line-height: 1.65;
}

.weekly-event-card .event-tag {
    padding: 4px 10px;
    font-size: 0.76rem;
    text-transform: none;
    letter-spacing: 0;
}

.weekly-event-card .event-meta {
    gap: 14px;
    font-size: 0.85rem;
}

/* Custom icons for weekly event meta */
.weekly-event-card .event-meta span::before {
    content: "";
}

.weekly-event-card .event-meta span:nth-child(1)::before {
    content: "○";  /* Circle */
}

.weekly-event-card .event-meta span:nth-child(2)::before {
    content: "⌖";  /* Crosshair for location */
}

.weekly-event-card .event-meta span:nth-child(3)::before {
    content: "☎";  /* Phone */
}

/* Background gradient colors for event cards */
.blue-card {
    background: linear-gradient(145deg, #f4f8ff, #eef5ff);
    border-color: #b8d7ff;
}

.green-card {
    background: linear-gradient(145deg, #f2fff9, #ebfbef);
    border-color: #96f0cf;
}

.purple-card {
    background: linear-gradient(145deg, #fbf5ff, #f8efff);
    border-color: #dfc6ff;
}

.orange-card {
    background: linear-gradient(145deg, #fff8f1, #fff0df);
    border-color: #ffc98c;
}

.yellow-card {
    background: linear-gradient(145deg, #fffaf0, #fff6df);
    border-color: #f6d365;
}

/* Event card with image at top */
.image-event-card {
    padding-top: 0;
    overflow: hidden;
}

.image-event-card img {
    width: calc(100% + 48px);
    max-width: none;
    height: 110px;
    margin: 0 -24px 18px;
    object-fit: cover;
    object-position: center center;
    align-self: center;
    display: block;
}

@media (max-width: 760px) {
    .whats-hero,
    .weekly-guide {
        width: min(100% - 28px, 1180px);
    }

    .weekly-event-card {
        padding: 20px;
    }

    .image-event-card img {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* ==========================================
   BUSINESS DIRECTORY PAGE
   ==========================================
   Lists all businesses with search/filter.
   Clicking a business shows detailed info page.
   ========================================== */

.directory-page {
    background-color: #fbfaf7;  /* Tan background */
}

/* Page container with responsive width */
.directory-inner,
.directory-detail-inner {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
}

.directory-list-view {
    padding: 52px 0 84px;
}

.directory-detail-view {
    padding: 52px 0 84px;
}

/* Hide views based on current page state */
.directory-detail-view.is-hidden,
.directory-list-view.is-hidden {
    display: none;
}

.directory-detail-inner {
    max-width: 820px;           /* Narrower for single item */
}

/* Hero/title section */
.directory-hero {
    margin-bottom: 28px;
}

.directory-hero h1,
.directory-detail-view h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: #101827;
}

.directory-hero p,
.directory-detail-description {
    color: #50677a;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.directory-detail-description {
    max-width: 780px;
    margin-bottom: 22px;
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Optional About section shown only on clicked business detail pages. */
.directory-about {
    margin: 0 0 34px;
    padding: 20px 22px;
    border: 1px solid #e6e2db;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.035);
}

.directory-about h2 {
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.2;
    color: #101827;
}

.directory-about p {
    margin: 0;
    color: #50677a;
    line-height: 1.75;
}

.directory-about p + p {
    margin-top: 12px;
}

/* Search box */
.directory-search {
    display: block;
    margin-bottom: 28px;
}

.directory-search span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.directory-search input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d8ddd8;
    border-radius: 12px;
    background-color: white;
    color: #334155;
    padding: 0 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

/* Category filter buttons */
.directory-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

/* Grid of directory cards */
.directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* 2 columns on medium screens */
@media (max-width: 900px) {
    .directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1 column on small screens */
@media (max-width: 640px) {
    .directory-grid {
        grid-template-columns: 1fr;
    }
}

/* Directory card styling */
.directory-card {
    display: flex;
    min-height: 430px;
    overflow: hidden;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid #e6e2db;
    background-color: white;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.directory-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.08);
}

/* Card image */
.directory-card-image,
.directory-image-placeholder {
    width: 100%;
    height: 210px;
}

.directory-card-image {
    object-fit: cover;
}

/* Placeholder for cards without image */
.directory-image-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #eeeeeb, #e6e1dc);
}

.directory-image-placeholder span {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    color: #c0d3dc;
    font-weight: 700;
}

/* Card content area */
.directory-card-content {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Category tag/pill */
.directory-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    line-height: 1;
    border: 1px solid transparent;
}

.directory-card .directory-tag {
    width: 100%;
}

/* Category colors */
.directory-tag-restaurant { background-color: #fff7ed; border-color: #fdba74; color: #c2410c; }     /* Orange */
.directory-tag-cafe { background-color: #fffbeb; border-color: #facc15; color: #a16207; }          /* Amber */
.directory-tag-bar { background-color: #f5f3ff; border-color: #c4b5fd; color: #6d28d9; }           /* Purple */
.directory-tag-accommodation { background-color: #dcfce7; border-color: #86efac; color: #15803d; } /* Green */
.directory-tag-wellness { background-color: #ccfbf1; border-color: #5eead4; color: #0f766e; }      /* Teal */
.directory-tag-shop { background-color: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }          /* Blue */
.directory-tag-service { background-color: #f1f5f9; border-color: #cbd5e1; color: #334155; }       /* Slate */
.directory-tag-tourism { background-color: #ecfdf5; border-color: #6ee7b7; color: #047857; }       /* Green */
.directory-tag-Veterinary { background-color: #fef2f2; border-color: #fca5a5; color: #b91c1c; }    /* Red */
.directory-tag-gallery { background-color: #fdf2f8; border-color: #f9a8d4; color: #be185d; }       /* Pink */

.directory-card h2 {
    margin: 0;
    font-size: 1.13rem;
    line-height: 1.2;
}

.directory-card p {
    margin: 0;
    color: #50677a;
    line-height: 1.55;
}

/* Card meta info: location, phone, hours */
.directory-card-meta {
    display: grid;
    gap: 4px;
    color: #61758a;
    font-size: 0.86rem;
}

/*
    Optional business meta rows
    ---------------------------
    JavaScript only creates these rows when the business has that value.
    The icon is now linked to the field class, not to whether it happens
    to be the first, second, or third row.
*/
.directory-card-meta:empty,
.business-meta:empty {
    display: none;
}

.directory-card-meta .directory-meta-item,
.business-meta .directory-meta-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    column-gap: 7px;
}

.directory-card-meta .directory-meta-item::before,
.business-meta .directory-meta-item::before {
    color: #7890a0;
    line-height: 1.45;
}

.directory-meta-lines {
    display: grid;
    gap: 2px;
}

.business-meta .directory-meta-lines,
.directory-card-meta .directory-meta-lines {
    display: grid;
    gap: 2px;
}

.directory-meta-lines span {
    display: block;
}

.business-meta .directory-meta-lines span,
.directory-card-meta .directory-meta-lines span {
    display: block;
}

.directory-card-meta .directory-meta-lines span::before,
.business-meta .directory-meta-lines span::before {
    content: none;
}

/*
    Final metadata icon rules
    -------------------------
    Only the outside .directory-meta-item gets an icon.
    The inner .directory-meta-lines spans are plain text, so they never
    create extra icons beside addresses, phone numbers, or opening hours.
*/
.directory-card-meta span.directory-meta-address::before,
.business-meta span.directory-meta-address::before {
    content: "◆" !important;  /* Location */
}

.directory-card-meta span.directory-meta-phone::before,
.business-meta span.directory-meta-phone::before {
    content: "☎" !important;  /* Phone */
}

.directory-card-meta span.directory-meta-hours::before,
.business-meta span.directory-meta-hours::before {
    content: "◷" !important;  /* Hours */
}

.directory-card-meta .directory-meta-lines span::before,
.business-meta .directory-meta-lines span::before {
    content: none !important;
    margin-right: 0;
}

/* Empty state message when no results */
.directory-empty-message {
    display: none;
    margin: 28px 0 0;
    color: #61758a;
}

.directory-empty-message.is-visible {
    display: block;
}

.accommodation-filters {
    display: grid;
    gap: 18px;
    margin-top: 28px;
    margin-bottom: 30px;
}

.accommodation-filters .filter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .accommodation-filters .filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .accommodation-filters .filter-row {
        grid-template-columns: 1fr;
    }
}

.filter-group {
    display: grid;
    gap: 10px;
}

.filter-group label,
.filter-group legend {
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
}

.filter-group select {
    min-height: 44px;
    border: 1px solid #d8ddd8;
    border-radius: 12px;
    padding: 0 14px;
    background-color: white;
    color: #334155;
}

.accommodation-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 0;
}

.accommodation-type-filter .filter-label {
    display: inline-flex;
    min-width: 100px;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
}

.accommodation-type-filter button {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #d8ddd8;
    background-color: #f8fafc;
    color: #334155;
    font-size: 0.88rem;
}

.accommodation-type-filter button.selected,
.accommodation-type-filter button:hover {
    border-color: #7dd3fc;
    background-color: #e0f2fe;
    color: #0369a1;
}

.accommodation-amenities-filter {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background-color: white;
}

.accommodation-amenities-filter legend {
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
}

.accommodation-amenities-filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 0.92rem;
}

.accommodation-amenities-filter input {
    width: 16px;
    height: 16px;
}

.accommodation-gallery {
    margin: 0 0 28px;
}

.accommodation-gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
}

.accommodation-gallery-thumb {
    border: 1px solid #d8ddd8;
    border-radius: 14px;
    overflow: hidden;
    background-color: white;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.accommodation-gallery-thumb.active,
.accommodation-gallery-thumb:hover {
    border-color: #0369a1;
    transform: translateY(-1px);
}

.accommodation-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .accommodation-gallery-thumbnails {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Detailed view: when clicking into a business */
.directory-back-link {
    display: inline-flex;
    margin-bottom: 22px;
    color: #61758a;
    text-decoration: none;
}

.directory-back-link::before {
    content: "<";
    margin-right: 8px;
}

/* Large image on detail page */
.directory-detail-image {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(20, 32, 51, 0.08);
    margin-bottom: 34px;
}

#accommodation-main-gallery-image.has-gallery {
    margin-bottom: 12px;
}

/* Business detail images must show the complete source image without cropping. */
#directory-detail-view .directory-detail-image {
    display: block;
    width: 100%;
    height: min(70vh, 640px);
    max-height: 640px;
    object-fit: contain;
    object-position: center;
    background-color: #f4f1ea;
}

.directory-detail-view .directory-image-placeholder {
    height: 340px;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(20, 32, 51, 0.08);
    margin-bottom: 34px;
}

.directory-detail-view .directory-tag {
    width: fit-content;
    margin-bottom: 14px;
}

/* Grid of info boxes on detail page */
.directory-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

/* Individual info box */
.directory-info-card {
    min-height: 74px;
    border-radius: 12px;
    background-color: #f7f6f3;     /* Light gray background */
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.directory-info-card span {
    display: block;
    margin-bottom: 5px;
    color: #557089;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;    /* Labels in caps */
}

.directory-info-card strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
}

.directory-info-card a {
    color: #0369a1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tags section on detail page */
.directory-detail-tags {
    color: #4b5f73;
}

.directory-tags-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.directory-detail-tags div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.directory-detail-tags div span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 12px;
    border: 1px solid #d8ddd8;
    border-radius: 999px;
    background-color: white;
    color: #111827;
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .directory-inner,
    .directory-detail-inner {
        width: min(100% - 28px, 1180px);
    }

    .directory-info-grid {
        grid-template-columns: 1fr;
    }

    .directory-detail-image,
    .directory-detail-view .directory-image-placeholder {
        height: 240px;
    }

    #directory-detail-view .directory-detail-image {
        height: min(58vh, 420px);
    }
}

/* ==========================================
   RESPONSIVE DESIGN & MOBILE ADAPTATIONS
   ==========================================
   These media queries adjust layouts for 
   tablets and mobile phones.
   ========================================== */

/* Tablets and smaller desktops (900px and below) */
@media (max-width: 900px) {
    .navbar {
        padding: 16px 24px;
    }

    /* Change grids from 3 columns to 2 */
    .quick-access-buttons,
    .event-grid,
    .business-grid,
    .directory-grid,
    .weekly-event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile phones (640px and below) */
@media (max-width: 640px) {
    /* Reduce side padding on small screens */
    .quick-access,
    .events-preview,
    .featured-businesses,
    .town-news-alerts,
    .whats-hero,
    .weekly-guide,
    .directory-inner,
    .directory-detail-inner,
    .hero-inner {
        width: min(100% - 28px, 1160px);
    }

    /* Change all grids to single column */
    .quick-access-buttons,
    .event-grid,
    .business-grid,
    .directory-grid,
    .weekly-event-grid,
    .directory-info-grid {
        grid-template-columns: 1fr;
    }

    /* Reduce hero height on mobile */
    .hero {
        min-height: 78vh;
    }

    .hero h1 {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }
}


/* ==========================================
   OFFERINGS DIRECTORY PAGE
   ==========================================
   This section contains all styling for offerings.html.
   It includes the heading, search field, category filters,
   offering cards, empty state, and responsive behavior.
   ========================================== */

.offerings-page {
    background-color: #fbfaf7; /* Light warm background for the page */
}

.offerings-inner,
.offerings-detail-inner {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
}

.offerings-list-view,
.offerings-detail-view {
    padding: 52px 0 84px;
}

.offerings-hero {
    padding: 52px 0 28px;
}

.offerings-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: #101827;
}

.offerings-hero p {
    margin: 0;
    color: #50677a;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Search field with hidden label for accessibility */
.offerings-search {
    position: relative;
    display: block;
    margin-bottom: 28px;
}

.offerings-search span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.offerings-search input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d8ddd8;
    border-radius: 12px;
    background-color: white;
    color: #334155;
    padding: 0 16px 0 38px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2350677a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 15px;
}

.offerings-search input::placeholder {
    color: #61758a;
}

/* Category filter buttons */
.offerings-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.offerings-category-filter button {
    min-height: 28px;
    padding: 7px 13px;
    border: 1px solid #ded8ce;
    border-radius: 999px;
    background-color: #ffffff;
    color: #101827;
    font-size: 0.88rem;
    font-weight: 650;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.offerings-category-filter button:hover {
    border-color: #c9dbe4;
    background-color: #f5fbff;
}

.offerings-category-filter button.selected {
    background-color: #277da8;
    border-color: #277da8;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(39, 125, 168, 0.18);
}

/* Offerings grid */
.offerings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* Individual offering cards */
.offering-card {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e6e2db;
    background-color: white;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.offering-card:hover {
    transform: translateY(-3px);
    border-color: #d8d1c4;
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.08);
}

.offering-card-image {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.offering-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.offering-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.74rem;
    line-height: 1;
}

.offering-tag-wellness { background-color: #ccfbf1; border-color: #5eead4; color: #0f766e; }
.offering-tag-art { background-color: #ffe4e6; border-color: #fda4af; color: #be123c; }
.offering-tag-food { background-color: #ffedd5; border-color: #fdba74; color: #c2410c; }
.offering-tag-adventure { background-color: #fef3c7; border-color: #fbbf24; color: #b45309; }
.offering-tag-education { background-color: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.offering-tag-music { background-color: #fce7f3; border-color: #f9a8d4; color: #be185d; }
.offering-tag-spiritual { background-color: #f3e8ff; border-color: #d8b4fe; color: #7e22ce; }
.offering-tag-fitness { background-color: #dcfce7; border-color: #86efac; color: #15803d; }

.offering-card h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.2;
    color: #101827;
}

.offering-card p {
    margin: 0;
}

.offering-facilitator {
    color: #277da8;
    font-size: 0.86rem;
}

.offering-facilitator::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23277da8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.offering-description {
    color: #50677a;
    font-size: 0.92rem;
    line-height: 1.5;
}

.offering-card-meta {
    display: grid;
    gap: 3px;
    margin-top: 8px;
    color: #61758a;
    font-size: 0.78rem;
    line-height: 1.45;
}

.offering-card-meta span::before {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    vertical-align: -2px;
    color: #7890a0;
    background-repeat: no-repeat;
    background-size: contain;
}

.offering-price::before {
    content: "$";
    margin-right: 7px;
    color: #61758a;
    font-size: 0.86rem;
    line-height: 1;
}

.offering-schedule::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2361758a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

.offering-contact::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2361758a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.74a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.offerings-empty-message {
    display: none;
    margin: 28px 0 0;
    color: #61758a;
}

.offerings-empty-message.is-visible {
    display: block;
}

@media (max-width: 900px) {
    .offerings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .offerings-inner,
    .offerings-detail-inner {
        width: min(100% - 28px, 1180px);
    }

    .offerings-list-view,
    .offerings-detail-view {
        padding: 34px 0 64px;
    }

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

/* ==========================================
   CONTACT US PAGE
   ==========================================
   This block styles contact-us.html.
   It keeps the form calm and practical, with sections that appear only
   after the visitor chooses a request type.
   ========================================== */

.contact-page {
    background-color: #fbfaf7;
}

.contact-section {
    padding: 52px 0 84px;
}

.contact-inner {
    width: min(100% - 40px, 900px);
    margin: 0 auto;
}

.contact-hero {
    margin-bottom: 28px;
}

.contact-hero h1 {
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.05;
    color: #101827;
}

.contact-hero p {
    max-width: 680px;
    margin: 0;
    color: #50677a;
    font-size: 1.05rem;
    line-height: 1.6;
}

.contact-form {
    display: grid;
    gap: 18px;
}

.contact-card {
    margin: 0;
    padding: 22px;
    border: 1px solid #e6e2db;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.contact-card[hidden] {
    display: none;
}

.contact-card legend,
.contact-card h2 {
    margin: 0 0 16px;
    font-family: var(--font-serif);
    font-size: 1.18rem;
    line-height: 1.2;
    color: #101827;
}

.contact-card h2 {
    margin-bottom: 8px;
}

.contact-help-text {
    margin: 0 0 18px;
    color: #50677a;
    line-height: 1.65;
}

.contact-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-form label {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.contact-form label:last-child {
    margin-bottom: 0;
}

.contact-form label span {
    color: #334155;
    font-size: 0.88rem;
    font-weight: 750;
}

.contact-form small {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.45;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d8ddd8;
    border-radius: 10px;
    background-color: #ffffff;
    color: #111827;
    padding: 10px 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.025);
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.55;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 2px solid #bfdbfe;
    border-color: #277da8;
}

.contact-submit {
    justify-self: start;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #277da8;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(39, 125, 168, 0.18);
}

.contact-submit:hover {
    background-color: #1f6f97;
}

.contact-submit-message {
    min-height: 24px;
    margin: 0;
    color: #047857;
    font-weight: 750;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .contact-inner {
        width: min(100% - 28px, 900px);
    }

    .contact-section {
        padding: 36px 0 64px;
    }

    .contact-card {
        padding: 18px;
    }

    .contact-field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-submit {
        width: 100%;
    }
}

/* ==========================================
   TOWN NEWS PAGE
   ==========================================
   This block styles town-news.html.

   Learning note:
   The class names all start with town-news- so they do not accidentally
   change cards or headings on other pages.
   ========================================== */

.town-news-page {
    background-color: #fbfaf7;
}

/* This inner wrapper controls the readable width of the whole news page. */
.town-news-inner {
    width: min(100% - 40px, 820px);
    margin: 0 auto;
    padding: 48px 0 80px;
}

.town-news-hero {
    margin-bottom: 28px;
}

.town-news-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.05;
    margin: 0 0 8px;
    color: #101827;
}

.town-news-hero p {
    margin: 0;
    color: #50677a;
    font-size: 1.05rem;
}

/* The filter row is a flexbox so the buttons wrap neatly on small screens. */
.town-news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.town-news-filters button {
    min-height: 28px;
    padding: 5px 13px;
    border: 1px solid #ded8ce;
    border-radius: 999px;
    background-color: #ffffff;
    color: #101827;
    font-size: 0.78rem;
    font-weight: 650;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.town-news-filters button:hover {
    border-color: #c9dbe4;
    background-color: #f5fbff;
}

.town-news-filters button.selected {
    background-color: #277da8;
    border-color: #277da8;
    color: #ffffff;
}

.town-news-urgent-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    color: #ef4444;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.town-news-urgent-heading::before {
    content: "!";
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0.68rem;
    line-height: 1;
}

.town-news-list {
    display: grid;
    gap: 14px;
}

/* JavaScript adds this class when a filtered card should disappear. */
.town-news-card.is-hidden {
    display: none;
}

.town-news-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #e6e2db;
    border-left-width: 4px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
}

/* Category border colours. These make the cards scannable. */
.town-news-card-security { border-left-color: #ef4444; }
.town-news-card-roadworks { border-left-color: #f97316; }
.town-news-card-lost-found { border-left-color: #facc15; }
.town-news-card-municipal { border-left-color: #facc15; }
.town-news-card-community { border-left-color: #facc15; }

.town-news-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background-color: #f2f0eb;
    color: #64748b;
    font-size: 0;
}

/* Small CSS-drawn icon labels. They avoid needing an icon library. */
.town-news-icon::before {
    content: attr(aria-hidden);
    font-size: 0.86rem;
}

.town-news-icon[aria-hidden="true"] {
    font-size: 0;
}

.town-news-icon[aria-hidden="true"]::before {
    content: "i";
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1.5px solid #64748b;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: var(--font-sans);
}

.town-news-card-security .town-news-icon::before {
    content: "";
    width: 15px;
    height: 17px;
    border: 1.7px solid #64748b;
    border-radius: 8px 8px 10px 10px;
}

.town-news-card-roadworks .town-news-icon::before {
    content: "!!!";
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: #64748b;
    font-size: 0.7rem;
    letter-spacing: -0.08em;
}

.town-news-card-lost-found .town-news-icon::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 1.7px solid #64748b;
    border-radius: 50%;
    box-shadow: 6px 6px 0 -4px #64748b;
}

.town-news-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* Layout when a news item has an image: thumbnail on the left */

.town-news-card.has-image {
    /* icon | content | image */
    grid-template-columns: 42px 1fr 120px;
    align-items: start;
}

.town-news-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.town-news-pill,
.town-news-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1;
}

.town-news-pill-security { background-color: #ffe4e6; border: 1px solid #fda4af; color: #be123c; }
.town-news-pill-roadworks { background-color: #fef9c3; border: 1px solid #fde047; color: #a16207; }
.town-news-pill-lost-found { background-color: #dbeafe; border: 1px solid #93c5fd; color: #1d4ed8; }
.town-news-pill-municipal { background-color: #e0f2fe; border: 1px solid #bae6fd; color: #075985; }
.town-news-pill-community { background-color: #dcfce7; border: 1px solid #86efac; color: #15803d; }

.town-news-priority {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.town-news-priority-urgent {
    background-color: #fee2e2;
    color: #dc2626;
}

.town-news-priority-important {
    background-color: #ffedd5;
    color: #ea580c;
}

.town-news-card h2 {
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.3;
    color: #101827;
}

.town-news-card p {
    margin: 0;
    color: #50677a;
    line-height: 1.65;
}

.town-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
    padding: 9px 12px;
    border-radius: 7px;
    background-color: #f3f4f6; /* Softer meta background */
    color: #0f1724; /* Darker text for readability */
    font-size: 0.78rem;
}

.town-news-contact {
    color: #000000;
    font-weight: 600;
}

/* News image modal */
.news-image-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(2,6,23,0.55);
    z-index: 9999;
}
.news-image-modal-backdrop {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: grid;
    place-items: center;
}
.news-image-modal-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(2,6,23,0.6);
}
.news-image-modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    background: #ffffff;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.town-news-meta span {
    color: inherit;
}

.town-news-meta span + span {
    color: #cbd5e1;
}

/* ==========================================
   EXPLORE PAGE
   ==========================================
   This block styles explore.html.
   The screenshot has three major parts:
   1. A full-width image hero.
   2. A card grid of places.
   3. Visitor tips and a centered call-to-action.
   ========================================== */

.explore-page {
    background-color: #fbfaf7;
}

.explore-hero {
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    padding: 0 32px 46px;
    color: #ffffff;
    background-image:
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.58)),
        url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1800&q=80");
    background-position: center;
    background-size: cover;
}

.explore-hero-content {
    width: min(100%, 1180px);
    margin: 0 auto;
}

.explore-hero h1 {
    max-width: 760px;
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 6vw, 4rem);
    line-height: 1;
}

.explore-hero p {
    max-width: 560px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.45;
}

.explore-section {
    padding: 56px 0;
}

.explore-inner {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
}

.explore-section h2,
.explore-cta h2 {
    margin: 0 0 28px;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1.1;
    color: #101827;
}

.explore-spot-grid,
.explore-tip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.explore-spot-card,
.explore-tip-card {
    overflow: hidden;
    border: 1px solid #e6e2db;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
}

.explore-spot-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.explore-spot-content {
    padding: 20px;
}

.explore-spot-card h3,
.explore-tip-card h3 {
    margin: 0 0 10px;
    color: #101827;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.25;
}

.explore-spot-card h3 span {
    margin-right: 8px;
    color: #277da8;
    font-family: var(--font-sans);
    font-size: 0.88rem;
}

.explore-spot-card p,
.explore-tip-card p {
    margin: 0;
    color: #50677a;
    line-height: 1.65;
}

.explore-tips-section {
    background-color: #f6f4ef;
}

.explore-tip-card {
    padding: 22px;
    min-height: 130px;
}

.explore-tip-card h3 {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
}

.explore-cta {
    padding: 60px 20px 70px;
    text-align: center;
    background-color: #ffffff;
}

.explore-cta h2 {
    margin-bottom: 8px;
}

.explore-cta p {
    margin: 0 0 24px;
    color: #50677a;
    font-size: 1rem;
}

.explore-cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.explore-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid #ded8ce;
    font-size: 0.88rem;
    font-weight: 800;
}

.explore-cta-primary {
    border-color: #277da8;
    background-color: #277da8;
    color: #ffffff;
}

.explore-cta-warm {
    border-color: #d96f45;
    background-color: #d96f45;
    color: #ffffff;
}

.explore-cta-light {
    background-color: #ffffff;
    color: #101827;
}

.explore-cta-directory {
    border-color: #1f6f78;
    background: #e8f4f5;
    color: #185b63;
}

.explore-cta-directory:hover {
    background: #d5ebed;
    color: #123f45;
}

/* ==========================================
   TOWN NEWS + EXPLORE RESPONSIVE RULES
   ==========================================
   Media queries change layout at smaller screen widths.
   They are kept near the new page code so you can find them easily.
   ========================================== */

@media (max-width: 900px) {
    .explore-spot-grid,
    .explore-tip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .town-news-inner,
    .explore-inner {
        width: min(100% - 28px, 1180px);
    }

    .town-news-inner {
        padding: 36px 0 64px;
    }

    .town-news-card {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .town-news-icon {
        display: none;
    }

    .explore-hero {
        min-height: 430px;
        padding: 0 20px 34px;
    }

    .explore-spot-grid,
    .explore-tip-grid {
        grid-template-columns: 1fr;
    }

    .explore-section {
        padding: 42px 0;
    }
}

/* ==========================================
   UNIFIED COMMUNITY HUB THEME
   ==========================================
   This final layer harmonises the earlier page-specific styles into one
   calm, professional coastal-community system.
   ========================================== */

:root {
    --bg: #f5f2ea;
    --surface: #fffdf8;
    --surface-muted: #ebe6da;
    --surface-soft: #f9f7f1;
    --text: #17201d;
    --text-muted: #61706b;
    --border: #ded6c8;
    --border-strong: #c9beab;
    --primary: #1f6f78;
    --primary-dark: #164f56;
    --primary-soft: #e3f1f1;
    --accent: #c76f4f;
    --accent-soft: #f7e7df;
    --leaf: #5f7f62;
    --sand: #d9bd8f;
    --radius: 8px;
    --shadow: 0 12px 28px rgba(23, 32, 29, 0.08);
    --shadow-soft: 0 6px 18px rgba(23, 32, 29, 0.055);
    --container: 1180px;
}

body {
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(245, 242, 234, 0.98) 360px),
        var(--bg);
    font-size: 16px;
}

main {
    overflow: hidden;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(31, 111, 120, 0.25);
    outline-offset: 3px;
}

.navbar {
    height: 72px;
    grid-template-columns: minmax(190px, 240px) 1fr 42px;
    gap: 18px;
    padding: 0 clamp(18px, 4vw, 52px);
    background: rgba(255, 253, 248, 0.94);
    border-top: 0;
    border-bottom: 1px solid rgba(201, 190, 171, 0.85);
    box-shadow: 0 10px 26px rgba(23, 32, 29, 0.06);
    backdrop-filter: blur(16px);
}

.brand {
    gap: 11px;
}

.brand-text strong,
.footer-brand-column h2 {
    color: var(--text);
    letter-spacing: 0;
}

.brand-text small {
    color: var(--text-muted);
    letter-spacing: 0.16em;
}

.nav-links {
    gap: 4px;
}

.nav-links a {
    min-height: 36px;
    padding: 9px 11px;
    border-radius: var(--radius);
    color: #43534f;
    font-size: 0.9rem;
    font-weight: 700;
}

.nav-links a:hover,
.nav-links a.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

#search-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

#search-btn:hover {
    background: var(--primary-soft);
}

#search-btn::before,
#search-btn::after {
    background-color: var(--primary-dark);
}

.site-search-panel {
    top: 72px;
    background: rgba(255, 253, 248, 0.98);
    border-bottom-color: var(--border);
}

.site-search-form input,
.directory-search input,
.contact-form input,
.contact-form select,
.contact-form textarea,
.filter-group select {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fffefa;
    color: var(--text);
    box-shadow: none;
}

.site-search-form input:focus,
.directory-search input:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.filter-group select:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(31, 111, 120, 0.16);
}

.site-search-form button,
.contact-submit,
.hero-btn-primary,
.explore-cta-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 20px rgba(31, 111, 120, 0.18);
}

.site-search-form button:hover,
.contact-submit:hover,
.hero-btn-primary:hover,
.explore-cta-primary:hover {
    background: var(--primary-dark);
}

.hero {
    min-height: min(720px, calc(100vh - 72px));
    background-image:
        linear-gradient(90deg, rgba(23, 32, 29, 0.72), rgba(23, 32, 29, 0.36) 54%, rgba(23, 32, 29, 0.18)),
        url("../images/hero.jpg");
    background-position: center;
}

.hero-inner {
    width: min(100% - 40px, var(--container));
}

.hero h1,
.explore-hero h1 {
    max-width: 760px;
    font-size: clamp(3rem, 6vw, 5.4rem);
    letter-spacing: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.hero h1 .hero-accent {
    color: #d8c08f;
}

.hero p {
    max-width: 610px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1rem, 1.8vw, 1.16rem);
}

.hero-buttons,
.explore-cta-buttons {
    gap: 10px;
}

.hero-btn,
.explore-cta-button,
.section-link {
    min-height: 42px;
    border-radius: var(--radius);
    font-weight: 800;
}

.hero-btn-primary::before {
    content: "";
}

.hero-btn-secondary,
.explore-cta-light {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 253, 248, 0.13);
    color: #fff;
}

.explore-cta .explore-cta-light {
    border-color: var(--border-strong);
    background: #ffffff;
    color: var(--text);
}

.explore-cta .explore-cta-light:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.hero-btn-secondary:hover {
    background: rgba(255, 253, 248, 0.22);
}

.quick-access,
.events-preview,
.featured-businesses,
.town-news-alerts {
    max-width: var(--container);
    margin-bottom: 72px;
    padding-inline: 20px;
}

.section-header {
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding-top: 58px;
}

.section-header h2,
.whats-hero h1,
.directory-hero h1,
.contact-hero h1,
.town-news-hero h1,
.page-hero h1,
.explore-section h2,
.explore-cta h2 {
    color: var(--text);
    letter-spacing: 0;
}

.section-header p,
.whats-hero p,
.directory-hero p,
.contact-hero p,
.town-news-hero p,
.page-hero p,
.explore-spot-card p,
.explore-tip-card p,
.explore-cta p,
.directory-card p,
.weekly-event-card p,
.event-card p,
.news-card p,
.town-news-card p {
    color: var(--text-muted);
}

.section-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-dark);
    padding: 0 12px;
}

.section-link:hover {
    background: var(--primary-soft);
}

.quick-access-buttons {
    gap: 14px;
}

.card {
    height: 88px;
    border-radius: var(--radius);
    border-color: var(--border);
    background: var(--surface);
    color: var(--primary-dark);
    box-shadow: var(--shadow-soft);
}

.card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.restaurants,
.shops,
.accommodation,
.surf-schools,
.wellness,
.whats-happening,
.town-news,
.explore {
    background: var(--surface);
}

.restaurants { color: #a55238; }
.shops { color: #44656d; }
.accommodation { color: var(--leaf); }
.surf-schools { color: var(--primary); }
.wellness { color: #35746b; }
.whats-happening { color: #8a6040; }
.town-news { color: #946c2d; }
.explore { color: #665a45; }

.event-card,
.business-card,
.weekly-event-card,
.directory-card,
.news-card,
.directory-info-card,
.contact-card,
.town-news-card,
.explore-spot-card,
.explore-tip-card {
    border-radius: var(--radius);
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.event-card:hover,
.business-card:hover,
.weekly-event-card:hover,
.directory-card:hover,
.news-card:hover,
.explore-spot-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.event-card h3,
.business-card h3,
.weekly-event-card h3,
.directory-card h2,
.news-card h3,
.town-news-card h2,
.explore-spot-card h3,
.explore-tip-card h3,
.contact-card legend,
.contact-card h2 {
    color: var(--text);
    letter-spacing: 0;
}

.event-tag,
.business-pill,
.directory-tag,
.town-news-pill,
.town-news-priority {
    border-radius: 999px;
    font-weight: 800;
}

.event-tag,
.directory-tag-service,
.directory-tag-shop {
    background: var(--primary-soft);
    border-color: #b9d8d8;
    color: var(--primary-dark);
}

.directory-tag-restaurant,
.event-tag-social {
    background: var(--accent-soft);
    border-color: #e6b5a3;
    color: #964e35;
}

.directory-tag-accommodation,
.directory-tag-tourism,
.event-tag-wellness,
.directory-tag-wellness {
    background: #e7efe2;
    border-color: #bfd1b3;
    color: #426844;
}

.blue-card,
.green-card,
.purple-card,
.yellow-card {
    background: var(--surface);
    border-color: var(--border);
}

.event-meta span::before,
.weekly-event-card .event-meta span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sand);
    opacity: 1;
}

.whats-page,
.directory-page,
.contact-page,
.town-news-page,
.explore-page {
    background: transparent;
}

.whats-page,
.directory-inner,
.contact-inner,
.town-news-inner {
    width: min(100% - 40px, var(--container));
}

.whats-hero,
.directory-hero,
.contact-hero,
.town-news-hero,
.page-hero {
    margin-bottom: 28px;
    padding: 46px 0 28px;
    border-bottom: 1px solid rgba(201, 190, 171, 0.5);
}

.page-hero-inner {
    width: min(100% - 40px, var(--container));
    margin: 0 auto;
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.day-filter,
.directory-category-filter,
.offerings-category-filter,
.town-news-filters,
.accommodation-type-filter {
    gap: 8px;
}

.day-filter button,
.directory-category-filter button,
.offerings-category-filter button,
.town-news-filters button,
.accommodation-type-filter button {
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: #43534f;
    box-shadow: none;
}

.day-filter button:hover,
.directory-category-filter button:hover,
.offerings-category-filter button:hover,
.town-news-filters button:hover,
.accommodation-type-filter button:hover {
    border-color: #b9d8d8;
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.day-filter button.selected,
.directory-category-filter button.selected,
.offerings-category-filter button.selected,
.town-news-filters button.selected,
.accommodation-type-filter button.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(31, 111, 120, 0.18);
}

.directory-card {
    min-height: 410px;
}

.directory-card .directory-tag {
    width: fit-content;
}

.directory-card-image,
.directory-image-placeholder,
.explore-spot-card img {
    background: var(--surface-muted);
}

.directory-image-placeholder {
    background: linear-gradient(135deg, #ece6da, #f7f2e8);
}

.directory-image-placeholder span {
    color: var(--primary);
}

.directory-card-meta,
.town-news-meta {
    background: var(--surface-soft);
    color: var(--text-muted);
    border-radius: var(--radius);
}

.contact-section {
    padding-top: 0;
}

.contact-card {
    padding: clamp(18px, 3vw, 26px);
}

.contact-submit {
    border-radius: var(--radius);
}

.town-news-inner {
    max-width: 900px;
}

.town-news-card {
    border-left-color: var(--primary);
}

.town-news-card-security { border-left-color: #bd4f44; }
.town-news-card-roadworks { border-left-color: var(--accent); }
.town-news-card-lost-found,
.town-news-card-municipal,
.town-news-card-community { border-left-color: var(--sand); }

.town-news-icon {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.town-news-icon[aria-hidden="true"]::before,
.town-news-card-security .town-news-icon::before {
    border-color: var(--primary-dark);
}

.town-news-meta span + span {
    color: var(--text-muted);
}

.explore-hero {
    min-height: 500px;
    background-image:
        linear-gradient(180deg, rgba(23, 32, 29, 0.08), rgba(23, 32, 29, 0.62)),
        url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1800&q=80");
}

.explore-tips-section {
    background: rgba(235, 230, 218, 0.55);
}

.explore-cta {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.explore-cta-warm {
    border-color: var(--accent);
    background: var(--accent);
}

.footer-inner {
    background: #162320;
    color: rgba(255, 253, 248, 0.86);
}

.footer-column p,
.footer-column a,
.footer-bottom p {
    color: rgba(255, 253, 248, 0.72);
}

.footer-column h3,
.footer-brand-column h2 {
    color: #fffdf8;
}

.footer-column a:hover {
    color: #fffdf8;
}

.footer-bottom {
    border-top-color: rgba(255, 253, 248, 0.12);
}

@media (max-width: 980px) {
    .navbar {
        height: auto;
        grid-template-columns: 1fr auto;
        padding-block: 12px;
    }

    .nav-links {
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .site-search-panel {
        top: 116px;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 15px;
    }

    .hero {
        min-height: 620px;
        align-items: flex-end;
        padding-bottom: 54px;
    }

    .hero h1 {
        font-size: clamp(2.7rem, 13vw, 4.2rem);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-btn {
        width: 100%;
    }

    .quick-access-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .whats-page,
    .directory-inner,
    .contact-inner,
    .town-news-inner,
    .page-hero-inner {
        width: min(100% - 28px, var(--container));
    }
}

@media (max-width: 520px) {
    .quick-access-buttons {
        grid-template-columns: 1fr;
    }

    .card {
        height: 64px;
        justify-content: flex-start;
        padding-inline: 18px;
    }

    .site-search-panel {
        top: 150px;
    }
}

/* ==========================================
   SOFT BEACH TOWN VIBE
   ==========================================
   Softer homepage-led visual direction inspired by coastal guesthouses,
   surf-town noticeboards, and intimate local community pages.
   ========================================== */

:root {
    --bg: #fbfaf6;
    --surface: #fffdf9;
    --surface-muted: #f6f1e9;
    --surface-soft: #fff8ef;
    --text: #121821;
    --text-muted: #607184;
    --border: #ece4d8;
    --border-strong: #ded0bf;
    --primary: #2d89b3;
    --primary-dark: #17617d;
    --primary-soft: #edf7fc;
    --accent: #e67145;
    --accent-soft: #fff5ed;
    --mint: #eefaf3;
    --seafoam: #effbf8;
    --lavender: #fbf4ff;
    --butter: #fffbe8;
    --rose: #fff4fa;
    --radius: 12px;
    --shadow: 0 16px 34px rgba(28, 42, 54, 0.075);
    --shadow-soft: 0 8px 22px rgba(28, 42, 54, 0.045);
}

body {
    background: var(--bg);
    color: var(--text);
}

.navbar {
    position: relative;
    height: 70px;
    background: rgba(255, 253, 249, 0.82);
    border-bottom: 1px solid rgba(236, 228, 216, 0.76);
    box-shadow: none;
}

.nav-links a {
    border-radius: 999px;
    color: rgba(18, 24, 33, 0.68);
    font-size: 0.88rem;
    font-weight: 700;
}

.nav-links a:hover,
.nav-links a.active {
    background: rgba(45, 137, 179, 0.11);
    color: var(--primary-dark);
}

#search-btn {
    border-color: rgba(236, 228, 216, 0.9);
    background: rgba(255, 255, 255, 0.58);
    box-shadow: none;
}

.hero {
    position: relative;
    min-height: min(760px, calc(100vh - 70px));
    align-items: center;
    background-image:
        linear-gradient(180deg, rgba(18, 24, 33, 0.28), rgba(18, 24, 33, 0.48)),
        linear-gradient(90deg, rgba(18, 24, 33, 0.48), rgba(18, 24, 33, 0.12) 64%),
        url("../images/hero.jpg");
    background-position: center;
}

.hero::after {
    content: "↓";
    position: absolute;
    left: 50%;
    bottom: 26%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.45rem;
    font-weight: 300;
}

.hero-inner {
    width: min(100% - 44px, 1060px);
    padding-top: 40px;
}

.hero-inner::before {
    content: "EASTERN CAPE, SOUTH AFRICA";
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 22px;
    padding: 5px 13px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    backdrop-filter: blur(10px);
}

.hero-inner::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: -173px;
    margin-bottom: 3px;
    border-radius: 999px;
    background: #78e0a0;
}

.hero h1 {
    max-width: 560px;
    margin-bottom: 14px;
    color: #fffdf9;
    font-size: clamp(3.2rem, 6.6vw, 5.15rem);
    line-height: 0.98;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.hero h1 .hero-accent {
    color: var(--primary);
}

.hero p {
    max-width: 520px;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.03rem;
    line-height: 1.62;
}

.hero-buttons {
    margin-top: 30px;
}

.hero-btn {
    min-height: 38px;
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 0.84rem;
    box-shadow: none;
}

.hero-btn-primary {
    background: var(--primary);
}

.hero-btn-primary::before {
    content: "⌕";
    font-size: 0.95rem;
    line-height: 1;
}

.hero-btn-secondary {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

.quick-access,
.events-preview,
.featured-businesses,
.town-news-alerts {
    max-width: 1060px;
    margin-bottom: 72px;
}

.quick-access {
    padding-top: 18px;
}

.section-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    justify-content: stretch;
    gap: 16px;
    text-align: left;
}

.quick-access .section-header {
    display: flex;
    align-items: center;
    text-align: center;
}

.section-header h2,
.whats-hero h1,
.directory-hero h1,
.contact-hero h1,
.town-news-hero h1,
.explore-section h2,
.explore-cta h2 {
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.05;
}

.section-header p {
    margin-top: 4px;
}

.section-link {
    min-height: 30px;
    padding: 0;
    color: var(--primary-dark);
    background: transparent;
    font-size: 0.86rem;
    font-weight: 750;
}

.section-link:hover {
    background: transparent;
    color: var(--primary);
}

.quick-access-buttons {
    max-width: 1060px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.card {
    position: relative;
    flex-direction: column;
    gap: 10px;
    height: 88px;
    border: 1px solid rgba(224, 214, 202, 0.85);
    border-radius: 12px;
    background: #fff8f0;
    box-shadow: none;
    font-size: 0.83rem;
    font-weight: 750;
}

.card::before {
    font-size: 1.35rem;
    line-height: 1;
}

.restaurants {
    background: #fff7ef;
    color: #f05e23;
}

.restaurants::before { content: "♨"; }

.shops {
    background: #f0f6ff;
    color: #3267ff;
}

.shops::before { content: "▣"; }

.accommodation {
    background: #effbf3;
    color: #10a252;
}

.accommodation::before { content: "☼"; }

.surf-schools {
    background: #eff8ff;
    color: #1685d8;
}

.surf-schools::before { content: "≋"; }

.wellness {
    background: #eefbf8;
    color: #269c91;
}

.wellness::before { content: "✤"; }

.whats-happening {
    background: #fff4fa;
    color: #df3d91;
}

.whats-happening::before { content: "♫"; }

.town-news {
    background: #fffbe8;
    color: #d59012;
}

.town-news::before { content: "▤"; }

.explore {
    background: #fbf4ff;
    color: #934df0;
}

.explore::before { content: "◉"; }

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(48, 61, 73, 0.06);
}

.event-grid,
.business-grid,
.directory-grid {
    gap: 18px;
}

.event-card,
.weekly-event-card,
.directory-card,
.news-card,
.town-news-card,
.explore-spot-card,
.explore-tip-card,
.contact-card,
.directory-info-card {
    border: 1px solid rgba(224, 214, 202, 0.86);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: none;
}

.event-card:hover,
.weekly-event-card:hover,
.directory-card:hover,
.news-card:hover,
.explore-spot-card:hover {
    border-color: rgba(204, 190, 174, 0.95);
    box-shadow: 0 14px 30px rgba(48, 61, 73, 0.07);
}

.event-card,
.weekly-event-card {
    border-left: 3px solid #51d68a;
}

.event-card.blue-card,
.weekly-event-card.blue-card { border-left-color: #54d98f; }
.event-card.green-card,
.weekly-event-card.green-card { border-left-color: #30d4c3; }
.event-card.purple-card,
.weekly-event-card.purple-card { border-left-color: #a977ff; }
.event-card.yellow-card,
.weekly-event-card.yellow-card { border-left-color: #ffa45f; }

.event-tag,
.directory-tag,
.town-news-pill {
    min-height: 20px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 750;
}

.event-tag-sport,
.directory-tag-shop {
    background: #e8f1ff;
    border-color: #bfd7ff;
    color: #2965d9;
}

.event-tag-market,
.event-tag-wellness,
.directory-tag-wellness {
    background: #dffaf0;
    border-color: #aae9d5;
    color: #168272;
}

.event-tag-social,
.directory-tag-bar {
    background: #f1e5ff;
    border-color: #d7baff;
    color: #7a37dc;
}

.directory-tag-restaurant {
    background: #fff1df;
    border-color: #ffc98a;
    color: #c85a1c;
}

.event-card h3,
.weekly-event-card h3,
.directory-card h2,
.news-card h3,
.town-news-card h2 {
    font-size: 1.08rem;
}

.event-card p,
.weekly-event-card p,
.directory-card p,
.news-card p,
.town-news-card p {
    line-height: 1.55;
}

.event-meta,
.directory-card-meta,
.town-news-meta {
    color: #6b7b8d;
    font-size: 0.78rem;
}

.event-meta span::before,
.weekly-event-card .event-meta span::before {
    width: 0;
    height: 0;
    background: transparent;
}

.directory-card {
    min-height: 0;
    overflow: hidden;
}

.directory-card-image,
.directory-image-placeholder {
    height: 196px;
}

.directory-card-content {
    gap: 11px;
    padding: 18px;
}

.directory-card-meta {
    margin-top: auto;
    padding: 0;
    background: transparent;
}

.town-news-alerts {
    border-top: 1px solid rgba(236, 228, 216, 0.8);
}

.town-news-alerts .news-list,
.town-news-list {
    gap: 10px;
}

.news-card,
.town-news-card {
    background: #fffaf2;
}

.news-card-alert,
.town-news-card-roadworks {
    background: #fff7ee;
    border-color: #ffd4a3;
}

.news-card-info,
.town-news-card-community,
.town-news-card-municipal,
.town-news-card-lost-found {
    background: #fffde8;
    border-color: #f7e47c;
}

.news-card-urgent,
.town-news-card-security {
    background: #fff4f4;
    border-color: #ffc7c7;
}

.town-news-card {
    border-left-width: 1px;
    grid-template-columns: 28px 1fr;
    padding: 16px 18px;
}

.town-news-card.has-image {
    grid-template-columns: 28px 1fr 110px;
}

.town-news-icon {
    width: 22px;
    height: 22px;
    background: transparent;
    color: currentColor;
}

.town-news-meta {
    padding: 0;
    background: transparent;
}

.footer-inner {
    background: #1d272d;
}

@media (max-width: 980px) {
    .section-header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .hero {
        min-height: 660px;
        align-items: center;
    }

    .hero::after {
        bottom: 18%;
    }

    .hero-inner::after {
        margin-left: -170px;
    }

    .quick-access-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card {
        align-items: center;
        justify-content: center;
        height: 84px;
    }
}

@media (max-width: 520px) {
    .hero-inner::before {
        font-size: 0.62rem;
    }

    .hero-inner::after {
        display: none;
    }

    .hero h1 {
        font-size: clamp(2.65rem, 14vw, 3.85rem);
    }

    .quick-access-buttons {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   FINAL SLICK SURFER TOWN THEME
   ==========================================
   Clean, professional, soft coastal styling with a surf-town feel.
   This intentionally overrides the earlier experiments.
   ========================================== */

:root {
    --bg: #f6f8f7;
    --surface: #ffffff;
    --surface-muted: #f1f6f5;
    --surface-soft: #f8fbfa;
    --text: #0f1f2a;
    --text-muted: #5f7280;
    --border: #dfe9e7;
    --border-strong: #c7d8d5;
    --primary: #0f7f98;
    --primary-dark: #07556a;
    --primary-soft: #e7f5f7;
    --accent: #e49a67;
    --accent-soft: #fff3ea;
    --sand: #efe3d0;
    --sea-glass: #dff4ef;
    --radius: 10px;
    --shadow: 0 18px 42px rgba(10, 40, 52, 0.1);
    --shadow-soft: 0 10px 26px rgba(10, 40, 52, 0.06);
    --container: 1120px;
}

body {
    background:
        linear-gradient(180deg, #ffffff 0, #f6f8f7 360px),
        var(--bg);
    color: var(--text);
}

.navbar {
    height: 72px;
    padding: 0 clamp(20px, 4vw, 58px);
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(223, 233, 231, 0.92);
    box-shadow: 0 6px 22px rgba(10, 40, 52, 0.045);
    backdrop-filter: blur(18px);
}

.brand-text strong {
    color: var(--text);
}

.brand-text small {
    color: var(--text-muted);
}

.nav-links a {
    border-radius: 999px;
    color: #526a77;
    font-weight: 700;
}

.nav-links a:hover,
.nav-links a.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

#search-btn {
    border: 1px solid var(--border);
    background: #ffffff;
    box-shadow: none;
}

#search-btn:hover {
    background: var(--primary-soft);
}

.hero {
    min-height: min(740px, calc(100vh - 72px));
    align-items: center;
    background-image:
        linear-gradient(90deg, rgba(6, 32, 43, 0.64), rgba(6, 32, 43, 0.34) 46%, rgba(6, 32, 43, 0.1)),
        linear-gradient(180deg, rgba(6, 32, 43, 0.08), rgba(6, 32, 43, 0.34)),
        url("../images/hero.jpg");
    background-position: center;
}

.hero::after,
.hero-inner::before,
.hero-inner::after,
.card::before {
    content: none;
    display: none;
}

.hero-inner {
    width: min(100% - 48px, var(--container));
    padding-top: 0;
}

.hero h1 {
    max-width: 660px;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(3.3rem, 6.5vw, 5.8rem);
    line-height: 0.98;
    letter-spacing: 0;
    text-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

.hero h1 .hero-accent {
    color: #7fc4df;
}

.hero p {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.08rem;
    line-height: 1.65;
}

.hero-buttons {
    gap: 12px;
    margin-top: 30px;
}

.hero-btn,
.explore-cta-button,
.section-link {
    border-radius: 999px;
}

.hero-btn {
    min-height: 42px;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 800;
}

.hero-btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 127, 152, 0.22);
}

.hero-btn-primary::before {
    content: "";
    display: none;
}

.hero-btn-primary:hover {
    background: var(--primary-dark);
}

.hero-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
}

.quick-access,
.events-preview,
.featured-businesses,
.town-news-alerts,
.explore-inner {
    max-width: var(--container);
}

.quick-access {
    padding-top: 26px;
}

.section-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px;
    padding-top: 58px;
    margin-bottom: 28px;
    text-align: left;
}

.quick-access .section-header {
    display: flex;
    text-align: center;
}

.section-header h2,
.whats-hero h1,
.directory-hero h1,
.contact-hero h1,
.town-news-hero h1,
.page-hero h1,
.explore-section h2,
.explore-cta h2 {
    color: var(--text);
    font-size: clamp(1.9rem, 3vw, 2.55rem);
    line-height: 1.06;
    letter-spacing: 0;
}

.section-header p,
.whats-hero p,
.directory-hero p,
.contact-hero p,
.town-news-hero p,
.page-hero p,
.event-card p,
.weekly-event-card p,
.directory-card p,
.news-card p,
.town-news-card p,
.explore-spot-card p,
.explore-tip-card p {
    color: var(--text-muted);
}

.section-link {
    min-height: 34px;
    padding: 0 12px;
    color: var(--primary-dark);
    font-size: 0.88rem;
    font-weight: 800;
}

.section-link:hover {
    background: var(--primary-soft);
}

.quick-access-buttons {
    max-width: var(--container);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.card {
    height: 88px;
    flex-direction: row;
    gap: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--primary-dark);
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: var(--shadow-soft);
}

.restaurants,
.shops,
.accommodation,
.surf-schools,
.wellness,
.whats-happening,
.town-news,
.explore {
    background: #ffffff;
}

.restaurants { color: #c76a3b; }
.shops { color: #285f9f; }
.accommodation { color: #35745f; }
.surf-schools { color: var(--primary); }
.wellness { color: #168272; }
.whats-happening { color: #96673d; }
.town-news { color: #9b761f; }
.explore { color: #47636f; }

.card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.event-grid,
.business-grid,
.directory-grid,
.explore-spot-grid,
.explore-tip-grid {
    gap: 20px;
}

.event-card,
.weekly-event-card,
.directory-card,
.news-card,
.town-news-card,
.explore-spot-card,
.explore-tip-card,
.contact-card,
.directory-info-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.event-card:hover,
.weekly-event-card:hover,
.directory-card:hover,
.news-card:hover,
.explore-spot-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.event-card,
.weekly-event-card {
    border-left: 3px solid var(--primary);
}

.event-card.blue-card,
.weekly-event-card.blue-card { border-left-color: #35b7ce; }
.event-card.green-card,
.weekly-event-card.green-card { border-left-color: #37b995; }
.event-card.purple-card,
.weekly-event-card.purple-card { border-left-color: #8d91d9; }
.event-card.yellow-card,
.weekly-event-card.yellow-card { border-left-color: var(--accent); }

.event-card h3,
.weekly-event-card h3,
.directory-card h2,
.news-card h3,
.town-news-card h2,
.explore-spot-card h3,
.explore-tip-card h3 {
    color: var(--text);
}

.event-tag,
.directory-tag,
.town-news-pill,
.town-news-priority {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.event-tag,
.directory-tag {
    background: var(--primary-soft);
    border-color: #b9dce4;
    color: var(--primary-dark);
}

.directory-tag-restaurant {
    background: var(--accent-soft);
    border-color: #f1c6a8;
    color: #aa562b;
}

.directory-tag-accommodation,
.directory-tag-tourism,
.directory-tag-wellness,
.event-tag-wellness,
.event-tag-market {
    background: var(--sea-glass);
    border-color: #b8dfd6;
    color: #176f61;
}

.event-tag-social,
.directory-tag-bar {
    background: #eef0ff;
    border-color: #c7ccf0;
    color: #575caf;
}

.blue-card,
.green-card,
.purple-card,
.yellow-card {
    background: #ffffff;
}

.event-meta,
.directory-card-meta,
.town-news-meta {
    color: #6a7c88;
    font-size: 0.8rem;
}

.event-meta span::before,
.weekly-event-card .event-meta span::before {
    content: "";
    display: none;
}

.directory-card {
    min-height: 0;
    overflow: hidden;
}

.directory-card-image,
.directory-image-placeholder {
    height: 205px;
}

.directory-card-content {
    gap: 12px;
    padding: 19px;
}

.directory-card .directory-tag {
    width: fit-content;
}

.directory-card-meta,
.town-news-meta {
    padding: 0;
    background: transparent;
}

.whats-page,
.directory-inner,
.contact-inner,
.town-news-inner,
.page-hero-inner {
    width: min(100% - 44px, var(--container));
}

.whats-hero,
.directory-hero,
.contact-hero,
.town-news-hero,
.page-hero {
    border-bottom: 1px solid var(--border);
}

.day-filter button,
.directory-category-filter button,
.offerings-category-filter button,
.town-news-filters button,
.accommodation-type-filter button {
    min-height: 38px;
    border-radius: 999px;
    border-color: var(--border);
    background: #ffffff;
    color: #506572;
    box-shadow: none;
}

.day-filter button:hover,
.directory-category-filter button:hover,
.offerings-category-filter button:hover,
.town-news-filters button:hover,
.accommodation-type-filter button:hover {
    border-color: #b9dce4;
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.day-filter button.selected,
.directory-category-filter button.selected,
.offerings-category-filter button.selected,
.town-news-filters button.selected,
.accommodation-type-filter button.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.site-search-form input,
.directory-search input,
.contact-form input,
.contact-form select,
.contact-form textarea,
.filter-group select {
    border-color: var(--border);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: none;
}

.site-search-form button,
.contact-submit,
.explore-cta-primary {
    border-radius: 999px;
    background: var(--primary);
}

.accommodation-clear-filters {
    width: fit-content;
    min-height: 38px;
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--primary-dark);
    font-size: 0.88rem;
    font-weight: 800;
}

.accommodation-clear-filters:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.contact-submit:hover,
.site-search-form button:hover,
.explore-cta-primary:hover {
    background: var(--primary-dark);
}

.town-news-card {
    grid-template-columns: 34px 1fr;
    border-left-width: 1px;
}

.town-news-card.has-image {
    grid-template-columns: 34px 1fr 118px;
}

.news-card-alert,
.town-news-card-roadworks {
    background: #fffaf6;
    border-color: #efd8c5;
}

.news-card-info,
.town-news-card-community,
.town-news-card-municipal,
.town-news-card-lost-found {
    background: #fffef7;
    border-color: #eadfa9;
}

.news-card-urgent,
.town-news-card-security {
    background: #fff8f8;
    border-color: #ecc8c8;
}

.town-news-icon {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.explore-hero {
    background-image:
        linear-gradient(180deg, rgba(6, 32, 43, 0.1), rgba(6, 32, 43, 0.58)),
        url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1800&q=80");
}

.explore-tips-section {
    background: var(--surface-muted);
}

.footer-inner {
    background: #111d24;
}

.footer-column p,
.footer-column a,
.footer-bottom p {
    color: rgba(255, 255, 255, 0.68);
}

.footer-column h3,
.footer-brand-column h2 {
    color: #ffffff;
}

@media (max-width: 980px) {
    .navbar {
        height: auto;
    }

    .section-header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .hero {
        min-height: 650px;
        align-items: center;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-btn {
        width: 100%;
    }

    .quick-access-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .whats-page,
    .directory-inner,
    .contact-inner,
    .town-news-inner,
    .page-hero-inner {
        width: min(100% - 30px, var(--container));
    }
}

@media (max-width: 520px) {
    .quick-access {
        padding-inline: 14px;
    }

    .quick-access-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .card {
        height: auto;
        min-height: 76px;
        justify-content: center;
        padding: 12px 8px;
        text-align: center;
        font-size: 0.82rem;
        line-height: 1.2;
    }
}

/* ==========================================
   TARGETED POLISH REQUESTS
   ========================================== */

footer {
    background: #111d24;
    color: rgba(255, 255, 255, 0.78);
    padding: 56px 0 34px;
}

.footer-inner {
    background: transparent;
    max-width: var(--container);
    padding: 0 24px;
}

.footer-top {
    gap: 54px;
}

.events-preview .event-grid,
.featured-businesses .business-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.events-preview .event-card {
    height: 100%;
    min-height: 320px;
    border-left: 1px solid var(--border);
    display: flex;
    overflow: hidden;
}

.events-preview .event-card.blue-card,
.events-preview .event-card.green-card,
.events-preview .event-card.purple-card,
.events-preview .event-card.yellow-card {
    border-left-color: var(--border);
}

.events-preview .event-card > img {
    width: calc(100% + 44px);
    max-width: none;
    height: 165px;
    margin: -22px -22px 0;
    object-fit: cover;
    object-position: center center;
    align-self: center;
    display: block;
    flex: 0 0 auto;
}

.events-preview .event-card .event-meta {
    margin-top: auto;
}

.business-card {
    height: 100%;
    min-height: 360px;
}

.business-card-image,
.directory-card-image,
.offering-card-image {
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
}

.business-card-content {
    flex: 1;
}

.business-card-content .business-meta,
.directory-card-content .directory-card-meta,
.offering-card-content .offering-card-meta {
    margin-top: auto;
}

.clickable-image,
[data-enlarge-image],
.town-news-image img,
.news-card-image {
    cursor: zoom-in;
}

[data-enlarge-image]:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
}

.news-image-modal {
    background: rgba(5, 18, 25, 0.72);
    padding: 24px;
}

.news-image-modal-img {
    max-width: min(100%, 1080px);
    max-height: 86vh;
    object-fit: contain;
    border-radius: 10px;
}
/* Keep the anti-spam field available to simple bots but outside the visible page. */
.contact-honeypot {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.contact-consent {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    margin: 18px 0;
}

.contact-consent input {
    flex: 0 0 auto;
    margin-top: 4px;
}

/* ==========================================
   WHAT'S HAPPENING — BASE44 REFERENCE STYLE
   ==========================================
   Page-scoped overrides keep every other page unchanged.
   ========================================== */

body.events-page {
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    background: #faf8f5;
    color: #1d242b;
}

@media (min-width: 981px) {
    .events-page .navbar {
        height: 80px;
        background: rgba(250, 248, 245, 0.96);
        border-top: 0;
        border-bottom-color: #e7e1da;
        box-shadow: none;
    }
}

.events-page #search-btn {
    border-color: transparent;
    background: transparent;
}

.events-page .whats-page {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 48px 24px;
}

.events-page .whats-hero {
    width: 100%;
    margin: 0 0 40px;
    padding: 0;
    border-bottom: 0;
}

.events-page .whats-hero h1 {
    margin: 0;
    color: #1d242b;
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 40px;
}

.events-page .whats-hero p {
    margin: 8px 0 0;
    color: #67737e;
    font-size: 16px;
    line-height: 24px;
}

.events-page .weekly-guide {
    width: 100%;
    margin: 0;
    padding: 0;
}

.events-page .day-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    max-width: 100%;
    margin: 0 0 32px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(241, 238, 234, 0.5);
}

.events-page .day-filter button {
    min-height: 28px;
    padding: 4px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: #67737e;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.events-page .day-filter button:hover {
    border-color: transparent;
    background: rgba(250, 248, 245, 0.72);
    color: #1d242b;
}

.events-page .day-filter button.selected {
    border-color: transparent;
    background: #faf8f5;
    color: #1d242b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.events-page .day-section {
    margin: 0;
    scroll-margin-top: 96px;
}

.events-page .day-section + .day-section {
    margin-top: 40px;
}

.events-page .day-section h2 {
    gap: 8px;
    margin: 0 0 16px;
    color: #1d242b;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 28px;
}

.events-page .day-section h2::before {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    background: #7fabc0;
}

.events-page .weekly-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.events-page .weekly-event-card {
    display: block;
    min-height: 191px;
    padding: 24px;
    border: 1px solid;
    border-left-width: 1px;
    border-radius: 16px;
    box-shadow: none;
    color: #1d242b;
}

.events-page #monday .weekly-event-card {
    border-color: #bfdbfe;
    background: linear-gradient(to right bottom, rgba(59, 130, 246, 0.10), rgba(59, 130, 246, 0.05));
}

.events-page #tuesday .weekly-event-card {
    border-color: #99f6e4;
    background: linear-gradient(to right bottom, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.05));
}

.events-page #wednesday .weekly-event-card {
    border-color: #e9d5ff;
    background: linear-gradient(to right bottom, rgba(168, 85, 247, 0.10), rgba(168, 85, 247, 0.05));
}

.events-page #thursday .weekly-event-card {
    border-color: #fed7aa;
    background: linear-gradient(to right bottom, rgba(249, 115, 22, 0.10), rgba(249, 115, 22, 0.05));
}

.events-page #friday .weekly-event-card {
    border-color: #fbcfe8;
    background: linear-gradient(to right bottom, rgba(236, 72, 153, 0.10), rgba(236, 72, 153, 0.05));
}

.events-page #saturday .weekly-event-card {
    border-color: #bbf7d0;
    background: linear-gradient(to right bottom, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.05));
}

.events-page #sunday .weekly-event-card {
    border-color: #fde68a;
    background: linear-gradient(to right bottom, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.05));
}

.events-page .weekly-event-card:hover {
    border-color: inherit;
    box-shadow: none;
    transform: none;
}

.events-page .weekly-event-card.image-event-card {
    padding: 24px;
    overflow: visible;
}

.events-page .image-event-card img {
    width: 100%;
    max-width: 100%;
    height: 160px;
    margin: 0 0 16px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
}

.events-page .weekly-event-card .event-tag {
    display: inline-flex;
    min-height: 22px;
    max-width: 100%;
    padding: 2px 10px;
    border: 1px solid #e7e1da;
    border-radius: 10px;
    background: #f1eeea;
    color: #67737e;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: normal;
}

.events-page .weekly-event-card .event-tag-sport {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8;
}

.events-page .weekly-event-card .event-tag-wellness {
    border-color: #99f6e4;
    background: #ccfbf1;
    color: #0f766e;
}

.events-page .weekly-event-card .event-tag-social {
    border-color: #ddd6fe;
    background: #ede9fe;
    color: #6d28d9;
}

.events-page .weekly-event-card .event-tag-market {
    border-color: #bbf7d0;
    background: #dcfce7;
    color: #15803d;
}

.events-page .weekly-event-card .event-tag-kids {
    border-color: #fde68a;
    background: #fef3c7;
    color: #b45309;
}

.events-page .weekly-event-card .event-tag-community {
    border-color: #a7f3d0;
    background: #d1fae5;
    color: #047857;
}

.events-page #friday .weekly-event-card .event-tag:not(.event-tag-sport) {
    border-color: #fbcfe8;
    background: #fce7f3;
    color: #be185d;
}

.events-page .weekly-event-card h3 {
    margin: 8px 0 0;
    color: #1d242b;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 28px;
}

.events-page .weekly-event-card p {
    margin: 8px 0 0;
    color: #67737e;
    font-size: 14px;
    line-height: 20px;
}

.events-page .weekly-event-card .event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 16px;
    color: #67737e;
    font-size: 12px;
    line-height: 16px;
}

.events-page .weekly-event-card .event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow-wrap: anywhere;
}

.events-page .weekly-event-card .event-meta span::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.events-page .weekly-event-card .event-meta span:nth-child(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.events-page .weekly-event-card .event-meta span:nth-child(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.events-page .weekly-event-card .event-meta span:nth-child(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
    .events-page .whats-page {
        width: 100%;
        padding: 40px 16px;
    }

    .events-page .whats-hero {
        margin-bottom: 32px;
    }

    .events-page .whats-hero h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .events-page .day-filter {
        row-gap: 4px;
    }

    .events-page .weekly-event-grid {
        grid-template-columns: 1fr;
    }

    .events-page .weekly-event-card,
    .events-page .weekly-event-card.image-event-card {
        padding: 24px;
    }
}
/* Live-data failures stay visible without changing the existing page layout. */
.content-load-error {
    max-width: 1100px;
    margin: 1rem auto;
    padding: 0.9rem 1rem;
    border: 1px solid #b42318;
    border-radius: 0.5rem;
    background: #fff1f0;
    color: #7a271a;
}

/* ==========================================
   OWNER REGISTRATION AND DASHBOARD
   ========================================== */
.account-page { background: #f7f5f1; }
.account-page [hidden] { display: none !important; }
.account-shell { width: min(100% - 40px, 1120px); margin: 0 auto; padding: 48px 0 80px; }
.account-hero { max-width: 780px; margin-bottom: 30px; }
.account-hero h1 { margin: 8px 0 12px; color: var(--text); font-family: var(--font-serif, Georgia, serif); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; }
.account-hero p { color: #5d707b; font-size: 1.05rem; line-height: 1.7; }
.account-card { margin: 20px 0; padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgba(26, 63, 75, .06); }
.owner-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px 0 32px; }
.owner-path-grid.is-signed-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.owner-path-card { display: flex; min-height: 230px; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgba(26, 63, 75, .06); color: var(--text); text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.owner-path-card:hover, .owner-path-card:focus-visible { border-color: var(--primary); box-shadow: 0 16px 38px rgba(26, 63, 75, .12); transform: translateY(-2px); outline: none; }
.owner-path-card h2 { margin: 2px 0 0; font-size: 1.25rem; }
.owner-path-card p { margin: 0; color: #687b86; line-height: 1.6; }
.owner-path-card strong { margin-top: auto; color: var(--primary-dark); }
.account-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.account-card-heading h2, .account-card h2 { margin: 4px 0 8px; color: var(--text); }
.account-card-heading p, .account-card > p { margin: 0; color: #687b86; }
.account-step { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.account-message { display: none; margin: 16px 0; padding: 14px 16px; border-radius: 10px; font-weight: 700; }
.account-message.is-visible { display: block; }
.account-message.is-info { border: 1px solid #b9dce4; background: var(--primary-soft); color: var(--primary-dark); }
.account-message.is-success { border: 1px solid #a8dacd; background: #effbf7; color: #176f61; }
.account-message.is-error { border: 1px solid #ecc8c8; background: #fff5f5; color: #8d2d2d; }
.account-form { display: grid; gap: 22px; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.account-grid label, .account-form > label, .lookup-panel > label { display: grid; gap: 7px; color: #344b57; font-size: .9rem; font-weight: 800; }
.account-grid input, .account-grid select, .account-grid textarea, .account-form > label input, .lookup-panel input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-weight: 500; }
.account-grid textarea { resize: vertical; }
.account-grid input:focus, .account-grid select:focus, .account-grid textarea:focus, .lookup-panel input:focus { border-color: var(--primary); outline: 3px solid rgba(46, 126, 145, .14); }
.password-input-wrap { display: block; position: relative; }
.account-grid .password-input-wrap input { padding-right: 74px; }
.password-visibility-button { background: transparent; border: 0; color: var(--primary-dark); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; padding: 7px 10px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.password-visibility-button:focus-visible { border-radius: 6px; outline: 3px solid rgba(46, 126, 145, .2); }
.account-grid label small, .account-form label small { color: #71838d; font-weight: 500; }
.account-span-2 { grid-column: 1 / -1; }
.account-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-choice { position: relative; display: block; cursor: pointer; }
.account-choice input { position: absolute; opacity: 0; pointer-events: none; }
.account-choice span { display: flex; min-height: 92px; flex-direction: column; justify-content: center; gap: 5px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--text); }
.account-choice small { color: #6d7e88; font-weight: 500; line-height: 1.4; }
.account-choice input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(46, 126, 145, .15); }
.account-choice input:focus-visible + span { outline: 3px solid rgba(46, 126, 145, .25); }
.account-fieldset { display: grid; gap: 18px; margin: 0; padding: 22px; border: 1px solid var(--border); border-radius: 14px; }
.account-fieldset legend { padding: 0 8px; color: var(--text); font-size: 1.05rem; font-weight: 800; }
.account-check { display: flex !important; grid-template-columns: auto 1fr !important; align-items: flex-start; gap: 10px !important; }
.account-check input { width: 18px !important; min-height: 18px !important; margin-top: 2px; }
.account-check span { display: grid; gap: 4px; }
.account-check small { color: #6d7e88; font-weight: 500; line-height: 1.4; }
.account-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.account-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 800; text-decoration: none; }
.account-button:disabled { cursor: wait; opacity: .6; }
.account-button-primary { background: var(--primary); color: #fff; }
.account-button-primary:hover { background: var(--primary-dark); }
.account-button-secondary { border-color: var(--border); background: #fff; color: var(--primary-dark); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--primary-dark); cursor: pointer; font: inherit; text-decoration: underline; }
.form-help { margin: 0; color: #6d7f89; font-size: .86rem; }
.lookup-panel { display: grid; gap: 12px; padding: 20px; border-radius: 14px; background: #f6fafb; }
.lookup-results { display: grid; gap: 8px; }
.lookup-results button { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); text-align: left; cursor: pointer; }
.lookup-results button small { color: #6d7e88; }
.lookup-results button:hover, .lookup-results button.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.account-duplicate-warning { padding: 14px; border: 1px solid #d8a93d; border-radius: 12px; background: #fff9e8; }
.account-duplicate-warning p { margin: 5px 0 10px; color: #665523; }
.account-duplicate-warning button + button { margin-top: 6px; }
.account-card.is-unavailable > h2::after { content: " — permission required"; color: #8a5a21; font-size: .75em; font-weight: 600; }
.account-success { padding: 38px; text-align: center; }
.account-success .account-button { margin-top: 18px; }
.dashboard-account-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.dashboard-account-bar p { margin: 0; }
.owner-tabs { display: flex; gap: 8px; margin: 20px 0; padding: 6px; overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.owner-tabs button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: #586c77; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 800; white-space: nowrap; }
.owner-tabs button.is-active { background: var(--primary); color: #fff; }
.owner-panel { display: none; }
.owner-panel.is-active { display: block; }
.dashboard-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.dashboard-stat-grid article { display: grid; gap: 6px; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.dashboard-stat-grid strong { color: var(--primary-dark); font-size: 2rem; }
.dashboard-stat-grid span { color: #6c7d87; font-size: .85rem; font-weight: 700; }
.owner-list { display: grid; gap: 12px; margin-top: 18px; }
.owner-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.owner-item.is-unread { border-left: 4px solid var(--primary); }
.owner-item h3 { margin: 7px 0 4px; color: var(--text); font-size: 1rem; }
.owner-item p { margin: 0; color: #667984; }
.owner-item dl { display: grid; grid-template-columns: repeat(3, auto); gap: 18px; margin: 0; }
.owner-item dl div { display: grid; gap: 3px; }
.owner-item dt { color: #73848e; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.owner-item dd { margin: 0; color: var(--text); font-size: .82rem; }
.insight-card-type { margin: 0 0 4px; color: var(--primary-dark); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.owner-public-listings { gap: 24px; }
.owner-public-listing { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(26, 63, 75, .08); }
.owner-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: #f7faf9; }
.owner-listing-heading-actions { display: flex; align-items: end; gap: 12px; }
.owner-listing-picker { display: grid; gap: 5px; min-width: 260px; color: #5e727d; font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.owner-listing-picker select { min-height: 44px; padding: 9px 36px 9px 12px; border: 1px solid #cbdadd; border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-size: .88rem; font-weight: 700; text-transform: none; }
.owner-live-listing-preview { padding: 26px 0 30px; }
.owner-live-listing-preview h1 { margin: 0 0 8px; color: #101827; font-family: var(--font-serif); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
.owner-live-listing-preview .directory-detail-image { display: block; width: 100%; height: min(70vh, 640px); max-height: 640px; object-fit: contain; object-position: center; background-color: #f4f1ea; }
.owner-live-listing-preview .directory-image-placeholder { display: grid; place-items: center; }
.owner-live-listing-preview .directory-image-placeholder span { color: #0a6170; font-family: var(--font-serif); font-size: 5rem; }
.owner-live-listing-preview .directory-tag { width: fit-content; margin-bottom: 14px; }
.owner-main-image-editor { margin-bottom: 28px; }
.owner-main-image-editor .directory-detail-image { margin-bottom: 12px; }
.owner-image-edit-bar, .owner-gallery-add, .owner-inline-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.owner-image-edit-bar input[type="file"], .owner-gallery-add input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.owner-inline-field { display: grid; gap: 6px; }
.owner-inline-field > span, .owner-edit-card label { color: #557089; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.owner-inline-field > small { color: #687b86; font-size: .82rem; font-weight: 500; line-height: 1.45; }
.owner-inline-field input, .owner-inline-field textarea, .owner-edit-card input { width: 100%; border: 1px solid #cbdadd; border-radius: 9px; background: #fff; color: #101827; font: inherit; text-transform: none; transition: border-color .15s ease, box-shadow .15s ease; }
.owner-inline-field input:focus, .owner-inline-field textarea:focus, .owner-edit-card input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20, 130, 151, .12); }
.owner-inline-category { width: min(100%, 360px); margin-bottom: 12px; }
.owner-inline-category input { padding: 7px 11px; border-radius: 999px; color: #075e70; font-size: .82rem; font-weight: 800; }
.owner-inline-title { margin-bottom: 8px; }
.owner-inline-title input { padding: 8px 10px; font-family: var(--font-serif); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.owner-inline-website { max-width: 760px; margin: 12px 0 22px; padding: 16px; border: 1px solid #c9dadd; border-radius: 12px; background: #f5fafb; }
.owner-inline-website input { padding: 11px 12px; }
.owner-inline-description { margin: 18px 0 24px; }
.owner-inline-description textarea { min-height: 120px; padding: 12px; color: #536975; font-size: 1rem; line-height: 1.7; resize: vertical; }
.owner-inline-about textarea { min-height: 150px; padding: 12px; line-height: 1.65; resize: vertical; }
.owner-edit-card { min-height: 94px; }
.owner-edit-card label { display: grid; gap: 7px; }
.owner-edit-card input { min-height: 40px; padding: 8px 10px; font-size: .9rem; font-weight: 600; letter-spacing: 0; }
.owner-inline-tags { margin: 24px 0; }
.owner-inline-tags input { padding: 11px 12px; }
.owner-gallery-add { margin-top: 14px; }
.owner-inline-save { justify-content: flex-end; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.owner-listing-hero { min-height: 280px; max-height: 480px; background: #f0eee6; }
.owner-listing-hero img { width: 100%; height: 100%; min-height: 280px; max-height: 480px; object-fit: cover; display: block; }
.owner-image-placeholder { display: grid; min-height: 280px; place-items: center; color: #687b86; font-weight: 700; }
.owner-listing-body { padding: 26px; }
.owner-listing-body h3 { margin: 10px 0 8px; color: var(--text); font-family: var(--heading-font); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; }
.owner-listing-description { max-width: 780px; margin: 18px 0; color: #536975; font-size: 1rem; line-height: 1.7; }
.owner-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.owner-preview-actions a, .owner-preview-actions button { padding: 9px 13px; border: 1px solid #9ab5bf; border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: .82rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.owner-listing-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 22px 0; }
.owner-listing-info > div { display: grid; gap: 5px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.owner-listing-info span, .owner-listing-tags > span { color: #6c7e88; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.owner-listing-info strong { overflow-wrap: anywhere; font-size: .9rem; }
.owner-listing-tags { display: grid; gap: 10px; margin: 22px 0; }
.owner-listing-tags > div { display: flex; flex-wrap: wrap; gap: 8px; }
.owner-listing-tags > div > span { padding: 6px 10px; border: 1px solid #b9dce4; border-radius: 999px; background: var(--primary-soft); color: #075e70; font-size: .78rem; font-weight: 800; }
.owner-listing-tags em { color: #71818a; font-size: .88rem; }
.owner-gallery-editor { display: grid; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.owner-gallery-editor h4 { margin: 0 0 4px; color: var(--text); font-size: 1rem; }
.owner-gallery-editor p { margin: 0; color: #687b86; font-size: .86rem; }
.owner-gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.owner-gallery-item { width: 142px; overflow: hidden; margin: 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.owner-gallery-item.is-pending { border: 2px dashed var(--primary); background: #f3fbfc; }
.owner-gallery-pending-label { color: var(--primary) !important; }
.owner-gallery-preview { display: block; width: 100%; padding: 0; border: 0; background: #edf2f2; cursor: grab; touch-action: none; }
.owner-gallery-preview:active { cursor: grabbing; }
.owner-gallery-item.is-dragging { opacity: .45; }
.owner-gallery-item.is-drop-target { outline: 3px solid var(--primary); outline-offset: 3px; transform: translateY(-2px); }
.owner-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.owner-gallery-preview:hover img, .owner-gallery-preview:focus-visible img { opacity: .82; }
.owner-gallery-item figcaption { display: grid; gap: 9px; padding: 10px; }
.owner-gallery-item figcaption > span:first-child { color: #596e79; font-size: .76rem; font-weight: 800; }
.owner-picture-controls { display: flex; flex-wrap: wrap; gap: 5px; }
.owner-picture-controls button { padding: 6px 8px; border: 1px solid #c9d8dd; border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; }
.owner-picture-controls button:hover { border-color: var(--primary); color: var(--primary); }
.owner-picture-controls button:disabled { cursor: default; opacity: .35; }
.owner-gallery-empty { grid-column: 1 / -1; padding: 16px; border: 1px dashed #c4d5db; border-radius: 10px; }

/* What's Happening: live week and month calendar */
.events-page .events-calendar-controls { max-width: 1180px; margin: 0 auto 24px; padding: 22px; border: 1px solid #d7e3e5; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(31, 61, 70, .06); }
.events-view-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #edf4f4; }
.events-view-switch button, .events-range-navigation button { border: 1px solid transparent; background: transparent; color: #183643; font: inherit; font-weight: 800; cursor: pointer; }
.events-view-switch button { min-width: 90px; padding: 10px 18px; border-radius: 999px; }
.events-view-switch button.selected { background: var(--primary); color: #fff; }
.events-range-navigation { display: grid; grid-template-columns: minmax(92px, auto) 1fr minmax(92px, auto); align-items: center; gap: 16px; margin-top: 18px; }
.events-range-navigation h2 { margin: 0; color: var(--text); font-family: "Playfair Display", serif; font-size: clamp(1.45rem, 3vw, 2rem); text-align: center; }
.events-range-navigation button { padding: 10px 15px; border-color: #c8d8dc; border-radius: 10px; background: #fff; }
.events-range-navigation button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.events-range-navigation button:disabled { cursor: default; opacity: .4; }
.events-calendar-message { min-height: 1.4em; margin: 7px 0 0; color: #a34625; font-weight: 750; text-align: center; }
.events-page [data-calendar-panel][hidden] { display: none !important; }
.events-empty-day { margin: 0; padding: 18px; border: 1px dashed #c8d8dc; border-radius: 12px; color: #6d7f89; background: #f9fbfb; }
.events-page .monthly-guide { max-width: 1180px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; box-shadow: 0 15px 40px rgba(31, 61, 70, .07); }
.month-weekdays, .month-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-weekdays { border: 1px solid #d8e3e5; border-bottom: 0; border-radius: 12px 12px 0 0; overflow: hidden; background: #edf5f5; }
.month-weekdays span { padding: 10px 5px; color: #47606b; font-size: .76rem; font-weight: 850; text-align: center; text-transform: uppercase; }
.month-calendar-grid { border-top: 1px solid #d8e3e5; border-left: 1px solid #d8e3e5; }
.month-calendar-day { min-height: 145px; padding: 8px; border-right: 1px solid #d8e3e5; border-bottom: 1px solid #d8e3e5; background: #fff; }
.month-calendar-day > time { display: grid; width: 28px; height: 28px; margin-bottom: 6px; place-items: center; border-radius: 50%; color: #3f5661; font-size: .82rem; font-weight: 850; }
.month-calendar-day.is-today > time { background: var(--primary); color: #fff; }
.month-calendar-day.is-outside { background: #f7f9f9; }
.month-calendar-day.is-outside > time { color: #a8b4b8; }
.month-calendar-item { display: grid; gap: 2px; margin-top: 5px; padding: 6px; border-left: 3px solid var(--primary); border-radius: 6px; background: #eaf7f8; color: #17333f; overflow: hidden; text-decoration: none; }
.month-calendar-item.is-offering { border-left-color: #c68343; background: #fff4e8; }
.month-calendar-item:hover, .month-calendar-item:focus-visible { background: #ffe8ce; box-shadow: 0 0 0 2px rgba(198, 131, 67, .22); }
.month-calendar-item span { font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.month-calendar-item strong { overflow: hidden; font-size: .72rem; line-height: 1.25; text-overflow: ellipsis; }
.month-calendar-more { display: block; margin-top: 5px; color: #5d717b; font-weight: 750; }

@media (max-width: 700px) {
    .events-page .events-calendar-controls, .events-page .monthly-guide { margin-right: 14px; margin-left: 14px; padding: 16px; }
    .events-view-switch { display: flex; }
    .events-view-switch button { flex: 1; }
    .events-range-navigation { grid-template-columns: 76px 1fr 76px; gap: 8px; }
    .events-range-navigation button { padding: 9px 7px; font-size: .78rem; }
    .events-range-navigation h2 { font-size: 1.15rem; }
    .events-page .monthly-guide { padding: 10px; overflow-x: auto; }
    .month-weekdays, .month-calendar-grid { min-width: 690px; }
    .month-calendar-day { min-height: 125px; }
}
.business-gallery-strip { display: flex; flex-wrap: wrap; gap: 9px; margin: -22px 0 28px; }
.business-gallery-strip button { width: 76px; height: 76px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 9px; background: #f1f3f1; cursor: pointer; }
.business-gallery-strip button:hover, .business-gallery-strip button:focus-visible, .business-gallery-strip button.is-active { border-color: var(--primary); outline: none; }
.business-gallery-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.status-pill { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #eef1f3; color: #536873; font-size: .7rem; font-weight: 800; text-transform: capitalize; }
.status-approved, .status-active { background: #e5f7f1; color: #176f61; }
.status-pending, .status-changes_requested { background: #fff5d7; color: #8b6410; }
.status-rejected, .status-revoked { background: #fff0f0; color: #9a3434; }
.status-past, .status-cancelled { background: #ecebea; color: #5f6668; }
.review-reason { margin-top: 8px !important; padding: 8px 10px; border-radius: 8px; background: #fff8e8; }
.owner-empty { padding: 20px; border: 1px dashed var(--border); border-radius: 10px; color: #6b7d87; text-align: center; }
.registration-image-preview { width: min(100%, 320px); max-height: 210px; margin-top: 8px; border-radius: 10px; object-fit: cover; }
.account-safe-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.admin-permission-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.admin-permission-row p { margin: 0; }

/* Visitor actions, reporting, insights and search */
.listing-actions, .compact-premium-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.listing-actions { margin: 10px 0 26px; }
.premium-action, .compact-premium-actions button { appearance: none; padding: 7px 10px; border: 1px solid #a9bdc1; border-radius: 7px; background: #fff; color: #245b64; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; text-decoration: none; }
.premium-action:hover, .compact-premium-actions button:hover { border-color: #0d6976; background: #f1f7f7; color: #0d6976; }
.premium-action:focus-visible, .compact-premium-actions button:focus-visible { outline: 3px solid rgba(13,105,118,.22); outline-offset: 2px; }
.compact-premium-actions { margin-top: 14px; position: relative; z-index: 2; }
.compact-premium-actions button { padding: 7px 10px; }
.reportable-card { position: relative; }
.card-main-link { display: contents; color: inherit; text-decoration: none; }
.reportable-card:has(> .card-main-link:focus-visible) { outline: 3px solid rgba(13,105,118,.35); outline-offset: 3px; }
.card-report-menu { position: absolute; z-index: 12; top: 12px; right: 12px; }
.card-menu-trigger { display: grid; place-items: center; width: 36px; height: 36px; padding: 0 0 8px; border: 1px solid rgba(23,63,70,.18); border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(12,50,56,.18); color: #173f46; cursor: pointer; font: 900 1.45rem/1 var(--font-sans); letter-spacing: .02em; }
.card-menu-trigger:hover, .card-menu-trigger:focus-visible, .card-menu-trigger[aria-expanded="true"] { border-color: #0d6976; background: #0d6976; color: #fff; outline: none; }
.card-report-popover { position: absolute; top: calc(100% + 7px); right: 0; width: max-content; min-width: 215px; padding: 6px; border: 1px solid #cbdadc; border-radius: 11px; background: #fff; box-shadow: 0 14px 34px rgba(9,34,38,.2); }
.card-report-popover[hidden] { display: none; }
.card-report-popover button { width: 100%; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: #823326; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 800; text-align: left; }
.card-report-popover button:hover, .card-report-popover button:focus-visible { background: #fff0ed; outline: none; }
.related-discovery { margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(13,105,118,.2); }
.related-heading > span { color: #0d6976; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.related-heading h2 { margin: 6px 0; }
.related-heading p { margin: 0 0 20px; color: #52666a; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.related-card { display: block; min-height: 154px; padding: 18px; border: 1px solid #cde2e5; border-radius: 16px; background: #fff; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.related-card:hover, .related-card:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(10,55,62,.12); }
.related-card span { color: #0d6976; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.related-card h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.related-card p { margin: 0; color: #52666a; font-size: .9rem; line-height: 1.5; }
.report-close { border: 0; background: transparent; cursor: pointer; color: #37545b; font-size: 2rem; line-height: 1; }
.report-dialog button[type="submit"], .search-page-form button { border: 0; border-radius: 9px; background: #0d6976; color: #fff; cursor: pointer; font-weight: 800; padding: 11px 14px; }
.report-modal { display: none; position: fixed; z-index: 1200; inset: 0; padding: 20px; background: rgba(9,34,38,.62); place-items: center; }
.report-modal.is-open { display: grid; }
.report-dialog { position: relative; width: min(620px,100%); max-height: 92dvh; overflow-y: auto; padding: 28px; border-radius: 18px; background: #fffdf8; box-shadow: 0 24px 70px rgba(0,0,0,.24); }
.report-close { position: absolute; top: 15px; right: 18px; }
.report-dialog form, .report-dialog label { display: grid; gap: 7px; }
.report-dialog form { gap: 15px; }
.report-dialog input, .report-dialog select, .report-dialog textarea, .search-page-form input { width: 100%; padding: 11px 12px; border: 1px solid #b8c9cc; border-radius: 8px; font: inherit; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.report-message { min-height: 1.4em; color: #17652b; font-weight: 700; }
.insights-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; }
.insight-card { padding: 18px; border: 1px solid #dce5e5; border-radius: 14px; background: #fff; }
.insight-card h3 { margin: 0 0 14px; }
.insight-card > div { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.insight-card span { padding: 10px; border-radius: 9px; background: #f3f8f8; color: #5b6f75; }
.insight-card strong { display: block; color: #0d6976; font-size: 1.4rem; }
.search-page-shell { width: min(1040px,calc(100% - 32px)); margin: 38px auto 80px; }
.search-page-form { padding: 24px; border-radius: 16px; background: #edf8f8; }
.search-page-form label { display: block; margin-bottom: 9px; font-weight: 800; }
.search-page-form > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search-page-results, .site-search-results { display: grid; gap: 12px; margin-top: 18px; }
.search-result-card, .site-search-results a { display: block; padding: 16px; border: 1px solid #d8e2e3; border-radius: 12px; background: #fff; color: #173f46; text-decoration: none; }
.search-result-card h2 { margin: 0 0 6px; font-size: 1.15rem; }
.search-result-card p, .site-search-results span { display: block; margin: 4px 0 0; color: #60747a; }

@media (max-width: 620px) {
    .report-grid, .search-page-form > div { grid-template-columns: 1fr; }
    .card-report-popover { min-width: 205px; max-width: calc(100vw - 48px); }
}
.admin-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-comparison > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #f9fafb; }
.admin-comparison h4 { margin: 0 0 8px; }

@media (max-width: 760px) {
    .account-shell { width: min(100% - 28px, 1120px); padding-top: 34px; }
    .account-card { padding: 20px; }
    .account-card-heading, .dashboard-account-bar, .owner-item, .owner-preview-toolbar, .owner-listing-heading-actions { align-items: stretch; flex-direction: column; }
    .account-grid, .account-choice-row, .dashboard-stat-grid, .owner-path-grid { grid-template-columns: 1fr; }
    .account-span-2 { grid-column: auto; }
    .owner-item dl { grid-template-columns: 1fr; }
    .admin-comparison { grid-template-columns: 1fr; }
    .account-actions .account-button { width: 100%; }
    .owner-listing-body { padding: 20px; }
    .owner-listing-hero, .owner-listing-hero img, .owner-image-placeholder { min-height: 210px; }
    .owner-listing-picker { min-width: 0; }
    .owner-inline-title input { font-size: 2rem; }
}

/* Shared navigation alignment and search icon */
.navbar .brand {
    justify-self: start;
}

.navbar .nav-links {
    justify-self: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

#search-btn {
    display: grid;
    justify-self: end;
    place-items: center;
    padding: 0;
}

#search-btn::before {
    position: static;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5263' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
}

#search-btn::after {
    display: none;
}

@media (min-width: 1281px) {
    .navbar {
        grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    }
}

@media (max-width: 1280px) {
    .navbar {
        height: auto;
        grid-template-columns: 1fr auto;
        row-gap: 10px;
        padding-block: 12px;
    }

    .navbar .nav-links {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }
}

@media (max-width: 720px) {
    .navbar {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        gap: 8px;
        padding: 9px 14px;
    }

    .navbar .brand {
        min-width: 0;
    }

    .navbar .nav-menu-toggle {
        display: grid;
        grid-column: 2;
        grid-row: 1;
    }

    .navbar #search-btn {
        grid-column: 3;
        grid-row: 1;
    }

    .navbar .nav-links {
        display: none;
        grid-column: 1 / -1;
        grid-row: 2;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        gap: 3px;
        width: 100%;
        max-height: calc(100vh - 84px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px 0 4px;
        white-space: normal;
    }

    .navbar.nav-menu-open .nav-links {
        display: flex;
    }

    .navbar .nav-links a {
        justify-content: flex-start;
        width: 100%;
        min-height: 44px;
        padding: 12px 14px;
        border-radius: 10px;
    }
}

.nav-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 9px;
    border: 1px solid #d7e2e6;
    border-radius: 12px;
    background: #ffffff;
    color: #0b5263;
}

.nav-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-menu-toggle:hover,
.nav-menu-toggle:focus-visible,
.nav-menu-toggle[aria-expanded="true"] {
    border-color: #0b5263;
    background: #e8f3f8;
    outline: none;
}

.nav-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Metadata icons are tied to their meaning, not their position in the card. */
.events-page .weekly-event-card .event-meta span.event-meta-time::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.events-page .weekly-event-card .event-meta span.event-meta-location::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.events-page .weekly-event-card .event-meta span.event-meta-phone::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

.events-page .weekly-event-card .event-meta span.event-meta-price::before {
    content: "$";
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    font-weight: 900;
}

.events-page .weekly-event-card .event-meta span.event-meta-link::before {
    content: "↗";
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    font-weight: 900;
}