/* ==========================================================
   AASR District Calendar — White House Palette (Light Mode)

   Palette:
   --navy:        #0d132d    Deep navy (header, footer, accents)
   --navy-mid:    #151a30    Mid navy
   --red:         #b50000    Accent red
   --pale:        #d9dee8    Pale gray (borders)
   --stone:       #e8e6e0    Stone
   --light:       #f3f3f3    Light gray (surfaces)
   --white:       #ffffff    Background
   --text:        #293340    Body text
   --muted:       #6b7280    Muted text
   ========================================================== */

:root {
  --navy: #0d132d;
  --navy-mid: #151a30;
  --red: #b50000;
  --pale: #d9dee8;
  --stone: #e8e6e0;
  --light: #f3f3f3;
  --white: #ffffff;
  --text: #293340;
  --muted: #6b7280;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Instrument Sans', Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

/* ---- Site Header ---- */
.site-header {
  background: var(--navy);
  text-align: center;
  padding: 2.5rem 1.5rem 2rem;
  border-bottom: 3px solid var(--red);
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
}

.header-emblem {
  font-size: 2rem;
  color: var(--pale);
  margin-bottom: 0.75rem;
  line-height: 1;
  letter-spacing: 0.3em;
}

.site-header h1 {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--white);
  letter-spacing: 0.01em;
}

.site-header .subtitle {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  color: var(--pale);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header-rule {
  width: 60px;
  height: 2px;
  background: var(--red);
  margin: 1.25rem auto;
}

.site-header .subtitle-secondary {
  margin: 0;
  font-size: 0.85rem;
  color: var(--pale);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---- Calendar Container ---- */
.calendar-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ---- Site Footer ---- */
.site-footer {
  background: var(--navy);
  text-align: center;
  padding: 1.5rem 1.5rem 2.5rem;
  color: var(--pale);
  font-size: 0.85rem;
  line-height: 1.7;
}

.footer-rule {
  width: 60px;
  height: 2px;
  background: var(--pale);
  margin: 0 auto 1.5rem;
  opacity: 0.3;
}

/* ==========================================================
   FullCalendar Overrides
   ========================================================== */

.fc {
  --fc-border-color: var(--pale);
  --fc-page-bg-color: var(--white);
  --fc-neutral-bg-color: var(--light);
  --fc-list-event-hover-bg-color: var(--light);
  --fc-today-bg-color: rgba(181, 0, 0, 0.04);
  --fc-event-bg-color: var(--navy);
  --fc-event-border-color: var(--navy);
  --fc-event-text-color: var(--white);
}

/* Toolbar */
.fc .fc-toolbar {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem !important;
}

.fc .fc-toolbar-title {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif !important;
  font-size: 1.5rem !important;
  font-weight: 400;
  color: var(--navy) !important;
}

/* Buttons */
.fc .fc-button {
  font-family: 'Instrument Sans', Arial, sans-serif !important;
  font-size: 0.8rem !important;
  padding: 0.55rem 1.1rem !important;
  min-height: 44px;
  min-width: 44px;
  border-radius: 0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.15s ease;
}

.fc .fc-button-primary {
  background-color: transparent !important;
  border: 2px solid var(--pale) !important;
  color: var(--text) !important;
}

.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus {
  background-color: var(--light) !important;
  border-color: var(--text) !important;
  color: var(--navy) !important;
  outline: none;
  box-shadow: none;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--white) !important;
}

/* Prev/Next arrow buttons */
.fc .fc-prev-button,
.fc .fc-next-button {
  padding: 0.55rem 0.75rem !important;
}

/* List view */
.fc .fc-list {
  border: 2px solid var(--pale) !important;
  border-radius: 0;
}

.fc .fc-list-event-title a {
  font-size: 1.05rem;
  color: var(--navy) !important;
  text-decoration: none;
}

.fc .fc-list-event-title a:hover,
.fc .fc-list-event-title a:focus {
  color: var(--red) !important;
  text-decoration: underline;
}

.fc .fc-list-event-time {
  color: var(--muted) !important;
  font-size: 0.95rem;
}

.fc .fc-list-event td {
  padding: 0.85rem 1rem;
  border-color: var(--pale) !important;
}

.fc .fc-list-day-cushion {
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.75rem 1rem;
  background: var(--navy) !important;
  color: var(--white) !important;
}

.fc .fc-list-event {
  cursor: pointer;
}

.fc .fc-list-event:hover td {
  background-color: var(--light) !important;
}

.fc .fc-list-event-dot {
  border-color: var(--red) !important;
}

/* Day grid */
.fc .fc-daygrid-day-number {
  font-size: 0.95rem;
  padding: 0.4rem 0.5rem;
  color: var(--text);
}

.fc .fc-daygrid-day-number.fc-nav-link:hover {
  color: var(--red);
  text-decoration: underline;
}

.fc .fc-col-header-cell-cushion {
  color: var(--navy) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 0.6rem 0 !important;
}

.fc .fc-daygrid-event {
  padding: 0.15rem 0.4rem;
  font-size: 0.85rem;
  border-radius: 0;
  cursor: pointer;
  background: var(--navy) !important;
  border-left: 3px solid var(--red) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  color: var(--white) !important;
}

.fc .fc-daygrid-event:hover {
  background: var(--red) !important;
  color: var(--white) !important;
  border-left-color: var(--navy) !important;
}

.fc .fc-day-today {
  background-color: rgba(181, 0, 0, 0.04) !important;
}

.fc .fc-day-other .fc-daygrid-day-number {
  color: var(--muted);
  opacity: 0.4;
}

/* No-events message */
.fc .fc-list-empty-cushion {
  font-size: 1rem;
  color: var(--muted);
  padding: 2.5rem;
  text-align: center;
}

/* ==========================================================
   Event Detail Modal
   ========================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 19, 45, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

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

.modal-content {
  background: var(--white);
  border: 2px solid var(--pale);
  border-top: 3px solid var(--red);
  border-radius: 0;
  padding: 2.25rem 2rem;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: color 0.15s ease;
}

.modal-close-btn:hover,
.modal-close-btn:focus {
  color: var(--navy);
  outline: none;
}

.modal-event-title {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
  color: var(--navy);
  padding-right: 2.5rem;
  line-height: 1.25;
  font-weight: 400;
}

.modal-field {
  margin-bottom: 1.1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.modal-field strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

#modal-description {
  white-space: pre-wrap;
  word-break: break-word;
}

#modal-description a {
  color: var(--red);
  text-decoration: underline;
}

.modal-add-cal-btn {
  display: block;
  width: 100%;
  margin-top: 1.75rem;
  padding: 0.8rem;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--navy);
  border-radius: 0;
  cursor: pointer;
  min-height: 48px;
  transition: all 0.15s ease;
}

.modal-add-cal-btn:hover,
.modal-add-cal-btn:focus {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  outline: none;
}

.modal-close-btn-bottom {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.8rem;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  color: var(--muted);
  border: 2px solid var(--pale);
  border-radius: 0;
  cursor: pointer;
  min-height: 48px;
  transition: all 0.15s ease;
}

.modal-close-btn-bottom:hover,
.modal-close-btn-bottom:focus {
  background: var(--light);
  border-color: var(--text);
  color: var(--navy);
  outline: none;
}

/* ==========================================================
   Mobile Responsive
   ========================================================== */

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }

  .site-header {
    padding: 2rem 1rem 1.5rem;
  }

  .header-emblem {
    font-size: 1.5rem;
  }

  .site-header h1 {
    font-size: 1.8rem;
  }

  .calendar-container {
    padding: 1.25rem 0.75rem;
  }

  .fc .fc-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1.2rem !important;
    text-align: center;
  }

  .fc .fc-list-event td {
    padding: 0.7rem 0.65rem;
  }

  .modal-content {
    padding: 1.75rem 1.25rem;
  }

  .modal-event-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .fc .fc-button {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.6rem !important;
    letter-spacing: 0.04em;
  }

  .site-header h1 {
    font-size: 1.5rem;
  }

  .site-header .subtitle {
    font-size: 0.9rem;
  }
}

/* ==========================================================
   Print Styles
   ========================================================== */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 14pt;
  }

  .site-header {
    background: none;
    color: #000;
    border-bottom: 2px solid #000;
  }

  .site-header h1 {
    color: #000;
  }

  .site-header .subtitle,
  .site-header .subtitle-secondary {
    color: #333;
  }

  .header-emblem {
    color: #333;
  }

  .header-rule,
  .footer-rule {
    background: #000;
  }

  .site-footer {
    background: none;
    color: #333;
  }

  .fc .fc-toolbar {
    display: none !important;
  }

  .modal-overlay {
    display: none !important;
  }

  .fc .fc-list-event-title a {
    color: #000 !important;
  }

  .fc .fc-list-day-cushion {
    background: #eee !important;
    color: #000 !important;
  }
}