:root {
  --sfrr-primary: #0345bf;
  --sfrr-primary-hover: #044cd0;
  --sfrr-heading: #033382;
  --sfrr-accent: #fd9700;
  --sfrr-body-text: #5c5c69;
  --sfrr-footer-bg: #171717;
  --sfrr-footer-text: #ffffff;
  --sfrr-footer-link: #a2a2a2;
  --sfrr-body-bg: #ededed;
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--sfrr-body-text);
  background-color: var(--sfrr-body-bg);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Poppins', sans-serif;
  color: var(--sfrr-heading);
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 600;
}

h3 {
  font-weight: 600;
}

h4 {
  font-weight: 500;
  color: #302f40;
}

/* Consistent homepage section-title treatment (font-size ~30px / weight 700 /
   corporate blue / centered) — use for every standalone section heading. */

.sfrr-section-title {
  font-weight: 700;
  font-size: 1.875rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

a {
  color: var(--sfrr-primary);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--sfrr-primary-hover);
}

/* Top bar */

.sfrr-topbar {
  background-color: var(--sfrr-accent);
  color: #000000;
  font-size: .85rem;
  padding: .4rem 0;
}

.sfrr-topbar a {
  color: #000000;
}

.sfrr-topbar a:hover {
  color: #333333;
}

/* Sticky header (pure CSS position:sticky — no JS — for Bootstrap Studio
   canvas compatibility, which does not execute page scripts). */

header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Navbar + mega menu */

.sfrr-navbar {
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.sfrr-navbar .navbar-brand img {
  height: 44px;
}

.sfrr-navbar .nav-link {
  color: var(--sfrr-menu-text, #033382);
  font-weight: 500;
}

.sfrr-navbar .nav-link:hover, .sfrr-navbar .nav-link.active, .sfrr-navbar .nav-link:focus {
  color: var(--sfrr-accent);
}

.sfrr-navbar .dropdown-menu {
  border: 0;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
}

.sfrr-navbar .dropdown-item {
  color: var(--sfrr-heading);
  white-space: normal;
}

.sfrr-navbar .dropdown-item:hover, .sfrr-navbar .dropdown-item:focus {
  color: var(--sfrr-accent);
  background-color: transparent;
}

/* Current-page dropdown item: Bootstrap's default .active state fills the
   row with its primary blue, which reads too close to the plain link blue
   used elsewhere on the site — barely legible. Filled with the corporate
   orange accent instead (same accent-bg + dark-text combination as
   .sfrr-topbar, the site's other solid-orange element) for a clearly
   legible, on-brand "you are here" marker. */

.sfrr-navbar .dropdown-item.active, .sfrr-navbar .dropdown-item:active {
  background-color: var(--sfrr-accent);
  color: #000000;
  font-weight: 600;
}

/* In-page sub-section pills (e.g. the ECR Committee / Webinar Series / ...
   tab row): filled orange pill, matching .sfrr-topbar's own accent-bg +
   dark-text combination rather than Bootstrap's default blue-bg/white-text,
   for the same reason and for contrast (black on this orange reads more
   clearly than white on it). */

.nav-pills .nav-link.active {
  background-color: var(--sfrr-accent);
  color: #000000;
}

/* Mobile mega menu: the wide multi-column dropdowns use inline min-width
   (rem) and unprefixed col-4/col-6 grid classes that are meant for the
   desktop hover flyout — on the collapsed mobile navbar they must not keep
   forcing a fixed desktop width or side-by-side columns, or the whole page
   gets horizontal scroll. */

@media (max-width: 991.98px) {
  .sfrr-navbar .dropdown-menu {
    min-width: 0 !important;
    width: 100%;
    box-shadow: none;
  }
}

@media (max-width: 991.98px) {
  .sfrr-navbar .dropdown-menu .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Desktop mega menu: wide multi-column dropdown */

@media (min-width: 992px) {
  .sfrr-mega .dropdown-menu {
    min-width: 22rem;
  }
}

@media (min-width: 992px) {
  .sfrr-mega-columns {
    column-count: 2;
    column-gap: 1.5rem;
  }
}

@media (min-width: 992px) {
  .sfrr-mega-columns .dropdown-item {
    break-inside: avoid;
  }
}

/* Right-align the last (rightmost) nav dropdown so it never overflows
       past the right edge of the viewport as the window narrows. Written as
       a plain unconditional rule rather than relying on Bootstrap's own
       .dropdown-menu-end utility, because that utility only takes effect
       once Popper.js adds a [data-bs-popper] attribute to the menu — this
       site intentionally loads plain bootstrap.min.js (no Popper) to stay
       minimal, so .dropdown-menu-end alone is a no-op here. */

@media (min-width: 992px) {
  .sfrr-navbar .navbar-nav > .nav-item.dropdown:last-child > .dropdown-menu {
    left: auto;
    right: 0;
  }
}

/* Open submenus on hover, matching the original site — plain Bootstrap
       .dropdown/.dropdown-menu classes only, no markup changes needed, so
       this stays compatible with editing the navbar as a single component
       in Bootstrap Studio. Click/keyboard still works via Bootstrap's own
       JS as a fallback. */

@media (min-width: 992px) {
  .sfrr-navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Page title band */

.sfrr-page-title {
  background-color: var(--sfrr-primary);
  color: #ffffff;
  padding: 2.5rem 0;
}

.sfrr-page-title h1 {
  color: #ffffff;
  margin: 0;
  font-size: 2rem;
}

/* Page title band, parallax variant — used on pages whose real source has a
   fixed-background photo header instead of a flat color band (background
   image + blue soft-light overlay, matching the real site's own values). */

.sfrr-page-title-parallax {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 6.25rem 0 9.375rem;
  text-align: center;
}

.sfrr-page-title-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sfrr-heading);
  mix-blend-mode: soft-light;
}

.sfrr-page-title-parallax .container {
  position: relative;
  z-index: 1;
}

.sfrr-page-title-parallax h1 {
  color: #ffffff;
  margin: 0;
  font-size: 3.5rem;
}

@media (max-width: 767.98px) {
  .sfrr-page-title-parallax {
    background-attachment: scroll;
    padding: 4rem 0 5rem;
  }
}

@media (max-width: 767.98px) {
  .sfrr-page-title-parallax h1 {
    font-size: 2.25rem;
  }
}

/* Smaller parallax band used as a mid-page section divider (real source's
   "addon-root-heading" sections with a fixed-background photo), not a full
   page title — same visual language as .sfrr-page-title-parallax, shorter. */

.sfrr-section-parallax {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 3rem 0;
  text-align: center;
}

.sfrr-section-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sfrr-heading);
  mix-blend-mode: soft-light;
}

.sfrr-section-parallax .container {
  position: relative;
  z-index: 1;
}

.sfrr-section-parallax h2, .sfrr-section-parallax h3 {
  color: #ffffff;
  margin: 0;
  font-size: 1.875rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .sfrr-section-parallax {
    background-attachment: scroll;
    padding: 2rem 0;
  }
}

/* Footer */

.sfrr-footer {
  background-color: var(--sfrr-footer-bg);
  color: var(--sfrr-footer-text);
  padding: 3rem 0 1.5rem;
  font-size: .9rem;
}

.sfrr-footer h3 {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
}

.sfrr-footer a {
  color: var(--sfrr-footer-link);
}

.sfrr-footer a:hover {
  color: #ffffff;
}

.sfrr-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .8rem;
  color: var(--sfrr-footer-link);
}

/* Photo + text gradient card (SP Page Builder "Image Layout / collage" equivalent) —
   text panel overlaps the image (negative left offset), shorter than the image,
   vertically centered, with its own drop shadow for depth. */

.sfrr-collage-card {
  position: relative;
  display: flex;
  align-items: center;
}

.sfrr-collage-card .sfrr-collage-img {
  width: 47%;
  flex-shrink: 0;
  height: auto;
  display: block;
  border-radius: .25rem;
  position: relative;
  z-index: 1;
}

.sfrr-collage-card .sfrr-collage-text {
  width: 55%;
  margin-left: -5%;
  padding: 2rem 2.25rem;
  color: #ffffff;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .45), 0 0.5rem 1rem rgba(0, 0, 0, .25);
  border-radius: .25rem;
  position: relative;
  z-index: 2;
  --sfrr-collage-color: 5, 55, 130;
  --sfrr-collage-alpha: .8;
  background-color: rgba(var(--sfrr-collage-color), var(--sfrr-collage-alpha));
}

.sfrr-collage-card .sfrr-collage-text h3 {
  color: #ffffff;
  font-size: 1.875rem;
  font-weight: 600;
}

.sfrr-collage-card .sfrr-collage-text *:not(.btn) {
  color: inherit;
}

/* Bootstrap's .text-muted sets color with !important, which beats the plain
   color:inherit rule above — override it explicitly wherever it's used inside
   a collage text panel (e.g. speaker affiliation lines) so it stays legible
   (translucent white) on the dark gradient background instead of near-black. */

.sfrr-collage-card .sfrr-collage-text .text-muted {
  color: rgba(255, 255, 255, .75) !important;
}

/* Tables inside the collage text panel: transparent background, white text
   (Bootstrap 5.3's own table theming variables — no custom table class needed) */

.sfrr-collage-card .sfrr-collage-text table {
  --bs-table-color: #ffffff;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255, 255, 255, .25);
  font-size: .875rem;
}

@media (max-width: 767.98px) {
  .sfrr-collage-card {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .sfrr-collage-card .sfrr-collage-img {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .sfrr-collage-card .sfrr-collage-text {
    width: 92%;
    margin-left: 4%;
    margin-top: -2rem;
  }
}

/* Modifier for speaker headshots (portrait photos, not wide banner images):
   photo at roughly half the standard collage width, text panel widened to fill
   the remaining space. */

.sfrr-collage-card-person .sfrr-collage-img {
  width: 23%;
}

.sfrr-collage-card-person .sfrr-collage-text {
  width: 80%;
  margin-left: -3%;
}

@media (max-width: 767.98px) {
  .sfrr-collage-card-person .sfrr-collage-img {
    width: 50%;
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .sfrr-collage-card-person .sfrr-collage-text {
    width: 92%;
    margin-left: 4%;
  }
}

/* Timeline — every item is IDENTICAL markup (no even/odd class). CSS :nth-child
   decides which side each item falls on based on its actual position in the
   page, so inserting/reordering items in a visual editor (Bootstrap Studio /
   Pinegrow) just works — nothing to renumber by hand. */

.sfrr-timeline {
  position: relative;
  padding: 1rem 0;
}

.sfrr-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #dee2e6;
  transform: translateX(-50%);
}

.sfrr-timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}

.sfrr-timeline-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border: 3px solid #0095eb;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.sfrr-timeline-item .sfrr-timeline-date {
  flex: 1 1 0;
  padding-right: 2.5rem;
  text-align: right;
  font-weight: 600;
  color: var(--sfrr-heading);
}

.sfrr-timeline-item .sfrr-timeline-content {
  position: relative;
  flex: 1 1 0;
  margin-left: 2.5rem;
  padding: 1rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, .08);
}

.sfrr-timeline-item .sfrr-timeline-content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  border-left: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  transform: translateY(-50%) rotate(45deg);
}

.sfrr-timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

.sfrr-timeline-item:nth-child(even) .sfrr-timeline-date {
  padding-right: 0;
  padding-left: 2.5rem;
  text-align: left;
}

.sfrr-timeline-item:nth-child(even) .sfrr-timeline-content {
  margin-left: 0;
  margin-right: 2.5rem;
  text-align: right;
}

.sfrr-timeline-item:nth-child(even) .sfrr-timeline-content::before {
  left: auto;
  right: -8px;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf;
}

@media (max-width: 767.98px) {
  .sfrr-timeline::before {
    left: 8px;
  }
}

@media (max-width: 767.98px) {
  .sfrr-timeline-item, .sfrr-timeline-item:nth-child(even) {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 2rem;
  }
}

@media (max-width: 767.98px) {
  .sfrr-timeline-item::before {
    left: 8px;
  }
}

@media (max-width: 767.98px) {
  .sfrr-timeline-item .sfrr-timeline-date, .sfrr-timeline-item:nth-child(even) .sfrr-timeline-date {
    padding: 0 0 .25rem;
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  .sfrr-timeline-item .sfrr-timeline-content, .sfrr-timeline-item:nth-child(even) .sfrr-timeline-content {
    width: 100%;
    margin: 0;
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  .sfrr-timeline-item .sfrr-timeline-content::before, .sfrr-timeline-item:nth-child(even) .sfrr-timeline-content::before {
    display: none;
  }
}

/* Animated counting number (SP Page Builder "Animated Number" equivalent) —
   markup uses plain data attributes, no build step. Counting handled by
   assets/js/animated-number.js; the settled number is plain text, editable
   in any visual editor. */

.sfrr-animated-number {
  font-family: Verdana, sans-serif;
  font-size: 6.25rem;
  font-weight: 400;
  color: #0f05c0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sfrr-animated-number-title {
  font-family: Verdana, sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #090909;
}

/* Full-width colored band behind a row of stats (number + title keep their
   own blue color — the band itself carries the color, per real reference
   screenshot). Selectable color via --sfrr-stats-bg, default site accent. */

.sfrr-stats-band {
  --sfrr-stats-bg: #f6b85a;
  background-color: var(--sfrr-stats-bg);
  padding: 3rem 0;
}

/* Blog / article list card */

.sfrr-blog-card {
  height: 100%;
  border: 0;
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06);
}

.sfrr-blog-card .card-body {
  display: flex;
  flex-direction: column;
}

.sfrr-blog-meta {
  font-size: .8rem;
  color: var(--sfrr-body-text);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.sfrr-blog-card .card-title a {
  color: var(--sfrr-heading);
}

.sfrr-blog-card .card-title a:hover {
  color: var(--sfrr-accent);
}

.sfrr-blog-card .btn-readmore {
  align-self: flex-start;
  margin-top: auto;
  color: var(--sfrr-primary);
  font-weight: 500;
  padding: 0;
}

.sfrr-blog-card .btn-readmore:hover {
  color: var(--sfrr-primary-hover);
}

/* Gallery lightbox thumbnails (Bootstrap Modal based) */

.sfrr-lightbox-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .25rem;
  cursor: zoom-in;
}

.sfrr-lightbox-thumb:hover {
  opacity: .85;
}

/* Cookie consent banner (native Bootstrap alert, no third-party plugin) */

.sfrr-cookie-banner {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
}

.sfrr-cookie-banner.show {
  display: block;
}

/* Homepage hero carousel — stock Bootstrap carousel, just sized + a
   dark gradient scrim so white caption text stays readable. Caption box is
   centered both ways over the slide; text inside the box stays left-aligned. */

.sfrr-hero-carousel {
  --bs-carousel-transition-duration: .45s;
  margin-top: 75px;
}

.sfrr-hero-carousel .carousel-item img {
  width: 100%;
  height: 60vh;
  min-height: 22rem;
  object-fit: cover;
}

.sfrr-hero-carousel .carousel-caption {
  inset: 0;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sfrr-hero-carousel .sfrr-carousel-box {
  max-width: 40rem;
  text-align: left;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.sfrr-hero-carousel .carousel-caption h3 {
  color: #ffffff;
  font-weight: 700;
}

/* Full-bleed background-image banner with overlay text (SP Page Builder
   "Image + Content" addon equivalent) — background set inline per instance
   via style="background-image:url(...)". */

.sfrr-promo-banner {
  background-size: cover;
  background-position: center;
  padding: 3rem;
  color: #ffffff;
}

.sfrr-promo-banner h3 {
  color: #ffffff;
}

/* Fixed-background section with a readable white card over the image
   (president's letter, etc.) — plain CSS background-attachment, no JS. */

.sfrr-fixed-bg-section {
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 92px 0 50px;
}

@media (max-width: 767.98px) {
  .sfrr-fixed-bg-section {
    background-attachment: scroll;
  }
}

/* Parallax-style fixed-background section (plain CSS background-attachment,
   no JS/library). Fixed 412px height per user's exact spec, content
   vertically centered inside it. */

.sfrr-parallax {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #ffffff;
  min-height: 412px;
  display: flex;
  align-items: center;
}

.sfrr-parallax h4 {
  color: #ffffff;
  font-size: 1.875rem;
  font-weight: 800;
}

@media (max-width: 767.98px) {
  .sfrr-parallax {
    background-attachment: scroll;
  }
}

/* Compact modifier for a stats band whose titles need to read bigger/bolder
   than the number itself (e.g. a 4-up band vs. a single big stat) plus
   breathing room above it. */

.sfrr-stats-band--compact {
  margin-top: 1.875rem;
}

.sfrr-stats-band--compact .sfrr-animated-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--sfrr-heading);
}

.sfrr-stats-band--compact .sfrr-animated-number-title {
  font-size: 1.75rem;
  font-weight: 700;
}