@charset "UTF-8";

/* ============================================================
   1. BASE STYLES & LAYOUT
   ============================================================ */
body, html {
  margin: 0;
  padding: 0;
  font-family: "open-sans", sans-serif;
  color: #000;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}




/* ===========================
   Coming Soon Page Styles
   =========================== */

.comingSoon {
  display: inline-block;
  padding: 7vw 0;
  text-align: center;
  color: #fff;
  background-color: #044f7b;
  background: linear-gradient(to bottom, #022c49, #000000);
  width: 100%;
  height: 100%;
  align-items: center;
  font-size: 6vw;
  font-weight: 800;
  line-height: 6vw;
  vertical-align: middle;
}

.comingSoon img { width: 22vw; }

.comingSoonYellow {
  font-size: .55em;
  color: #fff;
}

.comingSoonFiller {
  height: 1000px;
  background-color: #0a0a0a;
}











a:link, a:visited { 
  color: #044f7c; 
  text-decoration: underline; 
}
a:hover { color: #027cc6; }

.red { color: red; }

/* WEDGE REVOLUTION (Duration: 1.5s) */
.wedge { 
  width: 250px; 
  transform-origin: center;
  animation: oneRevolution 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes oneRevolution {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.yellow { color: #ffc609; }

h1, h2, h3, h4 { color: #044f7c; margin-bottom: 0; line-height: 1.1em; }
h1 { font-size: 2.2em; line-height: 2rem; margin-bottom: .75rem; }
h2 { font-size: 1.75em; }

section { 
  padding: 2vw 6vw; 
  position: relative; 
  z-index: 2; 
}

.section1 { 
  display: flex; 
  padding-top: 2vw; 
  flex-direction: row-reverse; 
  padding-bottom: 70px !important; 
}
.section1 img { margin-left: 20px; }

.section11 { 
  display: flex; 
  padding-top: 2vw; 
  flex-direction: row-reverse; 
  align-items: center;
}
.section11 img { margin-left: 20px; }

.swirl1 {
	background-image: url("images/blueSwirl1.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl2 {
	background-image: url("images/blueSwirl2.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl3 {
	background-image: url("images/blueSwirl3.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl4 {
	background-image: url("images/blueSwirl4.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl5 {
	background-image: url("images/blueSwirl5.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl22 {
	background-image: url("images/blueSwirl22.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.main-nav {
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: 1000;
  background: linear-gradient(to bottom, #053a60, #044d7a);
  border-bottom: #ffc60b 3px solid;
}

.nav-list { 
  display: flex; 
  justify-content: center; 
  list-style: none; 
  margin: 0; 
  padding: 0.8rem 1rem; 
  gap: 24px; /* Increased from 10px to give links more breathing room */
  flex-wrap: wrap; 
}

.nav-list { 
  display: flex; 
  justify-content: center; 
  list-style: none; 
  margin: 0; 
  padding: 0 1rem; 
  gap: 6px; 
  flex-wrap: wrap; 
}

.nav-list a { 
  display: inline-block; 
  color: #ffffff; 
  text-decoration: none; 
  font-weight: 500; 
  font-size: 0.9rem; 
  padding: 1.1rem 8px; 
  transition: color 0.1s ease, background-color 0.1s ease; /* Slightly faster transition for snappier click response */
}

/* Rollover State */
.nav-list a:hover { 
  color: #ffc60b; 
  background-color: #002b46; 
}

/* Active Page State (The page you are currently viewing) */
.nav-list a.current {
  color: #ffffff;
  background-color: #002b46; 
  font-weight: 500; 
}

/* Click/Press State (Flashes when actively clicked) */
.nav-list a:active {
  background-color: #0084d4;
  color: #fff; /* Switches text to clean white during the click for sharp contrast */
}

.nav-list a:visited {
  color: #ffffff;
}

/* Hide hamburger button by default on desktop viewports */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 1rem;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
}

/* Beautiful modern pure CSS hamburger icon */
.hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background: #ffffff;
  transition: background 0.2s ease-in-out;
}
.hamburger::before, .hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: #ffffff;
  transition: transform 0.2s ease-in-out, top 0.2s ease-in-out;
}
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

/* Morph hamburger into an 'X' icon when open */
.nav-toggle.open .hamburger { background: transparent; }
.nav-toggle.open .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open .hamburger::after { top: 0; transform: rotate(-45deg); }

.aboutText {
  padding: 1vw 4vw 4vw 4vw; 
  margin: 2vw;
  background-color: #eeeeee; 
  border-radius: 2vw; 
  border: #90b5cb 2px solid;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.20);
  animation: fadeInUp 1.2s ease-out forwards;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}	

.opportunitiesIntro { 
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	position: relative;
	top: -90px;
}


/* ============================================================
   2. HERO SLIDE-IN
   ============================================================ */
.hero-container {
  margin-top: 57px; 
  width: 100%; 
  height: auto; 
  overflow: hidden;
  background-color: transparent;
  position: relative; 
  z-index: 3;
  animation: fadeInDown 1.2s ease-out forwards;
}
.hero-image { 
  width: 100%; 
  height: auto; 
  display: block; 
  min-height: 250px; 
  object-fit: cover; 
}
.hero2 { border-bottom: 3px #ffc60b solid; }

@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   3. THE BUTTONS (Strict Delay Logic)
   ============================================================ */

.newButton {
	width: 100%;
	text-align: center;
	margin: auto;
}



.button-group {
  display: flex; 
  justify-content: flex-start; 
  flex-wrap: wrap;
  gap: 12px; 
  margin: 20px 0 25px 0; 
}

.btn-anim-wrap {
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  animation: buttonFadeIn 1.2s ease-out forwards;
}

/* Specific Delays: Waiting for Wedge (1.5s) + Stagger */
.btn-anim-wrap:nth-child(1) { animation-delay: 1.4s; }
.btn-anim-wrap:nth-child(2) { animation-delay: 1.8s; }
.btn-anim-wrap:nth-child(3) { animation-delay: 2.2s; }


.btn-anim-wrap2 {
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  animation: buttonFadeIn 1.2s ease-out forwards;
}

.btn-anim-wrap2:nth-child(1) { animation-delay: 2.2s; }
.btn-anim-wrap2:nth-child(2) { animation-delay: 2.6s; }



@keyframes buttonFadeIn {
  0% { 
    opacity: 0; 
    visibility: visible; 
    transform: translateY(15px); 
  }
  100% { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
  }
}

.tab-button {
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: bold;
  text-decoration: none !important;
  display: inline-block;
  cursor: pointer;
  border: 2px solid #044f7c;
  border-radius: 8px;
  background-color: #044f7c;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tab-button:hover {
  background-color: #ffc609 !important;
  color: #044f7c !important;
}

/* THE DIP: Makes the button feel tactile when clicked */
.tab-button:active {
  transform: translateY(3px); /* Dips the button down 3px */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Flattens the shadow slightly */
  transition: transform 0.05s; /* Makes the 'click' feel instant and snappy */
}

.tab-button.active {
  background-color: #044f7c;
  color: #ffc609;
}

/* ============================================================
   4. CONTENT BOXES & BADGE
   ============================================================ */
.content-wrapper {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr;
  width: 100%; 
  position: relative; 
  align-items: start;
  overflow: hidden !important; 
  z-index: 10;
  margin-top: -70px !important; 
  padding-top: 40px !important; 
}

.fade-section {
  grid-area: 1 / 1; 
  opacity: 0; 
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  box-sizing: border-box;
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  
  /* Reset margins completely */
  margin: 0 !important; 
}

.fade-section.active { 
  opacity: 1; 
  visibility: visible; 
  position: relative; 
}

.blueGradientBG {
  background-image: linear-gradient(to right bottom, #ffffff, #c3e3fd, #f3faff);
  border-top: #90b5cb 3px solid;
}

.resourceType {
  background: linear-gradient(to bottom, #022c49, #044f7b);
  border-radius: 12px; 
  border: #fff 3px solid;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.20);
  position: relative; 
  z-index: 5;
  text-align: center;
  padding: 0;

  /* PULLS THE BANNER TO STRADDLE THE SEAM PERFECTLY */
  margin: -45px 17px 20px 17px !important; 
}

.resourceType h2 { 
  color: #fff; 
  padding: 9px 0 12px 0; 
  line-height: 1em; 
  margin: 0; 
}

.offerings {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: center; /* Centers items on any row that isn't completely full */
  gap: 30px; /* Handles spacing evenly between rows and columns */
  padding-top: 12px;
}

.infoBox {
  /* Dictates a perfect 3-column split width on desktop, but allows shrinking down to 280px */
  flex: 0 1 calc((100% - 60px) / 3);  
  min-width: 280px; 
  box-sizing: border-box; /* Ensures padding doesn't break our width calculations */

  text-align: left;  
  padding: 25px; 
  background-color: #eeeeee;  
  border-radius: 16px;  
  border: #90b5cb 2px solid;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.20);
}

.logoBox img { max-width: 70%; display: block; margin: 0 auto 20px; }
.multiplyLayer { mix-blend-mode: multiply; }
.roundLogo { width: 35%; }
.wideLogo { max-width: 95% !important; }

.furtherEducation { 
	margin-top: 0;
	padding-top: 0;
	position: relative;
	top: -50px;
}

/* ============================================================
   5. FOOTER
   ============================================================ */
footer {
  background: linear-gradient(to bottom, #022c49, #044f7b);
  padding: 3.5rem 1rem; 
  text-align: center; 
  color: white;
  border-top: #ffc609 3px solid; 
  margin-top: auto; 
  position: relative; 
  z-index: 10;
}

.footerLogos { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 13px; 
}

.footerLogos img { 
  height: 7vw; 
  max-height: 85px; 
  opacity: 0; 
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.footerLogos img:first-child { transform: translateX(-50px); }
.footerLogos img:last-child { transform: translateX(50px); }
.footerLogos.visible img { opacity: 1; transform: translateX(0); }

footer a:link, footer a:visited { 
  color: #ffc609; 
  text-decoration: underline; 
}
footer a:hover { color: #fff; }
footer a:active { color: red; }

.footer-credits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px 40px;               
  flex-wrap: wrap;         
  margin: 15px 0 35px 0;      
}

.partnerLogos { 
	width: 500px;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Prevents specific text phrases from breaking across lines */
.nowrap {
  white-space: nowrap;
}


/* ============================================================
   TOPICS 
   ============================================================ */

#topics { 
	display: flex;
	flex-wrap: wrap;       
	gap: 20px;  
	padding: 0 60px 72px 60px;
}

.topicBox { 
	flex: 1 1 250px;       
	border: #ccc 3px solid;
	border-radius: 12px;
	overflow: hidden;
	background-image: radial-gradient(circle at 17% 22%, #ffffff, #d7ebfb, #c3e1fa);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	
	/* Turns the box into a vertical flex layout */
	display: flex;
	flex-direction: column;
}

.topicTitle {
	color: #fff;
	font-size: 1.15em;
	font-weight: 600;
	line-height: 1.25em;
	padding: 12px 20px;
	background: -webkit-linear-gradient(#022c49, #044f7b);
	background: -o-linear-gradient(#022c49, #044f7b);
	background: linear-gradient(#022c49, #044f7b);
	border-bottom: #ccc 3px solid; 
}

.topicText {
	padding: 20px;
	text-align: left; /* Keeps your main paragraph text left-justified */
	
	/* Expands to fill empty space and allows vertical flex alignment */
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

/* ============================================================
   BUTTON POSITIONING (FIXED)
   ============================================================ */

.topicButton {
	margin-top: auto;        /* Pushes the wrapper to the absolute bottom */
	padding-top: 12px;       /* Safety gap from the text above */
	width: 100%;             /* Ensures it spans the entire width of the box */
	
	/* The Fix: Turn the wrapper into a flex row and center its children */
	display: flex;
	justify-content: center; 
}







/* ============================================================
   MAP LINK BOX
   ============================================================ */
.mapLinkBox {
  opacity: 0;
  visibility: hidden;
  animation: buttonFadeIn 1.2s ease-out forwards;
  animation-delay: 2.6s;
  padding: 0 0 20px 0; 
  margin-left: 10px;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.mapLinkText {
  position: relative;
  background-color: #f6c746;
  border: 3px solid #ffffff;
  display: block; 
  padding: 7px 30px 9px 45px; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.mapLinkText p {
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.mapLinkPointer {
  position: absolute !important; 
  left: -40px;
  top: 50%;
  transform: translateY(-50%); 
  width: 44px;
  height: auto;
  z-index: 10;
}

.mapLinkText a:link, .mapLinkText a:visited { 
  color: #044f7c; 
  text-decoration: underline; 
}
.mapLinkText a:hover { color: #027cc6; }
.mapLinkText a:active { color: red; }


/* ============================================================
   HERO BREAKPOINT (950px)
   The logo starts to clip, so we trigger the graphic swap here.
   ============================================================ */
@media (max-width: 950px) {
  .hero-container {
    margin-top: 54px; 
  }
}

/* ============================================================
   INTERMEDIATE TABLET STATE (950px to 801px)
   Keeps the menu horizontal but saves space to avoid wrapping.
   ============================================================ */
@media (max-width: 950px) and (min-width: 801px) {
  .nav-list {
    gap: 10px; 
  }
  
  .nav-list a {
    font-size: 0.8rem; 
    padding: 1.1rem 5px; 
  }
}

/* ============================================================
   3. MOBILE BREAKPOINT (800px and below)
   The full mobile transition: hamburger menu and stacked cards.
   ============================================================ */
@media (max-width: 800px) {
  .main-nav {
    min-height: 54px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .nav-toggle {
    display: block;
  }

  .nav-list {
    display: none; 
    flex-direction: column;
    width: 100%;
    gap: 0; 
    padding: 0;
    position: absolute;
    top: 100%; 
    left: 0;
    background: #044d7a;
    border-bottom: #ffc60b 3px solid;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .nav-list.open {
    display: flex;
  }

  .nav-list a {
    display: block;
    width: 100%;
    padding: 14px 24px; 
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
  }
  
  .nav-list li {
    width: 100%;
  }

  .section1, .section11 {
    flex-direction: column; 
    text-align: center;
    align-items: center;
    padding-top: 40px;
  }

  .section1 .wedge, .section11 .wedge {
    margin-left: 0;
    width: 95%; 
    max-width: 450px; 
    margin-bottom: 5px; 
  }

  .section1 > div:last-child {
    text-align: left;
  }
	
 .section11 > div:last-child {
    text-align: left;
  }

  h1 { font-size: 1.6em; text-align: center; }
  h2 { font-size: 1.3em; }

  .offerings {
    flex-direction: column; 
    gap: 16px; 
    padding: 12px 15px;
  }

  .infoBox {
    flex: 1 1 100%; 
    max-width: 100%;  
    min-width: 0;  
    margin: 0; 
    padding: 20px;
  }

	.aboutText { 
		margin-top: 35px;
		margin-bottom: 40px;
	}

}


@media (max-width: 800px) {
  /* ============================================================
     1. NAVBAR STYLES
     ============================================================ */
  .main-nav {
    min-height: 54px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .nav-toggle {
    display: block;
  }

  .nav-list {
    display: none; 
    flex-direction: column;
    width: 100%;
    gap: 0; 
    padding: 0;
    position: absolute;
    top: 100%; 
    left: 0;
    background: #044d7a;
    border-bottom: #ffc60b 3px solid;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .nav-list.open {
    display: flex;
  }

  .nav-list a {
    display: block;
    width: 100%;
    padding: 14px 24px; 
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
  }
  
  .nav-list li {
    width: 100%;
  }

.hero-container {
    /* Allow the container to shrink naturally with the image */
    min-height: auto; 
  }

  .hero-image {
    /* Ensures the image doesn't force a minimum height that causes cropping */
    min-height: 150px; 
    /* 'contain' will show the whole image, 'cover' will keep filling the space */
    object-fit: cover; 
    width: 100%;
    height: auto;
  }

  /* ============================================================
     2. INTRO, TYPOGRAPHY, MAP, & BANNER FIXES
     ============================================================ */
  .section1, .section11 {
    flex-direction: column; 
    text-align: center;
    align-items: center;
    padding-top: 40px;
  }

  .section1 .wedge, .section11 .wedge {
    margin-left: 0;
    width: 95%; 
    max-width: 450px; 
    height: auto; 
    margin-bottom: 5px; 
  }

  .section1 > div:last-child {
    text-align: left;
  }

  .section11 > div:last-child {
    text-align: left;
  }

  .section1 h1, .section11 h1 {
    margin-top: 0; 
    text-align: center; 
  }

  .mapLinkPointer {
    width: 55px; 
    left: -40px; 
  }

  h1 { font-size: 1.8em; }
  h2 { font-size: 1.4em; }

  .button-group {
    justify-content: center;
  }

  .mapLinkBox {
    justify-content: center;
    margin-left: 0;
    padding: 0 25px; 
    box-sizing: border-box;
    margin-bottom: 55px; 
  }
  
  .mapLinkText p {
    white-space: normal; 
  }

  .resourceType {
    margin: -45px 10px 20px 10px !important;
  }

  .resourceType h2 {
    font-size: 1.25em;
    padding: 12px 10px;
  }

  /* ============================================================
     3. FLEX RESOURCE CARDS (UPDATED FOR CENTERING LOGIC)
     ============================================================ */
  .offerings {
    flex-direction: column; /* Flips horizontal cards into a clean vertical stack */
    gap: 16px; 
    padding: 12px 15px;
  }

  .infoBox {
    flex: 1 1 100%; /* Allows cards to span the full width of mobile viewports */
    max-width: 100%;  
    min-width: 0;  
    margin: 0; 
    padding: 20px;
    border-radius: 12px; 
    box-sizing: border-box;
  }

  /* ============================================================
     4. WHEEL & FOOTER CORRECTIONS
     ============================================================ */
  .wheel-section {
    padding-top: 0 !important;      
    padding-bottom: 0 !important; 
  }

  .wheel-outer-container { 
    flex-direction: column; 
    align-items: center; 
    gap: 20px; 
    padding: 0 20px;
    box-sizing: border-box;
  }

  .wheel-graphic-wrapper {
    flex: 0 0 auto;       
    width: 90%; 
    max-width: 650px; 
    height: auto;          
    aspect-ratio: 1 / 1;  
    margin: 0 auto;
  }

  .wheel-info-panel {
    width: 90%; 
    max-width: 650px; 
    flex: 1 1 auto;
    min-height: 180px; 
    margin-bottom: 0 !important; 
  }
  
  .footerLogos img { 
    height: 16vw;            
    max-height: 90px;        
  }
	
	.partnerLogos { 
		width: 90%;
		max-width: 500px;
	}
	

  /* FIX 1: Force the undergraduate intro section to stack vertically on mobile */
  .section11 {
    flex-direction: column; 
    text-align: center;
    align-items: center;
    padding-top: 40px;
  }

  /* Make sure the undergraduate wedge image scales nicely like section1 */
  .section11 .wedge {
    margin-left: 0;
    width: 95%; 
    max-width: 450px; 
    height: auto; 
    margin-bottom: 20px; 
  }

  /* FIX 2: Drop the massive 60px side padding so cards have room on phone screens */
  #topics {
    padding: 0 20px 40px 20px;
    gap: 22px;
  }	
}



/* ============================================================
   TAB BUTTON OVERRIDES (FOR ANCHOR TAGS)
   ============================================================ */

.topicButton .tab-button {
	display: inline-block;   /* Allows padding and width to render perfectly */
	text-decoration: none;   /* Erases the default underline */
	text-align: center;      /* Forces the text INSIDE the button to center */
	color: #ffffff !important; /* Forces the text to be white, breaking global link rules */
	
	/* Your established button design */
	padding: 12px 24px;
	background-color: #044f7b;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.25em;
	border: 2px #ccc solid;;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* Keeps the text white even after the user clicks the link */
.topicButton .tab-button:visited {
	color: #ffffff !important;
}

/* Hover state styling */
.topicButton .tab-button:hover {
	background-color: #022c49;
	color: #000 !important;
	border: 2px #044f7b solid;
}

/* ============================================================
   TAB LAYOUT FIX (PREVENTS OVERLAP AT THE TOP OF THE PAGE)
   ============================================================ */
#opportunities, 
#training, 
#careerResources {
	margin-top: 40px; /* Pushes the tab bar down so it sits cleanly below the hero image */
	clear: both;
}