/* ================================================
   EVENTS HUB - UPDATED STYLING
   ================================================ */

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.events-hub-card {
    display: flex;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid rgba(111, 148, 138, 0.1);
}

.events-hub-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.events-hub-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 85px;
    height: 85px;
    background: var(--bg-sand);
    border-radius: 12px;
    margin-right: 2rem;
    flex-shrink: 0;
}

.events-hub-card__date .day {
    font-family: 'DM Serif Display', serif;
    font-size: 1.8rem;
    color: var(--plum);
    line-height: 1;
}

.events-hub-card__date .month {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--leaf-deep);
    font-weight: 600;
}

.events-hub-card__content h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.4rem;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.event-meta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--leaf-deep);
    margin-bottom: 1rem;
}

.event-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Mobile Tweak */
@media (max-width: 640px) {
    .events-hub-card { flex-direction: column; padding: 1.5rem; }
    .events-hub-card__date { margin-bottom: 1.5rem; }
    .events-grid { grid-template-columns: 1fr; }
}



/* ================================================
   EVENTS PAGE - SAGE COLOUR THEME
   ================================================ */
.events-page {
    background:
        radial-gradient(circle at top left, rgba(107, 163, 152, 0.16), transparent 32%),
        linear-gradient(180deg, #EBF3F0, var(--bg-stone) 48%, var(--white));
}
.events-page .subpage-main h1,
.events-page .subpage-main h2,
.events-page .subpage-main h3,
.events-page .subpage-main h4 { color: #3D6B63; }
.events-page footer .footer-links h3 { color: #FFFFFF !important; }
.events-page .eyebrow         { color: #6D9A90; }
.events-page .subpage-backlink {
    color: var(--text-muted);
}
.events-page .subpage-backlink:hover {
    color: var(--plum);
}
.events-page .subpage-tag {
    background: rgba(107, 163, 152, 0.18);
    color: #3D6B63;
}
.events-page .btn-primary {
    background: #4A7B72;
}
.events-page .btn-primary:hover { background: #3A6860; }
.events-page .btn-ghost {
    color: #4A7B72;
    border-color: #4A7B72;
}
.events-page .btn-ghost:hover {
    background: #4A7B72;
    color: var(--white);
}
.events-page .subpage-nav #nav-auth-btn { background: var(--plum, #6C536D) !important; }
.events-page .subpage-nav #nav-auth-btn:hover { background: var(--forest-mid, #5D465F) !important; }
.events-page .subpage-nav a.cta-pill[href="join.html"],
.events-page .subpage-nav .cta-pill--join { background: #4A7B72 !important; }
.events-page .subpage-nav a.cta-pill[href="join.html"]:hover,
.events-page .subpage-nav .cta-pill--join:hover { background: #3A6860 !important; }



/* ================================================
   COMMUNITY MEETUP PANE  (events hero aside)
   ================================================ */
.meetup-pane {
    background: linear-gradient(135deg, #3D6B63 0%, #5E9088 100%);
    border-radius: var(--radius-lg);
    padding: 1.85rem 1.75rem;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.meetup-pane::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
}
.meetup-pane-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1rem;
}
.meetup-pane h3 {
    color: var(--white);
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.meetup-pane > p {
    font-size: 0.88rem;
    opacity: 0.82;
    margin-bottom: 1rem;
}
.meetup-detail {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.83rem;
    opacity: 0.88;
    margin-bottom: 0.45rem;
}
.meetup-detail svg { opacity: 0.72; flex-shrink: 0; }
.meetup-pane .btn-meetup {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.2rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--white);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition);
}
.meetup-pane .btn-meetup:hover { background: rgba(255,255,255,0.3); }



/* ================================================
   FEATURED EVENT SPOTLIGHT
   ================================================ */
.featured-spotlight {
    position: relative;
    background: linear-gradient(135deg, #3D6B63 0%, #6D9A90 100%);
    border-radius: var(--radius-lg);
    padding: 2.75rem 3rem;
    color: var(--white);
    overflow: hidden;
    margin-top: 2.5rem;
}
.featured-spotlight::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.featured-spotlight::after {
    content: '';
    position: absolute;
    bottom: -40px; left: 55%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1.2rem;
}
.featured-spotlight-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: start;
    position: relative;
}
.featured-spotlight h2 {
    color: var(--white);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    margin: 0;
}
.featured-spotlight > p,
.featured-spotlight-inner > .featured-copy > p {
    opacity: 0.82;
    max-width: 560px;
    margin-top: 0.75rem;
    font-size: 0.95rem;
}
.featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 1.2rem 0;
}
.featured-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    opacity: 0.88;
}
.featured-meta-item svg { opacity: 0.75; }
.featured-cta-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    min-width: 175px;
    flex-shrink: 0;
}
.featured-practitioner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.84rem;
    opacity: 0.82;
}
.featured-practitioner-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.22);
    flex-shrink: 0;
}
.featured-practitioner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.btn-spotlight {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    color: #3D6B63;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.btn-spotlight:hover {
    background: var(--bg-sand);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}



/* ================================================
   EVENTS FILTER BAR
   ================================================ */
.events-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 2.5rem 0 1.25rem;
    align-items: center;
}
.filter-label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.3rem;
}
.filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(61, 107, 99, 0.22);
    background: none;
    color: #3d6b63;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}
.filter-btn:hover { border-color: #4A7B72; background: rgba(74,123,114,0.09); }
.filter-btn.active {
    background: #4a7b72;
    color: var(--white);
    border-color: #4A7B72;
}



/* ================================================
   EVENTS GRID + CARDS
   ================================================ */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 0.75rem;
}
.event-card {
    padding: 1.5rem;
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(61, 107, 99, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.event-card[hidden] { display: none; }
.event-card h3 { color: #3D6B63; margin-bottom: 0; font-size: 1.15rem; }
.event-card p { color: var(--text-muted); font-size: 0.91rem; flex: 1; }
.event-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.79rem;
    color: var(--text-muted);
}
.event-card-meta span { display: flex; align-items: center; gap: 0.3rem; }
.btn-outline-sage {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(74,123,114,0.3);
    color: #4A7B72;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
    margin-top: auto;
    align-self: flex-start;
}
.btn-outline-sage:hover {
    background: #4A7B72;
    color: var(--white);
    border-color: #4A7B72;
}



/* ================================================
   MINI CALENDAR + AGENDA
   ================================================ */
.events-calendar-section { margin: 3.5rem 0 1rem; }
.calendar-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.75rem;
}
.mini-calendar {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(61,107,99,0.1);
    overflow: visible;
    position: relative;
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    background: #4A7B72;
    color: var(--white);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    overflow: hidden;
}
.calendar-nav-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
#cal-title,
.calendar-header h3,
.calendar-header h4 {
    color: #FFFFFF !important;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}
.cal-nav-btn {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0.32rem 0.6rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: background var(--transition);
    font-size: 1rem;
    font-family: inherit;
}
.cal-nav-btn:hover { background: rgba(255,255,255,0.2); }
.calendar-grid-area { 
    padding: 0.9rem; 
    overflow: visible; 
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.35rem;
}
.calendar-weekdays span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.3rem 0;
}
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    overflow: visible;
}
.cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    position: relative;
    border: none;
    background: none;
    font-family: inherit;
    color: var(--text);
    transition: background var(--transition), color var(--transition);
}
.cal-day:not(:disabled):hover { background: rgba(74,123,114,0.12); }
.cal-day.today { background: rgba(74,123,114,0.14); font-weight: 600; color: #3D6B63; }
.cal-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 3px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #4A7B72;
}
.cal-day.selected { background: #4A7B72; color: var(--white); }
.cal-day.selected::after { background: rgba(255,255,255,0.8); }
.cal-day.other-month { opacity: 0.25; cursor: default; }

/* Elevate hovered event cell so its tooltip always sits above neighbouring rows/cells */
.cal-day.has-event:hover {
    z-index: 50;
}

/* --- Calendar Day Tooltip with Edge Protection & Text Wrapping --- */
.cal-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    background-color: var(--forest);
    color: var(--white);
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    word-break: break-word;
    width: max-content;
    max-width: 220px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.cal-tooltip span { 
    display: block; 
}
.cal-tooltip span + span { 
    margin-top: 0.45rem; 
    padding-top: 0.45rem; 
    border-top: 1px solid rgba(255,255,255,0.15); 
}

/* Default / Mid-week Center Alignment (Columns 3-5: Wed, Thu, Fri) */
.cal-day .cal-tooltip,
.cal-day.align-center .cal-tooltip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
.cal-day.has-event:hover .cal-tooltip,
.cal-day.align-center.has-event:hover .cal-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}
.cal-day .cal-tooltip::after,
.cal-day.align-center .cal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--forest) transparent transparent transparent;
}

/* Left Edge Alignment (Columns 1-2: Mon, Tue) - Prevents left boundary truncation */
.cal-day.align-left .cal-tooltip {
    left: 0;
    right: auto;
    transform: translateX(0);
}
.cal-day.align-left.has-event:hover .cal-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(-5px);
}
.cal-day.align-left .cal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 18px;
    right: auto;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--forest) transparent transparent transparent;
}

/* Right Edge Alignment (Columns 6-7: Sat, Sun) - Prevents right boundary truncation */
.cal-day.align-right .cal-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0);
}
.cal-day.align-right.has-event:hover .cal-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(-5px);
}
.cal-day.align-right .cal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: auto;
    right: 18px;
    transform: translateX(50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--forest) transparent transparent transparent;
}

/* --- NEW: Multi-day event styling --- */
.cal-day.multi-day {
    background-color: rgba(74, 123, 114, 0.15);
    color: #3D6B63;
    border-radius: 0;
}
.cal-day.multi-day.today {
    background-color: rgba(74, 123, 114, 0.3);
}
.cal-day.multi-day.selected {
    background: #4A7B72;
    color: var(--white);
}
.cal-day.event-start {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}
.cal-day.event-end {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.cal-day.multi-day::after { display: none; }

.calendar-legend {
    padding: 0.65rem 1rem;
    border-top: 1px solid rgba(61,107,99,0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: #4A7B72; flex-shrink: 0; }

/* --- Mobile Calendar Event Details Panel --- */
.cal-mobile-events {
    display: none;
    padding: 1rem;
    border-top: 1px solid rgba(61, 107, 99, 0.12);
    background: #FAF8F5;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.cal-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(61, 107, 99, 0.15);
}

.cal-mobile-date {
    font-family: 'DM Serif Display', serif;
    font-size: 1.15rem;
    color: var(--forest);
    font-weight: 500;
}

.cal-mobile-count {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(74, 123, 114, 0.14);
    color: #3D6B63;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
}

.cal-mobile-card {
    background: #FFFFFF;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(61, 107, 99, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 1rem;
    margin-bottom: 0.75rem;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cal-mobile-card:last-child {
    margin-bottom: 0;
}

.cal-mobile-card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--forest);
    margin: 0.4rem 0 0.5rem 0;
}

.cal-mobile-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.cal-mobile-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: var(--leaf);
    color: #FFFFFF !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    box-sizing: border-box;
    text-align: center;
}

.cal-mobile-card-btn:hover {
    background: var(--forest);
}

.cal-mobile-prompt {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Mobile & Touch Viewport Rules */
@media (max-width: 768px), (hover: none) {
    .cal-tooltip {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .cal-mobile-events {
        display: block;
    }
}
.calendar-agenda {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(61,107,99,0.1);
    padding: 1.5rem;
}
/* This rule was updated from h4 to h2#agenda-title to match the HTML change and fix spacing. */
.calendar-agenda #agenda-title { 
    margin-bottom: 1.5rem; 
}
.agenda-item {
    display: flex;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(61,107,99,0.07);
    align-items: flex-start;
}
.agenda-item:last-of-type { border-bottom: none; }
.agenda-date-col { min-width: 40px; text-align: center; flex-shrink: 0; }
.agenda-day {
    font-size: 1.25rem;
    font-weight: 300;
    color: #4A7B72;
    line-height: 1;
    font-family: 'DM Serif Display', serif;
}
.agenda-month { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.agenda-info h5 {
    font-family: 'DM Serif Display', serif;
    font-size: 0.96rem;
    color: #3D6B63;
    margin: 0 0 0.22rem;
}
.agenda-info .agenda-time { font-size: 0.79rem; color: var(--text-muted); }



/* ================================================
   EVENTS CALENDAR UPGRADES
================================================ */

.date-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--white);
    padding: 8px 14px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 5;
}

.date-badge .day {
    display: block;
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 2px;
}

.date-badge .month {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--plum);
}



/* ================================================
   EVENT DETAILS PAGE
   ================================================ */
.event-detail-back-link {
    color: var(--forest);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}
.event-detail-back-link:hover {
    color: var(--ink);
}

.hero-section-wrapper {
    position: relative;
    margin-top: 2.5rem; /* Adds safe clearance below the logo/header */
    width: 100%;
}

.floating-back-btn {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 10; /* Ensures it sits above the image and blur */
    background: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.5rem 1.25rem;
    border-radius: 30px; /* Gives it the 'pill' shape */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    color: var(--ink); /* Dark text color */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.floating-back-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.event-header-titles {
    width: 100%;
    margin-top: 0;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.event-header-titles h1 {
    margin: 0;
    max-width: 800px; /* Prevents long titles from stretching too wide on large screens */
}

.event-detail-image {
    width: 100% !important;
    height: 450px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
    border-radius: var(--radius-lg);
    margin-top: 1.5rem;
    background-color: var(--bg-stone);
}

.event-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}

.event-detail-category {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.event-detail-title {
    font-family: 'DM Serif Display', serif;
    color: var(--forest);
    font-size: 3rem;
    margin: 0.5rem 0 1.5rem 0;
}

.event-detail-description {
    line-height: 1.8;
    color: var(--ink);
    white-space: pre-wrap;
    font-size: 1.05rem;
}

.event-detail-tags-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.event-detail-tag {
    background-color: #F0EFEB;
    color: var(--forest);
    border-radius: 50px;
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
}

.event-detail-sidebar {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(108,83,109,0.1);
    position: sticky;
    top: 100px;
    height: fit-content;
}

.event-detail-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.8rem 0;
    font-size: 0.95rem;
    color: var(--text);
}

.event-detail-sidebar-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-muted);
}

.event-detail-sidebar-item + .event-detail-sidebar-item {
    border-top: 1px solid rgba(108,83,109,0.1);
}

.event-detail-booking-btn {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    width: 100%;
}

#agenda-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Increase this value if you want more space */
}

/* --- Hosted By Block (Event Details Sidebar) --- */
.hosted-by-label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: block;
}

.hosted-by-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    /* Add negative margin and padding to create a hover effect area */
    margin: -0.5rem;
    padding: 0.5rem;
    transition: background-color var(--transition);
}

.hosted-by-link:hover {
    background-color: rgba(108,83,109,0.04);
}

.hosted-by-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.hosted-by-info { display: flex; flex-direction: column; }
.hosted-by-name { font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--ink); font-weight: 500; line-height: 1.2; }
.hosted-by-title { font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 800px) {
    .event-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .event-detail-sidebar {
        order: -1; /* Move sidebar above description on mobile */
    }

    .agenda-item-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .agenda-item-image {
        width: 100%;
        height: 220px;
    }
}



/* ================================================
   EVENTS AGENDA
   ================================================ */
.agenda-item-card {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 2rem;
    max-width: 100%;
    width: 100%;
    align-items: stretch;
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(61, 107, 99, 0.12);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Gold border override for the main featured event slot */
#featured-event-slot .event-item,
.featured-event-card {
    border: 2px solid #D4AF37;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
    background: linear-gradient(to bottom right, #FFFFFF, #FDFCF8);
}

/* This targets the header text and border inside the card */
#featured-event-slot .event-item span[style*="color"],
.featured-event-card span[style*="color"] {
    color: #D4AF37 !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

/* This targets the button inside the card */
#featured-event-slot .event-item .btn-primary,
.featured-event-card .btn-primary {
    background-color: #D4AF37;
    border-color: #D4AF37;
}

.agenda-item-card.featured-event {
    border: 2px solid #D4AF37;
    box-shadow: var(--shadow-md);
}

.practitioner-card.featured-venue {
    border: 1px solid rgba(108, 83, 109, 0.12);
    box-shadow: var(--shadow-sm);
    background: #FAF9F6;
    display: flex;
    flex-direction: column;
}

.featured-venue-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(108, 83, 109, 0.08);
}

.featured-venue-header span {
    color: var(--leaf, #4A7B72);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tag-warm {
    background-color: var(--warm, #B89D81);
    color: #ffffff;
}

.featured-venue-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.featured-venue-row .practitioner-info {
    flex: 1;
    min-width: 250px;
    padding: 0;
}

.featured-venue-row .practitioner-name {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.featured-venue-row .profile-link-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.featured-venue-actions {
    margin-left: auto;
    padding-left: 1rem;
}

.btn-primary-gold {
    background-color: #D4AF37;
    border-color: #D4AF37;
}

.agenda-item-image {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    height: auto;
    min-height: 220px;
    flex: 0 0 280px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center 20%;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.agenda-item-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.agenda-item-title {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: var(--forest);
    font-family: 'DM Serif Display', serif;
    line-height: 1.2;
}

.agenda-item-title a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition);
}

.agenda-item-title a:hover {
    color: var(--leaf);
}

.agenda-item-meta {
    color: var(--forest);
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.agenda-item-location {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.agenda-item-description {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.agenda-item-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.agenda-empty-message {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 1rem 0;
}

@media (max-width: 768px) {
    .agenda-item-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 1.25rem;
    }
    .agenda-item-image {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 200px !important;
        min-height: 200px !important;
        flex: none !important;
    }
}



/* ================================================
   EVENTS PAGE FILTER BAR
   ================================================ */
.filter-bar {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(61, 107, 99, 0.1);
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.filter-search-wrapper {
    flex: 1 1 100%; /* Make search input grow and shrink */
    position: relative;
    min-width: 250px;
}

/* Re-using search styles from seeker dashboard */
.filter-bar .interests-search {
    width: 100%;
    padding-left: 44px; /* Add space for the icon */
}

.filter-search-wrapper .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--forest);
    opacity: 0.6;
    pointer-events: none; /* So you can click the input field underneath */
}

.filter-bar .luxury-dropdown {
    min-width: 180px; /* Give dropdowns a comfortable width */
}

.filter-bar .btn-text-link {
    white-space: nowrap; /* Prevent 'Clear Filters' from wrapping */
    color: var(--text-muted);
    font-size: 0.85rem;
}
.filter-bar .btn-text-link:hover {
    color: var(--forest);
}

/* Responsive stacking for mobile */
@media (max-width: 900px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch; /* Make items full-width */
    }
}

/* 1. Default static state: visible cream text on the plum pill background */
#nav-auth-btn {
    color: #fbfbfa !important; 
}

/* 2. Hover state: keeps the text visible when the cursor glides over it */
#nav-auth-btn:hover {
    color: #fbfbfa !important; 
}

/* --- Search Term Highlighting --- */
.search-highlight {
    background-color: var(--leaf);
    color: var(--white);
    padding: 1px 3px;
    border-radius: 3px;
    font-style: normal;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(162, 181, 174, 0.5);
}