/* KreateMind base: element defaults layered over Astra. Values come from tokens.css. */

/* Astra sets html to 93.75% (15px); the design system is built on 16px, and rem tokens depend on it. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

/* The design-system type scale in rem (same values at the default 16px), so text follows the reader's
   browser font-size setting. tokens.css stays a verbatim copy of the design system. */
:root {
  --text-3xl: 3.5rem;
  --text-2xl: 2.625rem;
  --text-xl: 2rem;
  --text-lg: 1.5rem;
  --text-md: 1.125rem;
  --text-sm: 1rem;
  --text-xs: 0.8125rem;
  --text-eyebrow: 0.75rem;
}

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

/* :is() lifts specificity above Astra's `.entry-content hN` rules. */
body :is(h1, h2, h3, .entry-content h1, .entry-content h2, .entry-content h3) {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  font-weight: var(--weight-extrabold);
}
body :is(h1, .entry-content h1) { font-size: var(--text-3xl); text-transform: uppercase; }
body :is(h2, .entry-content h2) { font-size: var(--text-2xl); text-transform: uppercase; }
body :is(h3, .entry-content h3) { font-size: var(--text-xl); font-weight: var(--weight-bold); }

@media (max-width: 767px) {
  body :is(h1, .entry-content h1) { font-size: var(--text-2xl); }
  body :is(h2, .entry-content h2) { font-size: var(--text-xl); }
  body :is(h3, .entry-content h3) { font-size: var(--text-lg); }
}

a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

/* Specificity beats Astra's inline `a:focus-visible` and `.site .skip-link:focus-visible` dotted outlines. */
:focus-visible,
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body .site .skip-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  /* Violet inner ring fills the offset gap: amber alone is ~1.8:1 on white and cream. */
  box-shadow: 0 0 0 2px var(--km-violet);
}

.km-container {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter-page);
  box-sizing: content-box;
}

.km-section { padding-block: var(--space-9); }
.km-section--lg { padding-block: var(--space-10); }

@media (max-width: 767px) {
  .km-container { padding-inline: var(--space-4); }
  /* One 16px phone gutter everywhere. Outside the page-builder template Astra wraps content in its own
     padded .ast-container (20px shop/product/cart, ~10px on 404), which stacked with ours. */
  body:not(.ast-page-builder-template) #content > .ast-container { padding-inline: var(--space-4); }
  body:not(.ast-page-builder-template) #content > .ast-container .km-container { padding-inline: 0; }
  /* Mobile section rhythm from the design system: 56 / 72px. */
  .km-section { padding-block: 56px; }
  .km-section--lg { padding-block: 72px; }
}

/* Keeps hyphenated words whole in big headings ("OPEN-" alone on a line on 360px phones). */
.km-nowrap { white-space: nowrap; }

.km-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Sections break out of Astra's block content width; .km-container keeps content in the column. */
body .entry-content > .km-section { max-width: none; width: auto; margin-inline: 0; }
.km-band--cream { background: var(--surface-page-warm); }

.km-mt-5 { margin-top: var(--space-5); }
.km-mt-6 { margin-top: var(--space-6); }
.km-mt-7 { margin-top: var(--space-7); }

/* Reveal: fade + 8px rise, once. Hidden only after site.js has installed the observer. */
.km-reveal-ready .km-reveal:not(.is-visible) { opacity: 0; transform: translateY(8px); }
.km-reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
@media print { .km-reveal-ready .km-reveal:not(.is-visible) { opacity: 1; transform: none; transition: none; } }