/* =========================================
   Schedule (light/dark mode aware, higher specificity)
   ========================================= */

/* Base variables (light) */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #222222;
  --muted-text: #666666;
  --border: #cccccc;
  --table-surface: #ffffff;
  --table-header-surface: #f7f7f7;
}

/* Dark mode via OS preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1e1e1e;
    --text: #eeeeee;
    --muted-text: #aaaaaa;
    --border: #555555;
    --table-surface: #1e1e1e;
    --table-header-surface: #262626;
  }
}

/* Dark mode via theme toggles (e.g., Tailwind's .dark or data-theme) */
.dark, [data-theme="dark"] {
  --bg: #121212;
  --surface: #1e1e1e;
  --text: #eeeeee;
  --muted-text: #aaaaaa;
  --border: #555555;
  --table-surface: #1e1e1e;
  --table-header-surface: #262626;
}

/* Ensure our schedule area establishes its own context */
section.calendar,
section.calendar * {
  /* Helps beat low-specificity theme rules */
  color: var(--text);
}

/* Make container break out of narrow layout */
.wide-table {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 1rem 2rem;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  background: var(--bg);
}

/* Make the table wider and allow cell-level control */
.wide-table table {
  table-layout: fixed; /* enable wrapping control */
  width: 1200px;       /* or 1500px or whatever wide you want */
  border-collapse: collapse;
}

/* General table styles (extra specificity + !important to beat theme tables) */
.wide-table table th,
.wide-table table td {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border) !important;
  text-align: center;
  overflow-wrap: break-word;
  background: var(--table-surface) !important;
  color: var(--text) !important;
}

.wide-table table th {
  background: var(--table-header-surface) !important;
  font-weight: 600;
}

/* Force ONLY the 4th column (e.g. Topic) to wrap */
.wide-table table th:nth-child(4),
.wide-table table td:nth-child(4) {
  white-space: normal;
  width: 400px;
}

/* Container for the entire calendar */
.calendar {
  width: 100%;
  max-width: none;    /* removes the Hugo container constraint */
  margin-left: 0;
  margin-right: 0;
}

/* Week header row (Week + Mon–Sun labels) */
.weekday-header {
  display: grid;
  grid-template-columns: 8rem repeat(7, 1fr); /* new first column */
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.25rem;
  color: var(--muted-text) !important; /* avoid opacity for legibility */
}

/* Each week row */
.week {
  display: grid;
  grid-template-columns: 8rem repeat(7, 1fr); /* new first column */
  gap: 0.5rem;
}

/* A single day cell (extra specificity to beat card/component styles) */
section.calendar .day {
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-height: 8rem;
  background: var(--surface) !important;
  display: flex;
  flex-direction: column;
  font-size: 1.9rem;
  color: var(--text) !important;
}

/* Date inside a day cell (no opacity; explicit color) */
section.calendar .date {
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--muted-text) !important;
}

/* Calendar section sizing/centering */
section.calendar {
  display: grid;      /* keep your grid */
  width: 90vw;        /* span full viewport width */
  margin-left: calc(-50vw + 60%); /* recenters so it actually spans edge-to-edge */
}

/* Optional: guard against global link or paragraph colors */
section.calendar a { color: var(--text) !important; }
section.calendar p { color: var(--text); }

/* Optional: if your theme declares table borders/backgrounds globally with high specificity,
   the rules below provide one more layer of insurance specifically within .wide-table */
.wide-table table,
.wide-table table * {
  background-color: transparent; /* reset odd defaults */
}