/* ================================================
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: 1440;
  --size-container-min: 1280px;
  --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: 428px;
  }
}

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

/* Fallback: OKLCH if P3 is not supported */
@supports (color: oklch(50% 0.2 280)) {
  :root {
  }
}

/* Preferred: Display-P3 */
@supports (color: color(display-p3 1 0 0)) {
  :root {
  }
}

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

:root {
  --base---box-opacity: 50%;
  --shadow-blur: 3em;
  --address-icon-fill: #5498dc;
}

*,
*::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: -8%;
  text-underline-position: from-font;
}

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

body {
  width: 100vw;
  font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
  -ms-overflow-style: none; /* IE & Edge */
}

/* 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;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

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

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

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

/* Selection Highlight */
::selection {
  background-color: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--_colors---accent);
  text-shadow: none;
}
::-moz-selection {
  background-color: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--_colors---accent);
  text-shadow: none;
}

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

/* Gradients */
[data-gradient] {
  background: linear-gradient(
    90deg,
    rgba(100, 115, 153, 0.6) -10.08%,
    #fff 45.72%,
    rgba(100, 115, 153, 0.6) 104.84%
  );
}
[data-gradient="primary"] {
  background-image: linear-gradient(
      108deg,
      rgba(255, 102, 196, 0) -1.54%,
      rgba(255, 102, 196, 0.8) 42.86%,
      rgba(255, 102, 196, 0) 129.58%
    ),
    linear-gradient(
      90deg,
      rgba(100, 115, 153, 0.6) -10.08%,
      #fff 45.72%,
      rgba(100, 115, 153, 0.6) 104.84%
    );
}

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

/* ------------------------------------------------
  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%;
}

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

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

:root {
  --loop-time: 60s;
}

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

/* Loop Animation (Horizontal Slide) */
.loop-animate-x {
  animation: loopX var(--loop-time) linear infinite;
  will-change: transform;
}
.loop-animate-y {
  animation: loopY var(--loop-time) linear infinite;
  will-change: transform;
}
.loop-animate-x.reverse {
  animation: loopX var(--loop-time) linear infinite reverse;
  will-change: transform;
}
.loop-animate-y.reverse {
  animation: loopY var(--loop-time) linear infinite reverse;
  will-change: transform;
}

.svg-animate-line {
  stroke-dasharray: 10 10 !important;
  animation: svgDash 8s linear infinite;
}
.svg-animate-line.reverse {
  animation: svgDash 8s linear infinite reverse;
}

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

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

.s-g-navigation.is-shrunk {
  --g-nav--padding: 0.75em;
  padding-top: var(--g-nav--padding);
  padding-bottom: var(--g-nav--padding);
}
.s-g-navigation.is-shrunk .g-nav-bg-fade {
  opacity: 1;
}

.team-card.is_active .team-card-hover,
.team-card.is_active + .team-card-avatar-w {
  opacity: 1;
}

textarea {
  resize: none;
}