/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root {
  --blue-hero-top: #0460e0;
  --blue-hero-bottom: #0b2275;
  --blue-main: #0f3a9b;
  --blue-main-dark: #102f87;
  --blue-pill: #16306d;
  --yellow: #f1b81b;
  --yellow-soft: #fff7e2;
  --bg-page: #f5f7ff;
  --card-bg: #ffffff;
  --border-soft: #e4ebff;
  --text-main: #111827;
  --text-muted: #6b7280;
  --text-hero: #ffffff;
  --radius-lg: 18px;
  --shadow-main: 0 22px 60px rgba(15, 23, 42, 0.28);
  --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.08);
  --max-width: 1080px;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
}

main {
  background: #f9fbff;
}

/* Navbar */
header {
  background: #fff;
  padding: 8px 18px;
  position: relative;
  /* keep it on top so hero sits under it */
  left: 0;
  right: 0;
  top: 0;
  z-index: 500;
  /* allow header to grow rather than force fixed height
       (important: menu can either expand header or menu overlays page) */
  min-height: 64px;
  display: flex;
  align-items: center;
}

.navbar {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.navbar .logo {
  color: white;
  font-weight: bold;
}

.inter-adi {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.navbar .logo img {
  max-height: 50px;
  width: auto;
  display: block;
}

/* Desktop nav default */
.navbar ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
}

.navbar ul li a {
  color: #111;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 4px;
  line-height: 1;
  font-family: "Inter", sans-serif;
}

.nav-cta {
  border: 1px solid #1E40AF;
  border-radius: 10px;
  color: #1E40AF;
}

.nav-cta-one {
  font-weight: bold;
  color: #1E40AF;
}

/* ---------- HAMBURGER (mobile only) ---------- */
/* default: hide hamburger on desktop; show only on mobile */
.hamburger {
  display: none;
  /* changed: don't show on desktop by default */
  background: white;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 12px;
  z-index: 1100;
  /* ensure it's above the menu */
}

/* bars */
.hamburger .bar {
  display: block;
  width: 24px;
  height: 2.5px;
  margin: 5px 0;
  background: black;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* transform to "X" when open */
.hamburger.open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open .bar:nth-child(2) {
  opacity: 0;
  pointer-events: none;
}

.hamburger.open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ========== MOBILE NAV ========== */
/* Activate at mobile widths */
@media (max-width: 768px) {

  /* show hamburger button on mobile */
  .hamburger {
    display: block;
  }

  /* Layout tweaks for navbar */
  .navbar {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* Make the nav an overlay that drops down from the header.
       Using absolute positioning avoids header height clipping.
       The nav will be limited to the viewport height and will scroll if content is long. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1040;
    /* above header content but below hamburger if needed */
    width: 100%;
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    overflow: hidden;
    /* visually collapsed when closed */
    max-height: 0;
    /* collapsed */
    display: flex;
    /* keep it rendered */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background-color: white;
    /* visible overlay */
    transition: max-height 320ms ease, padding 220ms ease;
    box-shadow: 0 8px 20px rgba(2, 8, 23, 0.08);
    border-radius: 8px;
    /* allow vertical scrolling for long menus when open */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* soft clip so we don't exceed viewport visually */
    max-width: 100%;
  }

  /* expanded state (JS toggles this class)
       Use calc(100vh - headerHeight) to occupy available viewport without covering the header */
  .nav-links.open {
    max-height: calc(100vh - 64px);
    /* full viewport minus header */
    padding: 12px 12px 18px 12px;
  }

  /* keep each item spaced comfortably */
  .nav-links li {
    width: auto;
    margin: 6px 0;
  }

  .nav-links li a {
    display: inline-block;
    padding: 8px 12px;
    font-size: 15px;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Make sure logo doesn't get too big on mobile */
  .navbar .logo img {
    max-height: 48px;
    width: auto;
    display: block;
  }

  /* adjust hero spacing to avoid overlap */
  .about-hero {
    padding-top: 60px;
    padding-left: 18px;
    padding-right: 18px;
    height: auto;
  }
}

/* extra tiny tweak */
@media (max-width: 380px) {
  .navbar .logo img {
    max-height: 45px;
  }

  .nav-links li a {
    font-size: 14px;
    padding: 7px 10px;
  }
}

/* Prevent horizontal scrollbars and white space on mobile */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* Ensure desktop nav behaves correctly across all browsers */
.nav-links {
  display: flex;
  gap: 20px;
}

/* remove duplicate/overlapping mobile blocks (we already defined mobile styles above) */
/* Ensure no weird overflow from inner flex layouts */
.program,
.about,
.stats,
.news,
.research,
.publishers {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;
}

/* HERO */

.hero {
  background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.2) 0%, transparent 55%),
              radial-gradient(circle at 100% 0%, rgba(28, 131, 255, 0.35) 0%, transparent 55%),
              linear-gradient(120deg, var(--blue-hero-top), var(--blue-hero-bottom));
  color: var(--text-hero);
  padding: 80px 20px 120px 20px;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.hero-pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.36);
  color: var(--yellow);
}

.hero-title {
  margin: 16px 0 10px 0;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
}

.hero-subtitle {
  margin: 0;
  font-size: 13.5px;
  opacity: 0.92;
}

/* SECTION HEADINGS */

.section-heading {
  margin-bottom: 30px;
}

.section-heading h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 8px 0;
  color: var(--blue-main);
}

.section-heading.centered {
  text-align: center;
}

.section-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.section-underline {
  width: 60px;
  height: 3px;
  border-radius: 999px;
  background: var(--yellow);
  margin: 0 auto;
}

/* COMMITMENT SECTION */

.commitment {
  padding: 40px 20px 60px 20px;
  margin-top: 0px;
}

.commitment-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.commitment-main-card {
  margin: 26px auto 30px auto;
  max-width: 620px;
  background: linear-gradient(90deg, var(--blue-main), var(--blue-main-dark));
  color: #ffffff;
  border-radius: 14px;
  box-shadow: var(--shadow-main);
  padding: 28px 40px 26px 40px;
  text-align: center;
  border: 4px solid var(--yellow);
}

.commitment-main-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--yellow);
}

.commitment-main-label {
  margin-top: 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

.commitment-main-text {
  margin-top: 8px;
  font-size: 11.5px;
  opacity: 0.9;
}

.commitment-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.stat-card {
  background: #f9f9f9;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 16px 18px;
  text-align: center;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eef2ff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 12px auto;
}

.stat-icon img {
  width: 18px;
  height: 18px;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-main);
}

.stat-label {
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--text-main);
}

.stat-desc {
  margin: 0;
  font-size: 10.5px;
  color: var(--text-muted);
}


/* HIERARCHY SECTION */

.hierarchy {
  padding: 50px 20px 60px 20px;
  position: relative;
}

.hierarchy-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

.hierarchy-inner::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 70px;
  bottom: 0;
  width: 2px;
  background: rgba(107, 114, 128, 0.2);
  transform: translateX(-50%);
  z-index: 0;
}

.tier-label {
  display: inline-block;
  margin: 26px auto 12px auto;
  padding: 7px 26px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.tier-label-blue {
  background: #12338f;
}

.tier-label-cyan {
  background: #1db4ff;
}

.tier-label-yellow {
  background: #f4b314;
  color: #1f2937 !important;
}

.tier-label-dark {
  background: #1f2937;
}

.tier-block {
  background: #fafbfc !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 16px 10px 18px 10px !important;
  margin: 0 auto !important;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  border-top: 5px solid transparent;
}

/* TIER 1 - NATIONAL TEAM - Dark Blue Border */
.tier-label-blue + .tier-block {
  border-top: 5px solid #12338f !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* TIER 2 - STATE TEAM - Light Blue Border */
.tier-label-cyan + .tier-block {
  border-top: 5px solid #1db4ff !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* TIER 3 - DISTRICT TEAM - Yellow Border */
.tier-label-yellow + .tier-block {
  border-top: 5px solid #f4b314 !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* TIER 4 - COLLEGE TEAM - Dark Border */
.tier-label-dark + .tier-block {
  border-top: 5px solid #1f2937 !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* Tier blocks styling */

.tier-block-large {
  padding-top: 22px;
  padding-bottom: 26px;
}

.tier-block-yellow {
  background: var(--yellow-soft);
}

.tier-block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.tier-block-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Tier 1 Title Color */
.tier-label-blue + .tier-block .tier-block-title {
  color: #12338f;
}

/* Tier 2 Title Color */
.tier-label-cyan + .tier-block .tier-block-title {
  color: #1db4ff;
}

/* Tier 3 Title Color */
.tier-label-yellow + .tier-block .tier-block-title {
  color: #1f2937;
}

/* Tier 4 Title Color */
.tier-label-dark + .tier-block .tier-block-title {
  color: #1f2937;
}

.tier-block-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.tier-block-tag {
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 8px;
  background: #e5edff;
  color: #12338f;
  display: inline-block;
  font-weight: 600;
}

.tier-state-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tier-state-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.tier-role-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.tier-label-blue + .tier-block .tier-role-row {
  place-items: center;
}

.tier-label-cyan + .tier-block .tier-role-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.tier-label-yellow + .tier-block .tier-role-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  place-items: center;
}

.tier-label-dark + .tier-block .tier-role-row {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
  place-items: center;
}

.tier-label-dark + .tier-block .tier-role-row {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.role-card {
  background: #f0f1f3 !important;
  border-radius: 12px !important;
  padding: 8px 8px !important;
  border: 1px solid var(--border-soft) !important;
  font-size: 11px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.tier-label-blue + .tier-block .role-card,
.tier-label-yellow + .tier-block .role-card,
.tier-label-dark + .tier-block .role-card {
  text-align: center;
}

.tier-label-yellow + .tier-block .role-card.soft {
  background: #fff7e2 !important;
}

.role-card.wide {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.role-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #e6f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.role-icon img {
  width: 15px;
  height: 15px;
}

.role-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.tier-label-blue + .tier-block .tier-role-row .role-card:nth-child(1) .role-title {
  color: #12338f !important;
}

.tier-label-blue + .tier-block .tier-role-row .role-card:nth-child(2) .role-title {
  color: #12338f !important;
}

.tier-label-blue + .tier-block .tier-role-row .role-card:nth-child(3) .role-title {
  color: #12338f !important;
}

.tier-label-dark + .tier-block .tier-role-row .role-card:nth-of-type(1) .role-title {
  color: #1f2937 !important;
}

.role-subtitle {
  color: var(--text-muted);
  font-size: 10.5px;
}

/* AWARDS */

.awards {
  padding: 60px 20px 60px 20px;
  background: #ffffff;
}

.awards-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f4b314;
  margin-bottom: 6px;
}

.award-group {
  margin-top: 32px;
}

.award-group-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  border-left: 4px solid transparent;
  padding-left: 12px;
}

.award-group:nth-child(2) .award-group-title {
  border-left: 4px solid #12338f;
}

.award-group:nth-child(3) .award-group-title {
  border-left: 4px solid #1db4ff;
}

.award-group:nth-child(4) .award-group-title {
  border-left: 4px solid #f4b314;
}

.award-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.award-group:nth-child(4) .award-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.award-group:nth-child(4) .award-card {
  background: #f0f3f9;
}

.award-card {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid #e6ecff;
  padding: 14px 16px;
  font-size: 11px;
}

.award-title {
  font-size: 14px;
  margin: 0 0 4px 0;
  font-weight: 700;
}

.award-group:nth-child(2) .award-title {
  color: #12338f;
}

.award-group:nth-child(3) .award-title {
  color: #1db4ff;
}

.award-text {
  margin: 0 0 10px 0;
  color: var(--text-muted);
}

.award-group:nth-child(2) .award-text {
  margin: 0 0 20px 0;
}

.award-prize {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: #2563eb;
}

.award-group:nth-child(2) .award-prize {
  background: #f0f3f9;
  color: #163da8;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 0;
}

.award-group:nth-child(3) .award-prize {
  color: #1472a1;
  background: #f0f3f9;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 0;
}

/* JOIN CTA */
.join {
  padding: 80px 20px 100px 20px;
  background: linear-gradient(180deg, #0e2f93 0%, #0c236d 45%, #0d2a7e 100%);
  color: #ffffff;
}

.join-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.join-title {
  margin: 0 0 12px 0;
  font-size: 35px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.join-subtitle {
  margin: 0 0 36px 0;
  font-size: 11.8px;
  line-height: 1.5;
  opacity: 0.70;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.join-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.join-card {
 
  background: #1e3a7a;
  border-radius: 16px;
  padding: 24px 20px 26px 20px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 
    0 12px 32px rgba(13, 42, 126, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.join-card:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 20px 48px rgba(13, 42, 126, 0.55),
    0 6px 24px rgba(0, 0, 0, 0.2);
}

.join-tag {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  color: #f4b314;
}

.join-text {
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.90;
}

.join-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2057a4;
  background: linear-gradient(90deg, #ffffff 0%, #f8fafc 100%);
  cursor: pointer;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.join-btn:hover {
  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateY(-1px);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* RESPONSIVE */

@media (max-width: 1024px) {
  .commitment-stats-row,
  .award-row,
  .join-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .tier-label-blue + .tier-block .tier-role-row,
  .tier-label-dark + .tier-block .tier-role-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  
  .tier-label-cyan + .tier-block .tier-role-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .tier-label-yellow + .tier-block .tier-role-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .commitment-stats-row,
  .award-row,
  .join-row {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-bottom: 80px;
  }

  .commitment-main-card {
    padding-inline: 20px;
  }
  
  .tier-role-row {
    grid-template-columns: 1fr !important;
  }
}


/* Footer */
footer {
  background-color: #f5f5f5;
  color: #000;
  font-size: 14px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 40px;
}

.footer-section {
  flex: 1 1 200px;
  margin-bottom: 12px;
}

.footer-section h4 {
  margin-bottom: 15px;
  font-size: 16px;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section a {
  color: inherit;
  text-decoration: none;
}

.footer-section a:hover {
  text-decoration: underline;
}

.social-icons {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.social-icons a {
  font-size: 20px;
  color: #000;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #0073e6;
}

.bottom-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-bottom {
  background-color: #1439b3;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}

.footer-bottom .left p:first-child {
  font-weight: bold;
  margin-bottom: 5px;
}

.footer-bottom .right {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom .right a {
  color: #fff;
  text-decoration: none;
}

.footer-bottom .right a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    padding: 30px 20px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .footer-bottom .right {
    justify-content: center;
  }

  .bottom-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
  }
}