/* =========================================================
     Blankboard QuickFrame (BQF) — Core Scale + Reset (lean)
     Publisher: Blankboard Studio • Version: 0.3
     ========================================================= */

/* ---------- Fluid scale system (container-driven) ---------- */
:root {
  --container-ideal: 1680; /* unitless design width (ensure design refs match) */
  --font-unit: 16; /* unitless design body size */

  --container-min: 992px;
  --container-max: 1920px;
  --container: clamp(var(--container-min), 100vw, var(--container-max));

  /* Fluid root font-size (px) */
  --font-root: calc(
    var(--container) / (var(--container-ideal) / var(--font-unit))
  );
}
@media (max-width: 991px) {
  :root {
    --container-ideal: 834;
    --container-min: 768px;
    --container-max: 991px;
  }
}
@media (max-width: 767px) {
  :root {
    --container-ideal: 568;
    --container-min: 480px;
    --container-max: 767px;
  }
}
@media (max-width: 479px) {
  :root {
    --container-ideal: 390;
    --container-min: 320px;
    --container-max: 320px;
  }
}

/* Apply the fluid base so rem/em scale automatically */
html {
  font-size: var(--font-root);
}

/* ------------------------- Reset / Base ------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable both-edges;
  scroll-behavior: initial; /* keep explicit; smooth scroll via interactions if desired */

  /* A11y note: hides *all* scrollbars in Firefox globally. Consider scoping later. */
  scrollbar-width: none;

  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  text-size-adjust: 100%;

  /* Global underline tweaks:
           A11y note: negative offset + thick underline can hurt legibility across fonts.
           Consider moving to link styles only when you finalize typography. */
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 8%;
  text-underline-offset: -6%;
  text-underline-position: from-font;

  /* Layout:
           A11y/UX note: 100vw includes the scrollbar; may cause horizontal overflow.
           If you see unwanted x-scroll, switch to `min-width:100%` or remove. */
  width: 100vw;
}

/* Hide scrollbars universally (WebKit)
         A11y note: reduces discoverability of scrollable content. Keep for now; later consider gating via a body class or using the utility below per container. */
body::-webkit-scrollbar,
body ::-webkit-scrollbar {
  display: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
svg {
  box-sizing: border-box;
  vertical-align: middle;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em; /* safe positive offset */
}

/* Focus indicator
         A11y note: dotted + 12% contrast may be too faint for WCAG. Later consider a solid, high-contrast color. */
:focus-visible {
  outline: 2px dotted color-mix(in srgb, currentColor 100%, transparent);
  outline-offset: 2px;
}

/* Duplicate kept intentionally */
html {
  scroll-behavior: initial;
}

/* ------------------------- Rich Text (RTE) ------------------------- */
.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;
}

/* ------------------------- Truncation ------------------------- */
/* Class-based (variable-driven) truncation
         Usage:
           [data-truncate] { --truncate-lines: 1; }      (default)
           .title-main { --truncate-lines: 2; }      (override)
           <h2 data-truncate class="title-main">...</h2>
         Support:
           -webkit-line-clamp with var() works in modern Chromium/Safari.
           Firefox lacks -webkit-line-clamp; content will simply not clamp there. */

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

[data-text-gradient] {
  background: linear-gradient(90deg, #f84c1c 0%, #fe923f 37.5%, #e01c07 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.04em 0.04em 0 0;
}

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

/* ------------------------- Utilities ------------------------- */
/* Vertical stack — gap controlled per-instance with --stack-gap */
.stack > * + * {
  margin-block-start: var(--stack-gap, 1em);
}

/* Visually hidden (screen-reader only); add .vh-focusable to reveal on focus */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.vh-focusable:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
}

/* Opt-in scrollbar hiding for specific containers (preferred approach) */
.u-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.u-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ------------------------- Reduced Motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------- Added by Asheem (kept as-is) ------------------------- */
/* Notes:
         - Typo intentionally preserved: "visiblity" (later change to `visibility`).
         - `.swrapper` vs `.s-wrapper` are different classes; confirm both are intended.
         - Disables ::before/::after on these; ensure no components rely on them. */
.s-wrapper:before,
.s-wrapper:after {
  display: none;
  visiblity: hidden; /* (typo kept) */
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
}