/* =============================
  styles.css — High-contrast TAMU-inspired theme
  Palette (TAMU-guided):
    Maroon        #500000
    Maroon Hover  #6A0000
    Cream         #F9F6F0
    Aggie Gray    #5C5C5C (used as neutral 700)
    Cool Gray     #2E3642 (text)
    Light Gray    #E6E6E6 (borders)
    Link Blue     #1D4ED8 (accessible)
============================= */

/* Design tokens */
:root{
  --brand: #500000;
  --brand-600: #6A0000;
  --brand-50: #F9F6F0;

  --bg: #FFFFFF;
  --text: #0B0F19;          /* deep neutral for max contrast */
  --muted: #475569;         /* readable secondary text */
  --link: #1D4ED8;          /* accessible blue */
  --border: #D4D7DE;        /* stronger than ultra-light grays */
  --elev: #FFFFFF;          /* card surface */
  --alt: #FAFAFC;           /* light alternate section */
  --alt-2: var(--brand-50); /* cream alternate section */

  --ok: #166534;
  --warn: #B45309;
  --danger:#B91C1C;

  --radius: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 8px 24px rgba(0,0,0,.10);
  --maxw: 1200px;
}

/* Global */
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: var(--link); text-decoration: underline; }
a:hover{ text-decoration: none; }
img,video{ max-width:100%; display:block; border-radius:12px }

.container{ max-width: var(--maxw); margin-inline:auto; padding: clamp(16px,4vw,28px) }
.section{ padding: clamp(36px,6vw,80px) 0 }
.section.alt{ background: var(--alt) }      /* light gray band */
.section.alt-cream{ background: var(--alt-2) } /* cream band for visual rhythm */

.display{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px,4vw,48px);
  line-height:1.1;
  margin:0 0 12px;
}
.lead{
  font-size: clamp(16px,2.2vw,20px);
  color: #2E3642;
  max-width: 65ch;
}

/* Layout helpers */
.flex{ display:flex; gap:16px }
.between{ justify-content:space-between }
.center{ align-items:center }
.w-full{ width:100% }
.mt-2{ margin-top:12px } .mt-3{ margin-top:16px } .mt-4{ margin-top:24px }
.mb-4{ margin-bottom:24px }
.stack>*+*{ margin-top:16px }
.hidden{ display:none }
.visually-hidden{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px) }

/* =========================
   Header — strong contrast
========================= */
.site-header{
  position: sticky; top:0; z-index: 30;
  background: var(--brand);
  color: #fff;
  border-bottom: 3px solid var(--brand-600);
  box-shadow: var(--shadow-sm);
}
.header-inner{ display:flex; align-items:center; gap:16px }
.site-header .brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:800; letter-spacing:.2px; text-decoration:none;
}
.nav{ margin-left:auto; display:none; gap:8px }
@media (min-width:900px){ .nav{ display:flex } }
.nav a{
  color:#fff; text-decoration:none; font-weight:700;
  padding:10px 12px; border-radius:10px; line-height:1;
}
.nav a:hover, .nav a:focus-visible{
  background: color-mix(in oklab, var(--brand-600), #ffffff 10%);
  outline: none;
}

/* =========================
   Buttons — distinct states
========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; padding:12px 18px; font-weight:800; letter-spacing:.2px;
  border:2px solid transparent;
  transition: .2s box-shadow, .2s transform, .2s background-color, .2s border-color, .2s color;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow) }
.btn:active{ transform: translateY(0) }
.btn:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand-600), #ffffff 15%);
  outline-offset: 3px;
}

.btn-primary{
  background: var(--brand);
  color:#ffffff;
  border-color: var(--brand);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.btn-primary:hover{ background: var(--brand-600); border-color: var(--brand-600); }

.btn-ghost{
  background: #fff;
  color: var(--text);
  border-color: #9AA3AE; /* stronger, visible border */
}
.btn-ghost:hover{
  background: #EEF2FF;   /* clear hover delta */
  border-color: #6B7280;
}

/* Minimal pill-tabs that pop */
.tabs{ display:flex; border:2px solid var(--border); border-radius:999px; padding:4px; background:#fff }
.tab{
  background:transparent; border:0; padding:8px 14px; border-radius:999px;
  color: var(--text); cursor:pointer; font-weight:800;
}
.tab.active{ background: var(--brand); color:#fff }

/* =========================
   Hero — crisp, elevated
========================= */
.hero{ background: #FFFFFF; }
.hero-inner{ display:grid; grid-template-columns:1.1fr; gap:28px; align-items:center }
.hero-card{
  border-radius:20px; overflow:hidden; box-shadow: var(--shadow);
  background: #fff; border: 1.5px solid var(--border);
}
@media (min-width:980px){ .hero-inner{ grid-template-columns:1.1fr .9fr } }

/* =========================
   Two-column layouts
========================= */
.two-col,.two-col-reverse{ display:grid; grid-template-columns:1fr; gap:28px }
@media (min-width:960px){
  .two-col{ grid-template-columns:1.2fr .8fr }
  .two-col-reverse{ grid-template-columns:1fr 1fr }
}

/* =========================
   Cards & info blocks
========================= */
.card,.info-card{
  background: var(--elev);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.info-card h3{ margin:.3rem 0 .5rem }

/* =========================
   Lists & facts
========================= */
.bullets{ list-style:none; padding:0; margin:12px 0 }
.bullets li{ padding-left:28px; position:relative; margin:10px 0; color:var(--text) }
.bullets li::before{ content:"✓"; position:absolute; left:0; top:0; color: var(--ok); font-weight:900 }
.facts{ display:grid; grid-template-columns:auto 1fr; gap:8px }
.facts dt{ color: var(--muted); font-weight:700 }

/* =========================
   Highlights grid
========================= */
.grid-cards{ display:grid; grid-template-columns:1fr; gap:16px }
@media (min-width:800px){ .grid-cards{ grid-template-columns:repeat(3,1fr) } }
.highlight{
  display:flex; flex-direction:column; gap:8px; padding:16px;
  border: 1.5px solid var(--border);
  border-radius:14px; background:#fff;
}

/* =========================
   Media grid & lightbox
========================= */
.media-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (min-width:860px){ .media-grid{ grid-template-columns:repeat(4,1fr) } }
.media-tile{ position:relative; overflow:hidden; border-radius:12px; border:1.5px solid var(--border); cursor:zoom-in }
.media-tile img{ width:100%; height:100%; object-fit:cover }
.media-tile .badge{
  position:absolute; right:8px; top:8px; background:#111827; color:#fff;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800;
}

.lightbox{ border:0; border-radius:14px; padding:0; max-width:min(96vw,1100px) }
.lightbox::backdrop{ background: rgba(0,0,0,.55) }
.lightbox .close{
  position:absolute; right:12px; top:10px;
  background:#fff; border:2px solid var(--border); border-radius:10px; padding:6px 8px; cursor:pointer;
}
#lightboxContent{ padding:0 }
#lightboxContent img,#lightboxContent video{ width:100%; height:auto; border-radius:14px }

/* =========================
   Forms — clear borders & focus
========================= */
.form{ display:block }
.form-grid{ display:grid; grid-template-columns:1fr; gap:14px }
.form-grid .full{ grid-column:1/-1 }
label{ display:grid; gap:6px; font-weight:800; color: var(--text) }
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border: 2px solid #9AA3AE; background:#fff; color: var(--text);
}
input:focus,select:focus,textarea:focus{
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), #ffffff 75%);
}
.muted{ color: var(--muted) }

/* =========================
   Footer — separated & readable
========================= */
.site-footer{
  border-top: 3px solid var(--brand);
  padding: 28px 0;
  background: #FFFFFF;
}
.footer-inner{ display:flex; flex-direction:column; gap:12px }
.footer-nav{ display:flex; flex-wrap:wrap; gap:12px }
.footer-nav a{ color: var(--text); text-decoration:none; font-weight:700; }
.footer-nav a:hover{ color: var(--brand) }

/* =========================
   Utilities
========================= */
[data-elev]{ box-shadow: inset 0 -1px 0 var(--brand-600) }

@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; animation:none!important }
}