/* ================================================
   Connector JPA — Global Styles
   Blankboard Studio
   Build: production

   00. Token hub
   01. Color system (P3 fallback -> OKLCH preferred)
   02. Reset & box model
   03. Typography utilities
   04. Utility attributes
   05. Interactive link effects
   06. Animations
   07. Components & patterns
   08. Third-party overrides (Swiper, Finsweet)
   09. Webflow dev chrome
================================================ */

/* ------------------------------------------------
   00. TOKEN HUB
------------------------------------------------ */
:root {
  /* Fluid scaling */
  --size-unit: 16; /* body font-size in design units (unitless) */
  --size-container-ideal: 1680;
  --size-container-min: 1280px;
  --size-container-max: 1680px;

  --size-container: clamp(
    var(--size-container-min),
    100vw,
    var(--size-container-max)
  );

  --size-font: calc(
    var(--size-container) / (var(--size-container-ideal) / var(--size-unit))
  );

  font-size: var(--size-font);

  /* Semantic aliases.
     Fallbacks match the Webflow variable names actually emitted by the
     Designer; the second value is the literal used if the variable is
     missing, so a renamed Webflow variable degrades instead of breaking. */
  --color-accent: var(--_colors---accent, #5498dc);
  --color-bg-dark: var(--_colors---background--dark, #0b0e14);
  --color-text-light: var(--_colors---text--light, #f2f5ff);
  --color-text-dark: var(--_colors---text--black, #111418);

  /* Surface */
  --base---box-opacity: 50%;
  --shadow-blur: 3em;
  --address-icon-fill: var(--color-accent);

  /* Motion */
  --ease-bbs: cubic-bezier(0.65, 0.05, 0, 1);
  --dur-bbs: 735ms;

  /* Underline effect */
  --underline-top: 100%;
  --underline-height: 1px;
  --inline-underline-opacity: 0.48;

  /* Marquee loops */
  --loop-x-duration: 60s;
  --loop-y-duration: 32s;

  /* SVG dash */
  --svg-dash-duration: 8s;
  --svg-dash-offset: 600;

  /* Image zoom */
  --image-zoom-scale: 1.12;

  /* Minimum interactive target (WCAG 2.2 SC 2.5.8) */
  --min-target: 24px;
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 430;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 430;
    --size-container-min: 320px;
    --size-container-max: 428px;
  }
}

/* ------------------------------------------------
   01. COLOR SYSTEM
   Order matters: Display-P3 first as the wide-gamut fallback, OKLCH second
   so it wins in browsers that support both (Chrome, Safari 16.4+).
   The original file had these reversed, which meant OKLCH never applied.
------------------------------------------------ */
@supports (color: color(display-p3 1 0 0)) {
  :root {
    --_colors---black: color(display-p3 0 0 0);
    --_colors---jet-black: color(display-p3 0.137255 0.156863 0.180392);
    --_colors---hsa-green: color(display-p3 0.152941 0.321569 0.34902);
    --_colors---peach: color(display-p3 0.843137 0.505882 0.415686);
    --_colors---vanilla: color(display-p3 0.984314 0.972549 0.917647);
    --_colors---white: color(display-p3 1 1 1);

    --_colors---gradient--green-stop-1: color(
      display-p3 0.54902 0.733333 0.701961
    );
    --_colors---gradient--green-stop-2: color(
      display-p3 0.239216 0.498039 0.541176
    );
    --_colors---gradient--green-stop-3: color(
      display-p3 0.160784 0.337255 0.368627
    );
    --_colors---gradient--highlight-stop-1: color(
      display-p3 0.890196 0.627451 0.447059
    );
    --_colors---gradient--highlight-stop-2: color(
      display-p3 0.94902 0.772549 0.486275
    );
    --_colors---gradient--green-stop-1-light: color(
      display-p3 0.658824 0.831373 0.776471
    );
    --_colors---gradient--green-stop-2-light: color(
      display-p3 0.333333 0.643137 0.698039
    );
    --_colors---gradient--peach-stop-1: color(
      display-p3 0.909804 0.678431 0.462745
    );
    --_colors---gradient--peach-stop-2: color(
      display-p3 0.94902 0.772549 0.486275
    );
    --_colors---gradient--peach-stop-3: color(
      display-p3 0.780392 0.835294 0.623529
    );
  }
}

@supports (color: oklch(50% 0.2 280)) {
  :root {
    --_colors---black: oklch(0% 0 0);
    --_colors---jet-black: oklch(27.44099% 0.01325 253.0412);
    --_colors---hsa-green: oklch(41.08666% 0.04898 209.281);
    --_colors---peach: oklch(68.97933% 0.11222 35.797);
    --_colors---vanilla: oklch(97.76604% 0.01869 96.8597);
    --_colors---white: oklch(100% 0 89.8756);

    --_colors---gradient--green-stop-1: oklch(75.63116% 0.05108 183.3079);
    --_colors---gradient--green-stop-2: oklch(55.78373% 0.06895 209.7173);
    --_colors---gradient--green-stop-3: oklch(42.47057% 0.05105 210.5168);
    --_colors---gradient--highlight-stop-1: oklch(76.03173% 0.10063 55.06835);
    --_colors---gradient--highlight-stop-2: oklch(84.73567% 0.10453 78.735);
    --_colors---gradient--green-stop-1-light: oklch(83.46599% 0.05012 173.6354);
    --_colors---gradient--green-stop-2-light: oklch(67.39397% 0.08011 210.4337);
    --_colors---gradient--peach-stop-1: oklch(79.05355% 0.09929 63.5832);
    --_colors---gradient--peach-stop-2: oklch(84.73567% 0.10453 78.735);
    --_colors---gradient--peach-stop-3: oklch(84.88607% 0.07339 119.7884);
  }
}

/* ------------------------------------------------
   02. RESET & BOX MODEL
------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Webflow/Lenis own scroll behaviour; leaving smooth here fights Lenis. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Was `width: 100vw`, which is wider than the viewport whenever a classic
     scrollbar is present (Windows/Linux) and produced horizontal overflow. */
  width: 100%;
  max-width: 100%;
  overflow-x: clip;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Underline styling scoped to text links only.
   Previously applied via `*` with `text-underline-offset: -8%`, a negative
   offset that drew the rule through the descenders. */
a {
  color: inherit;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

/* Visible keyboard focus — required for WCAG 2.1 AA (SC 2.4.7).
   Webflow's default focus ring is easy to lose against dark sections. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

svg {
  max-width: none;
  height: auto;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
}

/* Scrollbars.
   NOTE: hiding the scrollbar site-wide removes a scroll affordance some users
   rely on. Retained per the existing design, but it is a known usability
   trade-off on a public-agency site — remove this block to restore it. */
html {
  scrollbar-width: none; /* Firefox */
}

body {
  -ms-overflow-style: none; /* legacy Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* ------------------------------------------------
   03. TYPOGRAPHY UTILITIES
------------------------------------------------ */
.rte :where(:first-child, div:first-child > :first-child),
.content-rte :where(:first-child, div:first-child > :first-child),
.timeline-rte :where(:first-child, div:first-child > :first-child) {
  margin-top: 0 !important;
}

.rte :where(:last-child, div:first-child > :last-child),
.content-rte :where(:last-child, div:first-child > :last-child),
.timeline-rte :where(:last-child, div:first-child > :last-child) {
  margin-bottom: 0 !important;
}

.has_blue-link a {
  color: var(--_colors---text--primary, var(--color-accent));
}

/* ------------------------------------------------
   04. UTILITY ATTRIBUTES
------------------------------------------------ */
[scroll-show="false"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[scroll-show="false"]::-webkit-scrollbar {
  display: none;
}

/* Line clamp */
[data-truncate] {
  --truncate-lines: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--truncate-lines);
  line-clamp: var(--truncate-lines);
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
}

[data-truncate="1"] {
  --truncate-lines: 1;
}
[data-truncate="2"] {
  --truncate-lines: 2;
}
[data-truncate="3"] {
  --truncate-lines: 3;
}

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.is-hidden {
  display: none !important;
}

/* Selection */
@supports (background-color: color-mix(in srgb, black 10%, transparent)) {
  ::selection {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--color-accent);
    text-shadow: none;
  }
}

/* Themes */
[data-theme="dark"] {
  /* Was --_colors---bg--dark, which is not a variable this site defines —
     the rule silently resolved to nothing and the section stayed light. */
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

[data-theme="dark-transparent"] {
  background-color: transparent;
  color: var(--color-text-light);
}

[data-gradient] {
  background: linear-gradient(
    90deg,
    #db4ed7 0%,
    #b370dc 46.32%,
    #61b4e7 82.69%
  );
}

[data-gradient-text] {
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: repeat-x;
  -webkit-text-fill-color: transparent;
  color: inherit;
}

/* Forced-colors (Windows High Contrast) would otherwise render
   gradient-clipped text as invisible. */
@media (forced-colors: active) {
  [data-gradient-text] {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

/* ------------------------------------------------
   05. INTERACTIVE LINK EFFECTS
------------------------------------------------ */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: "";
  position: absolute;
  top: var(--underline-top);
  left: 0;
  height: var(--underline-height);
  width: 0;
  background: currentColor;
  transition: width var(--dur-bbs) var(--ease-bbs);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  width: 100%;
}

.link-underline:not(:hover):not(:focus-visible)::after {
  left: auto;
  right: 0;
  width: 0;
}

.inline-link-underline {
  position: relative;
}

.inline-link-underline::after {
  content: "";
  position: absolute;
  top: var(--underline-top);
  left: 0;
  height: var(--underline-height);
  width: 100%;
  background: currentColor;
  opacity: var(--inline-underline-opacity);
  transition: opacity var(--dur-bbs) var(--ease-bbs);
}

.inline-link-underline:hover::after,
.inline-link-underline:focus-visible::after {
  opacity: 1;
}

/* ------------------------------------------------
   06. ANIMATIONS
------------------------------------------------ */
@keyframes loopX {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loopY {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes svgDash {
  to {
    stroke-dashoffset: var(--svg-dash-offset);
  }
}

.loop-animate-x {
  animation: loopX var(--loop-x-duration) linear infinite;
  will-change: transform;
}

.loop-animate-y {
  animation: loopY var(--loop-y-duration) linear infinite;
  will-change: transform;
}

.loop-animate-x.reverse {
  animation-name: loopX;
  animation-direction: reverse;
}

.loop-animate-y.reverse {
  animation-name: loopY;
  animation-direction: reverse;
}

.svg-animate-line {
  stroke-dasharray: 10 10 !important;
  animation: svgDash var(--svg-dash-duration) linear infinite;
}

.svg-animate-line.reverse {
  animation-direction: reverse;
}

/* Reduced motion (WCAG 2.1 SC 2.3.3 / motion sensitivity) */
@media (prefers-reduced-motion: reduce) {
  .loop-animate-x,
  .loop-animate-y,
  .svg-animate-line {
    animation: none !important;
    will-change: auto;
  }

  .image-w img,
  .link-underline::after,
  .inline-link-underline::after,
  .res-card-visual-w,
  .button-outline,
  .button-icon-w {
    transition-duration: 1ms !important;
  }
}

/* ------------------------------------------------
   07. COMPONENTS & PATTERNS
------------------------------------------------ */
.image-w img {
  transition: transform var(--dur-bbs) var(--ease-bbs);
}

.image-w:hover img {
  transform: scale(var(--image-zoom-scale));
}

.s-wrapper::before,
.s-wrapper::after {
  display: none;
}

/* Nav shrink */
.sw-g-nav.is-shrunk {
  background-color: var(--_colors---background--white, #fff);
  color: var(--_colors---background--dark, #0b0e14);
  padding: 0.75em;
  border-color: var(--_colors---utility--u-muted-6, rgba(0, 0, 0, 0.06));
}

.sw-g-nav.is-shrunk .g-nav-brand-logo {
  height: 2.75em;
}

.g-nav-menu-open *,
.g-nav-menu-close * {
  pointer-events: none;
}

/* Buttons */
.button-link:hover .button-outline,
.button-link:focus-visible .button-outline {
  height: calc(100% + 0.5em);
  width: calc(100% + 0.5em);
  opacity: 1;
  border-radius: var(--_radius---8, 8px);
}

.button-link:hover .button-icon-w,
.button-link:focus-visible .button-icon-w {
  transform: translateX(0.25em);
}

/* Cards */
.res-card:hover .res-card-visual-w,
.res-card:focus-within .res-card-visual-w {
  transform: scale(0.98);
}

/* Radio chips */
.radio-chip-button.w--redirected-checked ~ .radio-chip-label {
  color: var(--color-text-light);
}

/* Schedule cards */
.schedule-card.is-next .highlight-pill,
.schedule-card.is-next .button-w {
  background-color: var(--_colors---background--accent) !important;
  color: var(--_colors---text--black) !important;
}

.schedule-card.is-next .button-w {
  border: none !important;
}

/* Timeline */
.year-separator {
  grid-column: 1 / -1;
  padding-top: 3em;
}

/* YouTube lazy embed */
.youtube-lazy[data-parallax="0"] .youtube-thumb {
  height: 100%;
}

.youtube-embed-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

[data-youtube-load] {
  cursor: pointer;
}

/* Media player seek bar */
.bmp__seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 99px;
  cursor: pointer;
  background: var(--_colors---utility--u-muted-12, rgba(0, 0, 0, 0.12));
  background-image: linear-gradient(
    var(--color-accent),
    var(--color-accent)
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
}

.bmp__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 1px solid var(--_colors---background--dark-blue, #0b0e14);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}

.bmp__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}

.bmp__seek::-moz-range-progress {
  height: 5px;
  border-radius: 99px;
  background: var(--color-accent);
}

.bmp__seek:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* ------------------------------------------------
   08. THIRD-PARTY OVERRIDES
------------------------------------------------ */

/* --- Swiper --- */
.swiper-wrapper.corridor-slider {
  overflow: visible !important;
}

.swiper-pagination {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  gap: 0.5em;
}

/* The visual dot stays 6px; the ::before extends the pointer target to 24px
   without changing layout (WCAG 2.2 SC 2.5.8 Target Size). */
.swiper-pagination-bullet {
  position: relative;
  margin: 0 !important;
  width: 6px !important;
  height: 6px !important;
}

.swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--min-target);
  height: var(--min-target);
  transform: translate(-50%, -50%);
}

.swiper-pagination-bullet-active {
  background-color: var(--_colors---primary, var(--color-accent));
}

/* Edge-disabled nav buttons — set by JS (bindEdgeNavState). */
.swiper-prev.is-nav-disabled,
.swiper-next.is-nav-disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* --- Finsweet SmartLightbox --- */
.cjpa-lb.is-open {
  display: flex !important;
}

.cjpa-lb-image.lb-loading {
  opacity: 0;
}

/* ------------------------------------------------
   09. WEBFLOW DEV CHROME
   display:none is sufficient; the z-index/opacity/visibility stack was
   redundant and made these rules hard to override when debugging.
------------------------------------------------ */
.g-embed-code,
.w-webflow-badge,
.cms-filterables {
  display: none !important;
}

/* ------------------------------------------------
   10. LENIS
   Mirrors lenis@1.3.x dist/lenis.css, with one deliberate omission:
   the upstream `.lenis.lenis-smooth iframe { pointer-events: none }` rule
   makes the YouTube player unclickable. Wheel events over an embed are
   handled by the embed instead, which is the behaviour we want here.
------------------------------------------------ */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}