@import "../baseStyle.css";

/*
 * Obědy Adam — barvy a písmo převzaté z obedyadam.cz (Elementor, globální barvy a typografie webu).
 *
 * Značka stojí na zlaté na grafitové: logo je zlaté #C99900, web má tmavé sekce
 * #2A2A2A / #131313 a jasně žlutý akcent #FFC100. Zlatá se ale na bílém pozadí
 * jídelníčku chová úplně jinak než na jejich tmavém webu — #C99900 má proti bílé
 * kontrast 2,6:1 a #FFC100 jen 1,6:1, takže by fajfky, rámečky a texty, které
 * baseStyle.css barví proměnnou --order-buttons-color, byly špatně čitelné.
 * Rozdělení proto je:
 *   #2A2A2A   grafitová — lišta s datem, lišta s kontakty, tlačítka (nese strukturu)
 *   #946E00   tmavá zlatá (odvozená z #C99900, kontrast 4,7:1 na bílé) — prvky na bílém:
 *             zaškrtávátka, alergeny, název objednaného jídla, aktivní odkaz; zároveň
 *             barva tlačítek při najetí myší (bílý text 4,7:1)
 *   #FFC100   jasně žlutá z webu — jen na grafitové, kde má kontrast 8,8:1
 *   #FFF6DB   zlatý nádech podbarvení řádku
 *   #F9F9F9   světlý podklad stránky (globální barva webu)
 */
:root {
    --base-text-color: #2a2a2a;
    --href-color: #946e00;
    --background-color: #f9f9f9;
    --button-hover-color: #946e00;
    --profile-circle-color: #2a2a2a;
    --hover-row: #fff6db;
    --order-buttons-color: #946e00;
}

/* --- Písmo ------------------------------------------------------------------------
   Web sází text v Open Sans a nadpisy v Barlow 700 (jiný řez Barlow nepoužívá).
   Oba fonty servírujeme z vlastního serveru, ne z Google Fonts — stejně jako u ostatních
   firem. Open Sans je variabilní, jeden soubor nese celý rozsah tlouštěk (stejné soubory
   jako Vidličkárna, 299). U obou se dělí jen po znakových podmnožinách a čeština
   potřebuje obě: čárky (á é í ó ú ý) jsou v `latin`, háčky a kroužky (č ř ž ě ů)
   v `latin-ext`. Bez `latin-ext` by se diakritika sázela náhradním fontem. */
@font-face {
    font-family: 'Open Sans';
    src: url('./font/opensans-latin.woff2') format('woff2');
    font-weight: 300 800;
    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: 'Open Sans';
    src: url('./font/opensans-latin-ext.woff2') format('woff2');
    font-weight: 300 800;
    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: 'Barlow';
    src: url('./font/barlow-700-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: 'Barlow';
    src: url('./font/barlow-700-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;
}

/* Bundle sází Poppins nejen na `body`, ale i na tlačítkách a čtyřech zanořených
   selektorech pro vstupní pole (1-styles.less). Zrcadlíme je přesně tak, jak vypadají
   ve zkompilovaném template.css — při shodné specificitě vyhraje pořadím, protože
   white-label CSS se linkuje až za bundlem. `body` má vlastní blok níž. */
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: 'Open Sans', 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 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 Open Sans
   přebilo zpátky na Poppins (ten se ve FrontModule nenačítá → systémový bezpatkový font).
   Řeší se to vyšší specificitou přes `html`, ne `!important`, ať jde pravidlo 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", 'Open Sans', sans-serif;
}

/* Jazykový přepínač v profilu má v country-flags.css `!important`, jinak ho nepřebijeme. */
select[name="language999"],
select[name="language999"] option {
    font-family: "Twemoji Country Flags", 'Open Sans', sans-serif !important;
}

/* Nadpisy jako na webu: Barlow 700 — název lístku nad jídelníčkem a názvy dnů. */
.restaurant-name h1,
.content-box .content-box-inner-days-open .day-select > div:first-child,
.content-box .content-box-inner-days-close .day-select > div:first-child {
    font-family: 'Barlow', 'Open Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* --- Zlatá na grafitové ------------------------------------------------------------
   Na tmavých lištách má jasně žlutá z webu dost kontrastu, tak ji použijeme tam, kde
   web dává zlaté akcenty na tmavé sekce: rozsah týdne v liště s datem, vybraný týden
   v rozbalovacím výběru a iniciály v kolečku profilu (kolečko je grafitové). */
.blue-container .date-blue-box p {
    color: #ffc100;
}

.blue-container .week-picker__item.is-selected {
    background-color: rgba(255, 193, 0, 0.16);
}

#header-container header #navigation .navigation-btn .initials {
    color: #ffc100;
}

/* --- Zbytky výchozí modré -------------------------------------------------------------
   baseStyle.css proměnnými pokrývá jen část prvků; tyhle mají v bundlu (template.css)
   barvu #024f94 natvrdo. Selektory jsou zrcadlené ze zkompilovaného template.css, aby
   při shodné specificitě vyhrálo pořadí; `!important` jen tam, kde ho má i bundle. */
.content-box .content-box-inner-days-open .food-list .food-cart .food-desc .alergens,
.content-box-summary .content-box-inner-days-open .food-list .food-cart .food-desc .alergens,
.alergens-mobile,
.slozeni-mobile-btn,
.slozeni-list h2,
.content-box .content-box-inner-days-open .food-energetic-total-mobile,
.content-box .content-box-inner-days-open .edit-profile-container .name,
.question-icon,
.add-credit-form .agree a,
.content-box-summary .content-box-inner-days-open .food-list .food-cart .food-desc .alergens-list h2 {
    color: var(--order-buttons-color);
}

.content-box .content-box-inner-days-open .food-list .food-cart .food-desc .alergens .alergens-mobile.alergens-mobile-circle {
    color: var(--order-buttons-color);
    border-color: var(--order-buttons-color);
}

.content-box .content-box-inner-days-open .food-list .food-cart .food-desc .alergens .alergens-mobile.alergens-mobile-circle:hover {
    background-color: var(--order-buttons-color) !important;
    border-color: var(--order-buttons-color) !important;
}

.alergens-inline-mobile .alergens-mobile span {
    color: var(--order-buttons-color) !important;
}

/* Tlačítka „Složení“ (desktop) — stejný vzhled jako tlačítko alergenů vedle. */
.content-box .content-box-inner-days-open .food-list .food-cart .food-desc .food-desc-heading .food-desc-main .slozeni-desktop,
.content-box .content-box-inner-days-open .food-list .food-cart .food-desc .food-desc-heading .food-desc-side .slozeni-desktop {
    color: var(--order-buttons-color);
    border-color: var(--order-buttons-color);
}

.content-box .content-box-inner-days-open .food-list .food-cart .food-desc .food-desc-heading .food-desc-main .slozeni-desktop:hover,
.content-box .content-box-inner-days-open .food-list .food-cart .food-desc .food-desc-heading .food-desc-side .slozeni-desktop:hover {
    background-color: var(--order-buttons-color);
}

/* Objednané jídlo — vedlejší sloupec (příloha) a jednotky ve stejné barvě jako název. */
.content-box .content-box-inner-days-open .food-list .food-cart.ordered .food-desc .food-desc-heading .food-desc-side h3,
.content-box .content-box-inner-days-open .food-list .food-cart.ordered .food-desc .food-desc-heading .food-desc-side h3 span {
    color: var(--href-color);
}

/* Zaškrtávátko „povolit víc objednávek“ a košík (instantní platby). */
.content-box .allow-more-orders .checkmark {
    border-color: var(--order-buttons-color);
}

.content-box .allow-more-orders .container .checkmark:after {
    border-color: var(--order-buttons-color);
}

.basket-item .pick-count-container .count button {
    color: var(--order-buttons-color);
}

.basket-item .pick-count-container .count button.minus,
.basket-item .pick-count-container .count button.plus,
.delivery-to select {
    border-color: var(--order-buttons-color);
}

/* Okno s počtem porcí. */
.order-modal button {
    background-color: var(--base-text-color);
}

.order-modal button:hover {
    background-color: var(--button-hover-color);
}

.order-modal input {
    color: var(--base-text-color);
}

/* Přihlášení — registrace jako obrysové tlačítko v barvě tlačítek. */
.login-container form .register {
    border-color: var(--base-text-color);
    color: var(--base-text-color);
}

/* Výběr alergenů v profilu: zaškrtnutá karta s nádechem zlaté místo modré. */
.allergen-card:has(.allergen-card__main input:checked) {
    background: rgba(201, 153, 0, 0.06);
}

/* --- Logo ---------------------------------------------------------------------------
   Logo má poměr 2,28:1 (685×301 po oříznutí průhledného okraje). Výchozích 20rem šířky
   z baseStyle.css by dalo přes 8,7rem výšky a hlavička by se natáhla nad profilové
   tlačítko vpravo (~8,5rem), proto se řídí výškou: 7,6rem → ~17rem šířky.
   Pod 1024px bundle sází `height: 55px !important` (3-responsive.less), což tady vychází
   na 125px šířky a sedí, jen karta hlavičky nemá kolem loga žádný odstup (logo se lepí
   na okraj) a karta se stínem se lepí na horní hranu okna. Řešeno stejně jako u Racka. */
#header-container header #brand .brand-logo {
    width: auto;
    height: 7.6rem;
}

@media only screen and (max-width: 1023px) {
    #header-container header #brand .brand-logo {
        height: 46px !important;
        max-height: 46px;
    }

    #header-container header #brand {
        padding: 1.2rem 1.4rem;
        margin-inline-start: 0;
    }

    #header-container {
        margin-top: 1.5rem;
    }

    /* Oddělovač mezi objednanými řádky je v bundlu modrošedý #c7d8e8 (s !important). */
    .content-box .content-box-inner-days-open .food-list .food-cart.ordered.food-cart-text-only {
        border-bottom: 1px solid #f0dfa8 !important;
    }
}

/* Patička: logo stejně vysoké jako v hlavičce desktopu, ať nepřetéká sloupec s kontakty. */
@media only screen and (min-width: 1024px) {
    footer .footer-container #brand-footer .footer-logo {
        width: auto;
        height: 7rem;
    }
}
