/**
 * BM Events Calendar - Theme CSS
 * Visual styling: colors, borders, shadows, transitions
 * This file is loaded based on selected theme mode
 */

/* ============================================
   Theme Variables - Defaults
   (Can be overridden via settings or custom CSS)
   ============================================ */
:root {
  /* Colors */
  --bm-color-primary: #2e64af;
  --bm-color-secondary: #1e4a8c;
  --bm-color-text: #333333;
  --bm-color-text-light: #666666;
  --bm-color-text-muted: #939393;
  --bm-color-background: #ffffff;
  --bm-color-background-alt: #f5f5f5;
  --bm-color-border: #e0e0e0;

  /* Card Visual */
  --bm-card-background: var(--bm-color-background);
  --bm-card-border: 1px solid var(--bm-color-border);
  --bm-card-shadow: none;
  --bm-card-hover-bg: #f8f8f8;
  --bm-card-hover-shadow: none;

  /* Badge */
  --bm-badge-bg: var(--bm-color-primary);
  --bm-badge-color: #ffffff;
  --bm-badge-radius: 3px;

  /* Transitions */
  --bm-transition: 0.2s ease;
}

/* ============================================
   THEME: Minimalist (Default)
   Flat, clean, no shadows
   ============================================ */
[data-bm-theme="minimalist"],
.bm-theme-minimalist {
  --bm-card-border: none;
  --bm-card-shadow: none;
  --bm-card-hover-shadow: none;
  --bm-card-radius: 0;
}

/* ============================================
   THEME: Barebones
   Layout only, minimal visual styling
   ============================================ */
[data-bm-theme="barebones"],
.bm-theme-barebones {
  --bm-card-border: none;
  --bm-card-shadow: none;
  --bm-card-hover-bg: transparent;
  --bm-card-hover-shadow: none;
  --bm-card-radius: 0;
}

/* ============================================
   THEME: Modern
   Shadows, rounded corners, smooth transitions
   ============================================ */
[data-bm-theme="modern"],
.bm-theme-modern {
  --bm-card-radius: 8px;
  --bm-card-border: none;
  --bm-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --bm-card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  --bm-badge-radius: 20px;
}

/* ============================================
   THEME: Classic
   Traditional borders, subtle styling
   ============================================ */
[data-bm-theme="classic"],
.bm-theme-classic {
  --bm-card-radius: 4px;
  --bm-card-border: 1px solid var(--bm-color-border);
  --bm-card-shadow: none;
  --bm-card-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  --bm-badge-radius: 4px;
}

/* ============================================
   Events List Page - Visual Styling
   ============================================ */
.bm-events {
  color: var(--bm-color-text);
}

/* Month Headers */
.bm-events .bm-full-row {
  text-transform: uppercase;
  color: var(--bm-color-text-light);
  border-bottom: 1px solid var(--bm-color-border);
  padding-bottom: var(--bm-spacing-sm);
}

.bm-events .bm-full-row span {
  opacity: 0.4;
  color: var(--bm-color-text);
}

/* ============================================
   Event Cards - Visual Styling
   ============================================ */
.bm-card {
  background: var(--bm-card-background);
  border: var(--bm-card-border);
  box-shadow: var(--bm-card-shadow);
  transition: all var(--bm-transition);
}

.bm-card:hover {
  background: var(--bm-card-hover-bg);
  box-shadow: var(--bm-card-hover-shadow);
  transform: translateY(-2px);
}

.bm-card__image img {
  transition: transform var(--bm-transition);
}

.bm-card:hover .bm-card__image img {
  transform: scale(1.02);
}

.bm-no-image {
  background: var(--bm-color-background-alt);
  color: var(--bm-color-text-muted);
}

.bm-no-image .material-symbols-outlined {
  font-size: 48px;
  opacity: 0.5;
}

/* Date Display */
.bm-date h1,
.bm-date h2 {
  color: var(--bm-color-text-light);
}

.bm-name-month {
  font-size: var(--bm-font-size-sm);
  color: var(--bm-color-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bm-name-day {
  font-size: var(--bm-font-size-sm);
  color: var(--bm-color-text-light);
}

/* Event Info */
.bm-event-title {
  color: var(--bm-color-text);
  font-weight: 600;
}

.bm-venue {
  color: var(--bm-color-text-muted);
  font-size: var(--bm-font-size-sm);
}

.bm-time {
  color: var(--bm-color-text-light);
  font-size: var(--bm-font-size-sm);
}

/* Span Label Badge - Default/Filled Style */
.bm-span-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--bm-badge-radius);
  margin-top: var(--bm-spacing-xs);
}

.bm-span-label.bm-badge-filled,
.bm-span-label:not([class*="bm-badge-"]) {
  background: var(--bm-badge-bg);
  color: var(--bm-badge-color);
}

/* Outlined Badge Style */
.bm-span-label.bm-badge-outlined {
  background: transparent;
  color: var(--bm-color-primary);
  border: 1px solid var(--bm-color-primary);
}

/* Minimal Badge Style */
.bm-span-label.bm-badge-minimal {
  background: transparent;
  color: var(--bm-color-primary);
  padding-left: 0;
  padding-right: 0;
}

/* Category Tags */
.bm-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-spacing-xs);
  margin-top: var(--bm-spacing-xs);
}

.bm-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--bm-badge-radius);
  background: var(--bm-color-background-alt);
  color: var(--bm-color-text-light);
  text-decoration: none;
  transition: all var(--bm-transition);
}

a.bm-category:hover {
  background: var(--bm-color-primary);
  color: #fff;
}

/* Categories in header - higher z-index for clickability */
.bm-header-categories {
  position: relative;
  z-index: 3;
  margin-top: var(--bm-spacing-xs);
  margin-bottom: var(--bm-spacing-sm);
}

/* When using image background, style header categories differently */
.bm-single-event[data-header-use-image="true"] .bm-header-categories .bm-category {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(4px);
}

.bm-single-event[data-header-use-image="true"] .bm-header-categories a.bm-category:hover {
  background: rgba(255, 255, 255, 0.4);
}

.bm-event-categories {
  margin-bottom: var(--bm-spacing-md);
}

.bm-event-categories h4 {
  margin-bottom: var(--bm-spacing-xs);
}

/* ============================================
   Single Event Page - Visual Styling
   ============================================ */
.bm-single-event {
  color: var(--bm-color-text);
}

/* Header section - uses custom background variable with fallback */
.bm-single-event .bm-top {
  background: var(--bm-single-header-bg, var(--bm-color-background-alt));
}

/* Image background overlay */
.bm-single-event .bm-top .bm-hero-overlay {
  background-color: var(--bm-header-overlay-color, #000000);
  opacity: var(--bm-header-overlay-opacity, 0.5);
}

/* When using image background, make text white for better contrast */
.bm-single-event[data-header-use-image="true"] .bm-top h2,
.bm-single-event[data-header-use-image="true"] .bm-top h3,
.bm-single-event[data-header-use-image="true"] .bm-top h4,
.bm-single-event[data-header-use-image="true"] .bm-top h5,
.bm-single-event[data-header-use-image="true"] .bm-top .bm-venue {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.bm-single-event .bm-top h2 {
  color: var(--bm-color-text);
  margin-bottom: 0.1em;
}

.bm-single-event .bm-top h3 {
  color: var(--bm-color-primary);
}

.bm-single-event .bm-top h4 {
  color: var(--bm-color-text-light);
}

.bm-single-event .bm-top h5 {
  color: var(--bm-color-text-muted);
}

.bm-single-event .bm-venue {
  color: var(--bm-color-text-muted);
}

/* Content section - uses custom background variable with fallback */
.bm-single-event .bm-below-top {
  background: var(--bm-single-content-bg, var(--bm-color-background));
}

.bm-single-event .bm-below-top h4 {
  color: var(--bm-color-text);
  font-weight: 600;
}

.bm-single-event .bm-below-top p {
  color: var(--bm-color-text);
}

/* Info card in two-columns section */
.bm-single-event .bm-left-column > div:first-of-type {
  background: var(--bm-single-card-bg, var(--bm-color-background));
}

/* ============================================
   Event Badges - Visual Styling
   ============================================ */
.bm-multi-day-badge h6,
.bm-recurring-event-badge h6,
.bm-spanning-event-badge h6 {
  background-color: var(--bm-badge-bg);
  color: var(--bm-badge-color);
  padding: 6px 16px;
  border-radius: var(--bm-badge-radius);
  font-weight: 600;
  font-size: var(--bm-font-size-sm);
}

.bm-multi-day-badge p,
.bm-recurring-event-badge p,
.bm-spanning-event-badge p {
  font-size: var(--bm-font-size-sm);
  color: var(--bm-color-text-light);
}

/* Header Event Type Badges */
.bm-event-type-badge {
  background-color: var(--bm-badge-bg);
  color: var(--bm-badge-color);
}

.bm-recurrence-description {
  color: var(--bm-color-text-light);
}

/* When using image background, style header badges for visibility */
.bm-single-event[data-header-use-image="true"] .bm-event-type-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(4px);
}

.bm-single-event[data-header-use-image="true"] .bm-recurrence-description {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Calendar Widget - Visual Styling
   ============================================ */
.bm-all-occurrences {
  background: var(--bm-single-content-bg, var(--bm-color-background));
}

.bm-all-occurrences .bm-content {
  border-top: 1px solid var(--bm-color-border);
}

.bm-all-occurrences h3 {
  color: var(--bm-color-text);
}

.bm-calendar-container {
  background: var(--bm-mini-calendar-bg, var(--bm-single-card-bg, var(--bm-color-background)));
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-card-radius);
}

/* When card background is transparent, remove border too */
.bm-single-event[data-card-transparent="true"] .bm-calendar-container {
  border: none;
}

.bm-calendar-header {
  background: var(--bm-single-header-bg, var(--bm-color-background-alt));
  color: var(--bm-color-text);
  border-bottom: 1px solid var(--bm-color-border);
}

.bm-nav-btn {
  color: var(--bm-color-text-light);
  transition: color var(--bm-transition);
}

.bm-nav-btn:hover {
  color: var(--bm-color-text);
  background: transparent;
}

.bm-calendar-day-header {
  color: var(--bm-color-text-light);
  font-size: var(--bm-font-size-sm);
}

.bm-calendar-day {
  background: var(--bm-color-background-alt);
  color: var(--bm-color-text);
  transition: all var(--bm-transition);
}

.bm-calendar-day.bm-empty {
  background: var(--bm-color-background);
}

.bm-calendar-day.bm-today {
  position: relative;
}

.bm-calendar-day.bm-today span {
  position: relative;
  z-index: 2;
  color: var(--bm-color-primary);
  font-weight: 600;
}

.bm-calendar-day.bm-today::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bm-color-primary);
  opacity: 0.15;
  z-index: 1;
}

.bm-calendar-day.bm-has-event {
  position: relative;
}

.bm-calendar-day.bm-has-event span {
  position: relative;
  z-index: 2;
  color: #fff;
}

.bm-calendar-day.bm-has-event::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bm-color-primary);
  z-index: 1;
  transition: background var(--bm-transition);
}

.bm-calendar-day.bm-has-event:hover::before {
  background: var(--bm-color-secondary);
}

/* ============================================
   Date Filter Form - Visual Styling
   ============================================ */
.bm-event-filters form,
.bm-event-filters-facets {
  border-top: 1px solid var(--bm-color-border);
  border-bottom: 1px solid var(--bm-color-border);
}

.bm-filter-group label {
  color: var(--bm-color-text);
  font-weight: 500;
}

.bm-filter-group input {
  border: 1px solid var(--bm-color-border);
  background: var(--bm-color-background);
  color: var(--bm-color-text);
  font-size: var(--bm-font-size-sm);
  transition: border-color var(--bm-transition), box-shadow var(--bm-transition);
}

.bm-filter-group input:focus {
  border-color: var(--bm-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 100, 175, 0.1);
}

.bm-clear-filters {
  color: var(--bm-color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--bm-transition);
}

.bm-clear-filters:hover {
  color: var(--bm-color-secondary);
  text-decoration: none;
}

/* ============================================
   No Events Message
   ============================================ */
.bm-no-events-message h3 {
  color: var(--bm-color-text);
  margin-bottom: var(--bm-spacing-sm);
}

.bm-no-events-message p {
  color: var(--bm-color-text-light);
}

.bm-no-events-message a {
  color: var(--bm-color-primary);
}

/* ============================================
   Buttons
   ============================================ */
.bm-button {
  display: inline-block;
  padding: 10px 24px;
  background: var(--bm-color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--bm-badge-radius);
  font-weight: 500;
  transition: background var(--bm-transition);
}

.bm-button:hover {
  background: var(--bm-color-secondary);
  color: #fff;
  text-decoration: none;
}

.bm-button-alt {
  background: transparent;
  color: var(--bm-color-primary);
  border: 1px solid var(--bm-color-primary);
}

.bm-button-alt:hover {
  background: var(--bm-color-primary);
  color: #fff;
}

/* ============================================
   FacetWP Integration (if used)
   ============================================ */
.facetwp-counter {
  display: none;
}

.facetwp-facet {
  margin-bottom: 0;
}

.facetwp-date-min {
  margin-right: var(--bm-spacing-md);
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .bm-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .bm-nav-btn {
    display: none;
  }
}