/* ============================================================
   Global — variables, reset, base typography
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────
   Colours and type pulled from the Figma file's published
   variables ([INT] Longwater Gravel Website Design).
   ─────────────────────────────────────────────────────────── */
:root {
    /* Colours */
    --color-primary:       #176A38; /* Brand/Mid Green — main buttons, links */
    --color-primary-hover: #105A2E; /* Hover state */
    --color-secondary:     #021F0E; /* Brand/Deep Green — footer, dark panels, active pills */
    --color-accent:        #FFBF00; /* Brand/Amber — buying actions only (Buy, Add to basket) */
    --color-accent-hover:  #E8AE02; /* Buy button focus */

    --color-text:          #050502; /* Text/Primary */
    --color-text-muted:    #595959; /* Text/Secondary */
    --color-white:         #FFFFFF; /* Text/White, Surface/White */

    --color-bg:            #FFFFFF; /* Surface/White */
    --color-grey-light:    #F2F2F2; /* Surface/Light Grey */
    --color-grey:          #EFEFEF; /* Surface/Grey, Inverse hover */
    --color-border:        #DCDCDC; /* Border/Default */
    --color-error:         #F80000; /* Error */
    --color-error-dark:    #D32F2F; /* Feedback/Error Dark — error messages on white */
    --color-error-light:   #FF6D6D; /* Feedback/Error — error messages on the dark green */
    --color-mint:          #C0F2D4; /* Brand/Mint Green — success badges */

    /* Fonts */
    --font-heading: "Golos Text", sans-serif;
    --font-body:    "Metropolis", sans-serif;
    --font-meta:    "ABeeZee", sans-serif; /* small labels and meta text */

    /* Type scale — Figma design system page, for reference when building section CSS */
    /* H1:     Golos Text SemiBold 60px / 60px */
    /* H2:     Golos Text Medium   30px / 36px */
    /* H3:     Golos Text Medium   28px / 32px */
    /* H4:     Golos Text SemiBold 24px / 25px */
    /* H6:     Golos Text Medium   16px / 25px */
    /* Body:   Metropolis Regular  16px / 20.8px */
    /* Button: Metropolis Bold     16px / 20.8px */

    /* Spacing — section padding */
    --pad-x: 80px;
    --pad-y: 80px;

    /* Layout */
    --site-max-w: 1280px;

    /* Misc */
    --transition: 300ms ease;
}

/* ── Breakpoints ─────────────────────────────────────────────
   The only four on the site:
     Desktop  1367px and up    (no media query)
     Laptop   1025px – 1366px  @media (max-width: 1366px)
     Tablet   768px – 1024px   @media (max-width: 1024px)
     Mobile   767px and below  @media (max-width: 767px)
   ─────────────────────────────────────────────────────────── */

/* Tablet — 1024px and below (Figma 744px frames) */
@media (max-width: 1024px) {
    :root {
        --pad-x: 40px;
        --pad-y: 48px;
    }
}

/* Mobile — 767px and below (Figma 393px frames) */
@media (max-width: 767px) {
    :root {
        --pad-x: 24px;
        --pad-y: 40px;
    }
}


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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

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

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

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


/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.1;
}


/* ── Utilities ──────────────────────────────────────────────── */

/* Read by screen readers, not shown. WordPress core expects themes to have it. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 12px 16px;
    margin: 0;
    clip: auto;
    z-index: 100000;
    background: var(--color-white);
    color: var(--color-text);
}