/**
 * Limestone theme — Base layer
 *
 * A small, modern reset + accessibility primitives that COMPLEMENT the
 * carried compiled `webflow.css`. This file must never restyle Webflow
 * components — it only fills gaps the carried CSS does not cover:
 *   - predictable box-sizing
 *   - responsive media defaults
 *   - an accessible :focus-visible outline (none of these exist in webflow.css)
 *   - skip-link + .screen-reader-text utilities for AI-friendly semantics
 *
 * Loaded AFTER tokens.css and BEFORE webflow.css so the pixel baseline can
 * always win specificity ties on shared elements.
 *
 * @package Limestone
 * @since   0.1.0
 */

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

/* ---- Responsive media --------------------------------------------------- */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Keep inline icons / logos behaving inline where the carried CSS expects it. */
.w-embed svg,
.button svg,
.text-style-nav svg {
  display: inline;
}

/* ---- Accessible focus --------------------------------------------------- */
/* The carried Webflow CSS strips focus outlines (e.g. .w-nav-button:focus
 * { outline: 0 }). Restore a visible, keyboard-only focus ring using the
 * brand colour. Mouse users keep the clean Webflow look via :focus-visible. */
:focus-visible {
  outline: 2px solid var(--ld-purple, #5d4af5);
  outline-offset: 2px;
}

/* Suppress the default ring for pointer interactions only. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Skip link ---------------------------------------------------------- */
/* Visually hidden until focused; lets keyboard / AT users jump to <main>. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  font-family: var(--ld-font-mono, monospace);
  font-size: 14px;
  color: var(--ld-paper, #fff);
  background-color: var(--ld-ink, #1a1a1a);
  border-radius: var(--ld-radius, 6px);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 8px;
}

/* ---- Screen-reader-only text -------------------------------------------- */
/* WordPress-conventional visually-hidden utility (matches core class name)
 * so labels / headings can exist in the DOM for AT + crawlers without
 * affecting the pixel-perfect layout. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  word-wrap: normal !important;
}

/* Allow a screen-reader-only element to become visible when focused
 * (e.g. a "skip to content" link rendered with this class). */
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ---- Reduced motion ----------------------------------------------------- */
/* Respect the user's OS-level motion preference. Progressive enhancement
 * transitions in main.js are CSS-driven, so honouring this here is enough. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}