/* ═══════════════════════════════════════════════════════════════
   BASE.CSS — Butcher's Burger & Steak House
   Fonts · CSS Custom Properties · Reset · Container · Utilities
   DynaWasp © 2026
═══════════════════════════════════════════════════════════════ */

/* ── @font-face ─────────────────────────────────────────────── */

@font-face {
    font-family: 'ACSunn';
    src: url('../fonts/ACSunn.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ── CSS Custom Properties ──────────────────────────────────── */

:root {
    /* ─ Colors ─ */
    --color-primary:   #EF2A2A;
    --color-secondary: #202020;
    --color-black:     #000000;
    --color-grey:      #AEACAC;
    --color-white:     #FEFEFE;

    /* ─ Fonts ─ */
    --font-display: 'ACSunn', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* ─ Font Sizes — desktop 1280px ─ */
    --fs-h1:           90px;
    --fs-h2:           126px;
    --fs-h3:           95px;
    --fs-h4:           25px;
    --fs-stores-hero:  255px;
    --fs-stores-name:  53px;
    --fs-social-name:  66px;
    --fs-menu-city:    102px;
    --fs-menu-city-hover: 35px;

    /* ─ Footer ─ */
    --fs-footer-title: 25px;
    --fs-footer-item:  18px;
    --fs-footer-lh:    24px;

    /* ─ Transitions ─ */
    --tr-page:  300ms ease-out;
    --tr-menu:  300ms ease-in;
    --tr-hover: 100ms ease-out;
    --tr-fast:  150ms ease;

    /* ─ Container ─ */
    --container-max:    1440px;
    --container-pad:    80px;   /* 80px left+right = 160px total, like Figma spec */
    --container-pad-md: 40px;
    --container-pad-sm: 24px;

    /* ─ Z-index ─ */
    --z-header:  9000;
    --z-overlay: 9001;
    --z-toggle:  9002;
}

/* ── Reset ──────────────────────────────────────────────────── */

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

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

body {
    font-family: var(--font-mono);
    font-weight: 400;
    color: var(--color-secondary);
    background-color: var(--color-white);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: bb-fade-in 300ms ease-out both;
}

@keyframes bb-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-fade-out { from { opacity: 1; } to { opacity: 0; } }

body.is-leaving { animation: bb-fade-out 300ms ease-out forwards; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; }

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

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

ul, ol { list-style: none; }

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

/* ── Container System ───────────────────────────────────────────
   Χρήση:
   <div class="container">          → 1280px max, 80px padding
   <div class="container--narrow">  → 1024px max
   <div class="container--full">    → 100% width, 80px padding
─────────────────────────────────────────────────────────────── */

.container,
.container--narrow,
.container--full {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.container        { max-width: var(--container-max); }
.container--narrow { max-width: 1024px; }
.container--full   { max-width: 100%; }

/* ── Breakpoints ────────────────────────────────────────────────
   xl:  ≥ 1280px  — design reference
   lg:  ≥ 1024px  — tablet landscape
   md:  ≥ 768px   — tablet portrait
   sm:  < 768px   — mobile
─────────────────────────────────────────────────────────────── */

/* lg — container padding μικρότερο */
@media (max-width: 1280px) {
    :root {
        --container-pad: var(--container-pad-md);
        --fs-h1:           clamp(48px, 7vw,  90px);
        --fs-h2:           clamp(56px, 10vw, 126px);
        --fs-h3:           clamp(42px, 7vw,  95px);
        --fs-stores-hero:  clamp(80px, 18vw, 255px);
        --fs-stores-name:  clamp(22px, 4vw,  53px);
        --fs-menu-city:    clamp(44px, 8vw,  102px);
        --fs-social-name:  clamp(30px, 5vw,  66px);
    }
}

/* md */
@media (max-width: 1024px) {
    :root {
        --container-pad: var(--container-pad-md);
    }
}

/* sm */
@media (max-width: 768px) {
    :root {
        --container-pad: var(--container-pad-sm);
        --fs-h1:           clamp(38px, 10vw, 72px);
        --fs-h2:           clamp(38px, 11vw, 90px);
        --fs-h3:           clamp(32px, 8vw,  72px);
        --fs-stores-hero:  clamp(52px, 18vw, 140px);
        --fs-stores-name:  clamp(20px, 5.5vw, 42px);
        --fs-menu-city:    clamp(32px, 9vw,  72px);
        --fs-social-name:  clamp(28px, 8vw,  52px);
    }
}

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

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

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}