/* ====================================================================
   MINILE.CZ — Elementor custom CSS
   Brand tokens (farby, typografia, spacing) ako CSS premenné.

   Kam to ulozit:
   - Elementor → Site Settings → Custom CSS  (najjednoduchsie)
   - alebo do child theme: minile-child/style.css
   - alebo enqueueovat ako samostatny stylesheet cez functions.php

   Konvencia premennych:
   --minile-c-*    farby (color)
   --minile-fs-*   font sizes
   --minile-fw-*   font weights
   --minile-lh-*   line heights
   --minile-ls-*   letter spacings
   --minile-sp-*   spacing
   --minile-r-*    border radius
   --minile-sh-*   shadows
   ==================================================================== */

:root {

  /* ============================================================
     1. FARBY — primarne (vzdy pouzitelne, 80% plochy)
     ============================================================ */
  --minile-c-bg:           #FFFFFF;  /* hlavne pozadie, sekcie */
  --minile-c-text:         #000000;  /* hlavny text, nadpisy */
  --minile-c-text-2:       #333333;  /* sekundarny text, body */
  --minile-c-text-3:       #6b6b6b;  /* caption, mute, footnote */
  --minile-c-text-muted:   #abb8c3;  /* placeholder, disabled */

  /* ============================================================
     2. FARBY — sive odstine (15% plochy)
     ============================================================ */
  --minile-c-line:         #DFDFDF;  /* bordery, divider linky */
  --minile-c-soft:         #ECECEC;  /* pozadia sekcii, oddelenia */
  --minile-c-dark:         #2a2a2a;  /* tmave sekcie / hover */
  --minile-c-darker:       #0a0a0a;  /* extra tmave dark splits */

  /* ============================================================
     3. AKCENTOVE FARBY (5%, pouzivat striedmo, max 2 na sekciu)
     ============================================================ */
  --minile-c-accent:       #00d084;  /* PRIMARY akcent — CTA, success */
  --minile-c-accent-soft:  #7bdcb5;  /* maka zelena, gradient partner */
  --minile-c-info:         #0693e3;  /* linky, info */
  --minile-c-info-soft:    #8ed1fc;  /* bledomodra, info bg */
  --minile-c-purple:       #9b51e0;  /* doplnkova akcia */
  --minile-c-orange:       #ff6900;  /* sale / upozornenie */
  --minile-c-amber:        #fcb900;  /* warning / spotlight */
  --minile-c-pink:         #f78da7;  /* jemne highlights */
  --minile-c-error:        #cf2e2e;  /* error, akcia "remove" */

  /* ============================================================
     4. GRADIENTY (pripravene presets)
     ============================================================ */
  --minile-grad-green:     linear-gradient(135deg, #7bdcb5 0%, #00d084 100%);
  --minile-grad-blue-purp: linear-gradient(135deg, #0693e3 0%, #9b51e0 100%);
  --minile-grad-warm:      linear-gradient(135deg, #ff6900 0%, #cf2e2e 100%);

  /* ============================================================
     5. TYPOGRAFIA
     ============================================================ */
  --minile-font:           "Montserrat", Arial, Helvetica, sans-serif;

  /* font weights */
  --minile-fw-light:       300;
  --minile-fw-regular:     400;
  --minile-fw-medium:      500;
  --minile-fw-semibold:    600;
  --minile-fw-bold:        700;
  --minile-fw-black:       900;

  /* font sizes (z dizajn manualu + odsledene z layoutu) */
  --minile-fs-xs:          11px;   /* eyebrow, micro labels */
  --minile-fs-sm:          13px;   /* meta, popisky obrazkov */
  --minile-fs-base:        16px;   /* body text default */
  --minile-fs-lead:        18px;   /* intro / lead odsek */
  --minile-fs-h6:          20px;
  --minile-fs-h5:          24px;
  --minile-fs-h4:          28px;
  --minile-fs-h3:          30px;
  --minile-fs-h2:          42px;   /* section headings */
  --minile-fs-h2-lg:       52px;   /* veľké H2 */
  --minile-fs-h1:          58px;   /* default H1 */
  --minile-fs-hero:        84px;   /* hero kampane / homepage */

  /* line heights */
  --minile-lh-tight:       1.0;
  --minile-lh-h1:          1.05;
  --minile-lh-h2:          1.15;
  --minile-lh-h3:          1.2;
  --minile-lh-body:        1.7;
  --minile-lh-relaxed:     1.85;

  /* letter spacing */
  --minile-ls-tight:       -2px;   /* veľké hero H1 */
  --minile-ls-h1:          -1.4px;
  --minile-ls-h2:          -1px;
  --minile-ls-h3:          -0.5px;
  --minile-ls-normal:      0;
  --minile-ls-wide:        2px;    /* eyebrow, CTA uppercase */
  --minile-ls-wider:       2.4px;  /* eyebrow */

  /* ============================================================
     6. SPACING (mapovanie na WP preset spacing tokeny + custom)
     ============================================================ */
  --minile-sp-20:          0.44rem;   /* ~7px  */
  --minile-sp-30:          0.67rem;   /* ~10px */
  --minile-sp-40:          1rem;      /* 16px  */
  --minile-sp-50:          1.5rem;    /* 24px  */
  --minile-sp-60:          2.25rem;   /* 36px  */
  --minile-sp-70:          3.38rem;   /* 54px  */
  --minile-sp-80:          5.06rem;   /* 81px  */

  /* Layout spacing (podla MINILE_ELEMENTOR_RULES.md) */
  --minile-sp-section-y:   120px;     /* page section padding top/bottom */
  --minile-sp-section-x:   24px;      /* page section padding left/right */
  --minile-sp-row-gap:     40px;      /* multi-col row gap (NIE 80) */
  --minile-sp-grid-gap:    24px;      /* 5-col grid gap (countries, certs) */
  --minile-sp-grid-gap-tight: 18px;   /* DPP cards */
  --minile-sp-mini-gap:    32px;      /* material rows internal mini-grid */
  --minile-sp-stack:       24px;      /* default vertical stack v stĺpci */

  /* Container widths */
  --minile-w-container:    1240px;    /* default boxed */
  --minile-w-container-wide: 1480px;  /* 5-col grids */

  /* ============================================================
     7. BORDER RADIUS (minimalizmus = ostre rohy)
     ============================================================ */
  --minile-r-none:         0;         /* default — ostre rohy */
  --minile-r-sm:           4px;       /* max pre minimalizmus */
  --minile-r-pill:         999px;     /* chip / filter button */

  /* ============================================================
     8. SHADOWS (max 1 typ na obrazovke)
     ============================================================ */
  --minile-sh-natural:     6px 6px 9px rgba(0, 0, 0, 0.2);    /* karty produktov */
  --minile-sh-deep:        12px 12px 50px rgba(0, 0, 0, 0.4); /* modaly, dropdowny */
  --minile-sh-crisp:       6px 6px 0 rgb(0, 0, 0);            /* doraz / brand statement */
  --minile-sh-hover:       0 18px 40px rgba(0, 0, 0, 0.08);   /* karty hover */

  /* ============================================================
     9. TRANSITIONS
     ============================================================ */
  --minile-trans-fast:     150ms ease;
  --minile-trans-base:     220ms ease;
  --minile-trans-slow:     400ms ease;

  /* ============================================================
     10. Z-INDEX
     ============================================================ */
  --minile-z-base:         1;
  --minile-z-sticky:       50;
  --minile-z-modal-bg:     200;
  --minile-z-modal:        201;
  --minile-z-toast:        300;
}


/* ====================================================================
   ALIAS premenne — pre kompatibilitu s WP/Gutenberg presetmi
   (ak chces aby sa pouzili v block editori)
   ==================================================================== */
:root {
  --wp--preset--color--white:       var(--minile-c-bg);
  --wp--preset--color--black:       var(--minile-c-text);
  --wp--preset--color--accent:      var(--minile-c-accent);
  --wp--preset--color--soft:        var(--minile-c-soft);

  --wp--preset--font-family--montserrat: var(--minile-font);

  --wp--preset--font-size--small:   var(--minile-fs-sm);
  --wp--preset--font-size--medium:  var(--minile-fs-lead);
  --wp--preset--font-size--large:   var(--minile-fs-h3);
  --wp--preset--font-size--x-large: var(--minile-fs-h2);
}


/* ====================================================================
   GLOBAL DEFAULTS — uistime sa, ze cely web pouziva Montserrat
   ==================================================================== */
body,
.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-widget-button,
.elementor-button {
  font-family: var(--minile-font);
}


/* ====================================================================
   UTILITY CLASSES — pre rychly pristup k tokenom z Elementora
   (priraduj cez "CSS Classes" pole na widget/container)
   ==================================================================== */

/* Text colors */
.minile-text-primary    { color: var(--minile-c-text)   !important; }
.minile-text-secondary  { color: var(--minile-c-text-2) !important; }
.minile-text-muted      { color: var(--minile-c-text-3) !important; }
.minile-text-accent     { color: var(--minile-c-accent) !important; }
.minile-text-white      { color: #FFFFFF                !important; }

/* Backgrounds */
.minile-bg-soft         { background: var(--minile-c-soft)   !important; }
.minile-bg-dark         { background: var(--minile-c-dark)   !important; }
.minile-bg-darker       { background: var(--minile-c-darker) !important; }
.minile-bg-accent       { background: var(--minile-c-accent) !important; }
.minile-bg-grad-green   { background: var(--minile-grad-green); }

/* Eyebrow style (em-dash + uppercase + accent) */
.minile-eyebrow {
  font-family: var(--minile-font);
  font-size: var(--minile-fs-xs);
  font-weight: var(--minile-fw-semibold);
  letter-spacing: var(--minile-ls-wider);
  text-transform: uppercase;
  color: var(--minile-c-accent);
}

/* CTA button styl (ak nepouzijes Elementor button) */
.minile-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  font-family: var(--minile-font);
  font-size: 12px;
  font-weight: var(--minile-fw-semibold);
  letter-spacing: var(--minile-ls-wide);
  text-transform: uppercase;
  border-radius: var(--minile-r-none);
  background: var(--minile-c-accent);
  color: var(--minile-c-text);
  text-decoration: none;
  transition: all var(--minile-trans-base);
}
.minile-btn:hover {
  background: var(--minile-c-text);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Material card hover (pri image-ako-bg riesenia) */
.minile-card-hover:hover {
  box-shadow: var(--minile-sh-hover);
  transform: translateY(-4px);
  border-color: var(--minile-c-text);
}


/* ====================================================================
   ZOZNAMY (LISTS) — pre Text Editor widget v Elementore
   --------------------------------------------------------------------
   Pouzitie:
   1. Vytvor Text Editor widget v Elementore
   2. Prepni na "Kód" mode a vloz HTML <ul><li>...</li></ul>
   3. V Pokrocile → CSS Classes pridaj jednu z minile-list-* tried
   ==================================================================== */

/* === Variant A: zelene bodky (default odporucany) ====================
   <ul class="minile-list-bullets">  ALEBO trieda na widgete
*/
.minile-list-bullets,
.elementor-widget-text-editor.minile-list-bullets ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.minile-list-bullets li,
.elementor-widget-text-editor.minile-list-bullets ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-family: var(--minile-font);
  font-size: var(--minile-fs-sm);
  line-height: var(--minile-lh-body);
  color: var(--minile-c-text-2);
}
.minile-list-bullets li::before,
.elementor-widget-text-editor.minile-list-bullets ul li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--minile-c-accent);
  font-size: 18px;
  line-height: 1.4;
  font-weight: var(--minile-fw-bold);
}


/* === Variant B: zelene pomlcky (em-dash, vyrazne) =====================
   Pouzite v sekcii "Vlastnosti" pri materialoch (O materialech).
   Em-dash znak ma sirku zodpovedajucu fontu, vzdy vyzera prirodzene.
*/
.minile-list-dashes,
.elementor-widget-text-editor.minile-list-dashes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.minile-list-dashes li,
.elementor-widget-text-editor.minile-list-dashes ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 4px;
  font-family: var(--minile-font);
  font-size: var(--minile-fs-sm);
  line-height: var(--minile-lh-body);
  color: var(--minile-c-text-2);
}
.minile-list-dashes li:last-child,
.elementor-widget-text-editor.minile-list-dashes ul li:last-child {
  margin-bottom: 0;
}
.minile-list-dashes li::before,
.elementor-widget-text-editor.minile-list-dashes ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--minile-c-accent);
  font-weight: var(--minile-fw-bold);
  font-size: inherit;
  line-height: inherit;
}


/* === Variant C: zelene fajocky (checkmark) ============================
   Pre "vlastnosti / vyhody" gridy
*/
.minile-list-checks,
.elementor-widget-text-editor.minile-list-checks ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.minile-list-checks li,
.elementor-widget-text-editor.minile-list-checks ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-family: var(--minile-font);
  font-size: var(--minile-fs-sm);
  line-height: var(--minile-lh-body);
  color: var(--minile-c-text-2);
}
.minile-list-checks li::before,
.elementor-widget-text-editor.minile-list-checks ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--minile-c-accent);
  border-bottom: 2px solid var(--minile-c-accent);
  transform: rotate(-45deg);
}


/* === Variant D: zelene sipky (→) ======================================
   Pre "fakta / kroky / tipy"
*/
.minile-list-arrows,
.elementor-widget-text-editor.minile-list-arrows ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.minile-list-arrows li,
.elementor-widget-text-editor.minile-list-arrows ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-family: var(--minile-font);
  font-size: var(--minile-fs-base);
  line-height: var(--minile-lh-body);
  color: var(--minile-c-text-2);
}
.minile-list-arrows li::before,
.elementor-widget-text-editor.minile-list-arrows ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--minile-c-accent);
  font-weight: var(--minile-fw-bold);
}


/* ====================================================================
   POZNAMKA / FOOTNOTE — jednoriadkova so sipkou (->)
   --------------------------------------------------------------------
   Pouzitie:
   <p class="minile-note">Text <a href="#">linku</a>.</p>
   ==================================================================== */

.minile-note,
.elementor-widget-text-editor.minile-note p {
  position: relative;
  padding-left: 24px;
  margin: 0;
  font-family: var(--minile-font);
  font-size: 12.5px;
  line-height: var(--minile-lh-body);
  color: var(--minile-c-text-3);
}

.minile-note::before,
.elementor-widget-text-editor.minile-note p::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--minile-c-accent);
  font-weight: var(--minile-fw-bold);
}

/* Link vnutri poznamky — accent + underline */
.minile-note a,
.elementor-widget-text-editor.minile-note a {
  color: var(--minile-c-accent);
  font-weight: var(--minile-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--minile-trans-fast);
}
.minile-note a:hover,
.elementor-widget-text-editor.minile-note a:hover {
  color: var(--minile-c-text);
}


/* ====================================================================
   POZNAMKY
   ====================================================================

   Po nasadeni do Site Settings → Custom CSS:

   1. Premenne su dostupne globalne — mozes ich pouzit v Elementor
      Custom CSS jednotlivych widgetov:
        color: var(--minile-c-accent);

   2. Globalne farby (Site Settings → Global Colors) namapuj manualne:
        Primary   = #00d084
        Secondary = #000000
        Text      = #333333
        Accent    = #00d084

   3. Globalny font (Site Settings → Global Fonts):
        Primary   = Montserrat 700
        Secondary = Montserrat 400
        Text      = Montserrat 400
        Accent    = Montserrat 600

   4. Pri zmene brand farby staci prepisat hodnotu --minile-c-accent
      a vsetky elementy pouzivajuce var(--minile-c-accent) sa zmenia.
   ==================================================================== */