/*#################################################
  General Theme Styles (block CSS located in /template-parts/)
################################################# */

/* Abstracts */

/* additional variables located in postcss.config.js */

/* check sharedVars for more details */

/* Primitive */

:root {
  --Color-Neutral-50: #FFF3E8FF;
  --Color-Neutral-100: #FAECDEFF;
  --Color-Neutral-200: #F5E4D5FF;
  --Color-Neutral-300: #EFDDCBFF;
  --Color-Neutral-400: #EAD5C2FF;
  --Color-Neutral-500✦: #E5CEB8FF;
  --Color-Neutral-600: #C6AD96FF;
  --Color-Neutral-700: #A78D73FF;
  --Color-Neutral-800: #886C51FF;
  --Color-Neutral-900: #694C2EFF;
  --Color-Neutral-950✦: #4A2B0CFF;
  --Border-Radius-S: 8px;
  --Border-Radius-Base: 12px;
  --Border-Radius-L: 24px;
  --Border-Width-0: 0px;
  --Border-Width-1: 1px;
  --Border-Width-2: 2px;
  --Border-Width-4: 4px;
  --Border-Width-8: 8px;
  --Spacing-0: 0px;
  --Font-Family-Headline: Barlow Condensed;
  --Font-Family-Body: Barlow;
  --Spacing-px: 1px;
  --Spacing-0․5: 2px;
  --Spacing-1: 4px;
  --Spacing-1․5: 6px;
  --Spacing-2: 8px;
  --Spacing-2․5: 10px;
  --Spacing-3: 12px;
  --Spacing-3․5: 14px;
  --Spacing-4: 16px;
  --Spacing-5: 20px;
  --Spacing-6: 24px;
  --Spacing-7: 28px;
  --Spacing-8: 32px;
  --Spacing-9: 36px;
  --Spacing-10: 40px;
  --Spacing-11: 44px;
  --Spacing-12: 48px;
  --Spacing-14: 56px;
  --Spacing-16: 64px;
  --Spacing-20: 80px;
  --Spacing-24: 96px;
  --Spacing-28: 112px;
  --Spacing-32: 128px;
  --Spacing-36: 144px;
  --Spacing-40: 160px;
  --Spacing-44: 176px;
  --Spacing-48: 192px;
  --Spacing-52: 208px;
  --Spacing-56: 224px;
  --Spacing-60: 240px;
  --Spacing-64: 256px;
  --Spacing-72: 288px;
  --Spacing-80: 320px;
  --Spacing-96: 384px;
  --Font-Size-XS: 12px;
  --Font-Size-SM: 14px;
  --Font-Size-Base: 16px;
  --Font-Size-LG: 18px;
  --Font-Size-XL: 20px;
  --Font-Size-2XL: 24px;
  --Font-Size-3XL: 30px;
  --Font-Size-4XL: 36px;
  --Font-Size-5XL: 48px;
  --Font-Size-6XL: 60px;
  --Font-Size-7XL: 72px;
  --Font-Size-8XL: 96px;
  --Font-Size-9XL: 128px;
  --Font-Weight-Light: 300;
  --Font-Weight-Regular: 400;
  --Font-Weight-Medium: 500;
  --Font-Weight-SemiBold: 600;
  --Font-Weight-Bold: 700;
  --Font-Weight-XBold: 800;
  --Font-Weight-Black: 900;
}

/* Semantic */

:root {
  --Background-Default: var(--Color-Neutral-950✦);
  --Button-Border: var(--Color-Neutral-500✦);
  --Button-Border-Inverse: var(--Color-Neutral-950✦);
  --Button-Fill: var(--Color-Neutral-500✦);
  --Button-Fill-Inverse: var(--Color-Neutral-950✦);
  --Background-Inverse: var(--Color-Neutral-500✦);
  --Button-Hover: var(--Color-Neutral-700);
  --Button-Pressed: var(--Color-Neutral-700);
  --Button-Pressed-Container: #00000033;
  --Icon-Default: var(--Color-Neutral-500✦);
  --Icon-Inverse: var(--Color-Neutral-950✦);
  --Overlay-Default: #000000CC;
  --Text-Default: var(--Color-Neutral-500✦);
  --Text-Inverse: var(--Color-Neutral-950✦);
  --Text-Link-Hover: var(--Color-Neutral-50);
}

/* Other */

:root {
  --theme-uri: '/wp-content/themes/w64-base';
}

/* Base Styles */

/*
  CSS based on Chris Coyer's excellent reset: https://frontendmasters.com/blog/the-coyier-css-starter/
  Modified by 👑 to be less opinionated, though
  @layer used to lower priority, allowing theme styles to override more easily
*/

@layer reset {
  html {
    color-scheme: light;
    -moz-tab-size: 2;
      -o-tab-size: 2;
         tab-size: 2;
    hanging-punctuation: first allow-end last;
    word-break: break-word;
  }

  body {
    margin: 0;
    padding: 0;
  }

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

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    margin-block-start: 0;
  }

  p,
  li,
  dd {
    text-wrap: pretty;
  }

  a {
    text-underline-offset: 2px;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    inset-block-end: -0.25em;
  }

  sup {
    inset-block-start: -0.5em;
  }

  ul,
  ol,
  dl {
    margin: 0;
    padding: 0;
  }

  img,
  video,
  iframe {
    block-size: auto;
    border-style: none;
    display: block;
    max-inline-size: 100%;
  }

  figure {
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    margin-inline: auto;
  }

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

  label {
    display: block;
  }

  input:not(
    :where(
      [type="submit"],
      [type="checkbox"],
      [type="radio"],
      [type="button"],
      [type="reset"]
    )
  ) {
    inline-size: 100%;
  }

  button,
  input:where(
    [type="submit"],
    [type="reset"],
    [type="button"]
  ) {
    cursor: pointer;
  }

  textarea {
    field-sizing: content;
    min-block-size: 5lh;
    inline-size: 100%;
  }

  pre,
  code,
  kbd,
  samp {
    font-family: ui-monospace, SFMono-Regular, monospace;
  }

  svg {
    fill: currentColor;
  }

  [aria-disabled="true" i],
  [disabled] {
    cursor: not-allowed;
  }

  [disabled],
  label:has(input[disabled]) {
    opacity: 0.5;
  }

    [disabled] [disabled], label:has(input[disabled]) [disabled] {
      opacity: 1;
    }

  hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    height: 0;
    overflow: visible;
  }

  :target {
    scroll-margin: 3rlh;
  }

  table {
    caption-side: bottom;
    border-collapse: collapse;
  }

  [role="region"][aria-labelledby][tabindex] {
    overflow: auto;
  }

  [hidden] {
    display: none !important;
  }

  .screenreader-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  :focus-visible {
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    html {
      interpolate-size: allow-keywords;
      /* scroll-behavior: smooth removed — conflicts with Lenis */
    }
  }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* STALACTIMELINE GLOBAL STYLES */

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Disable scroll anchoring so Lenis does not fight sticky scenes */

html { overflow-anchor: none; }

/* Prevent horizontal scroll without breaking `position: sticky` */

body { overflow-x: clip; }

:root {
  --bg-color: #f5efe6;
  --measure-height: 16px;
  --header-height: 64px;
  --footer-height: 56px;
  --padding-desktop: 20px;
  --right-popup-btn-height: 28px;

  --mobile-max: 529px;
  --tablet-small-min: 530px;
  --tablet-small-max: 768px;
  --tablet-large-min: 769px;
  --tablet-large-max: 1024px;
  --desktop-min: 1025px;
}

/* Stalactimeline theme body: dark base + parchment overlay background */

body {
  background: #4A2B0C;
  overflow-x: hidden;
  font-family: 'Barlow Condensed', sans-serif;
  background-image: url('/wp-content/themes/w64-base/assets/images/stalactimeline/background-timeline.webp');
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%;
  margin: 0;
}

.margin-bottom-md {
  margin-bottom: 32px;
}

.margin-bottom-sm {
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   Barlow — self-hosted @font-face declarations
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Barlow";
  src: url('../fonts/Barlow-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url('../fonts/Barlow-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url('../fonts/Barlow-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url('../fonts/Barlow-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url('../fonts/Barlow-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url('../fonts/Barlow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   Barlow Condensed — self-hosted @font-face declarations
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/BarlowCondensed-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

h2, .h2, .section-text {
  font-family: var(--Font-Family-Headline, "Barlow Condensed");
  font-size: var(--Font-Size-5XL, 48px);
  font-style: normal;
  font-weight: var(--Font-Weight-XBold, 800);
  line-height: 100%;
}

@media (max-width: 768px) {

h2, .h2, .section-text {
    font-size: var(--Font-Size-3XL, 30px)
}
  }

.text-dark {
  color: var(--Text-Inverse, #4A2B0C);
}

.text-light {
  color: var(--Text-Primary, #FFF3E8);
}

.text-center {
  text-align: center;
}

/**
 * ─────────────────────────────────────────────────────────
 * TEXT WAVE REVEAL ANIMATION 
 * ─────────────────────────────────────────────────────────
 */

.wr-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.08em;
    line-height: inherit;
    padding-right: 0.1em;
    margin-right: -0.1em;
    backface-visibility: hidden;
}

.wr-word {
    display: inline-block;
    white-space: pre;
    line-height: inherit;
    will-change: transform, opacity;
    padding-right: 0.1em;
  margin-right: -0.1em;
}

/* Components */

.block__inner {
    margin: 0 auto;
    max-width: 1300px;
}

.block__inner--padded {
        padding: 0 var(--space-lg);
    }

.block__inner--full {
        max-width:none;
    }

.btn {
  background: var(--surface-surface-invert, #041A2A);
  border-radius: var(--radius-radius-full, 360px);
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: "Neue Haas Grotesk Display Pro";
  font-size: 16px;
  font-style: normal;
  font-weight: 450;
  padding: 16px 24px;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 767px) {

.btn {
    padding: 16px 20px
}
  }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.btn--ghost {
    background: rgba(213, 213, 213, 0.20);
  }

.btn--primary {
    background: var(--surface-surface-invert, #041A2A);
    color: var(--text-text-invert, #FFF);
  }

.btn--secondary {
    background: var(--surface-surface-secondary, #FFF);
    color: var(--text-text-primary, #041A2A);
  }

.btn--glass {
    position: relative;
    overflow: hidden;
    color: white;
  
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(18px);
 
  }

.btn--glass::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px; /* border thickness */

      background: linear-gradient(
        -55deg,
        rgba(255,255,255,0.9),
        rgba(255,255,255,0.2) 20%,
        rgba(255,255,255,0) 50%,
        rgba(255,255,255,0.2) 80%,
        rgba(255,255,255,0.9)
      );
 
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;

      pointer-events: none;
    }

.btn--light-blue {
    position: relative;
    overflow: hidden;
    color: var(--color-brand-ink-black, #041A2A);
    background: var(--color-brand-light-blue, #C0EBF6);
    
  }

.btn--light-blue::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px; /* border thickness */
      pointer-events: none;
    }

.btn svg {
    width: 16px;
    height: 16px;
  }