/**
 * base.css - Reset, Typography & Layout Primitives
 *
 * Global reset, typographic defaults, the .container utility,
 * section wrappers, and accessibility helpers.
 *
 * @package LibrandiOutdoorPower
 * @since   1.1.0
 * @updated 1.4.0 - Typography roles updated for the four-family
 *                  system. h1 uses --font-display (Bevan) for the
 *                  hero moment, h2-h6 use --font-heading (Racing
 *                  Sans One), body copy uses --font-body (Roboto
 *                  Flex).
 */

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

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-gray-800);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}


/* ----- Headings -----
 * h1 takes the display face (Bevan) so the hero and any primary
 * branding moment carries weight. h2-h6 use the heading face
 * (Racing Sans One) for section-level signage, which reads as
 * distinct without fighting the hero for attention.
 *
 * Racing Sans One has a strong ascender/descender ratio, so we
 * loosen the letter-spacing a touch from the default tight value
 * used by Bevan. Bevan itself wants even looser tracking because
 * the letterforms are chunky and run together at tight settings.
 */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
    font-weight: 400; /* display faces read best at their natural weight */
}

h1 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    letter-spacing: 0.01em;
    line-height: 1.05;
}

h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    letter-spacing: var(--tracking-normal);
}

h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }


/* ----- Body copy ----- */
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }


/* ----- Links ----- */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}
a:hover {
    color: var(--color-primary-dark);
}


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

address { font-style: normal; }


/* ----- Container ----- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}


/* ----- Section wrapper ----- */
.section {
    padding-block: var(--space-16);
}
.section--alt {
    background-color: var(--color-off-white);
}
.section--accent {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.section--accent h2,
.section--accent h3 {
    color: var(--color-white);
}
.section--flush {
    padding: 0;
}


/* ----- Utility classes ----- */
.text-center { text-align: center; }
.text-muted  { color: var(--color-gray-400); }


/* ----- Accessibility: skip link ----- */
.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}
.screen-reader-text:focus {
    clip: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-sm);
    height: auto;
    width: auto;
}