/* wp-content/themes/mosaic/assets/css/global.css */
/* ============================================================================
   Base styles & reset. Lifted from the design handoff website.css head
   (MOS-108). Tokens come from design-system.css — never hardcode here.
   Component, accessibility (skip-link / :focus-visible) and page styles are
   added in later tickets (MOS-110+).
   ============================================================================ */

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

/* Honour reduced-motion preference (Technical Spec §1.6). */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--selection);}

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

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

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-6);}

/* ============================================================================
   ACCESSIBILITY BASE (MOS-113)
   Focus indicators are shown to keyboard / assistive-tech users only — mouse
   and touch users never see a ring. Skip-link + screen-reader-text utility
   support the header's skip-to-content link.
   ============================================================================ */

/* Suppress the default ring, then restore it for keyboard navigation only. */
*:focus{outline:none;}
*:focus-visible{outline:2px solid var(--sage-600);outline-offset:3px;border-radius:var(--r-xs);}

/* Visually hidden, but available to assistive tech. */
.screen-reader-text{
  position:absolute;
  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;
}

/* Skip link: revealed when it receives keyboard focus. */
.screen-reader-text:focus{
  position:fixed;
  top:var(--space-3);left:var(--space-3);
  z-index:100;
  width:auto;height:auto;
  margin:0;padding:10px 18px;
  clip:auto;clip-path:none;
  background:var(--sage-800);
  color:var(--on-dark);
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-weight:var(--fw-med);
  font-size:var(--fs-small);
}