/* ==========================================================================
   Invitational Site Styles (organized)
   NOTE: Styling/behavior preserved (cascade-equivalent to prior site.css).
   ========================================================================== */

/* ==========================================================================
   1) Design tokens / globals
   ========================================================================== */
:root{
  /* Layout */
  --max: 1100px;
  --pad: 16px;
  --radius: 14px;

  /* Colors */
  --border: color-mix(in srgb, CanvasText 14%, transparent);
  --muted:  color-mix(in srgb, CanvasText 70%, transparent);
  --bg-soft: color-mix(in srgb, CanvasText 6%, transparent);

  /* Theme (driven by html[data-theme]) */
  --surface: Canvas;
  --text: CanvasText;

  /* Scheme accent (driven by html[data-scheme]) */
  --accent: #64748b; /* slate */
  --accent-soft:   color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 10%, transparent);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  color: CanvasText;
  background: Canvas;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* ==========================================================================
   2) Header (single row) + navigation
   ========================================================================== */

/* Sticky header: must sit above page content + dropdowns */
.site-header{
  position: sticky;
  top: 0;
  background: color-mix(in srgb, Canvas 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 9999 !important;        /* final stacking requirement */
  overflow: visible !important;     /* prevent clipping */
}

/* One row, always (hard cap < 100px) */
.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  height: 72px !important;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | hamburger */
  align-items: center;
  gap: 12px;
  overflow: visible !important;         /* prevent clipping */
}

/* Brand / logo */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: inherit;
  flex: 0 0 auto;
}

.brand-logo{
  height: 44px; /* scales the 300x71 logo proportionally */
  width: auto;
  display:block;
}

/* Optional site title (you commented it out in HTML; keep style here) */
.brand-title{
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Primary nav (desktop: single line, right aligned, dropdown-safe) */
.site-nav{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 10px;

  /* Prevent wrapping (desktop) and keep items right aligned */
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  white-space: nowrap;

  /* IMPORTANT:
     - Do NOT clip dropdowns (must render over page content).
     - Desktop overflow must be visible to avoid dropdown clipping.
  */
  overflow: visible !important;

  position: relative;
  z-index: 10000;
  padding: 0;
}

/* Nav links */
.site-nav a{
  text-decoration:none;
  color: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.95rem;
}

.site-nav a:hover{
  background: var(--bg-soft);
  border-color: var(--border);
}

/* Active nav state uses scheme accent */
.site-nav a.is-active{
  background: var(--accent-softer);
  border-color: var(--accent-soft);
  font-weight: 650;
}

/* Dropdowns */
.nav-group{
  position: relative;
  z-index: 10001;
}

.nav-group-btn{
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}

.nav-group-btn:hover{
  background: var(--bg-soft);
  border-color: var(--border);
}

.nav-caret{
  margin-left: 6px;
  font-size: 0.9em;
  opacity: 0.8;
}

.nav-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, Canvas 96%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, CanvasText 12%, transparent);
  padding: 8px;
  display: none;
  z-index: 20000 !important; /* must float above page content */
}

.nav-dropdown a{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}

.nav-dropdown a:hover{
  background: var(--bg-soft);
  border-color: var(--border);
}

/* Desktop: open on hover */
@media (min-width: 861px){
  .nav-group:hover .nav-dropdown{ display:block; }
}

/* JS toggles (mobile/keyboard-friendly) */
.nav-group.is-open .nav-dropdown{ display:block; }

/* Mobile menu button */
.nav-toggle{
  display:none; /* shown via media query below */
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 10px 12px;
  flex: 0 0 auto;
}

.nav-toggle-bars{
  display:block;
  width: 20px;
  height: 2px;
  background: CanvasText;
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width: 20px;
  height: 2px;
  background: CanvasText;
}
.nav-toggle-bars::before{ top:-6px; }
.nav-toggle-bars::after{ top:6px; }

/* ==========================================================================
   3) Main layout + common components
   ========================================================================== */
main{ padding: 22px 0 36px; }

.hero{
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-soft));
  border-radius: var(--radius);
  padding: 18px;
  overflow:hidden;
}

.hero-grid{
  display: flex;
  flex-direction: row;
  /*grid-template-columns: 1.2fr 0.8fr;*/
  gap: 16px;
}

.hero img{
  max-width: 170px;
  height: auto;
  border-radius: 20px;
  /*border: 1px solid var(--border);*/
  display: block;
  object-fit: cover;
  padding: 10px;
}

.hero-images{
  display: flex;
}

.card{
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, Canvas 96%, transparent);
}

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* ==========================================================================
   4) Page patterns
   ========================================================================== */

/* Article layout */
.article{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
}

.aside{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, Canvas 96%, transparent);
}

.aside h3{ margin-top: 0; }
.aside a{ color: inherit; }

.article-content h1{ margin-top: 0; }
.article-content p{ max-width: 75ch; color: var(--muted); }

/* Schedule table */
.table-wrap{
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, Canvas 96%, transparent);
}

table{
  width: 100%;
  border-collapse: collapse;
  min-width: 740px;
}

th, td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th{
  position: sticky;
  top: 0;
  background: color-mix(in srgb, Canvas 92%, transparent);
  backdrop-filter: blur(8px);
  z-index: 1;
  font-weight: 700;
}

tr:hover td{
  background: var(--bg-soft);
}

/* Results layout */
.results{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
}

.year-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.year-list button{
  text-align:left;
  border: 1px solid var(--border);
  background: color-mix(in srgb, Canvas 96%, transparent);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font: inherit;
}

.year-list button:hover{ background: var(--bg-soft); }

.year-list button.is-active{
  background: color-mix(in srgb, CanvasText 10%, transparent);
  font-weight: 650;
}

.year-panel{ display:none; }
.year-panel.is-active{ display:block; }

/* ==========================================================================
   5) Footer + footer controls (theme/scheme demo)
   ========================================================================== */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 18px 0;
  opacity: 0.8;
}

.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-controls{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.control-group{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, Canvas 96%, transparent);
}

.control-label{
  font-size: 0.9rem;
  opacity: 0.75;
  padding: 0 4px;
}

.ctl-btn{
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.ctl-btn:hover{ background: color-mix(in srgb, CanvasText 8%, transparent); }
.ctl-btn.is-active{
  border-color: var(--accent-soft);
  background: var(--accent-softer);
  font-weight: 650;
}

/* ==========================================================================
   6) Theme + scheme wiring (HTML attributes)
   ========================================================================== */

/* Theme modes are driven by [data-theme] on <html> */
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"]{ color-scheme: dark; }

html[data-theme="dark"] body{
  background: Canvas;
  color: CanvasText;
}

/* Logo dark-mode fallback (used if logo-dark.png is not present) */
html[data-theme="dark"] .brand-logo.fallback-invert{
  filter: invert(1) hue-rotate(180deg) saturate(1.05);
}

/* Scheme presets:
   - also bias --bg-soft slightly to give each scheme a “feel”
   - --accent drives active/selected styling (JS also sets --accent inline)
*/
html[data-scheme="mono"]{
  --bg-soft: color-mix(in srgb, CanvasText 6%, transparent);
  --accent: #64748b;
}
html[data-scheme="gray"]{
  --bg-soft: color-mix(in srgb, CanvasText 8%, transparent);
  --accent: #6b7280;
}
html[data-scheme="blue"]{
  --bg-soft: color-mix(in srgb, #3b82f6 12%, transparent);
  --accent: #2563eb;
}
html[data-scheme="green"]{
  --bg-soft: color-mix(in srgb, #22c55e 12%, transparent);
  --accent: #16a34a;
}
html[data-scheme="yellow"]{
  --bg-soft: color-mix(in srgb, #eab308 12%, transparent);
  --accent: #ca8a04;
}

/* ==========================================================================
   7) Responsive behavior
   ========================================================================== */
@media (max-width: 980px){
  .brand-title{ display:none; } /* keep header compact; logo remains */
}

@media (max-width: 860px){
  .hero-grid{ flex-direction: column; grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .article{ grid-template-columns: 1fr; }
  .results{ grid-template-columns: 1fr; }

  /* Show hamburger button */
  .nav-toggle{ display:inline-flex; align-items:center; gap:10px; }

  /* Mobile nav becomes a fixed panel under the header (never above bounds) */
  .site-nav{
    position: fixed !important;
    top: 72px;              /* matches .header-inner height */
    left: 0;
    right: 0;

    max-height: calc(100vh - 72px);
    overflow: auto !important;

    display: none;
    flex-direction: column;
    align-items: stretch;

    background: Canvas;
    border-bottom: 1px solid var(--border);
    z-index: 15000;
    padding: 10px var(--pad) 14px var(--pad);
    margin-left: 0;
    width: 100%;
  }

  .site-nav.is-open{
    display:flex;
  }

  .site-nav a{ padding: 10px 12px; }

  /* Mobile dropdowns should flow with the menu */
  .nav-dropdown{
    position: static !important;
    display: none;
    box-shadow: none !important;
    padding: 6px;
  }
  .nav-group.is-open .nav-dropdown{ display:block; }
}