/*
 * Reset, typography and layout primitives.
 * Astra's CSS is not loaded on new-design pages, so this file provides the full base.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ysp-header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.ysp {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ysp-font-body);
  font-size: var(--ysp-text-base);
  line-height: var(--ysp-leading-body);
  color: var(--ysp-color-text);
  background: var(--ysp-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.ysp :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ysp-font-heading);
  color: var(--ysp-color-primary);
  line-height: var(--ysp-leading-tight);
  letter-spacing: var(--ysp-tracking-tight);
  font-weight: 700;
  margin: 0 0 var(--ysp-space-4);
  text-wrap: balance;
}
.ysp :where(h1) { font-size: var(--ysp-text-h1); font-weight: 800; }
.ysp :where(h2) { font-size: var(--ysp-text-h2); }
.ysp :where(h3) { font-size: var(--ysp-text-h3); line-height: var(--ysp-leading-snug); }

.ysp :where(p, ul, ol, dl, figure, blockquote) { margin: 0 0 var(--ysp-space-4); }
.ysp :where(p) { text-wrap: pretty; }
.ysp :where(ul[class], ol[class]) { list-style: none; padding: 0; margin: 0; }
.ysp :where(dd) { margin: 0; }

.ysp :where(a) {
  color: var(--ysp-color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--ysp-dur-fast) var(--ysp-ease);
}
.ysp :where(a:hover) { color: var(--ysp-color-primary); }

.ysp :where(img, svg, video) { max-width: 100%; height: auto; display: block; }
.ysp :where(button, input, select, textarea) { font: inherit; color: inherit; }
.ysp :where(button) { cursor: pointer; }

.ysp :focus-visible {
  outline: 2px solid var(--ysp-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.ysp-main { overflow-x: clip; }
.ysp-main:focus { outline: none; }

::selection { background: var(--ysp-teal-100); color: var(--ysp-navy-900); }

/* Layout primitives */
.ysp-container {
  width: min(100% - 2 * var(--ysp-gutter), var(--ysp-container));
  margin-inline: auto;
}
.ysp-container--wide { width: min(100% - 2 * var(--ysp-gutter), var(--ysp-container-wide)); }
.ysp-container--narrow { width: min(100% - 2 * var(--ysp-gutter), var(--ysp-container-narrow)); }

.ysp-section { padding-block: var(--ysp-section); }
.ysp-section--alt { background: var(--ysp-color-bg-alt); }
.ysp-section--dark {
  background: var(--ysp-navy-900);
  color: var(--ysp-on-dark-muted);
}
.ysp-section--dark :where(h1, h2, h3, h4) { color: var(--ysp-on-dark); }
.ysp-section--dark :where(a) { color: var(--ysp-teal-300); }

.ysp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 var(--ysp-space-3);
  font-family: var(--ysp-font-body);
  font-size: var(--ysp-text-xs);
  font-weight: 600;
  letter-spacing: var(--ysp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ysp-teal-700);
}
.ysp-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.8;
}
.ysp-section--dark .ysp-eyebrow { color: var(--ysp-teal-300); }

.ysp-lead {
  font-size: var(--ysp-text-lg);
  line-height: 1.6;
  color: var(--ysp-muted);
  max-width: 60ch;
}
.ysp-section--dark .ysp-lead { color: var(--ysp-on-dark-muted); }

.ysp-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;
}

.ysp-skip {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--ysp-radius-sm);
  background: var(--ysp-navy-900);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--ysp-dur-fast) var(--ysp-ease);
}
.ysp-skip:focus { transform: none; }

/* Scroll reveal — active only once JS has marked <html class="ysp-js"> */
.ysp-js .ysp [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--ysp-dur-slow) var(--ysp-ease), transform var(--ysp-dur-slow) var(--ysp-ease);
}
.ysp-js .ysp [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ysp-js .ysp [data-reveal] { opacity: 1; transform: none; transition: none; }
}