/*
Theme Name:  GrillApe
Theme URI:   https://grillape.co.uk
Author:      buildwithmbo
Description: Custom WordPress theme for GrillApe — Derby's boldest street food truck. Bold Bites. Big Grins.
Version:     1.0.0
Requires at least: 7.0
Tested up to:      7.0
Requires PHP:      8.2
License:     Proprietary
Text Domain: grillape
Tags:        food-truck, custom-theme, mobile-first
*/

/* ==========================================================================
   DESIGN TOKENS
   Source: client design reference
   NOTE: --font-display is a PLACEHOLDER. Once the client supplies the
   licensed font files, add them to /assets/fonts/ and update this variable.
   ========================================================================== */
:root {
    /* Colours */
    --color-green:       #1A5C3A;
    --color-yellow:      #F5B731;
    --color-cream:       #F0EBE0;
    --color-off-white:   #F5F0E8;
    --color-green-muted: rgba(26, 92, 58, 0.10);
    --color-white-muted: rgba(245, 240, 232, 0.07);

    /* Typography */
    --font-display: 'Rubik Dirt', cursive;
    --font-body:    'Happy Monkey', cursive;

    /* Spacing (8pt grid) */
    --sp-1:  0.25rem;   /*  4px */  
    --sp-2:  0.5rem;    /*  8px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-6:  1.5rem;    /* 24px */
    --sp-8:  2rem;      /* 32px */
    --sp-10: 2.5rem;    /* 40px */
    --sp-12: 3rem;      /* 48px */
    --sp-16: 4rem;      /* 64px */
    --sp-20: 5rem;      /* 80px */
    --sp-24: 6rem;      /* 96px */

    /* Layout */
    --container-max: 1200px;
    --container-pad: 1.5rem;

    /* Components */
    --radius-pill: 9999px;
    --radius-card: 1rem;

    /* Header */
    --header-height:  8.5rem;
    --header-border:  none;

    /* Transitions */
    --t-fast: 150ms ease;
    --t-base: 250ms ease;
    --t-slow: 400ms ease;

    /* Section rhythm — mobile-first, overridden at 48rem below */
    --section-pad-sm: var(--sp-12);   /* 48px  — accent strips, post-nav */
    --section-pad:    var(--sp-16);   /* 64px  — standard content sections */
    --section-pad-lg: var(--sp-20);   /* 80px  — hero / featured areas */
}

@media (min-width: 48rem) {
    :root {
        --section-pad-sm: var(--sp-16);   /* 64px */
        --section-pad:    var(--sp-24);   /* 96px */
        --section-pad-lg: var(--sp-24);   /* 96px */
    }
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--header-height);
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-green);
    background-color: var(--color-cream);
    overflow-x: hidden;
}

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

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

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* ==========================================================================
   TYPOGRAPHY SCALE
   ========================================================================== */
.display {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.93;
    letter-spacing: -0.01em;
}

.display--hero    { font-size: clamp(4rem,  18vw, 6.4rem); }
.display--section { font-size: clamp(3rem,  10vw,  6rem); }
.display--card    { font-size: clamp(1.5rem, 5vw,  2.5rem); }

@media (max-width: 47.9rem) {
    h1.display--hero {
        font-size: clamp(3rem, 8vw, 3.75rem); /* ~48–60px — homepage hero H1 */
    }

    h1.display--section {
        font-size: clamp(2.75rem, 6.5vw, 3.125rem); /* ~44–50px — H1 */
    }

    h2.display--section,
    h2.display--card {
        font-size: clamp(1.5625rem, 3.65vw, 1.75rem); /* ~25–28px — H2 */
    }

    h3.display--card {
        font-size: clamp(1.125rem, 2.6vw, 1.25rem); /* ~18–20px — H3 */
    }
}

.eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-yellow);
    color: var(--color-green);
    font-weight: 700;
    border-radius: var(--radius-pill);
    z-index: 9999;
    transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }