/* ================================================
Blankboard Studio – Global Styles
================================================ */

/* ------------------------------------------------
01. Responsive Scaling System by Blankboard Studio
------------------------------------------------ */

/* Base Container & Font Scaling */
:root {
  --size-unit: 16; /* Body font-size in design units (no px) */
  --size-container-ideal: 1680;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --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);
}

/* 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: 479px;
  }
}

/* ------------------------------------------------
02. Color System: OKLCH and Display-P3 Fallback
------------------------------------------------ */

/* Fallback: OKLCH if P3 is not supported */
@supports (color: oklch(60% 0 0)) {
  :root {
    --_colors---core: oklch(56.5996% 0.2024 29.28);
    --_colors---rise: oklch(82.3193% 0.0974 47.47);
    --_colors---glow: oklch(92.9578% 0.0379 49.08);
    --_colors---trust: oklch(44.011% 0.2448 264.52);
    --_colors---clear: oklch(80.7118% 0.0943 247.24);
    --_colors---calm: oklch(92.3587% 0.0378 245.81);
    --_colors---white: oklch(100% 0.0001 263.28);
    --_colors---paper: oklch(98.3644% 0.0021 15.07);
    --_colors---blue-ink: oklch(17.6497% 0.1035 264.05);
    --_colors---black-ink: oklch(14.4788% 0 263.28);
    --_colors---black: oklch(0% 0 0);
  }
}

/* Preferred: Display-P3 */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --_colors---core: color(display-p3 0.761548 0.242797 0.181637);
    --_colors---rise: color(display-p3 0.938336 0.709855 0.579193);
    --_colors---glow: color(display-p3 0.977214 0.886435 0.831226);
    --_colors---trust: color(display-p3 0.088599 0.200593 0.806357);
    --_colors---clear: color(display-p3 0.6036 0.770442 0.962002);
    --_colors---calm: color(display-p3 0.840524 0.910911 0.987681);
    --_colors---white: color(display-p3 1 0.999993 0.999904);
    --_colors---paper: color(display-p3 0.968627 0.952941 0.952941);
    --_colors---blue-ink: color(display-p3 0.004177 0.022748 0.228283);
    --_colors---black-ink: color(display-p3 0.039221 0.039215 0.039207);
    --_colors---black: color(display-p3 0 0 0);
  }
}

/* ------------------------------------------------
03. Reset & Box Model
------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  text-size-adjust: 100%;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 8%;
  text-underline-offset: -6%;
  text-underline-position: from-font;
}

html {
  scroll-behavior: initial;
  scrollbar-width: none; /* Firefox */
  -webkit-font-smoothing: antialiased;
}

body {
  font-feature-settings: "cv01" on, "cv03" on, "cv04" on, "cv10" on, "cv12" on,
    "cv13" on, "liga" 1, "calt" 1;
  -ms-overflow-style: none; /* IE & Edge */
  width: 100vw;
}

.d1,
.d2,
.d3,
.d4,
.d5,
.d6 {
  font-feature-settings: "ss01" on, "ss02" on, "ss04" on;
}

/* Hide scrollbars universally */
body::-webkit-scrollbar,
body ::-webkit-scrollbar {
  display: none;
}

/* SVG Reset */
svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Reset Link Color */
a {
  color: inherit;
}

/* ------------------------------------------------
04. Typography Utilities
------------------------------------------------ */

/* Content & Article Styling for Rich Text */
.rte > :first-child {
  margin-top: 0;
}

.rte > :last-child {
  margin-bottom: 0;
}

.rte > div:first-child > :first-child {
  margin-top: 0;
}

.rte > div:first-child > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------
05. Utility Attributes
------------------------------------------------ */

/* Scrollbars */
[scroll-show="false"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[scroll-show="false"]::-webkit-scrollbar {
  display: none;
}

/* Truncate Text Utility // Show "..." after 1 line */
[data-truncate] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

/* Show "..." after 1 line */
[data-truncate="1"] {
  -webkit-line-clamp: 1;
}

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

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

/* Selection Highlight */
::selection {
  background-color: #d8ecfc;
  color: #008cff;
  text-shadow: none;
}
::-moz-selection {
  background-color: #d8ecfc;
  color: #008cff;
  text-shadow: none;
}

/* ------------------------------------------------
06. Interactive Link Effects
------------------------------------------------ */

/* Underline Animation Link */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  top: 92%;
  left: 0%;
  height: 1px;
  width: 0%;
  background: currentColor;
  transition: width 735ms cubic-bezier(0.65, 0.05, 0, 1);
}
.link-underline:hover::after {
  width: 100%;
}
.link-underline:not(:hover)::after {
  left: auto;
  right: 0%;
  width: 0%;
}

/* Inline Link Fade Effect 
.inline-link-underline {
position: relative;
}
.inline-link-underline::after {
content: "";
width: 100%;
height: 1px;
min-height: 1px;
background-color: currentColor;
position: absolute;
top: 96%;
left: 0%;
border-radius: 4px;
opacity: 16%;
transition: opacity 735ms cubic-bezier(0.65, 0.05, 0, 1);
}
.inline-link-underline:hover::after {
opacity: 100%;
}*/

/* ------------------------------------------------
07. Animations
------------------------------------------------ */

/* Keyframes */
@keyframes loop {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Loop Animation (Horizontal Slide) */
.loop-animate {
  animation: loop 16s linear infinite;
  will-change: transform;
}

/* ------------------------------------------------
08. Components / Patterns
------------------------------------------------ */

/* Image Zoom Hover */
.image-w img {
  transition: transform 0.735s cubic-bezier(0.65, 0.05, 0, 1);
}
.image-w:hover img {
  transform: scale(1.12);
}

/* Remove wrapper pseudo-elements (redundant after refactor) */
.s-wrapper::before,
.s-wrapper::after {
  display: none;
}

form > div:last-child {
  display: none;
}
/* Fix to show last div (non turnsile) in Webflow Designer */
.wf-design-mode form > div:last-child {
  display: flex;
}

/* Shrunk nav */
.g-navigation-w.is-shrunk {
  border-color: transparent;
}

.g-navigation-w .section.s-g-navigation .s-wrapper.sw-g-nav.is-shrunk {
  background: var(--_colors---bg--light);
  padding: 0em 1.5em;
  border-color: color-mix(in srgb, var(--_colors---blue-ink) 6%, transparent);
  color: var(--_colors---text-color--dark);
}
@media only screen and (max-width: 767px) {
  /* Shrunk nav */
  .g-navigation-w .section.s-g-navigation .s-wrapper.sw-g-nav.is-shrunk {
    background: var(--_colors---bg--light);
    padding: 0em 1em;
    border-color: color-mix(in srgb, var(--_colors---blue-ink) 6%, transparent);
    color: var(--_colors---text-color--dark);
  }
}

.journey-tab-link:hover .journey-tab-number-pad,
.journey-tab-link.w--current .journey-tab-number-pad {
  background-color: var(--_colors---bg--primary);
  color: var(--_colors---text-color--light);
}

:root {
  --svg-line-time: 4s;
}

.svg-animate-line {
  animation: svgDash var(--svg-line-time) linear infinite;
}
.svg-animate-line.reverse {
  animation: svgDash var(--svg-line-time) linear infinite reverse;
}

@keyframes svgDash {
  to {
    stroke-dashoffset: 420;
  }
}

.is_bullet-point {
  height: 1lh !important;
}

.w-slider-dot {
  width: 100%;
  height: 4px;
  margin: 0px;
  padding: 0px;
  border-radius: 4px !important;
}