/* ==========================================================================
   Tom Trogdon — University of Washington Faculty Website
   Dark Theme · UW Brand Colors · WCAG 2.1 AA Compliant
   
   UW Digital Color Palette:
     Husky Purple:   #32006e
     Spirit Purple:  #4b2e83
     Husky Gold:     #b7a57a / #e8e3d3 (web-light)
     Heritage Gold:  #85754d
     Spirit Gold:    #ffc700
     Accent Teal:    #2ad2c9
     Accent Lavender:#c5b4e3
   
   UW Brand Fonts: Encode Sans (headlines), Open Sans (body)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600;700;800;900&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --color-bg:             #0d0a1a;
  --color-bg-elevated:    #17122b;
  --color-bg-card:        #1e1835;
  --color-bg-card-hover:  #251e40;
  --uw-husky-purple:      #32006e;
  --uw-spirit-purple:     #4b2e83;
  --uw-husky-gold:        #b7a57a;
  --uw-husky-gold-light:  #e8e3d3;
  --uw-spirit-gold:       #ffc700;
  --uw-heritage-gold:     #85754d;
  --uw-teal:              #2ad2c9;
  --uw-lavender:          #c5b4e3;
  --color-text:           #e2dff0;
  --color-text-muted:     #a8a0c0;
  --color-heading:        #e8e3d3;
  --color-link:           #d4be8a;
  --color-link-hover:     #ffc700;
  --color-link-visited:   #c5b4e3;
  --color-nav-active:     #1a0042;
  --color-nav-indicator:  #ffc700;
  --color-focus:          #ffc700;
  --color-border:         #3a2d5c;
  --color-border-accent:  #4b2e83;
  --color-footer-bg:      #080614;
  --color-footer-text:    #a8a0c0;
  --font-heading:         'Encode Sans', 'Arial', sans-serif;
  --font-body:            'Open Sans', 'Calibri', sans-serif;
  --max-width:            1120px;
}

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

html { font-size: 100%; scroll-behavior: smooth; }

body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Focus — WCAG 2.4.7 */
*:focus { outline: 3px solid var(--color-focus); outline-offset: 2px; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Skip Nav — WCAG 2.4.1 */
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: var(--color-focus); color: #1a0042;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; border-radius: 0 0 6px 6px;
}
.skip-link:focus { top: 0; }

/* Header */
.site-header {
  background: linear-gradient(135deg, #1a0042 0%, var(--uw-husky-purple) 50%, var(--uw-spirit-purple) 100%);
  border-bottom: 3px solid var(--uw-spirit-gold);
  padding: 1.5rem 1.25rem;
}
.header-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.header-logo { flex-shrink: 0; }
.header-logo img { height: 52px; width: auto; display: block; }
.header-identity { flex: 1; min-width: 0; }
.header-identity h1 {
  margin: 0; font-family: var(--font-heading);
  font-size: 1.85rem; font-weight: 800; line-height: 1.2;
  color: #ffffff; letter-spacing: -0.01em;
}
.header-identity .subtitle {
  margin: 0.25rem 0 0; font-family: var(--font-heading);
  font-size: 0.9rem; font-weight: 500;
  color: var(--uw-husky-gold-light); letter-spacing: 0.02em;
}
.header-contact {
  font-size: 0.88rem; text-align: right;
  color: var(--uw-lavender); line-height: 1.5;
}
.header-contact a { color: var(--uw-husky-gold-light); text-decoration: underline; }
.header-contact a:hover, .header-contact a:focus { color: var(--uw-spirit-gold); }

/* Gold accent bar */
.gold-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--uw-spirit-gold), var(--uw-husky-gold), var(--uw-heritage-gold));
}

/* Navigation */
.site-nav { background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); }
.site-nav ul {
  max-width: var(--max-width); margin: 0 auto; padding: 0;
  list-style: none; display: flex; flex-wrap: wrap;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block; padding: 0.8rem 1.3rem;
  color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 0.9rem; letter-spacing: 0.025em; text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a:focus {
  background: var(--color-bg-card); color: var(--uw-spirit-gold);
  text-decoration: underline;
}
.site-nav a[aria-current="page"] {
  background: var(--color-nav-active); color: var(--uw-spirit-gold);
  border-bottom: 3px solid var(--color-nav-indicator);
}

/* Layout */
.page-wrapper {
  max-width: var(--max-width); margin: 0 auto; padding: 2.25rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 2.25rem;
}
.main-content { flex: 1 1 65%; min-width: 0; }
.sidebar { flex: 0 0 290px; min-width: 0; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); color: var(--color-heading);
  line-height: 1.3; margin-top: 1.75rem; margin-bottom: 0.75rem;
}
h2 {
  font-size: 1.45rem; font-weight: 700; padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-border-accent); letter-spacing: 0.01em;
}
h3 { font-size: 1.2rem; font-weight: 700; color: var(--uw-husky-gold); }
h4 { font-size: 1.05rem; font-weight: 600; }
h5 {
  font-size: 0.95rem; font-weight: 600; color: var(--uw-lavender);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 1.25rem; margin-bottom: 0.5rem;
}

/* Links */
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--color-link-visited); }

img { max-width: 100%; height: auto; border: 0; }

/* News Cards */
.news-item {
  background: var(--color-bg-card); border-left: 4px solid var(--uw-spirit-purple);
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  border-radius: 0 6px 6px 0; transition: border-color 0.15s ease;
}
.news-item:hover { border-left-color: var(--uw-spirit-gold); }
.news-item h3 { margin-top: 0; font-size: 1.1rem; }
.news-date {
  display: block; font-size: 0.82rem; color: var(--color-text-muted);
  margin-bottom: 0.5rem; font-family: var(--font-heading);
  font-weight: 500; letter-spacing: 0.03em;
}

/* Sidebar */
.sidebar-box {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 1.25rem; margin-bottom: 1.5rem;
}
.sidebar-box h2 {
  font-size: 1.1rem; margin-top: 0;
  border-bottom: 1px solid var(--color-border); padding-bottom: 0.4rem;
  color: var(--uw-husky-gold);
}
.sidebar-box ul { padding-left: 1.25rem; margin: 0; }
.sidebar-box li { margin-bottom: 0.5rem; }
.contact-photo {
  display: block; max-width: 200px; border-radius: 6px;
  margin-bottom: 0.75rem; border: 2px solid var(--color-border-accent);
}

/* Research */
.research-section { margin-bottom: 2.5rem; }
.math-content { overflow-x: auto; }
.figure-group { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.25rem 0; }
figure { margin: 1rem 0; text-align: center; }
figure img { border-radius: 4px; border: 1px solid var(--color-border); }
figcaption { font-size: 0.88rem; color: var(--color-text-muted); margin-top: 0.5rem; font-style: italic; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { padding: 0.65rem 0.85rem; text-align: left; border: 1px solid var(--color-border); }
th { background: var(--color-bg-elevated); font-family: var(--font-heading); font-weight: 700; color: var(--uw-husky-gold); }
caption { font-weight: 700; font-size: 1rem; text-align: left; margin-bottom: 0.5rem; color: var(--color-heading); }

/* Course & Software Cards */
.course-block {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.course-block h4 { margin-top: 0; color: var(--uw-husky-gold); }
.resource-list { padding-left: 1.25rem; }
.resource-list li { margin-bottom: 0.4rem; }
.software-card {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 1.5rem; margin-bottom: 1.5rem;
}
.software-card h3 { margin-top: 0; }

.pub-section { margin-bottom: 2rem; }

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

/* Footer */
.site-footer {
  background: var(--color-footer-bg); border-top: 3px solid var(--uw-husky-purple);
  color: var(--color-footer-text); padding: 1.75rem 1.25rem;
  text-align: center; font-size: 0.88rem;
}
.site-footer a { color: var(--uw-husky-gold); }
.site-footer a:hover, .site-footer a:focus { color: var(--uw-spirit-gold); }
.footer-inner { max-width: var(--max-width); margin: 0 auto; }
.footer-uw-wordmark {
  font-family: var(--font-heading); font-weight: 800; font-size: 1rem;
  letter-spacing: 0.05em; color: var(--uw-husky-gold); text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .header-inner { flex-direction: column; text-align: center; }
  .header-contact { text-align: center; }
  .site-nav ul { justify-content: center; }
  .site-nav a { padding: 0.65rem 0.9rem; font-size: 0.82rem; }
  .page-wrapper { flex-direction: column; }
  .sidebar { flex: 1 1 100%; }
  .figure-group { flex-direction: column; }
  .header-identity h1 { font-size: 1.4rem; }
}

/* Reduced Motion — WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* High Contrast Mode */
@media (forced-colors: active) {
  .site-nav a[aria-current="page"] { border-bottom: 3px solid CanvasText; }
  .news-item { border-left-color: CanvasText; }
  .gold-bar { background: CanvasText; }
}

/* Print */
@media print {
  .site-nav, .skip-link, .gold-bar { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .site-header { background: none; border-bottom: 2px solid #4b2e83; }
  .header-identity h1 { color: #32006e; }
  .color-text, .news-item, .sidebar-box, .course-block, .software-card { background: #fff; color: #000; }
}