@import "../baseStyle.css";

/* Hostinec Racek — barvy podle logomanuálu (Logomanual_racek.pdf, str. 6), který zná
   jen dvě: tmavou #12232B a bílou. Zbytek palety je doplněný z jejich webu
   hostinec-racek.cz, protože si sami vyžádali, aby se celkový vzhled čerpal z něj:
   #de7528   oranžová (na webu proměnná --link, tj. odkazy a CTA) — v manuálu NENÍ,
             je to akcent převzatý z webu
   #415d6b   šedomodrá (--bg-text)
   #9bc3ca   světle modrozelená (--bg-color, podklad sekcí) → použito jen zesvětlené
             jako hover řádku, na větší plochy je moc studená.
   Logo je jednobarevné tmavé na průhledném pozadí, hlavička i patička mají světlý
   podklad, takže na rozdíl od Papa FOOD nepotřebuje žádnou barevnou podložku. */
:root {
    --base-text-color: #12232B;
    --href-color: #de7528;
    --background-color: #fafafa;
    --button-hover-color: #c4641f;
    --profile-circle-color: #415d6b;
    --hover-row: #eef4f6;
    --order-buttons-color: #de7528;
}

/* Typografie podle logomanuálu (str. 4-5): hlavním písmem je Metropolis, běžný text
   v řezu regular, nadpisy a zvýraznění v bold. Font má plnou českou diakritiku.
   Z osmnácti dodaných řezů nasazujeme jen tyhle dva, které manuál pro komunikaci
   předepisuje; zbytek rodiny leží v podkladech mimo repozitář. */
@font-face {
    font-family: 'Metropolis';
    src: url('./font/Metropolis-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('./font/Metropolis-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Hlavní bundle sází Poppins na `button` a pak ještě na třech místech s hlubší
   specificitou u inputů (1-styles.less). Selektory se zrcadlí přesně tak, jak vypadají
   ve zkompilovaném template.css — stejná specificita vyhraje pořadím, protože white-label
   CSS se vkládá až za bundle, a nepotřebujeme tak nikde !important.
   `body` má vlastní blok níž, ten se musí vypořádat ještě s country-flags.css. */
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: 'Metropolis', sans-serif;
}

/* `body` musí ven z předchozí skupiny: www/front/css/country-flags.css se ve všech
   layoutech linkuje AŽ ZA white-label CSS (@layout.latte:34 vs :37, stejně tak
   @loginLayout, @layoutSimple i @layoutFoodPickup) a sází
   `body, select, option { font-family: "Twemoji Country Flags", Poppins, sans-serif }`.
   Při shodné specificitě vyhrává pozdější pravidlo, takže prosté `body` by nám Metropolis
   přebilo zpátky na Poppins (a ten se nikde nenačítá → systémový sans-serif).
   Řeší se to vyšší specificitou přes `html` — ne !important, ať jde pravidlo dál přebít.
   Vlajkový font musí zůstat první v pořadí, jinak se na Windows rozbijí vlajky
   v přepínači jazyků (Twemoji přes unicode-range pokrývá jen regional-indicator glyfy,
   všechno ostatní propadne na Metropolis). */
html body,
html select,
html option {
    font-family: "Twemoji Country Flags", 'Metropolis', sans-serif;
}

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

/* Logo je hodně široké (640×133, poměr ~4,8:1). Hlavní bundle dává v patičce od 1024px
   `#brand-footer .footer-logo { height: 7rem }` (3-responsive.less), což u tohoto poměru
   vychází na víc než 30rem šířky — logo pak přeteklo `#brand-footer` (max-width: 20rem)
   a překrylo sloupec s kontakty vedle. Stejný problém řeší i Jedlí (259), jehož logo je
   ještě protáhlejší. Selektor musí mít stejnou specificitu jako pravidlo v bundlu
   (vyhrává pozdějším pořadím — white-label CSS se vkládá až za hlavní bundle). */
@media only screen and (min-width: 1024px) {
    footer .footer-container #brand-footer .footer-logo {
        width: 100%;
        height: auto;
    }
}

/* --- Ochranná zóna loga (logomanuál str. 10) ---------------------------------------
   Manuál předepisuje kolem horizontální verze loga volnou plochu o výšce písmene „E".
   V dodaném logo.png (640×133) je „E" z nápisu RACEK vysoké 53 px, symbol 133 px
   (sedí i poměr 2,5:1 ze str. 9), zóna je tedy 53/133 ≈ 0,4 výšky loga.
   PNG je oříznuté natěsno — obsah začíná na řádku 0 a končí na řádku 132 — takže
   v obrázku není zóna žádná a logo se dotýká hran hlavičky. Odsazení proto musí
   přidat CSS, dopočítané z vykreslené výšky loga zvlášť pro každý breakpoint
   (1rem = 10px, html má font-size: 62.5%). */

/* Pod 1024px sází bundle logu `height: 55px !important` (3-responsive.less). To je výška
   počítaná pro běžná logacca čtvercového poměru — Racek je 640×133, takže při 55px vyjde
   265px šířky. Na telefonu (390px viewport, karta hlavičky 95 %) zbylo vedle loga tak málo
   místa, že se uživatelské menu vysunulo mimo obrazovku, a logo navíc opticky přebíjelo
   celou stránku. Snižujeme ho proto na 36px (≈173px šířky) — přebít `!important` jde jen
   dalším `!important` při shodné specificitě, white-label CSS se vkládá až za bundle.
   Ochranná zóna z logomanuálu se počítá z vykreslené výšky, takže spolu s logem klesá
   na 0,4 × 36 ≈ 1,4rem. Bundle sází `#brand { padding: 0; margin-inline-start: 1rem }` —
   selektor zrcadlíme přesně a levý margin nulujeme, jinak by byl levý odstup o 1rem
   větší než pravý. */
@media only screen and (max-width: 1023px) {
    #header-container header #brand .brand-logo {
        height: 36px !important;
        max-height: 36px;
    }

    #header-container header #brand {
        padding: 1.4rem;
        margin-inline-start: 0;
    }

    /* Karta se stínem lepila na horní hranu okna: `#header-container` má v 1-styles.less
       `margin: 0 auto` a v tomhle breakpointu `padding: 0; margin-bottom: 1rem`, takže
       nahoře nezůstalo nic a stín se ořízl o okraj stránky. Boční mezeru neřešíme
       šířkou — `width: 95%` sdílí s `.content-box` pod sebou a rozladili bychom zarovnání. */
    #header-container {
        margin-top: 1.5rem;
    }
}

/* Od 1024px je hlavička průhledná a bez stínu, logo bere šířku 20rem z baseStyle.css,
   což při poměru 640:133 dělá výšku ≈ 4,16rem → zóna ≈ 1,6rem. Levé odsazení navíc srovná
   logo s textem v kartách pod ním (`.content-box-inner-days-open` má padding 1.5rem 1rem).
   Přebíjí se tím `#brand { padding-bottom: 0 }` z 3-responsive.less — stejná specificita,
   vyhrává pozdější pořadí. */
@media only screen and (min-width: 1024px) {
    #header-container header #brand {
        padding: 1.6rem;
    }
}