AsterionWP2026/wp-content/themes/asterion-bricks/assets/css/utilities.css

/**
 * Asterion Bricks — Utilities
 *
 * Modern CSS reset + reusable utility classes.
 * Loaded after tokens.css, before components.css.
 *
 * Naming : prefix `av-` on every custom class.
 */

/* ============================================================================
   Modern CSS reset (inspired by Andy Bell's modern-css-reset, Josh Comeau)
   ============================================================================ */

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

* { margin: 0; padding: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
  color: var(--color-text-primary);
  background-color: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

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

ul, ol { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* ============================================================================
   Heading hierarchy — opinionated defaults consumed when an element
   carries no Bricks-specific class. Bricks may override, that's expected.
   ============================================================================ */

h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-snug);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-snug);
}
h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-snug);
}
h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  font-weight: var(--font-weight-semibold);
}

p {
  max-width: 72ch;  /* prose readability per Design Handoff section 2.2 */
}

/* ============================================================================
   Focus visible — keyboard accessibility
   Removes outline only when focus came from the mouse; preserves it for keyboard.
   ============================================================================ */

:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================================================
   Skip link — first focusable element on every page (a11y)
   ============================================================================ */

.av-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand-navy);
  color: var(--color-text-on-dark);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  z-index: var(--z-toast);
  border-bottom-right-radius: var(--radius-md);
}
.av-skip-link:focus,
.av-skip-link:focus-visible {
  top: 0;
}

/* ============================================================================
   Visually hidden — content readable by screen readers, hidden visually
   ============================================================================ */

.av-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Container — centred max-width with responsive padding
   ============================================================================ */

.av-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  width: 100%;
}

@media (min-width: 768px) {
  .av-container { padding-inline: var(--container-padding-tablet); }
}

@media (min-width: 1280px) {
  .av-container { padding-inline: var(--container-padding-desktop); }
}

.av-container--narrow {
  max-width: 800px;  /* article body */
}

/* ============================================================================
   Tap target minimum — WCAG AA / Apple HIG (44×44px)
   ============================================================================ */

.av-tap-target {
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
}

/* ============================================================================
   Stack helpers — vertical rhythm via owl-selector
   ============================================================================ */

.av-stack > * + * { margin-top: var(--av-stack-gap, var(--space-4)); }
.av-stack--sm > * + * { margin-top: var(--space-2); }
.av-stack--md > * + * { margin-top: var(--space-4); }
.av-stack--lg > * + * { margin-top: var(--space-8); }
.av-stack--xl > * + * { margin-top: var(--space-12); }

/* ============================================================================
   Section padding helpers (vertical rhythm between page sections)
   ============================================================================ */

.av-section {
  padding-block: var(--space-16);
}
@media (min-width: 1024px) {
  .av-section { padding-block: var(--space-20); }
}

.av-section--hero {
  padding-block: var(--space-24);
}
@media (min-width: 1024px) {
  .av-section--hero { padding-block: var(--space-32); }
}

.av-section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

/* ============================================================================
   Print
   ============================================================================ */

@media print {
  .av-skip-link, .av-no-print { display: none !important; }
  body { color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}