/* ================================================
Blankboard Studio - Global Styles
================================================ */

/* ------------------------------------------------
00. Webflow font-face override (Aeonik default ss02)
Place here so it loads after Webflow CSS when added in Head code
------------------------------------------------ */

/* ------------------------------------------------
  01. Token Hub
  ------------------------------------------------ */
:root {
  /* Scaling System */
  --size-unit: 16; /* Body font-size in design units (no px) */
  --size-container-ideal: 1440;
  --size-container-min: 1280px;
  --size-container-max: 2240px;

  --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);

  /* Color aliases (still uses your existing --_colors---* vars) */
  --color-accent: var(--_colors---accent, #e04f22);
  --color-bg-dark: var(--_colors---bg--dark, #0b0e14);
  --color-text-light: var(--_colors---text-color--light, #f2f5ff);

  /* Existing tokens (kept as-is) */
  --base---box-opacity: 50%;
  --shadow-blur: 3em;
  --address-icon-fill: var(--color-accent);

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

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

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

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

  /* Zoom */
  --image-zoom-scale: 1.12;
}

/* 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
        ------------------------------------------------ */
@supports (color: oklch(50% 0.2 280)) {
  :root {
    /* Add OKLCH tokens here if needed */
  }
}

@supports (color: color(display-p3 1 0 0)) {
  :root {
    /* Add Display-P3 tokens here if needed */
  }
}

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

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

html.is-cursor-hidden,
html.is-cursor-hidden *,
html.is-cursor-hidden *::before,
html.is-cursor-hidden *::after {
  cursor: none !important;
}

body {
  width: 100vw;

  /* IMPORTANT: one declaration only (second line was overriding the first) */
  font-feature-settings: "liga" 1, "calt" 1;

  -ms-overflow-style: none; /* IE & Edge */
}

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

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

a {
  color: inherit;
}

/* ------------------------------------------------
        04. Typography Utilities
        ------------------------------------------------ */
/* Same behavior, lower specificity so Webflow overrides stay easy */
.rte :where(> :first-child, > div:first-child > :first-child) {
  margin-top: 0;
}
.rte :where(> :last-child, > div:first-child > :last-child) {
  margin-bottom: 0;
}
.sermon-rte > :first-child,
.sermon-rte > div:first-child > :first-child {
  margin-top: 0;
}

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

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

/* Truncate Text Utility (single core rule + variable override) */
[data-truncate] {
  --truncate-lines: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: var(--truncate-lines);
}

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

/* Selection Highlight */
@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;
  }
  ::-moz-selection {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--color-accent);
    text-shadow: none;
  }
}

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

[data-gradient] {
}

[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
        ------------------------------------------------ */
.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 {
  width: 100%;
}
.link-underline:not(:hover)::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 {
  opacity: 1;
}

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

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

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

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

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  .loop-animate-x,
  .loop-animate-y,
  .svg-animate-line {
    animation: none !important;
  }

  .image-w img,
  .link-underline::after,
  .inline-link-underline::after {
    transition-duration: 1ms !important;
  }
}

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

.g-nav-menu-link .d0 {
  pointer-events: none;
}

@media (min-width: 992px) {
  /* styles for 992px and larger screens */
  .g-nav-menu-list:hover .g-nav-menu-link {
    opacity: 0.24 !important;
  }
  .g-nav-menu-list:hover .g-nav-menu-link:hover {
    opacity: 1 !important;
  }
}

.s-g-navigation.is-shrunk {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.s-g-navigation.is-shrunk .sw-g-nav {
  background-color: var(--_colors---bg--light);
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  padding: 0.75em;
}
.s-g-navigation.is-shrunk .g-nav-brand-logo {
  height: 1.5em;
}

/* Repeating featured pattern */
.resources-cms-item:nth-child(6n + 2),
.resources-cms-item:nth-child(6n + 5) {
  grid-column: span 2;
  grid-row: span 2;
}

.resources-cms-item:nth-child(6n + 2) .resource-card-image,
.resources-cms-item:nth-child(6n + 5) .resource-card-image {
  flex: 1 1 0%;
}

/* Mobile */
@media (max-width: 767px) {
  /* Repeating featured pattern */
  .resources-cms-item:nth-child(6n + 2),
  .resources-cms-item:nth-child(6n + 5) {
    grid-column: auto;
    grid-row: auto;
  }
  .resources-cms-item:nth-child(6n + 2) .resource-card-image,
  .resources-cms-item:nth-child(6n + 5) .resource-card-image {
    flex: 0 1 auto;
  }
}

.resources-cms-item.is_list {
  grid-column: auto;
  grid-row: auto;
}

/* @media (min-width: 2240px) {
  .resources-cms-item:nth-child(6n + 3),
  .resources-cms-item:nth-child(6n + 6) {
    grid-column: auto;
    grid-row: auto;
  }
  .resources-cms-item:nth-child(6n + 3) .resource-card-image,
  .resources-cms-item:nth-child(6n + 6) .resource-card-image {
    flex: 0 1 auto;
  }

  .resources-cms-list.u-grid-custom {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
} */

.filter-layout-option.is_grid.is_active,
.filter-layout-option.is_list.is_active {
  color: var(--_colors---text-color--green);
}