/* ===================================================================
   0. Brand tokens + schemes
   =================================================================== */

/* Base Argonne onboarding colors (LIGHT/original design) */
:root {
  --onboard-page-bg:        #f8f9fb;                 /* body background */
  --onboard-surface-bg:     #ffffff;                 /* header/cards */
  --onboard-text:           #222222;                 /* body text */
  --onboard-header-blue:    #1D2D85;                 /* h2 */
  --onboard-header-dark:    #1F2236;                 /* top-bar text/icon */
  --onboard-accent-blue:    #0077c2;                 /* hover/link accent */
  --onboard-border-light:   #dddddd;                 /* thin borders */

  /* Footer variations (are not being used currently)
  --onboard-footer-bg:      #1F2236;
  --onboard-footer-text:    #ffffff;
  --onboard-footer-chip-bg: rgba(255, 255, 255, 0.28);
  --onboard-footer-chip-bg-hover: rgba(255, 255, 255, 0.4); */
}

/* Light scheme */
[data-md-color-scheme="alcf"] {
  --md-default-bg-color:           var(--onboard-page-bg);
  --md-default-bg-color--light:    var(--onboard-surface-bg);
  --md-default-bg-color--lighter:  var(--onboard-surface-bg);

  --md-default-fg-color:           var(--onboard-text);
  --md-default-fg-color--light:    #555555;
  --md-default-fg-color--lighter:  #888888;

  --md-primary-fg-color:           var(--onboard-header-blue);
  --md-accent-fg-color:            var(--onboard-accent-blue);

  --md-typeset-a-color:            var(--onboard-accent-blue);
}

/* Dark scheme */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #070712;
  --md-default-bg-color--light:    #111320;
  --md-default-bg-color--lighter:  #161827;

  --md-default-fg-color:           #e2e4e9;
  --md-default-fg-color--light:    #b4b7c2;
  --md-default-fg-color--lighter:  #8c90a0;

  --md-primary-fg-color:           #b8e2de;
  --md-accent-fg-color:            #18b9b4;

  --md-typeset-a-color:            #b8e2de;
  --onboard-header-blue:           #b8e2de;

  /* Footer variations (are not being used currently)
  --onboard-footer-bg:             #070712;
  --onboard-footer-text:           #e2e4e9;
  --onboard-footer-chip-bg:        rgba(255, 255, 255, 0.16);
  --onboard-footer-chip-bg-hover:  rgba(255, 255, 255, 0.28); */
}

/* ===================================================================
   1. Global Styles
   =================================================================== */


body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--md-default-bg-color);   /* #f8f9fb in light */
  color: var(--md-default-fg-color);        /* #222222 in light */
}

h1, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  margin: 0 0 0.5em 0;
}

h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--onboard-header-blue);        /* #1D2D85 in light */
}

p {
  margin: 0 0 1em 0;
  font-weight: 400;
  line-height: 1.7;
}


/* ===================================================================
   2. Video Embeds
   =================================================================== */

.embed-video {
  position: relative;
  width: 90%;             
  max-width: 900px;        
  margin: 2em auto;        
  padding-bottom: 50%;     
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.embed-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ===================================================================
   3. HEADER (Top Navigation Bar)
   =================================================================== */

.top-bar {
  /* background-color: white; */
  background-color: var(--onboard-surface-bg);          /* white in light */
  padding: 1em 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--onboard-border-light); /* #ddd in light */
  flex-wrap: nowrap;
}

.home-link {
  color: var(--onboard-header-dark);                    /* #1F2236 */
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2em;
}

.home-link:hover {
  color: var(--onboard-accent-blue);                    /* #0077c2 */

}

.argonne-logo {
  height: 70px;
  width: auto;
  margin: 0;
  vertical-align: middle;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5em;
  flex: 1;
}

.md-header__button {
  padding-left: 1em;
  /* display: inline-flex;
  align-items: center; */
  color: var(--md-default-fg-color);
}

/* Only visible buttons (not [hidden]) should be flex
.md-header__button:not([hidden]) {
  display: inline-flex;
  align-items: center;
} */

@media screen and (min-width: 769px) {

  .top-bar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8em; /* reduce spacing between icons */
    margin-top: 0.5em;
  }

  .top-bar-right > * {
    flex: 0 0 auto;
  }

}


/* Make header icons follow text color so they adapt per scheme */
.md-header__button.md-icon svg {
  width: 24px;
  height: 24px;
  /* fill: #1F2236; */
  fill: currentColor;   /* was #1F2236 */
  display: inline-block;
}

.md-header__button[for="__search"]:hover svg {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Content Area Width */
.md-grid {
  max-width: 1800px;
}

.md-search-result__article--document .md-search-result__title {
  font-weight: 600;
  color: var(--md-typeset-a-color);
}

.md-search__scrollwrap h1,
.md-search__scrollwrap p {
  text-transform: none;
  letter-spacing: 0;
  color: var(--md-default-fg-color-light);
}

.md-search__scrollwrap details,
.md-search__scrollwrap summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-accent-fg-color);
}

.md-search__overlay {
  pointer-events: auto !important;
}

/* Ensure consistent font styling for search input */
.md-search__form .md-search__input {
  font-family: "Montserrat", var(--md-text-font-family), system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}


/* No autocomplete ghost text */
.md-search__suggest {
  display: none !important;
}

/* Force both layers to share the same padding (adjust if your input uses different values) */
.md-search__input,
.md-search__suggest {
  padding: 0 2.75rem 0 2.75rem !important;
}





/* ===================================================================
   4. Hero section
   =================================================================== */


.hero {
  position: relative;
  width: 100%;
  min-height: 350px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* color: #fff; */
}

/* Background image */
.hero__bg {
  background: url("{{ base_url }}/images/Argonne-Employees-Standing-Expanded.png") center center / cover no-repeat;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
}

.hero__overlay {
  position: relative;
  z-index: 2;
  background: rgba(21, 26, 60, 0.783);
  padding: 2.5em 3em;
  max-width: 1000px; 
  text-align: left;
  margin-left: 4%;
  margin-top: 2em;
}

/* Text styles */
.hero__content h1 {
  color: #ffffff;
  font-size: 3.7em; 
  font-weight: 900;
  margin-bottom: 0.4em;
  margin-top: 0.4em;
  line-height: 1.2;
  letter-spacing: 1.7px;
}

.hero__content p {
  color: #ffffff;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.2;
  max-width: 100%; 
  white-space: normal; /* ensure wrapping happens */
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .hero {
    min-height: 250px;
  }

  .hero__overlay {
    margin: 2em;
    padding: 2em;
    max-width: none;
  }

  .hero__content h1 {
    font-size: 2em;
  }

  .hero__content p {
    font-size: 1.1em;
  }
}


/* Main Content */

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2em 1em 0 1em;
}


/* ===================================================================
   5. Footer
   =================================================================== */


footer {
  background: #1F2236;
  color: #fff;
  padding: 2.5em 3em;
  margin-top: 2em;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2em;
}

/* Left Section */
.footer-left {
  display: flex;
  align-items: center;
  gap: 1.5em;
  margin-top: 0.5em; /* shift down slightly */
}

.footer-logo {
  height: 90px;
}

.footer-address {
  font-size: 0.8rem;
  line-height: 1.5;
}

.footer-address a {
  color: inherit;            
  text-decoration: none; 
  cursor: pointer;        
}

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

/* Social Icons */
.footer-social .md-social {
  display: flex;
  gap: 1.2em;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.28);
  transition: background-color 0.3s ease;
}

.social-link svg {
  fill: white;
  width: 24px;
  height: 24px;
}

.social-link:hover {
  background-color: rgba(255, 255, 255, 0.4);
}


/* Logos */

.footer-sub-logos {
  /*
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
  */
  
  display: flex;
  flex-direction: column; 
  align-items: flex-end;
  gap: 0.5em;
  text-align: right;
}

.footer-sub-logos-row {
  display: flex;
  gap: 2em; /* space between DOE and UChicago logos */
  justify-content: flex-end;
  align-items: center;
}

.footer-sub-logo {
  height: 30px;
  width: auto;
}

/*
No copyright for now:

.footer-copyright {
  font-size: 0.55rem;
  margin-top: 0.5em;
  color: #F2F2F2;
  opacity: 0.6;
}
*/



/* ===================================================================
   6. Download Buttons
   =================================================================== */


.download-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  color: #0d1339;
  border: 2px solid #1D2D85;
  border-radius: 999px;
  background-color: transparent;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
  margin-top: 10px;
}

.download-button:hover,
.download-button:hover:visited,
.download-button:hover:active {
  background-color: #00609C;
  color: #ffffff !important;
  border-color: #00609C;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}



/* ===================================================================
   7. Checklist
   =================================================================== */


.checklist-preview {
  position: relative;
  width: 100%;
  max-width: 1000px; 
  margin-top: 20px;
  overflow: hidden;
  height: 540px; 
  border-radius: 12px; 
}

.checklist-preview img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.checklist-preview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%; 
  /* background: linear-gradient(to bottom, rgba(248,249,251,0) 0%, #f8f9fb 100%); */
  background: linear-gradient(
    to bottom,
    rgba(248,249,251,0) 0%,
    var(--md-default-bg-color) 100%
  );
  pointer-events: none;
}


/* ===================================================================
   8. Student Employment Buckets
   =================================================================== */


:root{
  --bg-card:#F6F7FB; --panel:#FFFFFF; --text:#232B46;
  --visiting:#8E2F31; --seasonal:#1876A6; --employment:#467b1b;
}

/* Container sized to MkDocs content column */
.buckets{
  box-sizing:border-box;
  max-width: 1100px;           /* keeps clear of side nav/ToC */
  margin: 0 auto 1.25rem;
  padding: 0 8px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}

/* Cards */
.bucket-card{
  position:relative;
  background:var(--bg-card);
  border-radius:16px;
  border:2px solid transparent;
  padding:46px 12px 12px;      /* top room for pill */
  color:var(--text);
}
.bucket--visiting{   border-color:var(--visiting); }
.bucket--seasonal{   border-color:var(--seasonal); }
.bucket--employment{ border-color:var(--employment); }

/* Centered oval pill titles (no special borders) */
.bucket-header{
  position:absolute; top:0; left:50%;
  transform:translate(-50%, -50%);
  z-index:2;
  color:#fff; background:#000;          /* overridden below */
  font-weight:800;
  font-size:18px;      /* compact */
  padding:10px 22px;
  border-radius:9999px;                 /* perfect oval */
  white-space:nowrap; line-height:1.2;
  box-shadow:none; border:none;
}
.bucket--visiting   .bucket-header{ background:var(--visiting); }
.bucket--seasonal   .bucket-header{ background:var(--seasonal); }
.bucket--employment .bucket-header{ background:var(--employment); }

/* Inner white sections */
.bucket-section{
  background:var(--panel);
  border-radius:12px;
  padding:12px 14px;
  margin:10px 4px;
  box-shadow:0 1px 0 rgba(0,0,0,0.03);
  text-align: left;      /* align headers + list text */
}
.bucket-section h4{
  margin:0 0 8px;
  font-size:14px; font-weight:800; color:#1F2340;
  text-align: left;
}

/* Ensure real bullets (themes often reset lists) */
.bucket-section ul{
  margin: 0;
  list-style: disc !important;
  margin: 0;
  padding-left: 0px;      /* reduce indentation */
  padding-right: 18px;  
  list-style-position: inside;
}
.bucket-section li{
  font-size: 13.5px;
  line-height: 1.25; 
  margin: 2px 0;
  white-space: normal;                 /* allow wrapping */
  overflow: visible;
  text-overflow: clip;
  direction: ltr;   
  text-align: left;    
}

/* Responsive: avoid overlap with sidebars */
@media (max-width: 1200px){
  .buckets{ max-width: 900px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  .buckets{ max-width: 620px; grid-template-columns: 1fr; }
}


/* ===================================================================
   9. ERGs Grid Section
   =================================================================== */

/*
.erg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem 0;
}

.erg-card {
  text-align: left;
  font-size: 0.85rem;
}

.erg-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;      
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  margin-bottom: 0.5rem;
}

.erg-card a.erg-link {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 0.15rem;
}

.erg-card a.erg-link:hover {
  text-decoration: underline;
}

.erg-card .erg-email {
  margin: 0;
}

*/

/* ERG cards – image sizing */
.erg-card-image {
  width: 130px;      /* or 180 / 200, tweak as you like */
  height: auto;
  display: block;
  margin-bottom: 0.25rem;  /* small gap before the link */
}

/* ===================================================================
   10. Other
   =================================================================== */


.site-map-preview{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.75rem auto 0.75rem;
}