/* ==========================================================================
   PUBLIC SITE STYLES (layout.pug). The Dash uses styles.css.
   Colors, fonts and sizes come from css/_variables.css — change them there.

   1. Bootstrap bridge      5. Page sections
   2. Base                  6. Components
   3. Buttons               7. Long-form content (blog)
   4. Header & footer       8. Donate page infographics
                            9. Responsive fixes
   ========================================================================== */


/* 1. Bootstrap bridge — point Bootstrap's own variables at our tokens
   -------------------------------------------------------------------------- */
:root {
  --bs-primary: var(--color-brand);
  --bs-primary-rgb: var(--color-brand-rgb);
  --bs-link-color: var(--color-brand);
  --bs-link-color-rgb: var(--color-brand-rgb);
  --bs-link-hover-color: var(--color-brand-dark);
  --bs-link-hover-color-rgb: var(--color-brand-dark-rgb);
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-text);
}


/* 2. Base
   -------------------------------------------------------------------------- */
body { color: var(--color-text); }
h1, h2, h3, h4, .serif { font-family: var(--font-heading); }
h1 { font-weight: 700; }
a { text-decoration: none; }
/* images carry their natural width/height attributes (to prevent layout shift); let CSS sizing win */
img { max-width: 100%; height: auto; }
.req { color: var(--color-brand); } /* required-field asterisk */


/* 3. Buttons
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--color-brand);
  --bs-btn-border-color: var(--color-brand);
  --bs-btn-hover-bg: var(--color-brand-dark);
  --bs-btn-hover-border-color: var(--color-brand-dark);
  --bs-btn-active-bg: var(--color-brand-dark);
  --bs-btn-active-border-color: var(--color-brand-dark);
  --bs-btn-focus-shadow-rgb: var(--color-brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--color-brand);
  --bs-btn-border-color: var(--color-brand);
  --bs-btn-hover-bg: var(--color-brand);
  --bs-btn-hover-border-color: var(--color-brand);
  --bs-btn-active-bg: var(--color-brand-dark);
  --bs-btn-active-border-color: var(--color-brand-dark);
  --bs-btn-focus-shadow-rgb: var(--color-brand-rgb);
}


/* 4. Header & footer
   -------------------------------------------------------------------------- */
/* top utility bar */
.site-topbar {
  background: var(--color-topbar-bg);
  color: var(--color-topbar-text);
  font-size: var(--font-size-topbar);
}
.site-topbar a:not(.btn) { color: var(--color-white); }

/* main nav */
/* phones: logo + menu button share the first row (the logo shrinks, the button never does);
   the opened menu wraps onto its own full-width row below them */
.site-nav .container { flex-wrap: wrap; }
.site-nav .navbar-brand { margin-right: 0; min-width: 0; flex: 0 1 auto; }
.site-nav .navbar-toggler { flex-shrink: 0; margin-left: auto; }
.site-nav .navbar-brand img {                        /* never wider than the screen */
  max-height: var(--logo-height);
  max-width: calc(100vw - 110px);
  width: auto;
  height: auto;
}
.site-nav .navbar-collapse { flex-basis: 100%; }
.site-nav .nav-link { color: var(--color-text); font-weight: 500; }
.site-nav .nav-link.active,
.site-nav .nav-link:hover { color: var(--color-brand); }

/* programs bar */
.site-programs { position: relative; background: var(--color-programs-bg); }
.site-programs .nav-link {
  color: var(--color-programs-text);
  font-size: var(--font-size-programs);
  padding: .6rem 1rem;
  white-space: nowrap;
}
.site-programs .nav-link:hover,
.site-programs .nav-link.active {
  color: var(--color-white);
  box-shadow: inset 0 calc(-1 * var(--border-accent-width)) 0 var(--color-brand);
}
/* program levels: a muted label above each group of links */
.programs-groups { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1.5rem; padding-top: .45rem; }
.programs-group { flex-shrink: 0; }
.programs-level {
  color: var(--color-programs-label);
  font-size: var(--font-size-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 1rem;
}
.site-programs .programs-group .nav-link { padding-top: .2rem; }

/* programs dropdown (tablets & phones) */
.programs-toggle {
  --bs-btn-color: var(--color-programs-text);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-active-color: var(--color-white);
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .65rem 0;
  border: 0;
  font-size: var(--font-size-programs);
  text-align: left;
}
.programs-toggle .programs-level { padding: 0; }
.programs-toggle::after { margin-left: auto; }   /* caret on the right edge */
.programs-menu {
  width: 100%;
  --bs-dropdown-link-active-bg: var(--color-brand);
  --bs-dropdown-link-active-color: var(--color-white);
}

/* footer */
.site-footer a { color: var(--color-text); }
.site-footer a:hover { color: var(--color-brand); }
.site-footer .btn-primary,
.site-footer .btn-outline-primary:hover { color: var(--color-white); }
.site-footer li { margin-bottom: .35rem; }
.footer-head {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--font-size-label);
  color: var(--color-text-subtle);
}
.footer-info p:last-child { margin-bottom: 0; }
@media (min-width: 992px) {
  .footer-info { padding-right: var(--footer-info-gap); }   /* breathing room before the link columns */
}
.footer-logo {
  max-height: var(--logo-height-footer);
  max-width: 100%;
  width: auto;
  height: auto;
}


/* 5. Page sections
   -------------------------------------------------------------------------- */
.page-hero { padding: var(--hero-padding-top) 0 var(--hero-padding-bottom); }
.page-hero .lead { max-width: var(--measure); }
.section { padding: var(--section-padding-y) 0; }
.page-hero + .section { padding-top: var(--hero-padding-bottom); } /* title sits close to its first section */
.section-muted { background: var(--color-surface-muted); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--font-size-eyebrow);
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: .5rem;
}


/* 6. Components
   -------------------------------------------------------------------------- */
/* cards */
.card-soft {
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* images */
.band-img {
  width: 100%;
  max-height: var(--band-image-max-height);
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.illus { max-width: 100%; max-height: var(--illustration-max-height); }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); object-fit: contain; }
.icon-md { width: var(--icon-md); height: var(--icon-md); object-fit: contain; }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); object-fit: contain; }
img.icon-sm[src$=".webp"] { width: auto; height: var(--icon-sm-raster); } /* ~25px flat icons: keep them crisp */
.avatar-lg {
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: 50%;
}
.avatar-sq {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.avatar-sq.avatar-sq-sm { width: var(--avatar-sq-sm); }

/* faculty grid: round headshot beside name, area and one-liner */
.faculty-item { display: flex; align-items: flex-start; gap: 1.25rem; }
.faculty-photo {
  flex: 0 0 var(--faculty-photo-size);
  width: var(--faculty-photo-size);
  height: var(--faculty-photo-size);
  object-fit: cover;
  border-radius: 50%;
}
.faculty-name { margin: .25rem 0 .15rem; font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
.faculty-area { font-size: .95rem; }
.faculty-bio { margin: .35rem 0 0; font-size: .85rem; color: var(--color-text-muted); }

/* leadership cards: photo beside the bio */
.leader { display: flex; align-items: flex-start; gap: 1.5rem; }
.leader .avatar-lg { flex: 0 0 var(--avatar-size); }
@media (max-width: 575.98px) { .leader { flex-direction: column; gap: 1rem; } }
.avatar-initials {                 /* stand-in when there's no headshot yet */
  display: grid;
  place-items: center;
  background: var(--color-brand-tint);
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-size: 2rem;
}

.pull-quote {
  padding-left: 1rem;
  border-left: var(--border-accent-width) solid var(--color-brand);
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

/* short, uniform photos on cards (e.g. About > What We Actually Believe) */
.card-photo { height: auto; aspect-ratio: 16 / 9; }

/* company logos */
.logo-strip img {
  height: var(--logo-strip-height);
  width: auto;
  max-width: 160px;
  margin: .5rem 1rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
}

/* Talk / Ask / Enroll row */
.cta-triple a { color: var(--color-text); font-weight: 600; }
.cta-triple img { width: var(--icon-cta); height: var(--icon-cta); object-fit: contain; }

/* tuition plans */
.price-card.popular { position: relative; border: 2px solid var(--color-brand); }
.price-card .badge-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.price-card ul { padding-left: 1.1rem; }

/* graduate-certificate option (master's program pages) */
.certificate-callout {
  padding: .9rem 1.1rem;
  border-left: var(--border-accent-width) solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
}
.certificate-card { border-style: dashed; border-color: var(--color-brand); }

/* numbered steps, testimonials, FAQ */
.step-num {
  font-family: var(--font-heading);
  font-size: var(--step-number-size);
  line-height: 1;
  color: var(--color-brand);
}
.testimonial {
  padding-left: 1.25rem;
  border-left: var(--border-accent-width) solid var(--color-brand);
}
.accordion-button:not(.collapsed) {
  color: var(--color-brand);
  background: var(--color-brand-tint);
}
.highlight-border { border-color: var(--color-brand) !important; } /* e.g. the "Elton" column in comparisons */

/* blog index cards */
.post-card img {                 /* same size on every card, whatever the source image's shape */
  display: block;
  width: 100%;
  height: auto;                    /* the width/height attributes would otherwise fix the height */
  aspect-ratio: var(--post-card-image-ratio);
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}


/* 7. Long-form content (blog posts)
   -------------------------------------------------------------------------- */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--font-size-prose);
  line-height: var(--line-height-prose);
  overflow-wrap: anywhere; /* long URLs never force the page wider than the screen */
}
.prose h2 { margin-top: 2.25rem; font-size: 1.6rem; }
.prose h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose iframe,
.prose video { max-width: 100%; }
.prose pre { overflow-x: auto; }
.prose blockquote {
  padding-left: 1rem;
  color: var(--color-text-muted);
  border-left: var(--border-accent-width) solid var(--color-brand);
}
.prose table { display: block; width: 100%; margin: 1rem 0; overflow-x: auto; }
.prose td,
.prose th { padding: .4rem .6rem; border: 1px solid var(--color-border-strong); }


/* 8. Donate page infographics (were slide images)
   -------------------------------------------------------------------------- */
.info-title {                         /* "ELTON'S ADVANTAGES" with the colored rule before it */
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}
.info-title::before {
  content: '';
  flex: 0 0 3rem;
  height: 4px;
  background: var(--rule-color, var(--color-accent-amber));
}

/* Elton's Advantages: three columns hanging from a tinted header bar */
.advantage { height: 100%; border-left: 2px solid var(--color-accent-amber-tint); }
.advantage-head {
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  background: var(--color-accent-amber);
  font-size: 1.5rem;
  font-weight: 400;
}
.advantage-body { padding: 0 1rem 0 1.25rem; }
.advantage-problem { color: var(--color-text-muted); }
.advantage-answer {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
}
.advantage-answer::before {           /* the little asterisk sitting on the column's rule */
  content: '\2733';
  position: absolute;
  left: -1.95rem;
  top: -.1rem;
  color: var(--color-accent-amber);
  font-size: 1.3rem;
  line-height: 1;
}

/* Vision for Growth: programs on a plum band */
.growth-band { background: var(--color-accent-plum-tint); border-radius: var(--radius-lg); }
.growth-program { text-align: center; }
.growth-program .program-dot {
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  margin: 0 auto .75rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent-plum);
  font-family: var(--font-heading);
  font-size: 1.6rem;
}

/* Use of Funds: big percentages + a CSS donut chart */
.fund-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1rem;
  padding-bottom: .25rem;
  border-bottom: 4px solid var(--fund-tint);
}
.fund-label { font-family: var(--font-heading); font-size: 1.25rem; }
.fund-pct { font-family: var(--font-heading); font-weight: 700; font-size: 3.25rem; line-height: 1.1; color: var(--fund-color); min-width: 6.5rem; text-align: right; }
.fund-marketing { --fund-color: var(--color-accent-amber); --fund-tint: var(--color-accent-amber-tint); }
.fund-accreditation { --fund-color: var(--color-accent-plum); --fund-tint: var(--color-accent-plum-tint); }
.fund-scholarship { --fund-color: var(--color-accent-coral); --fund-tint: var(--color-accent-coral-tint); }
.fund-donut {                         /* 32% / 13% / 55%, drawn from 12 o'clock */
  width: min(70%, 320px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent-amber) 0 32%, var(--color-accent-coral) 32% 87%, var(--color-accent-plum) 87% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
          mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
}


/* 9. Responsive fixes
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Bootstrap's g-5 gutters are wider than the container padding and cause sideways scroll */
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}

@media (min-width: 992px) {
  .site-nav .container { flex-wrap: nowrap; }
  .site-nav .navbar-collapse { flex-basis: auto; }
}
@media (max-width: 991.98px) {
  .site-nav .navbar-nav { padding: .5rem 0 .75rem; border-top: 1px solid var(--color-border, #e5e5e5); margin-top: .5rem; }
}

@media (max-width: 767.98px) {
  .site-nav .navbar-brand img { max-height: var(--logo-height-mobile); }
  .page-hero { padding: var(--hero-padding-top-mobile) 0 var(--hero-padding-bottom-mobile); }
  .section { padding: var(--section-padding-y-mobile) 0; }
}