/* === Quast — display serif (logo, nav, headings, item/popup titles, footer) ===
   Self-hosted: the original Bricks build served Quast as a custom uploaded
   font (slot 99) which was never ported, so the new theme had no webfont and
   Quast only rendered where it happened to be installed locally (e.g. the
   designer's Mac) — iOS Safari and most visitors fell back to Georgia. These
   files restore it for everyone. woff2 first (smallest), woff for older
   browsers, ttf as last resort. font-display:swap avoids invisible text. */
@font-face {
  font-family: "Quast";
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Quast.woff2") format("woff2"),
       url("../fonts/Quast.woff") format("woff"),
       url("../fonts/Quast.ttf") format("truetype");
}

/* === Reset === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === Lenis compatibility — Chrome fights native smooth scroll === */
html {
  font-size: 62.5%; /* 10px base — matches live Bricks site. All design tokens use rem. */
  scroll-behavior: auto !important;
}

/* === Body ===
   Live uses much darker text than the base --text-primary (#3e3e3b).
   Measured on live: headings rgb(28,28,27)=d-6; paragraphs rgb(23,23,21)=d-7;
   serif accents rgb(39,39,38)=d-4. Set defaults so the whole site matches
   live's contrast level without page-by-page overrides. */
body {
  font-family: var(--font-body);
  font-size: var(--body-m);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary-d-6);        /* matches live's heading + h6 color */
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Typography roles (from 03-typography.md) === */
h1, h2, h3, h5, h6 {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.15;
}

h4 {
  font-family: var(--font-accent);
  font-weight: 400;
  line-height: 1.25;
}

h1 { font-size: var(--heading-xl); }
h2 { font-size: var(--heading-l); }
h3 { font-size: var(--heading-m); }
h4 { font-size: var(--heading-s); }
h5 { font-size: var(--heading-xs); }
h6 { font-size: var(--heading-2xs); }

p {
  margin-bottom: 1em;
  line-height: 1.6;
  color: var(--text-primary-d-7); /* live: paragraphs are slightly darker than headings */
  text-wrap: pretty; /* site-wide: avoid orphans / ragged last lines (graceful no-op in unsupported browsers) */
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Utility classes (from typography spec) === */
.hero-typography {
  font-family: var(--font-heading);
  font-size: var(--heading-2xl);
  font-weight: 400;
  line-height: 1.05;
}

.navbar-link {
  font-family: var(--font-heading);
  font-size: var(--body-s);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.body-text {
  font-family: var(--font-body);
  font-size: var(--body-m);
  font-weight: 400;
  line-height: 1.6;
}

.Item-title {
  font-family: var(--font-heading);
  font-size: var(--heading-s);
  font-weight: 400;
  line-height: 1.2;
}

.small-text {
  /* Live uses aktiv-grotesk for .small-text (NOT co-text/serif). Verified
     on /available-works/ list rows: font-family aktiv-grotesk, weight 400,
     size 12px, line-height 20.4px (= 1.7). Spec doc may say --font-accent
     but the live wins. */
  font-family: var(--font-body);
  font-size: var(--body-s);
  font-weight: 400;
  line-height: 1.7;
}

.button-primary {
  font-family: var(--font-body);
  font-size: var(--body-m);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
}

/* === Page transitions (View Transitions API — MPA cross-document) === */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-close-eyes 0.6s ease-in forwards;
  z-index: 2;
}

::view-transition-new(root) {
  animation: vt-open-eyes 0.6s ease-out 0.5s forwards;
  filter: blur(20px);
  opacity: 0;
  z-index: 1;
}

::view-transition-old(header),
::view-transition-new(header) {
  animation: none;
}

::view-transition-group(scroll-logo) {
  animation-duration: 1.1s;
  animation-timing-function: ease-in-out;
}

@keyframes vt-close-eyes {
  0%   { filter: blur(0);    opacity: 1; }
  60%  { filter: blur(20px); opacity: 1; }
  100% { filter: blur(20px); opacity: 0; }
}

@keyframes vt-open-eyes {
  0%   { filter: blur(20px); opacity: 0; }
  40%  { filter: blur(20px); opacity: 1; }
  100% { filter: blur(0);    opacity: 1; }
}

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

/* === Utility — from Bricks custom CSS === */
.red {
  color: var(--color-primary);
}

/* === WooCommerce mini-cart overrides === */
.woocommerce-mini-cart__buttons .button:not(.checkout) {
  display: none !important;
}

.woocommerce-mini-cart__buttons {
  text-align: center;
}

.woocommerce-mini-cart__buttons .button.checkout {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

/* === Screen reader only === */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* === Skip to content === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
}
.skip-link:focus {
  left: var(--Space-m);
  top: var(--Space-m);
  width: auto;
  height: auto;
  padding: var(--Space-xs) var(--Space-m);
  background: var(--color-surface);
  color: var(--text-primary-d-7);
  border: 1px solid var(--text-primary);
  border-radius: 4px;
  text-decoration: none;
}

/* === Generic content page (Terms, Privacy & any future simple page) ===
   Only applies to .page-simple markup from page.php, so it has no effect on
   the bespoke page templates. A readable centered column that clears the
   fixed header. */
.page-simple {
  padding: var(--header-offset-desktop) var(--Space-l) var(--Space-2xl);
}
.page-simple__inner {
  max-width: var(--max-content-medium); /* 760px — comfortable measure for body text */
  margin: 0 auto;
}
.page-simple__title {
  font-family: var(--font-heading); /* Quast, matches page titles elsewhere */
  font-size: var(--heading-l);
  margin-bottom: var(--Space-l);
}
.page-simple__content h2 {
  font-size: var(--heading-m);
  margin: var(--Space-l) 0 var(--Space-2xs);
}
.page-simple__content h3 {
  font-size: var(--heading-s);
  margin: var(--Space-m) 0 var(--Space-3xs);
}
.page-simple__content p { margin-bottom: 1em; }
.page-simple__content ul {
  margin: 0 0 1em;
  padding-left: 1.4em;
}
.page-simple__content li { margin-bottom: 0.35em; }
.page-simple__content a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (max-width: 767px) {
  .page-simple {
    padding: var(--header-offset-mobile) var(--Space-m) var(--Space-xl);
  }
}