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

html, body { height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-size: var(--fs-body1);
  line-height: var(--lh-body1);
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.vb-header { flex-shrink: 0; }
main { flex: 1 0 auto; }
.vb-footer { flex-shrink: 0; }

/* Links */
a {
  font-size: var(--fs-link);
  line-height: var(--lh-link);
  font-weight: var(--w-regular);
  color: var(--brand-blue);
  text-decoration: none;
}
 
/* Headings use Archivo per slides */
h1, h2, h3, h4 {
  font-family: var(--font-sans-2);
  font-weight: var(--w-semibold);
  color: var(--grey-dark);
  /*margin: 0 0 var(--space-16);*/
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

p { margin: 0 0 var(--space-16); }

hr { border: 0; border-top: 1px solid var(--grey-light); margin: var(--space-24) 0; }

/* ==========================================================================
   ACCESSIBILITY & MISC
   ========================================================================= */

/* Accessibility focus ring per spec: 2px ring, 2px offset, respects radius */
:focus-visible {
  outline: 2px solid var(--focus-ring-color-dark:);
  outline-offset: 2px;
}

/* When arriving via the skip link, focus moves to #main-content or its H1.
   Suppress the generic outline there to avoid a white line crossing badges/titles. */
#main-content:focus,
#main-content:focus-visible,
#main-content h1:focus,
#main-content h1:focus-visible,
#main-content [role="heading"][aria-level="1"]:focus,
#main-content [role="heading"][aria-level="1"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Accessibility focus ring */
.focus-light { --focus-ring-color: var(--focus-ring-color-light); }
.focus-dark { --focus-ring-color: var(--focus-ring-color-dark); }

/* Focus ring color inherits; containers can override via --focus-ring-color */

/* Accessibility: Skip link (restyled) */
.skip-link {
  position: fixed;
  top: -100px; /* hidden until focused */
  z-index: 9999;
  display: block;
  width: 100%; /* full width between 16px insets */
  height: 36px;
  padding: 8px 24px;
  border-radius: 4px;
  border: 2px solid var(--bg);
  background-color: var(--text);
  color: var(--bg);
  text-decoration: none;
  text-align: center;
  font-family: "Inter", var(--font-sans-1);
  font-weight: 500; /* Medium */
  font-size: 0.875rem;
  line-height: 20px;
}
.skip-link:focus {
  outline: none !important;
  box-shadow: none !important;
  top: 0 !important;
}
/* Account for WP admin bar offsets */
.admin-bar .skip-link:focus { top: calc(16px + 32px); }
@media (max-width: 782px) { .admin-bar .skip-link:focus { top: calc(16px + 46px); } }

/* Ensure anchored content is revealed below the sticky header (and admin bar) */
html { scroll-padding-top: 80px; }
/* Increase offset when WP admin bar is visible */
.admin-bar html { scroll-padding-top: calc(80px + 32px); }
@media (max-width: 782px) { .admin-bar html { scroll-padding-top: calc(80px + 46px); } }

/* Also set margin offset on the main content target */
#main-content { scroll-margin-top: 80px; }

/* Utility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }