/* --- Header titles: <h1> → <p class="site-title"> --- */
/* Matches the original `header h1` rule in core.css + styles.css */
header .site-title,
header #pc-title,
header #mobile-title {
  margin: 0 !important;
  margin-left: 50px !important;
  font-size: 24pt !important;
  font-weight: normal !important;
  animation: fadeIn 0.5s;
  color: white;
  line-height: 1.2;
}
#mobile-title.site-title {
  display: none;
  margin: 0 20px;
}
@media screen and (max-width: 800px) {
  #mobile-title.site-title {
    display: block;
  }
  #pc-title.site-title {
    display: none;
  }
}

/* --- Mobile menu toggle: was <span id="ss-icon">, now <button id="mobile-menu-toggle"> --- */
/* Matches original `header span` + `#ss-icon` styling so it looks identical */
#mobile-menu-toggle {
  background: transparent;
  border: none;
  color: white;
  font-size: 18pt;
  padding: 8px 12px;
  cursor: pointer;
  align-self: center;
  justify-self: end;
}

/* --- Footer logos: id → class --- */
/* The header still uses #sarp-logo / #uw-logo. The footer now uses classes
   to avoid duplicate IDs. These rules restore the original sizes. */
footer .sarp-logo {
  height: 90px;
  margin: 10px;
}
footer .uw-logo {
  height: 90px;
  margin: 10px;
}

/* --- Footer heading: <h3> → <h2 class="footer-heading"> --- */
/* Matches the original `footer h3` rule across all pages */
footer > div:first-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
footer .footer-heading {
  margin: 0;
  font-size: 14pt !important;
  font-weight: normal;
  white-space: nowrap;
}
@media screen and (max-width: 800px) {
  footer > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  footer .footer-heading {
    font-size: 13pt !important;
  }
}

/* --- Slideshow buttons: <button> → <a class="slideshow-btn"> (index.html) --- */
/* Matches original `#slideshow-buttons button` */
#slideshow-buttons .slideshow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  background-color: rgba(25, 13, 28, 0.6);    /* CONTRAST FIX: dark scrim behind white text */
  height: 75px;
  width: 225px;
  font-size: clamp(9px, 1.5vw, 15px);
  font-family: 'Konkhmer Sleokchher', sans-serif;
  color: white;
  margin: 0 20px;
  border: 3px solid white;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
  overflow: hidden;
}
#slideshow-buttons .slideshow-btn:hover,
#slideshow-buttons .slideshow-btn:focus-visible {
  background-color: lightskyblue;
  color: #000;    /* CONTRAST FIX: dark text on light blue */
}
@media screen and (max-width: 800px) {
  #slideshow-buttons .slideshow-btn {
    width: 75%;
    margin: 10px 0;
    font-size: 12pt;
  }
}

/* --- Crowdfund donate button (homepage + sponsors page) --- */
#crowdfunding-banner-2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
}
.donate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  background-color: transparent;
  height: 48px;
  width: 200px;
  font-size: clamp(12px, 2vw, 20px);
  font-family: 'Konkhmer Sleokchher', sans-serif;
  color: white;
  border: 3px solid white;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}
.donate-btn:hover,
.donate-btn:focus-visible {
  background-color: lightskyblue;
  color: #000;    /* CONTRAST FIX */
  transform: scale(1.05);
}
/* Bigger donate button on sponsors page */
#sponsors-page .donate-btn,
.sponsors-donate-btn {
  font-size: 24pt;
  width: 250px;
  margin-left: 40px;
}

/* --- Homepage "Apply to join" and "Become a sponsor": <button> → <a class="join-btn"> --- */
/* Matches original `.join-section button` */
.join-btn {
  display: inline-block;
  padding: 10px;
  font-family: 'Konkhmer Sleokchher', sans-serif;
  border: 3px solid white;
  background-color: lightskyblue;
  color: #000;    /* CONTRAST FIX */
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  margin-top: 20px;
  width: 200px;
}
.join-btn:hover,
.join-btn:focus-visible {
  background-color: white;
  transform: scale(1.05);
}

/* --- Join page application buttons: <button> → <a class="apply-btn"> --- */
/* Matches original `.join-button-container button` in join.css */
.apply-btn {
  display: inline-block;
  width: 50%;
  color: white;
  font-family: 'Konkhmer Sleokchher', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 3vw;
  border: 2px solid white;
  margin: 4px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.3s;
  background-color: #5937b0;
  cursor: pointer;
}
.apply-btn:hover,
.apply-btn:focus-visible {
  background-color: #41b562;
  border: 2px solid white;
  font-size: 3vw;
}
@media screen and (max-width: 800px) {
  .apply-btn {
    width: 150px;
    padding: 15px;
    font-size: 18pt;
    margin: 40px;
  }
}

/* --- Project thumbnails: <h6> → <h4> (projects-new.html) --- */
/* Matches original `.project-icon h6` rule in projects-new.css */
.project-icon h4 {
  font-size: 1.5vw;
  margin: 0 10px;
  font-weight: normal;
  text-transform: uppercase;    /* keeps the visual "all caps" look while the
                                    underlying text stays mixed-case for screen readers */
}
@media screen and (max-width: 1200px) {
  .project-icon h4 {
    font-size: 18pt;
  }
}

/* --- Dialog title on projects page: <h3> → <h2> --- */
/* Matches original `#blackout h3` in projects-new.css */
#blackout h2 {
  margin: 0 20px;
  font-size: 36pt;
}
@media screen and (max-width: 1200px) {
  #dialog h2 {
    font-size: 24pt;
  }
}

/* --- Team leadership names: <h3> → <h2> (team.html) --- */
/* Matches original `#admin h3` in team.css — keeps names visually smaller
   than the subteam section headings even though they're now <h2> */
#admin h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: normal;
}

/* --- Header h1 fallback (for the page-title <h1> on subpages like JOIN, TEAM, etc.) --- */
/* Original team.css + join.css + sponsors.css + projects-new.css all have a
   rule `header h1` that used to style the old PC title. We already replaced
   that with `.site-title` above. This ensures nothing tries to apply
   header h1 styling to the subpage's real h1 (which is inside #title). */


/* =====================================================================
   2. NEW ACCESSIBILITY FEATURES
   ===================================================================== */

/* --- Skip link: hidden until keyboard focus --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #fff;
  color: #000;
  padding: 12px 20px;
  z-index: 9999;
  text-decoration: underline;
  font-weight: bold;
  border: 2px solid #000;
}
.skip-link:focus {
  top: 0;
}

/* --- Visually hidden utility (for screen-reader-only text) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Visible focus outlines for keyboard users --- */
/* WCAG 2.4.7: Focus must be visible. Gold is high-contrast on both
   dark purple/black and light blue backgrounds. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.slideshow-btn:focus-visible,
.join-btn:focus-visible,
.apply-btn:focus-visible,
.donate-btn:focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Nav "/" separators (replaces deleted <li>/</li> elements) --- */
/* Only show separators on desktop. Uses ::before pseudo-element so the
   "/" is decorative — screen readers skip it. */
.nav-large li + li::before {
  content: "/";
  margin-right: 30px;
  color: white;
  pointer-events: none;
}
@media screen and (max-width: 800px) {
  .nav-large li + li::before {
    display: none;
  }
}

/* --- Reduced motion support --- */
/* Respects users who've enabled "reduce motion" in their OS accessibility
   settings. Stops the carousel auto-scroll and animate.css fades. */
@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;
  }
  .carousel-track {
    animation: none !important;
  }
}


/* =====================================================================
   3. CONTRAST FIXES for pre-existing elements
   ===================================================================== */

/* --- Default button text: was white-on-lightskyblue (~1.67:1, fails AA) --- */
/* Applies to any real <button> still in the site that hasn't been given
   an explicit color. Now black-on-lightskyblue (~12.5:1, passes AAA). */
button {
  color: #000;
}

/* --- Nav hover: was color-only via font-weight, add underline --- */
/* WCAG 1.4.1 requires non-color indicators for link state changes.
   Bold alone can be hard to see, so we add underline too. */
li a:hover,
li a:focus-visible {
  font-weight: bold;
  text-decoration: underline;
}

/* --- aria-current indicator for the current page in nav --- */
/* Gives the current page a subtle visual indicator too */
.nav-large a[aria-current="page"] {
  font-weight: bold;
  text-decoration: underline;
}

body > main > section {
  background-color: rgba(25, 13, 28, 1);
}
/**
body > main > #admin {
  background-image: linear-gradient(to bottom, rgba(70, 22, 82, 1), rgba(25, 13, 28, 1));
}
**/