/* =============================================================================
   VARIABLES
   ============================================================================= */

:root {
  /* Colors */
  --color-primary: #4078c0;
  --color-text: #000;
  --color-bg: #fff;
  --color-border: #000;
  --color-row-odd: #f2f2f2;
  --color-row-even: #fcfcfc;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;

  /* Typography */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-header: Lato, var(--font-system);
  --font-size-header: min(48px, 4vw);

  /* Layout */
  --max-width: 1000px;
  --space-page-inline: 48px;
  --header-height: 200px;
  --border-width: 1px;
}

/* =============================================================================
   BASE
   ============================================================================= */

body {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
  font-family: var(--font-system);
  color: var(--color-text);
}

/* Restore vertical spacing for content elements */
p, ul, ol, blockquote, pre, table {
  margin-block: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 1.5rem;
}

/* Add indent for lists */
ul, ol {
  padding-inline-start: 2rem;
}

blockquote {
  border-left: thick solid var(--color-primary);
  margin-inline-start: 0.5rem;
  padding-inline-start: 0.5rem;
}

/* Remove top margin from first child to prevent extra space */
:is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table):first-child {
  margin-block-start: 0;
}

td, th {
  text-align: left;
  vertical-align: top;
}

/* =============================================================================
   LAYOUT
   ============================================================================= */

.site-header {
  height: var(--header-height);
  border: var(--border-width) solid var(--color-border);

  background-image: url(/image/race-background.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  padding: var(--space-sm);
}

.site-header {
  font-family: var(--font-header);
  font-weight: bold;
  color: var(--color-bg);
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.site-header h1 {
  font-size: var(--font-size-header);
  margin-block-start: 0.25rem;
}

.site-header-org {
  font-size: calc(var(--font-size-header) * 0.65);
  line-height: 1.2;
}

.site-nav {
  display: flex;
  background-color: var(--color-primary);
}

.site-nav ul {
  list-style-type: none;
  margin: 0;
  padding: var(--space-sm);
}

.site-nav li {
  display: inline;
  border-left: var(--border-width) solid var(--color-bg);
  padding: var(--space-xs);
}

.site-nav li:first-child {
  border: none;
}

.site-nav a {
  color: var(--color-bg);
  text-decoration: none;
}

.site-nav li.active {
  font-weight: bold;
}

.nav-main {
  flex-grow: 1;
}

footer {
  font-size: smaller;
  margin-top: 2lh;
  border-top: var(--border-width) solid var(--color-border);
}

/* =============================================================================
   COMPONENTS
   ============================================================================= */

table.raceinfo {
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-sm);
  background-color: #e9e9e9;
  width: 100%;
}

.staffing {
  break-inside: avoid;
  break-before: always;
}

.staffing table {
  width: 100%;
}

.staffing th, .staffing td {
  padding: 0.5rem;
}

.race-schedule {
  border-collapse: collapse;
}

.race-schedule th, .race-schedule td {
  padding: var(--space-xs);
  border: var(--border-width) solid var(--color-border);
}

.race-schedule tr.past-race {
  opacity: 0.4;
}

.striped tbody tr:nth-child(odd) {
  background-color: var(--color-row-odd);
}

.striped tbody tr:nth-child(even) {
  background-color: var(--color-row-even);
}

.race-cover {
  float: right;
  margin: 1rem;
  max-width: 40%;
}

.contacts li:not(:last-child) {
  margin-bottom: 0;
  padding: 0;
}

.contacts ul {
  padding: 0 1rem;
  margin-block: 0 1rem;
}

.year-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.year-nav .disabled {
  color: #999;
  pointer-events: none;
}

.links ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.links li {
  display: inline-block;
  padding: 0 2px;
}

img.icon {
  max-width: 32px;
}

/* =============================================================================
   UTILITIES
   ============================================================================= */

/* .noprint — hides elements when printing; defined in the @media print block below */

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

/* Modern focus indicators for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.site-nav a:focus-visible {
  outline-color: var(--color-bg);
  background-color: rgba(255, 255, 255, 0.2);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (min-width: 640px) {
  body {
    padding-inline: var(--space-page-inline);
  }
}

@media (max-width: 640px) {
  .links  ul {
    white-space: wrap;
  }
}

/* =============================================================================
   PRINT
   ============================================================================= */

@media print {
  .noprint {
    display: none;
  }

  .site-header {
    padding: 0;
    height: auto;
    font-size: 24pt;
    page-break-after: avoid;
    background-image: none;
    border: none;
    color: var(--color-text);
  }

  .site-header h1,
  .site-header-org {
    color: inherit;
    text-shadow: none;
  }

  /* Remove all link underlines in print */
  a {
    color: inherit;
    text-decoration: none;
  }

  abbr {
    text-decoration: none;
    border-bottom: none;
  }

  /* Better table printing */
  table {
    page-break-inside: auto;
    width: 100%;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  thead {
    display: table-header-group; /* Repeat on each page */
  }

  /* Prevent orphaned headers */
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  .contacts {
    break-inside: avoid;
  }

  /* Don't show URLs for internal navigation */
  .site-nav a[href^="http"]::after {
    content: "";
  }

  /* Optimize spacing for print */
  body {
    padding: 0;
  }

  .page-content {
    margin: 0;
  }

  .race-schedule {
    border: none;
  }

  .race-schedule td, .race-schedule th {
    border: none;
    padding: 8px;
  }

  .staffing td {
    font-size: smaller;
  }
}