/* style.css — Shared GHL design-token variables and interaction styles.
   Loaded on every page. Must come after base.css. */


/* ─── Brand colour & font tokens ──────────────────────────────── */
:root {
  /* GHL system palette */
  --transparent: transparent;
  --white:   #ffffff;
  --black:   #000000;
  --smoke:   #f5f5f5;
  --overlay: rgba(0, 0, 0, 0.5);

  /* Brand palette (Spectroom) */
  --color-66c5b4f991201e717d357151: #333a42; /* dark charcoal  */
  --color-66c5b4f991201e3958357152: #3a86ff; /* blue           */
  --color-69009713ce14c21691d74bb6: #1b60f5; /* deep blue      */
  --color-69009f9fd0798d17bfe7d276: #ced2e7; /* light lavender */
  --color-6900a63ed0798dd5c3e7f8f7: #ff5d73; /* coral red      */
  --color-6900a63ed0798d97bce7f8f8: #ffd60a; /* yellow         */
  --color-6900a63ed0798d5950e7f8f9: #00c49a; /* teal green     */
  --color-6900a888ce14c24f87d7b507: #59a5ff; /* sky blue       */
  --color-6900aaeaf8c44ec306523276: #ce9300; /* amber          */
  --color-6900b1dbce14c2e1d0d7ee8c: #ff80cc; /* pink           */
  --color-ywcbiues: #a46804ff;              /* gold           */

  /* Brandboard palette */
  --brandboards-off_white:       #fdfdfdff;
  --brandboards-faded_white:     #ffffffbf;
  --brandboards-lightest_yellow: #fffcc2ff;
  --brandboards-lighter_pink:    #ffa1dcff;
  --brandboards-darker_pink:     #fa3aa7ff;
  --brandboards-dark_pink:       #cc0a6aff;
  --brandboards-dark_red:        #c30d37ff;
  --brandboards-dark_green:      #006756ff;
  --brandboards-darkest_blue:    #173db6ff;
  --brandboards-darkest_yellow:  #a46804ff;

  /* Font variables — Montserrat is used for everything */
  --headlinefont: "Montserrat", sans-serif;
  --contentfont:  "Montserrat", sans-serif;
  --montserrat:   "Montserrat";
  --inter:        "Inter";
  --space-grotesk: "Space Grotesk";

  /* Text & link defaults */
  --text-color:  #000000;
  --link-color:  #188bf6;
}


/* ─── Navigation button interactions ──────────────────────────── */
.NavButton span,
.DonateButton span,
.FooterNav span {
  position: relative;
}

.NavButton:hover,
.NavButton:hover .elButtonText,
.NavButton:hover span {
  color: #3a86ff;
  transition: color 0.2s ease;
}

.NavButton:active .elButtonText::after,
.NavButton:active span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.1em;
  height: 2px;
  background: currentColor;
}

.DonateButton {
  transition: background-color 0.2s ease;
}
.DonateButton:hover {
  background-color: #1b60f5;
}
.DonateButton:active .elButtonText::after,
.DonateButton:active span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.1em;
  height: 2px;
  background: currentColor;
}

.FooterNav:hover .elButtonText::after,
.FooterNav:hover span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.1em;
  height: 2px;
  background: currentColor;
}
.FooterNav:active,
.FooterNav:active .elButtonText,
.FooterNav:active span {
  color: #3a86ff;
}
.FooterNav:active .elButtonText::after,
.FooterNav:active span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.1em;
  height: 2px;
  background: currentColor;
}


/* ─── Mobile hamburger menu (components.js toggles .is-open) ──── */
#mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 200;
  padding: 24px;
  flex-direction: column;
  gap: 16px;
}
#mobile-nav.is-open {
  display: flex;
}
#mobile-nav a {
  font-family: var(--headlinefont);
  font-size: 18px;
  font-weight: 600;
  color: #333a42;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid #ced2e7;
}
#mobile-nav .close-btn {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #333a42;
  margin-bottom: 16px;
}


/* ─── Active nav link ─────────────────────────────────────────── */
.nav-active span {
  color: #3a86ff !important;
}