/* =====================================================
   LIGHT/DARK MODE COLOR SYSTEM
   ===================================================== */

:root {
  /* DARK MODE COLORS (default) */
  --bg-body: #0f172a;
  --bg-elevated: #1e293b;
  --bg-elevated-soft: #334155;
  --border-subtle: #475569;
  --text-main: #f1f5f9;
  --text-muted: #cbd5e1;
  --text-strong: #ffffff;

  /* Province colors - kept the same */
  --munster-main: #004b8d;
  --munster-accent: #f2c94c;
  --leinster-main: #006d3b;
  --leinster-light: #34d399;
  --national-green: #018749;
  --national-white: #ffffff;
  --national-gold: #f4b41a;

  /* UI accents */
  --accent-primary: #38b2ac;
  --accent-primary-soft: rgba(56, 178, 172, 0.15);
  --accent-outline: #4fd1c5;
  
  /* Effects */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
  --radius-lg: 18px;
  --radius-xl: 24px;
  --transition-fast: 0.18s ease-out;
  --transition-med: 0.25s ease-out;
}

/* LIGHT MODE - activated when body has .light-mode class */
body.light-mode {
  --bg-body: #f8fafc;
  --bg-elevated: #ffffff;
  --bg-elevated-soft: #f1f5f9;
  --border-subtle: #cbd5e1;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-strong: #0f172a;

  /* Lighter shadows for light mode */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
  
  /* Adjust accent for better light mode contrast */
  --accent-primary-soft: rgba(56, 178, 172, 0.1);
}

/* =====================================================
   GLOBAL STYLES
   ===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* =====================================================
   THEME TOGGLE BUTTON
   ===================================================== */

.theme-toggle {
  position: relative;
  background: var(--bg-elevated-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle:hover {
  background: var(--bg-elevated);
  transform: translateY(-1px);
}

.theme-toggle::before {
  content: '🌙';
  font-size: 1rem;
}

body.light-mode .theme-toggle::before {
  content: '☀️';
}

/* =====================================================
   HEADER
   ===================================================== */

/* =====================================================
   SITE HEADER - Clean Modern Design
   ===================================================== */

.site-header {
  background: #ffffff;
  border-bottom: 3px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.light-mode .site-header {
  background: #ffffff;
  border-bottom-color: #e5e7eb;
}

body:not(.light-mode) .site-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ===== Left Side: Logo + Title ===== */

.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.header-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.header-text h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--text-strong);
  line-height: 1.2;
}

.header-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}

/* ===== Right Side: Action Buttons ===== */

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.btn-header {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-elevated-soft);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-transform: none;
}

.btn-header:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.theme-toggle {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border-subtle);
  background: var(--accent-primary);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle::before {
  content: '🌙';
  font-size: 1rem;
}

body.light-mode .theme-toggle {
  background: var(--national-gold);
  color: #000000;
}

body.light-mode .theme-toggle::before {
  content: '☀️';
}

.theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 178, 172, 0.3);
}

body.light-mode .theme-toggle:hover {
  box-shadow: 0 4px 12px rgba(244, 180, 26, 0.3);
}

.btn-help {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-elevated-soft);
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-help:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

/* ===== Irish Flag Accent ===== */

.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    #018749 0%,
    #018749 33%,
    #ffffff 33%,
    #ffffff 66%,
    #f4b41a 66%,
    #f4b41a 100%
  );
}

/* ===== Responsive Design ===== */

@media (max-width: 1024px) {
  .header-text h1 {
    font-size: 1.1rem;
  }

  .header-tagline {
    font-size: 0.75rem;
  }

  .btn-header,
  .theme-toggle {
    font-size: 0.75rem;
    padding: 7px 11px;
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px;  /* Increased from 12px 16px */
    gap: 16px;           /* Increased from 12px */
  }

  .header-brand {
    width: 100%;
    gap: 14px;           /* Added: more space between logo and text */
  }

  .header-logo {
    width: 44px;         /* Increased from 40px */
    height: 44px;        /* Increased from 40px */
  }

  .header-text h1 {
    font-size: 1.05rem;  /* Slightly bigger */
  }

  .header-tagline {
    font-size: 0.75rem;  /* Slightly bigger */
    margin-top: 2px;     /* Added: tiny gap above tagline */
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;           /* Added: more space between buttons */
  }

  .btn-header,
  .theme-toggle {
    padding: 9px 13px;   /* Added: slightly bigger buttons */
  }
}

@media (max-width: 480px) {
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-header,
  .theme-toggle {
    width: 100%;
    justify-content: center;
  }

  .btn-help {
    align-self: flex-start;
  }
}

.site-header {
    position: relative;  /* Remove sticky behavior on mobile */
  }

/* =====================================================
   LAYOUT
   ===================================================== */

.layout {
  max-width: 1440px;
  margin: 16px auto 32px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .content-panel {
    order: 1;
  }
}

/* =====================================================
   FILTERS PANEL
   ===================================================== */

.filters-panel {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  padding: 16px 16px 18px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.filters-panel h2 {
  margin-top: 0;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

.filter-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.filter-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.filter-section h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =====================================================
   CHIPS (Province filters)
   ===================================================== */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--border-subtle);
  background: var(--bg-elevated-soft);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chip:hover {
  background: var(--accent-primary-soft);
  border-color: var(--accent-outline);
  transform: translateY(-1px);
}

.chip-active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
  font-weight: 600;
}

/* Province-specific chip colors (only when active) */
.chip-active[data-province="Munster"] {
  background: var(--munster-main);
  border-color: var(--munster-main);
  color: var(--munster-accent);
}

.chip-active[data-province="Leinster"] {
  background: var(--leinster-main);
  border-color: var(--leinster-main);
  color: #ffffff;
}

/* =====================================================
   CHECKBOXES
   ===================================================== */

.checkbox-group {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-main);
  padding: 4px 0;
  font-family: 'Inter', sans-serif;
}

.checkbox-group label:hover {
  color: var(--accent-primary);
}

.checkbox-group input[type="checkbox"] {
  accent-color: var(--accent-primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* =====================================================
   INPUTS & SELECTS
   ===================================================== */

#search-input,
#month-select,
#county-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--border-subtle);
  background: var(--bg-elevated-soft);
  color: var(--text-main);
  font-size: 0.85rem;
  transition: all var(--transition-fast);
  font-family: 'Inter', sans-serif;
}

#search-input:focus,
#month-select:focus,
#county-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-soft);
}

#search-input::placeholder {
  color: var(--text-muted);
}

/* =====================================================
   TOGGLE SWITCH
   ===================================================== */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--text-main);
}

.toggle input {
  display: none;
}

.toggle-slider {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--border-subtle);
  position: relative;
  transition: background var(--transition-med);
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 999px;
  background: #ffffff;
  transition: transform var(--transition-med);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle-slider {
  background: var(--accent-primary);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.btn-primary {
  background: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(56, 178, 172, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56, 178, 172, 0.4);
}

.btn-outline {
  background: transparent;
  color: var(--text-main);
  border-color: var(--border-subtle);
}

.btn-outline:hover {
  background: var(--bg-elevated-soft);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn-reset-filters {
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-reset-filters:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
}

.btn-help {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-help:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

/* =====================================================
   CONTENT PANEL
   ===================================================== */

.content-panel {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  padding: 14px 16px 18px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Summary Bar */
.summary-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--bg-elevated);
  border: 2px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 24px;
}

/* Top row: count + buttons */
.summary-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Results count */
#results-count {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-strong);
}

/* Summary actions container */
.summary-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* View toggles - more breathing room */
.view-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

.view-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-body);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.view-btn:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
}

.view-btn-active {
  background: var(--accent-primary);
  color: var(--text-on-primary);
}

/* Bottom row: summary text + calendar button */
.summary-bar-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#active-filters-summary {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Entry deadlines checkbox */
.entry-deadlines-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .summary-bar {
    padding: 16px;
    gap: 12px;
  }
  
  .summary-bar-top,
  .summary-bar-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .summary-actions {
    width: 100%;
    justify-content: flex-start;
  }
  
  .view-toggle {
    width: 100%;
  }
  
  .view-btn {
    flex: 1;
    text-align: center;
  }
  
  #results-count {
    font-size: 1rem;
  }
}

/* =====================================================
   MONTH HEADINGS
   ===================================================== */

.month-heading {
  grid-column: 1 / -1;
  margin: 32px 0 16px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}

.month-heading::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--border-subtle),
    transparent
  );
}

/* =====================================================
   FIXTURES GRID
   ===================================================== */

.fixtures-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

#fixtures-list[hidden] {
  display: none !important;
}

@media (min-width: 720px) {
  .fixtures-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* =====================================================
   FIXTURE CARDS
   ===================================================== */

/* Light mode - better card visibility */

/* =====================================================
   FIXTURE CARD CONTENT
   ===================================================== */

.fixture-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 4px 0;
  color: var(--text-strong);
  line-height: 1.3;
}

/* =====================================================
   BADGES
   ===================================================== */

.badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.badge-type {
  border: 2px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-main);
}

.badge-munster {
  background: var(--munster-main);
  color: var(--munster-accent);
  border: 2px solid var(--munster-main);
}

.badge-leinster {
  background: var(--leinster-main);
  color: #ffffff;
  border: 2px solid var(--leinster-main);
}

.badge-national {
  background: linear-gradient(90deg, 
    var(--national-green) 0%, 
    var(--national-white) 50%, 
    var(--national-gold) 100%
  );
  color: #000000;
  font-weight: 800;
  border: 2px solid var(--national-green);
}

/* County badges with improved contrast */
.badge-county {
  background: var(--bg-elevated-soft);
  border: 2px solid var(--border-subtle);
  color: var(--text-strong);
  font-weight: 700;
}

/* County-specific colors (keeping traditional GAA colors) */
.badge-county.county-chip-cork {
  background: #e4002b;
  color: #ffffff;
  border-color: #b30022;
}

.badge-county.county-chip-kerry {
  background: #1b5e20;
  color: #ffd54f;
  border-color: #0d3110;
}

.badge-county.county-chip-limerick {
  background: #009a44;
  color: #ffffff;
  border-color: #007033;
}

.badge-county.county-chip-clare {
  background: #009a44;
  color: #ffd700;
  border-color: #007033;
}

.badge-county.county-chip-tipperary {
  background: #0032a0;
  color: #ffd700;
  border-color: #002270;
}

.badge-county.county-chip-waterford {
  background: #1b365d;
  color: #ffffff;
  border-color: #0f1f35;
}

.badge-county.county-chip-dublin {
  background: #0057b8;
  color: #ffffff;
  border-color: #003d80;
}

.badge-county.county-chip-kildare {
  background: #ffffff;
  color: #111827;
  border-color: #cbd5e1;
}

.badge-county.county-chip-meath {
  background: #006400;
  color: #ffd54f;
  border-color: #004500;
}

.badge-county.county-chip-louth {
  background: #d40000;
  color: #ffffff;
  border-color: #9a0000;
}

.badge-county.county-chip-offaly {
  background: #009639;
  color: #ffffff;
  border-color: #006928;
}

.badge-county.county-chip-longford {
  background: #0033a0;
  color: #ffd700;
  border-color: #002370;
}

.badge-county.county-chip-kilkenny {
  background: #000000;
  color: #ffcc00;
  border-color: #333333;
}

.badge-county.county-chip-westmeath {
  background: #800000;
  color: #ffffff;
  border-color: #550000;
}

.badge-county.county-chip-wexford {
  background: #5e338d;
  color: #ffd700;
  border-color: #3d1f5c;
}

.badge-county.county-chip-carlow {
  background: #d62828;
  color: #ffdd00;
  border-color: #9e1c1c;
}

.badge-county.county-chip-galway {
  background: #7c2e3b;
  color: #ffffff;
  border-color: #561f28;
}

.badge-county.county-chip-mayo {
  background: #0b8346;
  color: #ffffff;
  border-color: #085d30;
}

.badge-county.county-chip-down {
  background: #ee1c25;
  color: #ffffff;
  border-color: #b8151b;
}

.badge-county.county-chip-monaghan {
  background: #0033a0;
  color: #ffffff;
  border-color: #002370;
}

.badge-county.county-chip-limclare {
  background: #009a44;
  color: #ffffff;
  border-color: #007033;
}

.badge-county.county-chip-louthdownmon {
  background: #b80f0f;
  color: #f4f5f2;
  border-color: #000309;
}

.badge-county.county-chip-ckw {
  background: #5e338d;
  color: #ffd700;
  border-color: #3d1f5c;
}

/* =====================================================
   CHAMPIONSHIP RINGS
   ===================================================== */

/* =====================================================
   MAP LINK
   ===================================================== */

.map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23EA4335" d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7z"/><circle cx="12" cy="9" r="3.5" fill="%23FFFFFF"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.map-link:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* =====================================================
   FIXTURE ACTIONS
   ===================================================== */

.btn-calendar {
  background: transparent;
  border-radius: 999px;
  border: 2px solid var(--border-subtle);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-main);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-calendar:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

/* =====================================================
   MOBILE FILTERS
   ===================================================== */

#mobile-filter-toggle {
  display: none;
  background: var(--bg-elevated);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  transition: all var(--transition-fast);
}

#mobile-filter-toggle:hover {
  background: var(--bg-elevated-soft);
}

.filters-collapsible {
  overflow: hidden;
  max-height: none;
  transition: max-height 0.35s ease;
}

@media (max-width: 768px) {
  #mobile-filter-toggle {
    display: block;
  }

  .filters-collapsible {
    max-height: 0;
  }

  .filters-collapsible.expanded {
    max-height: 2000px;
  }

  .calendar-hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 20px 16px;
  }

  .calendar-hero-text {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .calendar-hero-actions {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    margin-top: 12px;
  }
}

/* =====================================================
   NO RESULTS
   ===================================================== */

.no-results {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: rgba(239, 68, 68, 0.1);
  border: 2px solid rgba(239, 68, 68, 0.3);
  color: var(--text-main);
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
}

/* =====================================================
   LOAD MORE
   ===================================================== */

.load-more-container {
  margin-top: 20px;
  text-align: center;
}

/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {
  max-width: 1440px;
  margin: 0 auto 20px;
  padding: 0 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* =====================================================
   COUNTY BORDERS (Non-Championship Cards)
   ===================================================== */

.county-border {
  border-width: 6px !important;
  border-style: solid !important;
}

/* Two-color split borders for counties */
.county-cork {
  border-color: #e4002b #ffffff;
}

.county-kerry {
  border-color: #1b5e20 #f3c623;
}

.county-limerick {
  border-color: #006e2e #0032a0 #ffd700 #ffffff;
}

.county-clare {
  border-color: #006e2e #0032a0 #ffd700 #ffffff;
}

.county-tipperary {
  border-color: #0032a0 #ffd700;
}

.county-waterford {
  border-color: #1b365d #ffffff;
}

.county-dublin {
  border-color: #0057b8 #012d53;
}

.county-kildare {
  border-color: #ffffff #121212;
}

.county-meath {
  border-color: #ffd54f #006400;
}

.county-louth {
  border-color: #ffffff #d40000;
}

.county-offaly {
  border-color: #ffffff #009639;
}

.county-longford {
  border-color: #ffd700 #0033a0;
}

.county-kilkenny {
  border-color: #ffcc00 #000000;
}

.county-westmeath {
  border-color: #800000 #ffcccb;
}

.county-wexford {
  border-color: #5e338d #f3c623;
}

.county-carlow {
  border-color: #ffdd00 #d62828;
}

.county-galway {
  border-color: #7c2e3b #ffffff;
}

.county-mayo {
  border-color: #0b8346 #ffffff;
}

.county-down {
  border-color: #ee1c25 #ffffff;
}

.county-monaghan {
  border-color: #0033a0 #ffffff;
}

.county-ckw {
  border-color: #d62828 #5e338d #f3c623 #0b8346;
}

.county-limclare {
  border-color: #009a44 #0032a0;
}

.county-louthdownmon {
  border-color:#b80f0f #f4f5f2
}

/* =====================================================
   VENUES TOGGLE (Multi-County Venues)
   ===================================================== */

.venues-toggle {
  margin-top: 10px;
  color: var(--accent-primary);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.venues-toggle:hover {
  color: var(--accent-outline);
}

.venues-list {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-elevated-soft);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  line-height: 1.6;
}

.venues-list span {
  display: block;
  padding: 2px 0;
  color: var(--text-main);
}

/* =====================================================
   HELP MODAL
   ===================================================== */

/* =====================================================
   HELP MODAL
   ===================================================== */

.help-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 9999;
}

.help-modal-overlay[hidden] {
  display: none !important;
}

.help-modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border-subtle);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  max-width: 580px;
  width: 92%;
  padding: 20px 22px 18px;
  position: relative;
  color: var(--text-main);
  font-family: "Inter", sans-serif;
  max-height: 85vh;
  overflow-y: auto;
}

.help-modal h2 {
  font-family: "Outfit", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
  color: var(--text-strong);
}

.help-intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.4;
}

.help-modal h3 {
  font-size: 0.9rem;
  margin: 14px 0 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-main);
  text-transform: uppercase;
}

.help-list {
  list-style: none;
  margin: 0 0 12px;
  padding-left: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.help-list li {
  margin-bottom: 6px;
  color: var(--text-main);
  padding-left: 14px;
  position: relative;
}

.help-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-weight: 700;
}

.help-list li strong {
  color: var(--text-strong);
  font-weight: 600;
}

.help-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all var(--transition-fast);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-modal-close:hover {
  color: var(--text-strong);
  transform: scale(1.1);
}

@media (max-width: 480px) {
  .help-modal {
    padding: 16px;
    max-width: 96%;
  }

  .help-modal h2 {
    font-size: 1.1rem;
  }

  .help-intro {
    font-size: 0.8rem;
  }

  .help-list {
    font-size: 0.75rem;
  }
}

/* =====================================================
   PWA INSTALL PROMPT
   ===================================================== */

.pwa-prompt {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
}

.pwa-prompt[hidden] {
  display: none !important;
}

.pwa-prompt__content {
  background: var(--bg-elevated);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.pwa-prompt__text {
  margin-bottom: 12px;
}

.pwa-prompt__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--text-strong);
}

.pwa-prompt__desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.pwa-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pwa-btn-primary {
  background: var(--accent-primary);
  color: #ffffff;
  border: 2px solid var(--accent-primary);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pwa-btn-primary:hover {
  background: var(--accent-outline);
  border-color: var(--accent-outline);
  transform: translateY(-1px);
}

.pwa-btn-secondary {
  background: transparent;
  color: var(--text-main);
  border: 2px solid var(--border-subtle);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pwa-btn-secondary:hover {
  background: var(--bg-elevated-soft);
  border-color: var(--text-muted);
}

.pwa-prompt__link {
  background: transparent;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.pwa-prompt__link:hover {
  color: var(--text-main);
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */

@media (max-width: 480px) {
  .calendar-hero-text h1 {
    font-size: 1.5rem;
  }

  .calendar-hero-text p {
    font-size: 0.85rem;
  }

  .fixture-name {
    font-size: 1rem;
  }

  .help-modal {
    padding: 18px;
    max-width: 96%;
  }

  .help-modal h2 {
    font-size: 1.2rem;
  }
}

@media (min-width: 769px) {
  .filters-collapsible {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* =====================================================
   VIEW TOGGLE (List/Month)
   ===================================================== */

.view-toggle {
  display: inline-flex;
  background: var(--bg-elevated-soft);
  border: 2px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px;
  gap: 4px;
}

.view-btn {
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.view-btn:hover {
  color: var(--text-main);
}

.view-btn-active {
  background: var(--accent-primary);
  color: #ffffff;
  font-weight: 700;
}

/* =====================================================
   CALENDAR VIEW
   ===================================================== */

.calendar-view {
  margin-top: 16px;
}

.calendar-view[hidden] {
  display: none;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 8px;
}

#calendar-month-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-strong);
  margin: 0;
  text-transform: uppercase;
}

.calendar-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  background: var(--bg-elevated-soft);
  color: var(--text-main);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-nav-btn:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  transform: scale(1.05);
}

.calendar-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-nav-btn:disabled:hover {
  background: var(--bg-elevated-soft);
  color: var(--text-main);
  border-color: var(--border-subtle);
  transform: none;
}

/* Calendar Grid */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  background: var(--bg-elevated-soft);
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-subtle);
}

/* Entry deadline styling in calendar day cells */
.calendar-fixture-name.entry-deadline {
  color: #f8f4f3;
  font-weight: 700;
  background: #0c0605;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Day of week headers */
.calendar-day-header {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 4px;
}

/* Individual day cells */
/* Individual day cells */
.calendar-day {
  background: var(--bg-elevated);
  border: 2px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 100px;
  overflow: hidden;
}

.calendar-day:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Empty cells (days from other months) */
.calendar-day-empty {
  background: transparent;
  border: none;
  cursor: default;
  min-height: 80px;
}

.calendar-day-empty:hover {
  transform: none;
  box-shadow: none;
}

/* Day number - top of cell */
.calendar-day-number {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  align-self: flex-start;
}

/* Past dates */
.calendar-day-past {
  opacity: 0.4;
  cursor: not-allowed;
}

.calendar-day-past:hover {
  border-color: var(--border-subtle);
  transform: none;
  box-shadow: none;
}

/* Today */
.calendar-day-today {
  border-color: var(--accent-primary);
  border-width: 3px;
  background: var(--accent-primary-soft);
}

.calendar-day-today .calendar-day-number {
  color: var(--accent-primary);
  font-weight: 900;
}

/* Days with fixtures */
.calendar-day-has-fixtures {
  background: var(--bg-elevated);
}

.calendar-day-has-fixtures:hover {
  background: var(--accent-primary-soft);
}

/* Fixture names list */
.calendar-day-fixtures {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.calendar-fixture-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--bg-elevated-soft);
  border-left: 3px solid var(--accent-primary);
}

/* Major event highlighting */
.calendar-fixture-name.is-major {
  border-left-color: var(--national-gold);
  background: rgba(244, 180, 26, 0.1);
  font-weight: 600;
}

/* More fixtures indicator */
.calendar-more-fixtures {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 600;
  font-style: italic;
}

/* Championship indicator dot */
.calendar-day-championship {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--national-gold);
  box-shadow: 0 0 4px rgba(212, 175, 55, 0.6);
}

/* Remove old count badge styles - we don't need them anymore */
.calendar-day-count {
  display: none;
}

/* =====================================================
   DAY DETAILS MODAL
   ===================================================== */

.day-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.day-modal-overlay[hidden] {
  display: none !important;
}

.day-modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border-subtle);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.day-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid var(--border-subtle);
}

.day-modal-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}

.day-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  background: var(--bg-elevated-soft);
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  line-height: 1;
}

.day-modal-close:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  transform: scale(1.1);
}

.day-modal-content {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 60vh;  /* Limit height to 60% of viewport */
  min-height: 200px; /* Ensure minimum space */
}

/* Make fixture cards in modal full-size and readable */

/* Mobile adjustments */
@media (max-width: 768px) {
  .calendar-grid {
    gap: 4px;
    padding: 12px;
  }

  .calendar-day {
    min-height: 70px;
    padding: 6px;
    align-items: center;
    justify-content: center;
  }

  .calendar-day-number {
    font-size: 1.1rem;
    margin-bottom: 4px;
    align-self: center;
  }

  /* Hide fixture names on mobile */
  .calendar-day-fixtures {
    display: none;
  }

  /* Show count badge on mobile */
  .calendar-day-count {
    display: block !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--accent-primary);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 999px;
    margin-top: 4px;
  }

  .calendar-day-count.has-major {
    background: var(--national-gold);
    color: #000000;
  }

  /* Championship dot - keep it */
  .calendar-day-championship {
    top: 6px;
    right: 6px;
  }

  /* Improve mobile modal */
  .day-modal {
    max-width: 95%;
    max-height: 90vh;
  }

  .day-modal-content {
    padding: 12px;
    gap: 12px;
  }

  /* Make modal cards more compact on mobile */

  .day-modal-content .fixture-name {
    font-size: 1rem;
  }
}

/* =====================================================
   FAVORITES SYSTEM
   ===================================================== */

/* Star button on fixture cards - bottom left */
.btn-favorite {
  background: transparent;
  border: 2px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-favorite:hover {
  transform: scale(1.1);
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
}

.btn-favorite.is-favorited {
  border-color: var(--national-gold);
  background: rgba(244, 180, 26, 0.15);
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
}

/* Fixture actions row - now has two buttons side by side */

/* Rest of favorites styles remain the same... */
.btn-favorites-filter {
  background: transparent;
  border: 2px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-favorites-filter:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.btn-favorites-filter.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
}

.favorites-count {
  background: var(--accent-primary);
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.btn-favorites-filter.active .favorites-count {
  background: rgba(255, 255, 255, 0.25);
}

/* Export favorites button */
.btn-export-favorites {
  background: var(--national-gold);
  border: 2px solid var(--national-gold);
  color: #000000;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-export-favorites:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 180, 26, 0.4);
}

.btn-export-favorites:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-export-favorites:disabled:hover {
  box-shadow: none;
}

/* Facebook link styling */
.facebook-link {
  color: #1877f2;
  margin-left: 8px;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
}

.facebook-link:hover {
  opacity: 0.7;
}
/* =====================================================
   ENTRY DEADLINE CARDS
   ===================================================== */

/* Force orange background in light mode too */

.calendar-day-count.deadline-only {
  background: #ff9800;
  color: #000000;
  font-weight: 700;
}

/* Mobile calendar key */
.calendar-mobile-key {
  display: none;
  background: var(--bg-elevated);
  border: 2px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 0.85rem;
}

.calendar-mobile-key h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--text-strong);
}

.calendar-mobile-key-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.calendar-mobile-key-item:last-child {
  margin-bottom: 0;
}

.calendar-mobile-key-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.calendar-mobile-key-badge.fixtures {
  background: var(--accent-primary);
  color: var(--text-on-primary);
}

.calendar-mobile-key-badge.deadlines {
  background: #ff9800;
  color: #000000;
}

.calendar-mobile-key-badge.both {
  background: var(--accent-primary);
  color: var(--text-on-primary);
}

@media (max-width: 768px) {
  .calendar-mobile-key {
    display: block;
  }
}

/* Event Details Button */
.btn-primary {
  background: var(--accent-primary);
  color: #ffffff;
  border: 2px solid var(--accent-primary);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
  transform: translateY(-2px);
}

/* Make sure it looks good in the fixture actions row */

/* Favorite star visibility in dark mode */
.btn-favorite {
  color: var(--text-body);
}

body:not(.light-mode) .btn-favorite {
  color: #ffffff;  /* White unfilled star in dark mode */
  opacity: 0.6;
}

body:not(.light-mode) .btn-favorite.is-favorited,
body:not(.light-mode) .btn-favorite:has-text('⭐') {
  opacity: 1;  /* Full opacity when filled */
}

/* Age Group Toggle Spacing */
.summary-actions .view-toggle:first-of-type {
  margin-right: 16px;
}

@media (max-width: 768px) {
  .summary-actions {
    flex-wrap: wrap;
  }
  
  .summary-actions .view-toggle {
    margin-bottom: 8px;
  }
}

/* Only apply hover to inactive buttons */
.view-btn:not(.view-btn-active):hover {
  background: var(--bg-hover);
  color: var(--text-strong);
}

/* Keep active button stable */
.view-btn-active {
  background: var(--accent-primary) !important;
  color: var(--text-on-primary) !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

h1, h2, h3, .fixture-name {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Use 600 or 800 only */
.fixture-name { font-weight: 800; }
h1, h2, h3 { font-weight: 600; }

.header-logo {
  width: auto;  /* Change from fixed width */
  height: 60px; /* Keep height fixed */
  max-width: 150px; /* Prevent it getting too wide */
  object-fit: contain; /* Don't crop the image */
  border-radius: 0; /* Remove circular crop if needed */
}

/* =====================================================================
   2027 REDESIGN (merged in) — bands, county palette, accessible calendar,
   header + panel refinements. Previously styles-2027.css.
   ===================================================================== */
/* ---- 1. Token overrides (reskins header, filters, chips, modals, PWA) ---- */
:root{
  --bg-body:#0d1526;
  --bg-elevated:#16213a;
  --bg-elevated-soft:#1f2c47;
  --border-subtle:#35496f;
  --text-main:#eef2f9;
  --text-muted:#aebbd4;
  --text-strong:#ffffff;

  --munster-main:#0e63b3;  --munster-accent:#ffd75e;
  --leinster-main:#0f8a4d; --leinster-light:#34d399;
  --national-green:#0f9d58; --national-white:#ffffff; --national-gold:#f4b41a;

  --accent-primary:#35c4ba;
  --accent-primary-soft:rgba(53,196,186,.15);
  --accent-outline:#5ad6cd;

  --radius-lg:16px; --radius-xl:20px;

  /* new helper tokens used by the band system */
  --line-soft:rgba(255,255,255,.06);
  --ink-on-teal:#00201d;
}
body.light-mode{
  --bg-body:#eaeef4;
  --bg-elevated:#ffffff;
  --bg-elevated-soft:#f3f6fb;
  --border-subtle:#d3dbe8;
  --text-main:#152239;
  --text-muted:#54627d;
  --text-strong:#0f172a;
  --accent-primary:#128a83;
  --accent-primary-soft:rgba(18,138,131,.12);
  --accent-outline:#0f746e;
  --line-soft:rgba(20,34,57,.08);
}

/* Header uses hardcoded colours in styles.css — realign to the new surfaces */
body:not(.light-mode) .site-header{background:var(--bg-elevated);border-bottom-color:var(--border-subtle)}
body.light-mode .site-header{background:#ffffff;border-bottom-color:#e5e7eb}

/* ---- 2. Accessibility + readability baseline ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.skip-link{position:absolute;left:-999px;top:8px;z-index:300;background:var(--accent-primary);
  color:var(--ink-on-teal);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip-link:focus{left:12px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none!important;box-shadow:0 0 0 3px var(--accent-primary-soft),0 0 0 1px var(--accent-primary);border-radius:8px}
/* comfortable minimum tap targets on interactive controls */
.btn,.btn-header,.chip,.view-btn,.calendar-nav-btn,.theme-toggle,.btn-help{min-height:40px}

/* Softer month heading (drops the heavy all-caps for readability) */
.month-heading{
  text-transform:none;
  letter-spacing:.005em;
  font-size:1.15rem;
  color:var(--text-main);
}

/* ---- 3. Fixture cards (band system) ---- */
#fixtures-list.fixtures-grid{gap:16px}

.fx-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:16px;box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform var(--transition-fast),border-color var(--transition-fast);
}
.fx-card:hover{transform:translateY(-2px);border-color:var(--accent-primary)}
.fx-card.is-major{border-color:color-mix(in srgb,var(--national-gold) 55%,var(--border-subtle))}
.fx-card.is-deadline{border-style:dashed}

.bandstack{display:flex;flex-direction:column;margin:-16px -16px 0}
.fx-main{display:grid;grid-template-columns:auto 1fr;gap:14px}

/* Bands: province, county, championship */
.prov-band,.county-band,.champ-band{display:flex;align-items:center;gap:8px;padding:7px 16px;
  font-size:.72rem;font-weight:700;letter-spacing:.03em}

.prov-band{color:#fff}
.prov-band.p-Munster{background:var(--munster-main)}
.prov-band.p-Leinster{background:var(--leinster-main)}
.prov-band.p-National{background:var(--national-green);color:#fff}

.county-band{font-weight:700;color:#fff}
.county-band .cico{font-size:.85rem;opacity:.9}
.county-band.cc-all{background:repeating-linear-gradient(45deg,var(--bg-elevated-soft),var(--bg-elevated-soft) 9px,#26365422 9px,#26365422 18px);color:var(--text-main);border-bottom:1px solid var(--border-subtle)}

/* Championship band — deliberately louder than the province band, solid fills */
.champ-band{font-family:'Outfit',sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.07em;
  text-transform:uppercase;padding:10px 16px;position:relative;color:#fff}
.champ-band .trophy{font-size:1rem;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.champ-band .champ-tag{margin-left:auto;text-transform:uppercase;font-size:.6rem;letter-spacing:.08em;
  font-weight:800;background:var(--national-gold);color:#241a00;padding:3px 9px;border-radius:999px}
.champ-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--national-gold)}
.champ-band.c-Munster{background:#0a3f77;color:#ffe38a}
.champ-band.c-Leinster{background:#0a5c33;color:#fff0bf}
.champ-band.c-National{background:#f4b41a;color:#1a1400}
.champ-band.c-National::after{background:#0c2a15}
.champ-band.c-National .champ-tag{background:#0c2a15;color:#ffe38a}

/* Date tile */
.fx-date{width:60px;flex-shrink:0;border-radius:11px;overflow:hidden;border:1px solid var(--border-subtle);
  text-align:center;background:var(--bg-elevated-soft);align-self:start}
.fx-date .wd{display:block;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 0 3px;color:var(--text-muted);background:#26355380}
.fx-date .dd{display:block;font-family:'Outfit',sans-serif;font-size:1.6rem;font-weight:800;line-height:1;padding:7px 0 2px;color:var(--text-strong)}
.fx-date .mo{display:block;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 0 6px;color:var(--text-muted)}
.fx-date.range .dd{font-size:1rem;padding-top:9px}

.fx-body{min-width:0}
.fx-name{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:700;line-height:1.25;margin:0;color:var(--text-strong)}
.fx-card.is-major .fx-name{color:color-mix(in srgb,var(--national-gold) 70%,var(--text-strong))}
.fx-venue{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:5px 0 0;font-size:.88rem;color:var(--text-muted)}
.fx-meta{margin:6px 0 0;font-size:.8rem;color:var(--text-muted);line-height:1.5}

.fx-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fx-badge{font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:7px;white-space:nowrap}
.fx-badge.type{background:transparent;border:1px solid var(--border-subtle);color:var(--text-muted)}
.fx-badge.major{background:var(--national-gold);color:#241a00}

.fx-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--line-soft)}
.fx-btn{min-height:38px;padding:0 15px;border-radius:9px;border:1px solid var(--border-subtle);
  background:var(--bg-elevated-soft);color:var(--text-main);font-weight:600;font-size:.83rem;cursor:pointer;transition:all var(--transition-fast)}
.fx-btn:hover{border-color:var(--accent-primary);color:var(--accent-outline)}
.fx-star{margin-left:auto;width:44px;height:38px;border-radius:9px;border:1px solid var(--border-subtle);
  background:var(--bg-elevated-soft);color:var(--text-muted);font-size:1.05rem;cursor:pointer;transition:all var(--transition-fast)}
.fx-star:hover{border-color:var(--national-gold);color:var(--national-gold)}
.fx-star[aria-pressed="true"]{color:var(--national-gold);border-color:var(--national-gold);
  background:color-mix(in srgb,var(--national-gold) 14%,var(--bg-elevated-soft))}

/* Multi-county venues expander */
.fx-card .venues-toggle{align-self:flex-start;background:transparent;border:1px solid var(--border-subtle);
  color:var(--accent-outline);font-weight:600;font-size:.8rem;padding:6px 12px;border-radius:8px;cursor:pointer}
.fx-card .venues-list{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--text-muted);
  background:var(--bg-elevated-soft);border-radius:8px;padding:10px 12px}

/* ---- 4. County palette (GAA colours) as bands ---- */
.county-band.cc-cork{background:#e4002b}
.county-band.cc-kerry{background:#1b5e20;color:#ffd54f}
.county-band.cc-limerick{background:#009a44}
.county-band.cc-clare{background:#009a44;color:#ffd700}
.county-band.cc-tipperary{background:#0032a0;color:#ffd700}
.county-band.cc-waterford{background:#1b365d}
.county-band.cc-dublin{background:#0057b8}
.county-band.cc-kildare{background:#ffffff;color:#111827;border-bottom:1px solid #cbd5e1}
.county-band.cc-meath{background:#006400;color:#ffd54f}
.county-band.cc-louth{background:#d40000}
.county-band.cc-offaly{background:#009639}
.county-band.cc-longford{background:#0033a0;color:#ffd700}
.county-band.cc-kilkenny{background:#000000;color:#ffcc00}
.county-band.cc-westmeath{background:#800000}
.county-band.cc-wexford{background:#5e338d;color:#ffd700}
.county-band.cc-carlow{background:#d62828;color:#ffdd00}
.county-band.cc-galway{background:#7c2e3b}
.county-band.cc-mayo{background:#0b8346}
.county-band.cc-down{background:#ee1c25}
.county-band.cc-monaghan{background:#0033a0}
.county-band.cc-limclare{background:#009a44}
.county-band.cc-louthdownmon{background:#b80f0f;color:#f4f5f2}
.county-band.cc-ckw{background:#5e338d;color:#ffd700}

/* ---- 5. Calendar ---- */
.calendar-day{cursor:pointer}
.calendar-day[role="gridcell"]:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent-primary)}
.calendar-day-empty{cursor:default}

.calendar-fixture-name{border-left:3px solid var(--accent-primary);background:var(--bg-elevated-soft);
  color:var(--text-main);font-weight:500}
.calendar-fixture-name.p-Munster{border-left-color:var(--munster-main)}
.calendar-fixture-name.p-Leinster{border-left-color:var(--leinster-main)}
.calendar-fixture-name.p-National{border-left-color:var(--national-green)}
.calendar-fixture-name.is-champ{border-left-color:var(--national-gold);
  background:color-mix(in srgb,var(--national-gold) 12%,var(--bg-elevated-soft));font-weight:700}
.calendar-fixture-name.entry-deadline{border-left-color:var(--text-muted)}
.calendar-more-fixtures{font-style:normal;font-weight:600}
#calendar-month-title{text-transform:none;letter-spacing:.01em}


/* =====================================================================
   6. Header + panels refinement (2027)
   Lighter, more consistent, less "box-in-a-box".
   ===================================================================== */

/* Contrast-safe text colour for teal-filled controls (flips per theme) */
:root{ --ink-on-teal:#00201d; }
body.light-mode{ --ink-on-teal:#ffffff; }

/* ---- Header ---- */
.header-container{ padding:14px 24px; gap:16px; }
.header-brand{ gap:12px; }
.header-logo{ width:40px; height:40px; }
.header-text h1{ font-size:1.3rem; letter-spacing:-.01em; text-transform:none; }
.header-tagline{ font-size:.78rem; color:var(--text-muted); }
.header-actions{ gap:8px; }

/* One consistent pill for every header control */
.btn-header,.theme-toggle{
  border-width:1px; border-radius:999px; padding:9px 15px; font-size:.82rem; font-weight:600;
}
.btn-header:hover{
  transform:none; background:var(--accent-primary-soft);
  border-color:var(--accent-primary); color:var(--accent-outline);
}
/* Theme toggle becomes a calm utility pill (was a loud teal/gold button) */
.theme-toggle,
body.light-mode .theme-toggle{
  background:var(--bg-elevated-soft); color:var(--text-main); border:1px solid var(--border-subtle);
}
.theme-toggle:hover,
body.light-mode .theme-toggle:hover{
  transform:none; box-shadow:none; border-color:var(--accent-primary); color:var(--accent-outline);
}
.btn-help{ width:38px; height:38px; border-width:1px; }
/* small gap so utility (theme + help) reads as a group, then the links */
.btn-help{ margin-right:6px; }

/* ---- Top control bar: drop the inner box, make it a clean toolbar ---- */
.summary-bar{
  background:transparent; border:0; padding:0; margin-bottom:18px; gap:14px;
}
.summary-actions{ gap:10px; }

/* Segmented toggles (List/Month, Adult/Underage) unified as pill groups */
.view-toggle{
  background:var(--bg-elevated-soft); border:1px solid var(--border-subtle);
  padding:4px; border-radius:999px; gap:2px;
}
.view-btn{ border-radius:999px; padding:8px 16px; font-size:.85rem; color:var(--text-muted); }
.view-btn:hover:not(.view-btn-active){ background:transparent; color:var(--text-main); }
.view-btn-active{ background:var(--accent-primary); color:var(--ink-on-teal); font-weight:700; }

/* Favourites + export as matching pills; gold only when actually usable */
.btn-favorites-filter,.btn-export-favorites{
  border-width:1px; border-radius:999px; padding:9px 15px;
}
.btn-favorites-filter.active{ background:var(--accent-primary); border-color:var(--accent-primary); color:var(--ink-on-teal); }
.btn-favorites-filter.active .favorites-count{ background:rgba(0,0,0,.18); color:inherit; }
.favorites-count{ background:var(--accent-primary); color:var(--ink-on-teal); }
.btn-export-favorites{ background:transparent; border-color:var(--border-subtle); color:var(--text-main); }
.btn-export-favorites:not(:disabled){ background:var(--national-gold); border-color:var(--national-gold); color:#241a00; }

/* Bottom row + entry deadlines: quiet dividers instead of heavy borders */
.summary-bar-bottom{ border-top:1px solid var(--line-soft); padding-top:12px; }
#active-filters-summary{ font-size:.9rem; }
#btn-month-ics{ border-radius:999px; }
.entry-deadlines-toggle{ border-top:1px solid var(--line-soft); padding-top:12px; color:var(--text-muted); font-size:.85rem; }
.entry-deadlines-toggle .toggle-checkbox{ accent-color:var(--accent-primary); width:18px; height:18px; }

/* ---- Filters panel: lighter, more tactile, same behaviour ---- */
.filters-panel{ border-width:1px; border-radius:var(--radius-lg); padding:18px; }
.filters-panel h2{ font-size:.8rem; letter-spacing:.1em; color:var(--text-muted); }
.filter-section{ margin-top:16px; padding-top:14px; }
.filter-section h3{ font-size:.72rem; letter-spacing:.09em; }

/* Province chips */
.chip{ border-width:1px; padding:7px 13px; font-weight:600; }
.chip:hover{ transform:none; }
.chip-active{ color:var(--ink-on-teal); }          /* readable on the teal fill in both themes */

/* Event-type checkboxes read as tappable rows */
.checkbox-group{ gap:2px; }
.checkbox-group label{ padding:8px 10px; border-radius:9px; font-size:.85rem; }
.checkbox-group label:hover{ background:var(--accent-primary-soft); color:var(--text-main); }

/* Search + selects: consistent, with a search icon */
#search-input,#month-select,#county-select{ border-width:1px; border-radius:10px; padding:11px 12px; }
#search-input{
  padding-left:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%238a99b8' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px center;
}

/* Mobile filter toggle as a proper pill */
.mobile-filter-toggle{
  border-radius:999px; border:1px solid var(--border-subtle);
  background:var(--bg-elevated-soft); color:var(--text-main); font-weight:600;
}

/* ---- 7. Compact the top toggles on narrow screens ----
   styles.css forces .view-toggle to width:100% under 768px, which makes the
   List/Month + Adult/Underage bars huge. Keep them as compact pills that wrap. */
@media (max-width:768px){
  .summary-actions{ width:100%; gap:8px; }
  .summary-actions .view-toggle,
  .summary-actions .view-toggle:first-of-type{ width:auto; margin:0; }
  .view-btn{ flex:0 0 auto; padding:8px 14px; font-size:.82rem; }
}
/* Active toggle text stays legible on the teal fill in both themes
   (overrides an invalid !important rule that relied on an undefined variable) */
.view-btn.view-btn-active{ color:var(--ink-on-teal) !important; }

/* ---- 8. Mobile: compact header buttons ----
   styles.css makes header buttons full-width & stacked under 480px. Keep them
   as small pills that wrap in rows instead. */
@media (max-width:768px){
  .header-actions{ gap:8px; }
  .btn-header,.theme-toggle{ padding:7px 12px; font-size:.78rem; }
  .btn-help{ width:34px; height:34px; font-size:1rem; }
}
@media (max-width:480px){
  .header-actions{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
  .btn-header,.theme-toggle{ width:auto; justify-content:center; padding:7px 11px; font-size:.76rem; }
  .btn-help{ align-self:auto; }
}

/* ---- 9. Date tile: red stripe on the day portion (calendar motif) ---- */
:root{ --date-stripe:#d81f2a; }
.fx-date .dd{ border-top:3px solid var(--date-stripe); }

/* ---- 10. Smaller summary-bar controls (desktop + mobile) ----
   The a11y min-height and generous padding made these read as oversized.
   Tighten the whole top control set; specificity beats the earlier rules. */
.summary-bar{ gap:12px; }
.summary-actions{ gap:8px; }
.summary-actions .view-toggle{ padding:3px; }
.summary-actions .view-btn{ min-height:0; padding:5px 12px; font-size:.78rem; }
.summary-actions .btn-favorites-filter,
.summary-actions .btn-export-favorites{ min-height:0; padding:6px 12px; font-size:.76rem; }
.summary-actions .favorites-count{ padding:1px 6px; font-size:.68rem; min-width:16px; }
#btn-month-ics{ min-height:0; padding:6px 14px; font-size:.78rem; }
.entry-deadlines-toggle{ font-size:.82rem; }
.entry-deadlines-toggle .toggle-checkbox{ width:16px; height:16px; }

/* ---- 11. Committee portal link (County Board entry point) ---- */
.btn-committee{ border-color:var(--accent-primary); color:var(--accent-outline); }
.btn-committee:hover{ background:var(--accent-primary); color:var(--ink-on-teal); border-color:var(--accent-primary); }