/* DAS orange actions */
        .subscribe-btn { 
            appearance: none;
            border: 0;
            box-shadow: none;
            font: inherit;
            cursor: pointer;
            display: inline-block; 
            padding: 10px 20px; 
            background: var(--das-brand-action);
            color: #ffffff !important; 
            text-decoration: none; 
            border-radius: 6px; 
            font-weight: bold; 
            margin-bottom: 20px;
            transition: background 0.2s;
        }
        .subscribe-btn:hover {
            background: var(--das-brand-action-hover);
        }
    
        /* Modal Overlay */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 9999; 
            left: 0; top: 0;
            width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.6);
            backdrop-filter: blur(3px);
        }
        
        /* Updated Modal Box for Responsiveness *//* Modal Overlay */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 9999; 
            left: 0; top: 0;
            width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.6);
            backdrop-filter: blur(3px);
        }
        
        /* Enhanced Modal Layout */
        .modal-content {
            background-color: #fff;
            margin: 5vh auto; /* 5% of viewport height from top */
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            max-height: 85vh; /* Locks height to 85% of screen */
            overflow: hidden; /* Prevents container scroll so internal body can scroll */
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            position: relative;
        }
        
        /* Fixed Header: Title, Time, Location and Buttons */
        .modal-header {
            padding: 20px 25px;
            border-bottom: 2px solid #f0f0f0;
            background: #fff;
            flex-shrink: 0; /* Ensures header does not shrink or scroll away */
            z-index: 10;
        }
        
        /* Scrollable Body: Description and Footer */
        .modal-body {
            padding: 20px 25px;
            overflow-y: auto; /* Enables vertical scrolling for long content */
            flex-grow: 1; /* Takes up all remaining vertical space */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile browsers */
            background: #ffffff;
        }
        
        /* Metadata Rows (Time and Location) */
        .modal-meta-item {
            margin: 10px 0;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* Button Container in the Fixed Header */
        .modal-action-btns {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: nowrap;
        }
        
        /* Universal Button Styling */
        .modal-btn {
            flex: 1;
            min-width: 0;
            padding: 12px 10px;
            text-align: center;
            border-radius: 6px;
            font-weight: bold;
            text-decoration: none !important;
            font-size: 0.85rem;
            color: white !important;
            transition: opacity 0.2s;
        }
        
        .modal-btn:hover {
            opacity: 0.9;
        }


        /* Keep the two modal buttons on one row (Google Maps + Event Info) */
        .modal-action-btns { flex-wrap: nowrap; }
        .modal-action-btns > div { flex: 1; min-width: 0; }
        .modal-btn { white-space: nowrap; }

        @media (max-width: 420px) {
          .modal-btn { font-size: 0.78rem; padding: 10px 8px; }
          .modal-action-btns { gap: 8px; }
        }
        
        
        /* Close 'X' Button */
        .close-modal {
            position: absolute;
            right: 15px; 
            top: 15px;
            font-size: 28px;
            cursor: pointer;
            color: #999;
            line-height: 1;
            z-index: 11;
        }
        
        .close-modal:hover {
            color: #333;
        }
        
        
        .close-modal {
            position: absolute;
            right: 15px; top: 15px;
            font-size: 28px;
            cursor: pointer;
            color: #999;
        }
        
        .close-modal:hover { color: #000; }
        
        #modalTitle { color: #0b8043; margin-top: 0; padding-right: 30px; font-size: 1.4rem; }
        
        .maps-link-btn {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 15px;
            background: #4285F4;
            color: white !important;
            text-decoration: none;
            border-radius: 4px;
            font-size: 0.9rem;
        }
        
        .modal-body p { margin: 8px 0; line-height: 1.5; }


    
    h3 { margin: 12px 0 4px; font-size: 1rem; font-weight: 700 }
    li { margin-left: 20px; }

    /* 1. BASE THEME VARIABLES (LIGHT MODE DEFAULT) */
    :root {
        --das-cal-bg: var(--bg-color, #ffffff);
        --das-cal-border: var(--border-color, #e0e0e0);
        --das-cal-subtle-bg: var(--header-bg, #f5f5f5);
        --das-cal-text: var(--text-color, #222222);
        --das-control-bg: #ffffff;
        --das-control-text: #111111;
        --das-control-border: rgba(0, 0, 0, 0.18);
        --das-list-divider: rgba(0, 0, 0, 0.18);
        
        /* FullCalendar Internal Variable Mapping */
        --fc-page-bg-color: var(--das-cal-bg);
        --fc-event-bg-color: var(--das-brand-soft) !important;
        --fc-event-border-color: var(--das-brand-border) !important;
        --fc-event-text-color: var(--das-brand-ink);
    }

    /* 2. DARK MODE OVERRIDES (Triggers ONLY on your Toggle) */
    /* Removed @media (prefers-color-scheme: dark) to stop it from forcing dark mode automatically */
    body.dark-mode, 
    body.dark, 
    body.theme-dark, 
    [data-theme="dark"] {
        --das-cal-bg: #121212;
        --das-cal-text: #e9e9e9;
        --das-cal-border: #2b2b2b;
        --das-cal-subtle-bg: #1a1a1a;
        --das-control-bg: #1a1a1a;
        --das-control-text: #e9e9e9;
        --das-control-border: #3a3a3a;
        --das-list-divider: rgba(255, 255, 255, 0.28);
        
        /* Ensure FullCalendar internal background updates when toggled */
        --fc-page-bg-color: #121212 !important;
        --fc-event-bg-color: var(--das-brand-soft) !important;
        --fc-event-border-color: var(--das-brand-border) !important;
        --fc-list-event-hover-bg-color: #242424 !important;
        color-scheme: dark;
    }

    /* 3. CALENDAR & CONTROL STYLING */
    .calendar-controls {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
        gap: 8px;
        margin-bottom: 12px;
    }
    .calendar-controls input, .calendar-controls select { 
        box-sizing: border-box; width: 100%; min-width: 0;
        padding: 7px 8px; border-radius: 6px; border: 1px solid var(--das-control-border);
        background: var(--das-control-bg); color: var(--das-control-text); font-size: 0.875rem;
    }
    @media (max-width: 899px) {
        .calendar-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    }

    #calendar-container { 
        background: var(--das-cal-bg); color: var(--das-cal-text); padding: 15px; 
        border-radius: 8px; border: 1px solid var(--das-cal-border); min-height: 650px; 
    }

    #calendar-container .fc { color: var(--das-cal-text); }
    #calendar-container .fc a { color: inherit; }
    #calendar-container .fc-theme-standard td,
    #calendar-container .fc-theme-standard th,
    #calendar-container .fc-theme-standard .fc-scrollgrid { border-color: var(--das-cal-border); }

    /* 4. MODAL STYLING (Theme-Aware) */
    .modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
    .modal-content { 
        background-color: var(--das-cal-bg) !important; color: var(--das-cal-text) !important;
        margin: 5vh auto; border-radius: 12px; width: 90%; max-width: 500px; display: flex; flex-direction: column; max-height: 85vh; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); position: relative; 
    }
    .modal-header { padding: 20px 25px; border-bottom: 2px solid var(--das-cal-border); background: var(--das-cal-bg) !important; flex-shrink: 0; }
    .modal-body { padding: 20px 25px; overflow-y: auto; flex-grow: 1; background: var(--das-cal-bg) !important; color: var(--das-cal-text) !important; }
    .close-modal { position: absolute; right: 15px; top: 15px; font-size: 28px; cursor: pointer; color: #999; line-height: 1; z-index: 11; }
    
    /* Title Color: Use your primary green in light mode, text color in dark mode */
    #modalTitle { color: #0b8043; margin-top: 0; padding-right: 30px; font-size: 1.4rem; }
    body.dark-mode #modalTitle, body.dark #modalTitle, [data-theme="dark"] #modalTitle { color: var(--das-cal-text) !important; }

    /* 5. MOBILE LIST VIEW ADJUSTMENTS */
    @media (max-width: 560px) {
        .fc .fc-list-table tr.fc-list-event { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "time time" "graphic title"; align-items: start; }
        .fc .fc-list-table tr.fc-list-event > td { display: block; border: 0; padding: 10px 10px; }
        .fc .fc-list-table td.fc-list-event-time { grid-area: time; padding-bottom: 2px; white-space: nowrap; }
        .fc .fc-list-table td.fc-list-event-graphic { grid-area: graphic; padding: 10px 0 10px 10px; }
        .fc .fc-list-table td.fc-list-event-title { grid-area: title; min-width: 0; }
        .fc .fc-list-table tr.fc-list-event { border-bottom: 2px solid var(--das-list-divider); }
    }

    /* 6. TARGETED FIX FOR LIST HEADERS (Theme-Aware) */
    /* Target the header structure: tr.fc-list-day > th > div.fc-list-day-cushion */
    #calendar-container .fc-list-day th,
    #calendar-container .fc-list-day-cushion {
        background-color: var(--das-brand-soft) !important;
        background: var(--das-brand-soft) !important;
    }

    /* Header text colors */
    #calendar-container .fc-list-day-text,
    #calendar-container .fc-list-day-side-text,
    #calendar-container .fc-list-day-cushion a {
        color: var(--das-brand-ink) !important;
    }

    /* Month view: hide the default dot/bullet */
.fc-dayGridMonth-view .fc-daygrid-event-dot {
  display: none;
}

/* Optional: reduce left padding that was making room for the dot */
.fc-dayGridMonth-view .fc-daygrid-event {
  padding-left: 0;
}
    
.modal-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.modal-actions > div {
  flex: 1;
  min-width: 0;
}

.modal-actions a.modal-btn {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap; /* keeps “Google Maps” on one line */
}

@media (max-width: 560px) {
  .fc .fc-header-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  /* Row 1: left chunk (prev/next) */
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(1) {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  /* Row 1: center chunk (title) pushed to the right */
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .fc .fc-header-toolbar .fc-toolbar-title {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-size: 1.05em;
    line-height: 1.2;
  }

  /* Row 2: right chunk becomes full width: today left, views right */
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }

  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) > * {
    margin: 0 !important;
  }

  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) .fc-button-group {
    flex: 1;
    min-width: 0;
  }

  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) .fc-button {
    padding: 0.4em 0.3em;
    font-size: clamp(0.7rem, 3.3vw, 0.85rem);
    white-space: nowrap;
  }

  /* Slightly smaller buttons on mobile */
  .fc .fc-button {
    padding: 0.35em 0.55em;
    font-size: 0.92em;
  }
}

#events-map {
/*  height: 320px;          /* pick what you like */
  min-height: 220px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}


/* Move attribution away from your filters + make it subtle */
#events-map .leaflet-control-attribution {
  font-size: 10px;
  line-height: 1.2;
  padding: 2px 6px;
  margin: 0 0 6px 6px;          /* bottom-left breathing room */
  border-radius: 10px;
  background: rgba(0,0,0,0.35); /* subtle pill */
  color: rgba(255,255,255,0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Make links match and not scream */
#events-map .leaflet-control-attribution a {
  color: rgba(255,255,255,0.80);
  text-decoration: none;
}

#events-map .leaflet-control-attribution a:hover {
  text-decoration: underline;
  color: rgba(255,255,255,0.95);
}

/* Make all calendar events feel clickable (pointer cursor) */
/* FullCalendar: all events in all views */
#calendar-container .fc .fc-event,
#calendar-container .fc .fc-event * ,
#calendar-container .fc .fc-daygrid-event,
#calendar-container .fc .fc-timegrid-event,
#calendar-container .fc .fc-list-event,
#calendar-container .fc tr.fc-list-event,
#calendar-container .fc tr.fc-list-event td,
#calendar-container .fc .fc-list-event-title,
#calendar-container .fc .fc-list-event-time {
  cursor: pointer !important;
}

/* (Optional) ensure hover doesn't look "dead" 
#calendar-container .fc .fc-event:hover,
#calendar-container .fc tr.fc-list-event:hover td {
  filter: brightness(1.08);
}*/
    
#calendar-container .fc-list-event-hover-bg-color: #242424;
    }

    /* Keep short and wrapped event titles aligned consistently. */
#calendar-container .fc .fc-list-event-title,
#calendar-container .fc .fc-list-event-title a,
#calendar-container .fc .fc-list-event-title .fc-list-event-title-text {
  text-align: left;
}

/* Ensure the title cell contents take full width so wrapping aligns properly */
#calendar-container .fc td.fc-list-event-title {
  text-align: left;
}

/* Summary view: your custom event rows/cards */
.das-summary-row,
.das-summary-row *,
.das-summary-wrap,
.das-summary-wrap * {
  cursor: pointer !important;
}

/* Don’t override real inputs/links/buttons inside rows */
.das-summary-row a,
.das-summary-row button,
.das-summary-row input,
.das-summary-row select,
.das-summary-row textarea,
#calendar-container .fc a,
#calendar-container .fc button {
  cursor: pointer;
}