/* ===================================================
   PDU-CODE: Global Styles — Ploty Dobrý
   Soubor: pdu-code/eshop/global.css
   Verze: 1.0 | Datum: 2026-04-13
   ===================================================
   OBSAH:
   1. Brand CSS Variables (:root)
   2. Globální micro-animace (hover přechody)
   3. Prefers-reduced-motion (přístupnost)
   4. Graceful degradation (CSS Grid fallback)
   5. Obrázky v gridech
   =================================================== */


/* ---------------------------------------------------
   1. BRAND CSS VARIABLES
   --------------------------------------------------- */
:root {
  /* Primární brand barvy */
  --pdu-barva-tmavomodra:    #191932;   /* CMYK 100/96/22/76 — tmavá modrofialová (logo, texty, tmavá pozadí) */
  --pdu-barva-zelena-brand:   #00a664;   /* CMYK 100/0/85/0   — zelená loga (brand identita) */
  --pdu-barva-zelena-btn:    #4CAF50;   /* Zelená tlačítek a navigace (interaktivní prvky) */
  --pdu-barva-zluta:         #FFFF00;   /* CMYK 0/0/100/0    — čistá žlutá (akcenty, upozornění) */

  /* Odvozené tóny */
  --pdu-barva-zelena-svetla:  #E6FFD1;  /* Světle zelená pozadí rámečků */
  --pdu-barva-sede-svetla:    #F5F5F5;  /* Neutrální světlé pozadí */
  --pdu-barva-sede-stredni:   #CCCCCC;  /* Rámečky, oddělovače */
  --pdu-barva-bila:           #FFFFFF;
  --pdu-barva-tekst-zakladni: #333333;  /* Základní barva textu */

  /* Zelená akcent — dominantní zelená webu (borders, FAQ, nadpisy, aktivní prvky) */
  --pdu-barva-zelena-akcent:       #00B46E; /* Extrahováno z legacy — 8× výskyt, schváleno */

  /* Žlutá — dvě varianty pro různé kontexty */
  --pdu-barva-zluta:               #FFFF00; /* Čistá žlutá (CMYK 0/0/100/0) — výrazné akcenty */
  --pdu-barva-zluta-warm:          #F3C446; /* Warm žlutá — animace, jemnější akcenty */
  --pdu-barva-zluta-svetla:        #FFFEEC; /* Světle žluté pozadí rámečků (paralela --pdu-barva-zelena-svetla) */

  /* Hover varianty */
  --pdu-barva-zelena-btn-hover:    #388E3C; /* Tmavší zelená (btn) pro hover */
  --pdu-barva-zelena-akcent-hover: #009458; /* Tmavší akcent zelená pro hover */

  /* Sociální sítě */
  --pdu-barva-facebook:            #3c63ab; /* Facebook brand modrá — jen pro FB tlačítka */

  /* Ocelová modrá — CTA "výroba na míru" v kategorii Brány a branky */
  --pdu-barva-ocelova-modra:       #2e445a;

  /* Červená alert — upozornění v produktových popisech */
  --pdu-barva-cervena-alert:       #E63C24; /* Extrahováno z .button-kategorie-hyryblue — 3+ výskyty na branových podkategoriích */

  /* Cofidis žlutá — výhradně pro splátkový prodej Cofidis CTA tlačítka */
  --pdu-barva-cofidis-zluta:       #FECB00; /* Batch 11: /cena-dopravy/, /splatkovy-prodej/ */

  /* Spacing systém */
  --pdu-odsazeni-xs:  5px;
  --pdu-odsazeni-s:   10px;
  --pdu-odsazeni-m:   20px;
  --pdu-odsazeni-l:   30px;
  --pdu-odsazeni-xl:  50px;

  /* Zaoblení rohů */
  --pdu-radius-s:  3px;
  --pdu-radius-m:  6px;
  --pdu-radius-l:  12px;

  /* Typografie — fonty */
  --pdu-font-zakladni:   inherit;           /* Shoptet šablona — nepřepisovat, dědí globální font */
  --pdu-font-nadpisy:    inherit;           /* Nadpisy — sjednotit zde při změně fontu */
  --pdu-font-mono:       monospace;         /* Kód, technické hodnoty */

  /* Typografie — velikosti */
  --pdu-font-size-xs:    0.75rem;           /* ~12px — poznámky, popisky */
  --pdu-font-size-s:     0.85rem;           /* ~14px — vedlejší text, tabulky */
  --pdu-font-size-m:     1rem;              /* ~16px — základní text */
  --pdu-font-size-l:     1.25rem;           /* ~20px — perex, zvýraznění */
  --pdu-font-size-xl:    1.5rem;            /* ~24px — H2 nadpisy */

  /* Přechody (micro-animace) — full shorthand pro a/button */
  --pdu-prechod-rychly:  all 0.15s ease;
  --pdu-prechod-stredni: all 0.25s ease;
  --pdu-prechod-pomaly:  all 0.4s ease;

  /* Přechody — jen DURATION (pro single-property: transform, filter, color) */
  --pdu-prechod-dur-rychly:   0.15s;
  --pdu-prechod-dur-stredni:  0.25s;
  --pdu-prechod-dur-pomaly:   0.4s;

  /* === ROZŠÍŘENÍ 2026-05-13 (HP rozcestník) === */

  /* Sekundární text */
  --pdu-barva-text-sekundarni:    #5B5B6E;   /* tlumený text — popisky, mission, span v kartách */
  --pdu-barva-text-sedy:          #666666;   /* nejtlumenější — final disclaimer, stat-desc */

  /* Pozadí — varianty (doplnění k --pdu-barva-zelena-svetla #E6FFD1) */
  --pdu-barva-pozadi-foto:        #F8F8F8;   /* placeholder pod product image */
  --pdu-barva-zelena-svetla-2:    #F5FAF5;   /* CTA bg (tel/mail blok) */
  --pdu-barva-zelena-svetla-3:    #E8F8F0;   /* kruh za emoji ikonou (publikum) */

  /* Okraje */
  --pdu-barva-okraj-jemny:        #E0E0E0;   /* karty, kontakt blok, staty */
  --pdu-barva-okraj-svetly:       #F0F0F0;   /* vnitřní separator v kartě */
  --pdu-barva-okraj-zeleny-jemny: #E0ECE0;   /* okraj kolem zelených CTA bloků */

  /* Žlutá CTA — třetí varianta žluté (mezi #FFFF00 a #F3C446 warm) */
  --pdu-barva-zluta-cta:          #F4E732;   /* "Spočítat plot zdarma", "Chci nabídku" */

  /* Rozšíření radius (mezi -m=6 a -l=12) */
  --pdu-radius-card:              10px;
  --pdu-radius-xl:                14px;      /* mid CTA, kontakt blok */

  /* Stíny — 4 vrstvy hloubky */
  --pdu-stin-jemny:               0 4px 10px rgba(0,0,0,.04);
  --pdu-stin-stredni:             0 6px 20px rgba(0,0,0,.06);
  --pdu-stin-vyrazny:             0 10px 25px rgba(0,0,0,.12);
  --pdu-stin-karta-hover:         0 10px 30px rgba(0,0,0,.12);
}


/* ---------------------------------------------------
   2. GLOBÁLNÍ MICRO-ANIMACE
   Jemné hover přechody pro interaktivní prvky.
   Platí globálně — Shoptet přepisuje jen kde potřeba.
   --------------------------------------------------- */

/* Plynulý přechod pro všechna tlačítka */
a,
button,
input[type="submit"],
input[type="button"] {
  transition: var(--pdu-prechod-rychly);
}


/* ---------------------------------------------------
   3. PREFERS-REDUCED-MOTION
   Vypnutí animací pro uživatele s citlivostí na pohyb
   nebo nízkovýkonná zařízení.
   --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------
   4. GRACEFUL DEGRADATION
   Fallback pro prohlížeče bez CSS Grid (velmi staré
   Android Chrome). Lineární layout místo rozbitého.
   --------------------------------------------------- */

/* Výchozí fallback: vše lineárně pod sebou */
.pdu-sec-grid > * {
  display: block;
  width: 100%;
  margin-bottom: var(--pdu-odsazeni-m);
}

/* Moderní browsery s Grid podporou: resetuj fallback */
@supports (display: grid) {
  .pdu-sec-grid > * {
    display: revert;
    width: revert;
    margin-bottom: revert;
  }
}


/* ---------------------------------------------------
   5. OBRÁZKY V GRIDECH
   Zamezení přetečení a layout shiftu (CLS).
   Vždy přidávat loading="lazy" + width/height atributy
   přímo v HTML pro obrázky mimo hero sekci.
   --------------------------------------------------- */

/* PDU Obrázky v grid layoutech */
.pdu-sec-grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* ---------------------------------------------------
   6. PER-TYP TYPOGRAFICKÉ TOKENY
   Každý typ stránky má vlastní stupnici nadpisů a body
   textu — měň ZDE, nikdy v sekcových souborech ani inline.
   Výchozí hodnoty kopírují Shoptet base (zjištěno crawlem
   2026-04-29 z main-11.less). Weight 700 pro nadpisy je
   brand-driven (Shoptet base má 400, ale Šimon vždy obaluje
   <strong> v WYSIWYG patternu — proto výchozí 700).
   Per-typ infrastruktura připravená pro budoucí divergenci
   (např. blog větší H1, idx hero, pro kompaktnější).
   --------------------------------------------------- */
:root {
  /* ===== PDU-IDX (homepage) — type-index ===== */
  --pdu-idx-fs-h1: 26px;       --pdu-idx-fw-h1: 700;
  --pdu-idx-fs-h2: 20px;       --pdu-idx-fw-h2: 700;
  --pdu-idx-fs-h3: 18px;       --pdu-idx-fw-h3: 700;
  --pdu-idx-fs-h4: 16px;       --pdu-idx-fw-h4: 700;
  --pdu-idx-lh-h1: 1.4;        --pdu-idx-mt-h1: .67em;   --pdu-idx-mb-h1: .67em;
  --pdu-idx-lh-h2: 1.4;
  --pdu-idx-lh-h3: 1.4;
  --pdu-idx-lh-h4: 1.1;
  --pdu-idx-fs-text-l:  16px;  --pdu-idx-fs-text-m:  14px;
  --pdu-idx-fs-text-s:  13px;  --pdu-idx-fs-text-xs: 12px;
  --pdu-idx-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-idx-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-idx-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-idx-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-idx-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);

  /* ===== PDU-CAT (kategorie) — type-category ===== */
  --pdu-cat-fs-h1: 26px;       --pdu-cat-fw-h1: 700;
  --pdu-cat-fs-h2: 20px;       --pdu-cat-fw-h2: 700;
  --pdu-cat-fs-h3: 18px;       --pdu-cat-fw-h3: 700;
  --pdu-cat-fs-h4: 16px;       --pdu-cat-fw-h4: 700;
  --pdu-cat-lh-h1: 1.4;        --pdu-cat-mt-h1: .67em;   --pdu-cat-mb-h1: .67em;
  --pdu-cat-lh-h2: 1.4;
  --pdu-cat-lh-h3: 1.4;
  --pdu-cat-lh-h4: 1.1;
  --pdu-cat-fs-text-l:  16px;  --pdu-cat-fs-text-m:  14px;
  --pdu-cat-fs-text-s:  13px;  --pdu-cat-fs-text-xs: 12px;
  --pdu-cat-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-cat-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-cat-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-cat-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-cat-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);

  /* ===== PDU-PRO (produkt) — type-product/type-detail ===== */
  --pdu-pro-fs-h1: 26px;       --pdu-pro-fw-h1: 700;
  --pdu-pro-fs-h2: 20px;       --pdu-pro-fw-h2: 700;
  --pdu-pro-fs-h3: 18px;       --pdu-pro-fw-h3: 700;
  --pdu-pro-fs-h4: 16px;       --pdu-pro-fw-h4: 700;
  --pdu-pro-lh-h1: 1.4;        --pdu-pro-mt-h1: .67em;   --pdu-pro-mb-h1: .67em;
  --pdu-pro-lh-h2: 1.4;
  --pdu-pro-lh-h3: 1.4;
  --pdu-pro-lh-h4: 1.1;
  --pdu-pro-fs-text-l:  16px;  --pdu-pro-fs-text-m:  14px;
  --pdu-pro-fs-text-s:  13px;  --pdu-pro-fs-text-xs: 12px;
  --pdu-pro-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-pro-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-pro-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-pro-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-pro-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);

  /* ===== PDU-BLO (blog) — type-post ===== */
  --pdu-blo-fs-h1: 26px;       --pdu-blo-fw-h1: 700;
  --pdu-blo-fs-h2: 20px;       --pdu-blo-fw-h2: 700;
  --pdu-blo-fs-h3: 18px;       --pdu-blo-fw-h3: 700;
  --pdu-blo-fs-h4: 16px;       --pdu-blo-fw-h4: 700;
  --pdu-blo-lh-h1: 1.4;        --pdu-blo-mt-h1: .67em;   --pdu-blo-mb-h1: .67em;
  --pdu-blo-lh-h2: 1.4;
  --pdu-blo-lh-h3: 1.4;
  --pdu-blo-lh-h4: 1.1;
  --pdu-blo-fs-text-l:  16px;  --pdu-blo-fs-text-m:  14px;
  --pdu-blo-fs-text-s:  13px;  --pdu-blo-fs-text-xs: 12px;
  --pdu-blo-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-blo-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-blo-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-blo-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-blo-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);

  /* ===== PDU-PAG (info-stránka) — type-page ===== */
  --pdu-pag-fs-h1: 26px;       --pdu-pag-fw-h1: 700;
  --pdu-pag-fs-h2: 20px;       --pdu-pag-fw-h2: 700;
  --pdu-pag-fs-h3: 18px;       --pdu-pag-fw-h3: 700;
  --pdu-pag-fs-h4: 16px;       --pdu-pag-fw-h4: 700;
  --pdu-pag-lh-h1: 1.4;        --pdu-pag-mt-h1: .67em;   --pdu-pag-mb-h1: .67em;
  --pdu-pag-lh-h2: 1.4;
  --pdu-pag-lh-h3: 1.4;
  --pdu-pag-lh-h4: 1.1;
  --pdu-pag-fs-text-l:  16px;  --pdu-pag-fs-text-m:  14px;
  --pdu-pag-fs-text-s:  13px;  --pdu-pag-fs-text-xs: 12px;
  --pdu-pag-barva-nadpis:     var(--pdu-barva-tmavomodra);
  --pdu-pag-barva-text:       var(--pdu-barva-tekst-zakladni);
  --pdu-pag-barva-akcent:     var(--pdu-barva-zelena-akcent);
  --pdu-pag-barva-link:       var(--pdu-barva-zelena-akcent);
  --pdu-pag-barva-link-hover: var(--pdu-barva-zelena-akcent-hover);
}