/* ==========================================================================
   ZÁKLAD - premenné a reset
   ==========================================================================
   Dizajnové premenné (farby, odstupy, rozmery) a reset prehliadača.
   TOTO JE JEDINÉ MIESTO, kde sa menia farby a odstupy celého e-shopu -
   prefarbenie znamená úpravu ~15 hodnôt, nie hľadanie v šablónach.
   Načítava sa v resources/views/layouts/app.blade.php. Poradie je dôležité:
   base.css definuje premenné, ktoré používajú všetky ostatné moduly, a
   responzívne pravidlá sa vpisujú do hlavičky stránky až za všetky tieto
   súbory, aby prebili predvolené hodnoty. Skladá ich
   App\Services\VzhladService::cssObchodu() z hodnôt v Nastaveniach.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Firemné farby - zmenou týchto dvoch sa prebarví celý e-shop. */
    --color-primary: #1f6feb;
    --color-primary-dark: #1558c0;

    --color-accent: #e8590c;
    --color-success: #1a7f37;
    --color-danger: #cf222e;

    /* Neutrálne odtiene */
    --color-text: #1f2328;
    --color-text-muted: #656d76;
    --color-border: #d8dee4;

    /* Plochy: kartičky, hlavička, rozbaľovacie ponuky. Držané svetlé, aby sa
       kartičky produktov odlíšili od stránky za nimi. */
    --color-bg: #ffffff;
    /* Zadávateľ 28. 9. 2026: „na Frontende bude všade biele pozadie“. */
    --color-bg-subtle: #ffffff;

    /* Pozadie stránky.
       Zámerne oddelené od --color-bg: zmena farby stránky nesmie prebarviť aj
       každú kartičku, inak kartičky prestanú pôsobiť ako kartičky.
       Pozadie celého e-shopu sa mení TOUTO hodnotou. */
    --color-page-bg: #ffffff;   /* všade biele pozadie (28. 9. 2026) */

    /* Stupnica odstupov - základ 4 px drží zvislý rytmus jednotný. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --radius: 6px;
    --radius-lg: 10px;

    /* ----------------------------------------------------------------------
       VÝŠKA PRILEPENEJ HLAVIČKY
       ----------------------------------------------------------------------
       Hlavička e-shopu je position: sticky a stojí nad všetkým ostatným.
       Čokoľvek ďalšie, čo sa prilepí k hornému okraju, sa preto musí zastaviť
       AŽ POD ŇOU - inak sa mu vrch schová za hlavičku. Presne to sa stalo
       súhrnu objednávky: prilepil sa na 16 px a nadpis so začiatkom zoznamu
       položiek zmizol za lištou kategórií.

       Skutočnú výšku sem zapíše js/app.js pri načítaní a pri zmene veľkosti
       okna. Mení sa totiž s obsahom: pri užších šírkach sa vyhľadávanie
       zalomí na vlastný riadok a hlavička narastie.

       Hodnota tu je záloha pre prípad vypnutého JavaScriptu - zodpovedá
       nameranej výške pri bežnej šírke počítača. Keby sa o pár pixelov
       líšila, nič sa nerozbije; len bude medzera o tie pixely iná. */
    --vyska-hlavicky: 113px;

    --shadow-sm: 0 1px 3px rgba(27, 31, 36, 0.08);
    --shadow-md: 0 4px 12px rgba(27, 31, 36, 0.12);

    /* ----------------------------------------------------------------------
       ŠÍRKY OBSAHU - šesť úrovní zo zadania
       ----------------------------------------------------------------------
       2400  široká obrazovka      1024  tablet nastojato
       1366  štandardný počítač     880  mobil naležato
       1200  tablet naležato        767  mobil nastojato

       POZOR: TIETO ČÍSLA UŽ NIE SÚ ZDROJOM PRAVDY.
       ----------------------------------------------------------------------
       Šesť hraničných bodov sa zadáva v Nastaveniach → Identita a hodnoty
       odtiaľ prepisujú tieto premenné aj všetky media queries obchodu.
       Skladá ich App\Services\VzhladService::cssObchodu() a vpisujú sa do
       hlavičky stránky, teda ZA tento súbor.

       Hodnoty tu zostávajú ako záloha pre prípad, že by sa ten kúsok CSS
       nevygeneroval (prázdna databáza pri prvom spustení), a aby sa dal
       súbor otvoriť samostatne a bolo z neho zrejmé, s akými šírkami sa
       počíta.

       Media queries tu zámerne NIE SÚ: pravidlo @media hodnotu z premennej
       prečítať nevie, takže by museli mať čísla napevno - a nastavenia by
       na obchod nemali žiadny vplyv. Presne to bol dôvod, prečo zanikol
       public/css/responsive.css.
       ---------------------------------------------------------------------- */
    --width-widescreen:       2400px;
    --width-desktop:          1366px;
    --width-tablet-landscape: 1200px;
    --width-tablet-portrait:  1024px;
    --width-mobile-landscape:  880px;
    --width-mobile-portrait:   767px;

    /* Predvolená úroveň. Na širokej obrazovke sa zvyšuje na
       --width-widescreen; pod štandardným počítačom je kontejner jednoducho
       užší než jeho max-width, takže sa sám stane pružným a nižšie úrovne
       fungujú ako body PRESKLÁDANIA rozloženia, nie ako stropy šírky. */
    --container-width: var(--width-desktop);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-page-bg);
    /* Zabráni vodorovnému poskočeniu rozloženia, keď sa objaví posuvník. */
    overflow-x: hidden;
}

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

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-4); }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }