/* =========================================================
   WEEBE COMPONENTS – CSS VARIABLES
   ↓ Zmeň tieto hodnoty pre každého klienta ↓
========================================================= */

/* =========================================================
   OXANIUM - self-hosted (predtým Google Fonts @import)
   Variabilný font: 2 fyzické súbory (latin + latin-ext) pokrývajú
   všetky hrúbky 300-800 aj slovenskú diakritiku (č,ď,ľ,ň,š,ť,ž... sú
   v Latin Extended-A rozsahu, preto je tu latin-ext povinný).
   Roboto @import (predtým používaný len pre 1 fallback avatar) bol
   zrušený - .wb-review-card__avatar--initial teraz používa var(--wb-font).
========================================================= */
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/oxanium/oxanium-latin-ext.woff2') format('woff2');
  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: 'Oxanium';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/oxanium/oxanium-latin.woff2') format('woff2');
  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;
}

:root {
  /* gray-scale paleta */
  --gs-50:  #f9faf9;
  --gs-100: #f4f5f4;
  --gs-200: #e6e6e5;
  --gs-300: #d4d4d3;
  --gs-400: #a5a5a1;
  --gs-500: #747470;
  --gs-600: #545451;
  --gs-700: #41413f;
  --gs-800: #272726;
  --gs-900: #1d1d1b;
  --gs-950: #0b0b0a;

  /* brand paleta */
  --bp-50:  #fffbeb;
  --bp-100: #fef3c7;
  --bp-200: #fde58a;
  --bp-300: #fdd24c;
  --bp-400: #fcbe23;
  --bp-500: #f69f10;
  --bp-600: #da7605;
  --bp-700: #b55208;
  --bp-800: #923f0e;
  --bp-900: #78340f;
  --bp-950: #451a03;

  /* brand gradient */
  --bp-gradient: linear-gradient(-129deg, #eb6414 0%, #f69f10 67%, #fab70f 100%);

  /* farby – sémantické aliasy naviazané na palety vyššie */
  --wb-black:         var(--gs-900);
  --wb-white:         var(--gs-50);
  --wb-muted:         rgba(29, 29, 27, .72);
  --wb-header-bg:     var(--gs-100);
  --wb-footer-bg:     var(--gs-900);
  --wb-footer-text:   var(--gs-50);

  /* brand */
  --wb-brand-1:       var(--bp-500);
  --wb-brand-2:       var(--bp-600);
  --wb-brand-1-hover: var(--bp-600);
  --wb-brand-gradient: var(--bp-gradient);

  /* rgba varianty – odvodené z bp-500 (246, 159, 16) */
  --wb-brand-ring:         rgba(246, 159, 16, .18);
  --wb-brand-hover-bg:     rgba(246, 159, 16, .12);
  --wb-brand-shadow:       rgba(246, 159, 16, .28);
  --wb-brand-shadow-hover: rgba(246, 159, 16, .38);
  --wb-brand-shadow-panel: rgba(246, 159, 16, .30);
  --wb-brand-shadow-ph:    rgba(246, 159, 16, .40);

  /* typografia & tvar */
  --wb-font: 'Oxanium', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wb-font-primary: var(--wb-font);
  --wb-font-display: 'Oxanium', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wb-radius: 22px;
  --wb-shadow: 0 24px 80px rgba(8, 8, 12, .65);

  /* accent (hnedá) – použité na CTA tlačidlách naprieč global/e-shop/pages */
  --wb-accent-brown:       #894c29;
  --wb-accent-brown-hover: #743e20;
}


/* =========================================================
   GLOBAL BASE
========================================================= */

body {
  font-family: var(--wb-font);
  color: var(--wb-black);
}

/* reset - Divi (rodičovský theme, viď style.css "Template: Divi") pridáva
   každému <p> "padding-bottom: 1em", čo pri odstavcoch/podnadpisoch v
   sekciách naprieč webom vytvára neplánovanú extra medzeru navyše k
   nášmu vlastnému margin/gap systému (viď TEXT SYSTEM nižšie). root.css
   sa načítava ako prvý zo všetkých wb-* štýlov, ale AŽ PO Divi štýloch,
   takže tento reset spoľahlivo vyhráva bez potreby !important. */
p { padding-bottom: 0; }

/* links */
a {
  color: var(--wb-brand-1);
  text-decoration: none;
  transition: opacity .2s ease;
}
a:hover { opacity: 0.75; }


/* =========================================================
   TEXT SYSTEM – jednotná typografická škála
   Každá class definuje len: font, font-weight, font-size,
   line-height a letter-spacing. Farbu textu urči cez samostatnú
   color class (viď nižšie).

   Breakpointy:
   - default   ... Desktop (~1440px a viac)
   - 1279px    ... menší desktop
   - 991px     ... tablet
   - 599px     ... telefón
========================================================= */

.wb-h1,
.wb-h2,
.wb-h3,
.wb-h4,
.wb-h5,
.wb-p-maxi,
.wb-p,
.wb-p-mini {
  font-family: var(--wb-font);
}

.wb-h1 {
  font-weight: 600;
  font-size: 50px;
  line-height: 1;
  letter-spacing: 0;
}

.wb-h2 {
  font-weight: 600;
  font-size: 41px;
  line-height: 1.2;
  letter-spacing: 0;
}

.wb-h3 {
  font-weight: 600;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0;
}

.wb-h4 {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
}

.wb-h5 {
  font-weight: 500;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0;
}

/* line-height nižšie je zámerne výrazne vyšší ako pri nadpisoch (.wb-h1-5
   zostávajú tesné 1/1.2 - tam je to správne, sú to krátke jednoriadkové
   texty veľkým písmom). Odstavcový text sa ale bežne zalamuje na 2+
   riadky a predošlé hodnoty (1 pri wb-p-maxi/wb-p-mini) boli navrhnuté
   ako keby šlo o nadpis - viacriadkový text tak vyzeral zlepený/
   nečitateľný. Toto je JEDINÉ miesto, kde sa odstavcový line-height
   pre celý web nastavuje - žiadna sekcia/stránka by ho už nemala
   prepisovať vlastnou hodnotou (viď komponenty nižšie v e-shop.css/
   pages.css/global.css, ktoré line-height pre bežný text už nesetujú,
   len ho zdedia odtiaľto). */
.wb-p-maxi {
  font-weight: 500;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -.01em;
}

.wb-p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: 0;
}

.wb-p-mini {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* menší desktop */
@media (max-width: 1279px) {
  .wb-h1       { font-size: 42px; }
  .wb-h2       { font-size: 36px; }
  .wb-h3       { font-size: 30px; }
  .wb-h4       { font-size: 26px; }
  .wb-h5       { font-size: 22px; }
  .wb-p-maxi   { font-size: 19px; }
  .wb-p        { font-size: 17px; }
  .wb-p-mini   { font-size: 14px; }
}

/* tablet */
@media (max-width: 991px) {
  .wb-h1       { font-size: 36px; }
  .wb-h2       { font-size: 30px; }
  .wb-h3       { font-size: 26px; }
  .wb-h4       { font-size: 23px; }
  .wb-h5       { font-size: 20px; }
  .wb-p-maxi   { font-size: 18px; }
  .wb-p        { font-size: 16px; }
  .wb-p-mini   { font-size: 14px; }
}

/* telefón */
@media (max-width: 599px) {
  .wb-h1       { font-size: 30px; }
  .wb-h2       { font-size: 26px; }
  .wb-h3       { font-size: 22px; }
  .wb-h4       { font-size: 20px; }
  .wb-h5       { font-size: 18px; }
  .wb-p-maxi   { font-size: 17px; }
  .wb-p        { font-size: 16px; }
  .wb-p-mini   { font-size: 13px; }
}


/* =========================================================
   TEXT COLOR SYSTEM
   Priraď textu class napr. "wb-black" a v root sa mu priradí
   color: var(...). Zmena farby sa robí len tu, nie pri texte.
========================================================= */

.wb-black       { color: var(--wb-black); }
.wb-white       { color: var(--wb-white); }
.wb-muted       { color: var(--wb-muted); }
.wb-brand-1     { color: var(--wb-brand-1); }
.wb-brand-2     { color: var(--wb-brand-2); }
.wb-footer-text { color: var(--wb-footer-text); }

/* gray-scale paleta – gs-xx */
.wb-gs-50  { color: var(--gs-50); }
.wb-gs-100 { color: var(--gs-100); }
.wb-gs-200 { color: var(--gs-200); }
.wb-gs-300 { color: var(--gs-300); }
.wb-gs-400 { color: var(--gs-400); }
.wb-gs-500 { color: var(--gs-500); }
.wb-gs-600 { color: var(--gs-600); }
.wb-gs-700 { color: var(--gs-700); }
.wb-gs-800 { color: var(--gs-800); }
.wb-gs-900 { color: var(--gs-900); }
.wb-gs-950 { color: var(--gs-950); }

/* brand paleta – bp-xx */
.wb-bp-50  { color: var(--bp-50); }
.wb-bp-100 { color: var(--bp-100); }
.wb-bp-200 { color: var(--bp-200); }
.wb-bp-300 { color: var(--bp-300); }
.wb-bp-400 { color: var(--bp-400); }
.wb-bp-500 { color: var(--bp-500); }
.wb-bp-600 { color: var(--bp-600); }
.wb-bp-700 { color: var(--bp-700); }
.wb-bp-800 { color: var(--bp-800); }
.wb-bp-900 { color: var(--bp-900); }
.wb-bp-950 { color: var(--bp-950); }


/* =========================================================
   COMPONENTS – zdieľané komponentové triedy
   Príprava (Fáza 1) na neskoršie zjednotenie duplicitných
   definícií v global.css / e-shop.css / pages.css.
   POZOR: staré duplicitné triedy (.wb-mini-cart__toggle,
   .wb-mini-cart__empty-btn, .wb-mini-cart__btn--solid,
   .wb-shop-hero__cta, .wb-shop-load-more__btn, #place_order,
   .wb-step__btn, .wb-story__eyebrow, .wb-reviews__eyebrow,
   .wb-process__eyebrow, .wb-faq__eyebrow, .wb-story__media img,
   .wb-step__media img) ešte NEBOLI odstránené ani prepojené na
   PHP markup – to je úloha ďalšej fázy. Tieto triedy sú zatiaľ
   nepoužité a teda bezpečné (root.css sa načíta ako prvý).
========================================================= */

/* --- Tlačidlo (základ) ---------------------------------
   Spoločný základ pre .wb-mini-cart__btn, .wb-shop-hero__cta,
   .wb-shop-load-more__btn, #place_order, .wb-step__btn.
   Padding sa medzi pôvodnými triedami mierne líši
   (14px 24px / 14px 32px / 16px 32px 12px / 16px 40px 12px),
   preto ho tu nefixujeme – dopĺňa sa pri konkrétnom použití. */
.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  font-family: var(--wb-font);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

/* --- Tlačidlo (plná/solid varianta) --------------------- */
.wb-btn--solid {
  background: var(--wb-accent-brown);
  color: #fff;
}
.wb-btn--solid:hover { background: var(--wb-accent-brown-hover); }

/* --- Tlačidlo (brand/solid varianta) ---------------------
   Rovnaký tvar ako .wb-btn--solid, len s farbou z brand paletky
   (--bp-800) namiesto hnedej "accent" farby - zatiaľ použité len
   na frontend/pages/vlastny-obraz.php (viď Figma node 493:4105 a
   ďalšie), preto nenahrádza .wb-btn--solid nikde inde na webe. */
.wb-btn--brand {
  gap: 8px;
  padding: 12px 32px;
  background: var(--bp-800);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
/* hover nemení farbu pozadia (viď Figma node 410:685) - len zväčší
   ikonku vedľa textu (12px -> 16px, t.j. ×1.333) */
.wb-btn--brand svg { flex: none; transition: transform .2s ease; }
.wb-btn--brand:hover svg { transform: scale(1.333); }

/* --- Tlačidlo (outline varianta, viď Figma node 406:69) -------- */
.wb-btn--outline {
  padding: 12px 32px;
  background: transparent;
  border: 1px solid var(--gs-400);
  color: var(--wb-black);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  transition: border-color .2s ease, color .2s ease;
}
.wb-btn--outline:hover {
  border-color: var(--bp-800);
  color: var(--bp-800);
}
.wb-btn--outline:active {
  border-color: var(--bp-800);
  color: var(--bp-950);
}

/* --- Tlačidlo (textová varianta) -------------------------
   Len text + šípka, s "vysúvajúcim sa" podčiarknutím na hover
   (rovnaký vzor ako .wb-nav__link/.wb-footer__contact-link). */
.wb-btn--text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  color: var(--bp-600);
  font-family: var(--wb-font);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
}
.wb-btn--text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bp-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.wb-btn--text:hover::after { transform: scaleX(1); }

/* --- Eyebrow (malý nadpis nad titulkom sekcie) ----------
   Zhodné vo .wb-story__eyebrow, .wb-reviews__eyebrow,
   .wb-process__eyebrow, .wb-faq__eyebrow (pages.css). */
.wb-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  color: var(--wb-brand-1);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .03em;
}

/* --- Rámovaný obrázok (media frame) ---------------------
   Zhodné vo .wb-story__media img a .wb-step__media img
   (pages.css) – rozmery/aspect-ratio pre mobil ostávajú
   definované lokálne pri jednotlivých komponentoch. */
.wb-media-frame {
  display: block;
  width: 100%;
  height: 452px;
  object-fit: cover;
  border-radius: 20px;
}

/* --- Section background decorations ---------------------
   .wb-sections-bg / .wb-sections-bg__deco / .wb-sections-bg__circle
   / .wb-sections-bg--soft (pages.css) sú aktuálne definované len
   raz (jeden "vlastník", nie duplicita naprieč súbormi), preto
   pre Fázu 1 zostávajú v pages.css bezo zmeny – presun sem by
   priniesol zbytočné riziko bez zníženia duplicity. Rezervujeme
   si tu len alias .wb-section-bg-deco pre prípadné budúce
   zjednotenie mena triedy naprieč stránkami.
   .wb-section-bg-deco{soft-variant: .wb-section-bg-deco--soft} */