/**
 * base.css
 * Reset, global defaults, typography.
 * No component styles here. No layout here.
 */

/* ============================================================
   RESET
============================================================ */

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

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

body {
    font-family:              var(--font-body);
    font-size:                var(--text-body);
    line-height:              var(--leading-base);
    color:                    var(--color-text);
    background-color:         var(--color-surface);
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
}

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

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

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

/* Prevent a single word dangling alone on the last line.
   `balance` distributes line lengths evenly — best for short headings.
   `pretty` avoids orphaned last words — best for multi-line body copy.
   Both are progressive enhancement: ignored by browsers that don't support them. */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

ul, ol {
    list-style: none;
}

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

button {
    cursor: pointer;
    background: none;
    border: none;
}


/* ============================================================
   TYPOGRAPHY
============================================================ */

/* ── Heading font families ──────────────────────────────────
   h1 can use --font-display for hero moments (defaults to --font-heading).
   h2-h6 always use --font-heading.
   Body uses --font-body.
   Override font families in child theme client-vars.css.
─────────────────────────────────────────────────────────── */

h1, .h1 {
    font-family:   var(--font-display, var(--font-heading));
    font-size:     var(--text-h1);
    line-height:   var(--leading-tight);
    font-weight:   700;
    color:         var(--color-text);
}

h2, .h2 {
    font-family:   var(--font-heading);
    font-size:     var(--text-h2);
    line-height:   var(--leading-tight);
    font-weight:   700;
    color:         var(--color-text);
}

h3, .h3 {
    font-family:   var(--font-heading);
    font-size:     var(--text-h3);
    line-height:   var(--leading-snug);
    font-weight:   600;
    color:         var(--color-text);
}

h4, .h4 {
    font-family:   var(--font-heading);
    font-size:     var(--text-h4);
    line-height:   var(--leading-snug);
    font-weight:   600;
}

h5, .h5 {
    font-family:   var(--font-heading);
    font-size:     var(--text-h5);
    line-height:   var(--leading-snug);
    font-weight:   600;
}

h6, .h6 {
    font-family:   var(--font-heading);
    font-size:     var(--text-h6);
    line-height:   var(--leading-base);
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

p {
    margin-bottom: var(--space-sm);
}

p:last-child {
    margin-bottom: 0;
}

/* Lead paragraph - intro text, slightly larger */
.lead {
    font-size:   var(--text-lead);
    line-height: var(--leading-loose);
    color:       var(--color-text-muted);
}

/* Long h1 modifier - apply when heading text is unusually long */
.h1--long    { font-size: var(--text-h1-long) !important; }

/* Display size - hero moments only, pairs with --font-display */
.text-display { font-size: var(--text-display); line-height: var(--leading-tight); }

/* Utility text sizes */
.text-muted  { color: var(--color-text-muted); }
.text-small  { font-size: var(--text-small); }
.text-mono   { font-family: var(--font-mono); font-size: var(--text-mono); }
.text-label  {
    font-size:      var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight:    600;
}

/* Prose - applied to long-form content regions */
.prose p,
.prose li {
    line-height:   var(--leading-loose);
    margin-bottom: var(--space-sm);
}

.prose a {
    color:           var(--color-brand);
    text-decoration: underline;
}

.prose a:hover {
    color: var(--color-brand-hover);
}

.prose ul,
.prose ol {
    list-style:    revert;
    padding-left:  var(--space-md);
    margin-bottom: var(--space-sm);
}


/* ============================================================
   GLOBAL UTILITIES
============================================================ */

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

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

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