/* ==============================
   Font Imports
   ============================== */
@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&family=Fredoka:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Fredoka:wght@500;600&family=Inter:wght@400;500;600&display=swap');

/* ==============================
   Variables (as CSS custom props)
   ============================== */
:root {
  --color-bg: #232946;       /* Deep purple */
  --color-accent: #FFD800;   /* School bus yellow */
  --color-text: #FFFFFF;     /* White */
  --color-dark: #000000;     /* Black */

  --font-display: 'Sixtyfour', sans-serif;
  --font-heading: 'Fredoka', sans-serif;
  --font-body: 'Inter', sans-serif;

  --spacing-unit: 1rem;
}


/* ==============================
   Base Styles
   ============================== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

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

/* ==============================
   Typography
   ============================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 var(--spacing-unit) 0;
  color: var(--color-text);
}

h1.splash-heading {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

p, li {
  font-family: var(--font-body);
  font-weight: 400;
  margin-bottom: var(--spacing-unit);
}

/* ==============================
   Links & Buttons
   ============================== */
a, button {
  cursor: pointer;
  transition: all 0.3s ease;
}

/* ==============================
   Buttons - Cleanup
   ============================== */
.btn-primary, .button--primary {
  background: var(--color-accent);
  color: var(--color-dark) !important; /* Keep text black */
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--color-dark);
  border-radius: 4px;
  text-decoration: none !important;
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.button--primary:hover,
.button--primary:focus
{
  background: #ffdf33; /* Slightly lighter yellow for hover */
  color: var(--color-dark); /* Enforce black text */
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.btn-primary:active, .button--primary:active {
  background: #e6c600; /* Darker yellow on press */
  color: var(--color-dark); /* Enforce black text */
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

h1.splash-heading {
  font-family: var(--font-display);
  font-size: 3rem;       /* Big splash */
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
}

h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
}

h4 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}

h5 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}

h6 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase; /* optional for clarity */
}

p {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9); /* softer white */
}

#splash-header {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #2E1A47, #5E60CE);
}

#splash-header .left,
#splash-header .right {
  flex: 1;                        /* each side takes 50% */
  display: flex;
  justify-content: center;        /* centers horizontally */
  align-items: center;            /* centers vertically */
}



#splash-header .horizontal-wrapper {
  width: 100%;
  max-width: 500px;               /* keeps text/images from stretching */
  text-align: center;             /* ensures child text centers */
}

#splash-header img {
  max-width: 400px;
  height: auto;
  display: block;                 /* removes inline spacing issues */
  margin: 0 auto;                 /* final guarantee of centering */
}

#splash-header .inner-wrapper {
  max-width: 1180px;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 2rem; /* optional: adds breathing space between avatar & text */
}

.splash-cta {
    margin-top: 1.75rem;
}

#main {
     margin: 1rem 2rem;
}

/* ========== Tablet/Desktop Adjustments (≤1210px) ========== */
@media (max-width: 1210px) {
  #splash-header .inner-wrapper {
    padding: 0 2rem; /* gutters on both sides */
  }

  h1.splash-heading {
    font-size: 2.5rem; /* scale down heading */
  }

  h3 {
    font-size: 1.5rem;
  }

  #splash-header img {
    max-width: 240px; /* shrink avatar a bit */
  }
}

/* ========== Mobile Layout (≤768px) ========== */
@media (max-width: 768px) {
  #splash-header {
    height: 100vh;               /* always take full viewport height */
    display: flex;
    align-items: center;         /* vertical centering */
    justify-content: center;     /* horizontal centering */
    padding: 2rem 1rem;
    width: calc(100% - 2rem);

  }

  #splash-header .inner-wrapper {
    flex-direction: column;      /* stack avatar + text */
    align-items: center;
    justify-content: flex-start; /* don’t space out vertically */
    text-align: center;
    width: 100%;
    gap: 1.5rem;                 /* tighter control of spacing */
  }

  #splash-header h1.splash-heading {
    text-align: center;          /* ensure H1 aligns center */
    width: 100%;                 /* allow it to center properly */
    font-size: 1.6rem;             /* scaled size for mobile */
  }

  #splash-header h3 {
    font-size: 1.25rem;
    line-height: 1.4;
  }
}


#splash-header h1,
#splash-header h3 {
  hyphens: none;          /* disable automatic hyphenation */
  overflow-wrap: normal;  /* don’t force breaks inside words */
  word-break: normal;     /* keep words whole */
}

@media (max-width: 900px) and (min-width: 769px) {
  #splash-header h1.splash-heading {
    font-size: 2rem;   /* notch down from desktop */
  }
}



.gradient-block {
  width: calc(100% - 4rem);
  min-height: 100vh;       /* updated from fixed height */
  padding: 6rem 2rem;
  margin: 0 auto;
  color: #fff;
  text-align: left;        /* align text left */
  display: flex;           /* to support vertical centering */
  align-items: center;     /* optional: center content vertically */
}

.gradient-block .gradient-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.gradient-inner > *:last-child {
  margin-bottom: 0;     /* avoid awkward extra space at bottom */
}

.gradient-block h2,
.gradient-block h3,
.gradient-block p {
  margin-bottom: 1.5rem;
}

.gradient-block a {
  color: #FFD800; /* school bus yellow accent */
  font-weight: 600;
  text-decoration: underline;
}

.gradient-block a:hover {
  text-decoration: none;
}

/* Headings inside gradient blocks */
.gradient-block h1,
.gradient-block h2,
.gradient-block h3,
.gradient-block h4,
.gradient-block h5,
.gradient-block h6 {
  font-family: 'Space Grotesk', sans-serif;  /* Modern, crisp */
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 1rem 0;
  color: var(--color-text);
}

.gradient-block h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

.gradient-block h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.gradient-block h3 {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
}

.gradient-block h4,
.gradient-block h5,
.gradient-block h6 {
  font-size: 1.25rem;
  font-weight: 500;
}

/* Body text inside gradient blocks */
.gradient-block p,
.gradient-block li {
  font-family: 'Inter', sans-serif;  /* Highly readable */
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.95);
  word-break: normal;
  overflow-wrap: break-word;
}

form input,
form textarea,
form select {
  background: rgba(255, 255, 255, 0.1); /* translucent white */
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-family: var(--font-body);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

form input:focus,
form textarea:focus,
form select:focus {
  border-color: var(--color-accent); /* School bus yellow */
  outline: none;
  background: rgba(255, 255, 255, 0.15);
}

/* Floating nav bar */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4); /* translucent background */
  backdrop-filter: blur(8px);     /* optional: glassy blur */
  z-index: 1000;
}

.main-nav {
  max-width: 1180px;
  padding: 1rem 2rem;
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
}

.main-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease, border-bottom 0.3s ease;
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

/* Push down main content so it's not hidden under fixed header */
main {
  padding-top: 70px; /* adjust based on header height */
}

/* Reset Drupal's menu defaults */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.main-nav li {
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease, border-bottom 0.3s ease;
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

/* Remove padding for splash so there's no gap */
#splash-header {
  margin-top: -70px; /* pull it back up */
  padding-top: 70px; /* balance so content still starts below header */
  margin-bottom: -70px;
}

.menu li:first-of-type {
    list-style: none;
}

/* Header container */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  z-index: 1000;
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand name */
.nav-brand a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
}

.nav-brand a:hover,
.nav-brand a:focus {
  color: var(--color-accent);
}

/* Menu */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.main-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease, border-bottom 0.3s ease;
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

/* Mobile stacking */
@media (max-width: 768px) {
  .main-nav {
    padding: 2px 2rem;
  }  
  .main-nav .menu {
    margin-top:0;
  }
  .nav-inner {
    flex-direction: column;
    align-items: center;
  }

  .main-nav ul {
    flex-direction: row;
    gap: 2rem;
    margin-top: 0.75rem;
  }

  .nav-brand {
    margin-bottom: 0.5rem;
  }
}

.gradient-block p,
.gradient-block li,
.gradient-block span,
.gradient-block div {
  word-break: normal;       /* don’t break words arbitrarily */
  overflow-wrap: anywhere;  /* allow wrapping at spaces or punctuation */
  hyphens: none;            /* disable auto-hyphenation */
}

ul.menu a, ul.menu a.is-active {
    color: #fff !important;
}