@import "../baseStyle.css";

/* Jídlo na stůl — barvy odečtené z jidlonastul.cz (WordPress/Astra + Elementor, žádný
   logomanuál zákazník nemá). Web je záměrně monochromní:
   #101218   tmavá (Astra global-color-2) — překryv hero fotky (79 %), nadpisy
   #4a4f54   šedá patičky webu
   #54595F   šedá tlačítek (Elementor "secondary"), hover #7A7A7A
   #9FCE00   zelená — jediný barevný akcent webu (hover objednávacího tlačítka);
             na bílé je nečitelná (kontrast ~1,9), proto ji pro text a rámečky
             používáme ztmavenou na #6f9a00 / #7cb305
   #F6F7F8   světle šedý podklad (Astra global-color-8)
   Logo je čistě bílé PNG na průhledném pozadí (na webu leží na tmavé fotce), takže
   stejně jako u Papa FOOD dostává v hlavičce i patičce tmavou podložku. */
:root {
    --base-text-color: #101218;
    --href-color: #6f9a00;
    --background-color: #f6f7f8;
    --button-hover-color: #54595f;
    --profile-circle-color: #54595f;
    --hover-row: #eef0f1;
    --order-buttons-color: #7cb305;
}

/* --- Typografie podle webu -------------------------------------------------------
   Astra na jidlonastul.cz sází běžný text v Lato (400/700) a nadpisy v Montserrat.
   Oba fonty jsou z Google Fonts (OFL), servírují se z tohoto adresáře jako woff2
   v podsadách latin + latin-ext (česká diakritika je v latin-ext). Montserrat je
   variabilní font — jeden soubor pokrývá váhy 100–900. */
@font-face {
    font-family: 'Lato';
    src: url('./font/Lato-Regular-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    src: url('./font/Lato-Regular-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lato';
    src: url('./font/Lato-Bold-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lato';
    src: url('./font/Lato-Bold-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    src: url('./font/Montserrat-Variable-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    src: url('./font/Montserrat-Variable-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Hlavní bundle sází Poppins na `button` a na třech místech s hlubší specificitou
   u inputů (1-styles.less). Selektory zrcadlíme přesně tak, jak jsou ve zkompilovaném
   template.css — stejná specificita vyhraje pořadím, white-label CSS je až za bundlem. */
button,
.base-input,
.login-container form input,
.login-container form button,
.login-container form select,
.login-container form a.button,
.content-box .content-box-inner-days-open .food-list .food-cart .supplements-container .customer-note label input {
    font-family: 'Lato', sans-serif;
}

/* `body` zvlášť: www/front/css/country-flags.css se ve všech layoutech linkuje AŽ ZA
   white-label CSS a sází `body, select, option { font-family: "Twemoji Country Flags",
   Poppins, sans-serif }`. Prosté `body` by tedy prohrálo pořadím — řeší to vyšší
   specificita přes `html` (ne !important, ať jde dál přebít). Vlajkový font musí
   zůstat první, jinak se na Windows rozbijí vlajky v přepínači jazyků. */
html body,
html select,
html option {
    font-family: "Twemoji Country Flags", 'Lato', sans-serif;
}

/* Jazykový přepínač v profilu má v country-flags.css !important. */
select[name="language999"],
select[name="language999"] option {
    font-family: "Twemoji Country Flags", 'Lato', sans-serif !important;
}

/* Nadpisy v Montserrat jako na webu (Astra: h1–h6 Montserrat, h4 má Forum — ten
   nepřebíráme, na webu se prakticky neobjeví). */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', 'Lato', sans-serif;
}

/* --- Logo -------------------------------------------------------------------------
   logo.png (319×243) je bílý symbol s nápisem pod ním, poměr ~4:3. Bez podložky by
   na světlé hlavičce nebylo vidět, proto ho obalujeme tmavou podložkou v barvě
   hero sekce webu. Kvůli poměru 4:3 mu nedáváme šířku 20rem z baseStyle.css
   (vyšlo by 15rem výšky), ale pevnou výšku. */
#header-container header #brand {
    background-color: var(--base-text-color);
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

/* !important nutné — bundle má pod 1024px `.brand-logo { height: 55px !important }`
   (3-responsive.less); tam se výška nechává na bundlu, od 1024px logo zvětšujeme. */
#header-container header #brand .brand-logo {
    width: auto !important;
    height: 7rem !important;
}

/* Terminál výdejny a kuchyňský displej: bundle jim dává logu vlastní výšku
   (`.terminal-body .brand-logo { height: 5rem !important }`, `.kitchen-display` 3rem),
   ale pravidlo výš má vyšší specificitu a přebilo by je. Vracíme hodnoty bundlu. */
.terminal-body #header-container header #brand .brand-logo {
    height: 5rem !important;
}

.terminal-body.kitchen-display #header-container header #brand .brand-logo {
    height: 3rem !important;
}

@media only screen and (max-width: 1023px) {
    #header-container header #brand {
        padding: 0.5rem 1rem;
        margin-inline-start: 1rem;
    }

    #header-container header #brand .brand-logo {
        height: 55px !important;
    }

    /* Pod 1024px má #header-container v bundlu `padding: 0; margin-bottom: 1rem`, tmavá
       podložka loga se tak lepila na horní hranu okna. */
    #header-container {
        margin-top: 1rem;
    }
}

/* Patička — stejná podložka. width: fit-content, protože #brand-footer je jinak
   roztažený na max-width: 20rem a podložka by byla širší než logo. */
#brand-footer {
    background-color: var(--base-text-color);
    padding: 0.8rem 1.4rem;
    border-radius: 10px;
    width: fit-content !important;
    display: flex;
    align-items: center;
    align-self: center;
    margin: 0 auto;
}

/* !important nutné — bundle má od 1024px `#brand-footer .footer-logo { height: 7rem }`. */
.footer-logo {
    width: auto !important;
    height: 7rem !important;
}