/*
Theme Name: Zenturi Theme
Theme URI: https://zenturi.sk
Author: Zenturi
Author URI: https://zenturi.sk
Description: Custom WordPress theme for Zenturi — Gutenberg + Lazy Blocks (PHP-rendered blocks), Polylang ready.
Version: 1.28.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.3
License: Proprietary
Text Domain: zenturi-theme
*/

/* DESIGN TOKENS */

:root {
  /* Brand colors - JEDINÝ zdroj pravdy je theme.json paleta (--wp--preset--color--*).
     Tieto aliasy len mapujú preset → krátky token používaný v blokoch.
     Hex za čiarkou = fallback ak global styles nie sú načítané. Zmena brandu = uprav theme.json. */
  --color-primary:         var(--wp--preset--color--primary,         #ffb703);
  --color-primary-dark:    var(--wp--preset--color--primary-dark,    #fb8500);
  --color-primary-light:   var(--wp--preset--color--primary-light,   #fbd26a);
  --color-primary-lighter: var(--wp--preset--color--primary-lighter, #fde9b4);
  --color-secondary:       var(--wp--preset--color--secondary,       #219ebc);
  --color-secondary-light: var(--wp--preset--color--secondary-light, #8ecae6);
  --color-secondary-dark:  var(--wp--preset--color--secondary-dark,  #1b8098);
  --color-secondary-lighter: var(--wp--preset--color--secondary-lighter, #c0e2f1);  /* DS button/secondary na tmavom (light scheme) */
  --color-bg:              var(--wp--preset--color--bg,              #ffffff);
  --color-bg-medium:       var(--wp--preset--color--bg-medium,       #ecf2f4);
  --color-border:          var(--wp--preset--color--border,          #03030326);
  --color-text:            var(--wp--preset--color--text,            #023047);
  --color-text-secondary:  var(--wp--preset--color--text-secondary,  #75878f);
  --color-success:         var(--wp--preset--color--success,         #49d20e);
  --color-success-light:   var(--wp--preset--color--success-light,   #eef9e9);
  --color-success-dark:    var(--wp--preset--color--success-dark,    #2c7f09);
  --color-error:           var(--wp--preset--color--error,           #ef4738);
  --color-error-light:     var(--wp--preset--color--error-light,     #fbefef);
  --color-info-dark:       var(--wp--preset--color--info-dark,       #184268);
  --color-disabled:        var(--wp--preset--color--disabled,        #a9b7bc);  /* DS Status/Disabled */
  --color-white:           #ffffff;
  --color-black:           #000000;

  /* Kompat aliasy (base CSS) → najbližší nový token; v nových blokoch nepoužívať */
  --color-surface:     var(--color-bg);
  --color-surface-2:   var(--color-bg-medium);
  --color-text-muted:  var(--color-text-secondary);
  --color-text-subtle: var(--color-text-secondary);
  --color-accent-1:    var(--color-secondary);
  --color-accent-2:    var(--color-bg-medium);

  /* Typography — Season (variabilný font, súbory sa doplnia; fallback system stack) */
  --font-sans:    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Season', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:    'Season', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Font weights (Season VF osi podľa Figmy) */
  --weight-regular:  400;
  --weight-tagline:  420; /* Mix Regular Italic (taglines, H2-A/H3-A) */
  --weight-medium:   550;
  --weight-semibold: 650;
  --weight-bold:     750;

  /* Type scale (Figma): Tiny 12 / Small 14 / Regular 16 / Medium 18 / Large+H6 20 /
     H5 24 / H4 32 (interpolované) / H3 40 / H2 48 / H1 56 / Display 80 */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.25rem;                                     /* H6/Large 20 */
  --text-3xl:     clamp(1.25rem,  1.05rem + 0.85vw, 1.5rem);   /* H5 24 */
  --text-4xl:     clamp(1.625rem, 1.35rem + 1.1vw,  2rem);     /* H4 32 */
  --text-5xl:     clamp(1.875rem, 1.5rem  + 1.6vw,  2.5rem);   /* H3 40 */
  --text-6xl:     clamp(2.125rem, 1.6rem  + 2.2vw,  3rem);     /* H2 48 */
  --text-7xl:     clamp(2.375rem, 1.75rem + 2.8vw,  3.5rem);   /* H1 56 */
  --text-display: clamp(3rem,     2rem    + 4.4vw,  5rem);     /* Display 80 */

  /* Spacing (Figma div paddingy 16/24/32/48/80 + section paddingy 48/80/112/140) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;                             /* div xsmall 16 */
  --space-5:  1.25rem;
  --space-6:  1.5rem;                           /* div small 24 */
  --space-8:  2rem;                             /* div medium 32 */
  --space-12: clamp(2.5rem, 3.4vw,  3rem);      /* div large / section small 48 */
  --space-16: clamp(2.5rem, 4.45vw, 4rem);      /* page padding 64 */
  --space-20: clamp(3rem,   5.5vw,  5rem);      /* div xlarge / section medium 80 */
  --space-24: clamp(3.5rem, 7.8vw,  7rem);      /* section large 112 */
  --space-32: clamp(4rem,   9.7vw,  8.75rem);   /* section huge 140 */

  /* Border radius (Figma: Tiny 4 / Small 8 / Medium 12 / Base 16 / Large 24 / XLarge 40) */
  --radius-xs:     4px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-base:   16px;
  --radius-lg:     24px;
  --radius-xl:     40px;
  --radius-2xl:    40px;
  --radius-full:   50px;
  --radius-button: 12px;
  --radius-input:  12px;

  /* Transitions */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 350ms ease-out;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows (Figma small-s/medium-s/large-s — tieň tónovaný do petrolejovej #135B6C) */
  --shadow-sm: 0 2px 4px -2px rgba(19,91,108,.05), 0 4px 8px -2px rgba(19,91,108,.15);
  --shadow-md: 0 4px 6px -2px rgba(19,91,108,.05), 0 12px 16px -4px rgba(19,91,108,.15);
  --shadow-lg: 0 8px 8px -4px rgba(19,91,108,.05), 0 20px 24px -4px rgba(19,91,108,.10);
  --shadow-xl: 0 8px 8px -4px rgba(19,91,108,.08), 0 24px 32px -4px rgba(19,91,108,.14);
  /* Button hover tiene z DS: primary/tertiary = orange (Primary Dark), secondary = teal (=shadow-md) */
  --shadow-btn: 0 4px 6px -2px rgba(178,95,0,.05), 0 12px 16px -4px rgba(178,95,0,.15);

  --container-max:     1280px; /* Figma container-large */
  --container-padding: clamp(1rem, 4.45vw, 4rem); /* 16px (mobil) → 64px (Figma padding-global) */
  --gutter:            clamp(1rem, 3vw, 2.5rem); /* bočný odstup od okraja viewportu */
  --nav-height:        95px; /* Figma Navbar */
}

/* RESET & BASE */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; appearance: none; -webkit-appearance: none; }  /* appearance:none = iOS Safari nepresvitá natívny button chrome (artefakty pri custom buttonoch bez .btn) */

/* Figma: H1–H3 Regular 400 / lh 1.1; H5–H6 Medium 550 / lh 1.4 (H4 interpolované) */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-text);
}
h4 { line-height: 1.3; letter-spacing: -1px; }  /* DS H4: Medium 550 (z h4,h5,h6), lh 1.3, ls -1 */

h1 { font-size: var(--text-7xl); }
h2 { font-size: var(--text-6xl); }
h3 { font-size: var(--text-5xl); }
h4 { font-size: var(--text-4xl); }
h5 { font-size: var(--text-3xl); }
h6 { font-size: var(--text-2xl); }

p { color: var(--color-text-muted); line-height: 1.5; }
em { font-style: italic; }

/* LAYOUT */

/* Pevná šírka 1620px, vycentrovaná; na menších obrazovkách responzívny bočný gutter
   (NEzužuje obsah na veľkých monitoroch - edge-to-edge 1620) */
.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

.section     { padding-block: var(--space-24); }
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: var(--space-32); }

/* HEADER - kompletné štýly v assets/css/header.css (topbar + navbar + mega menu +
   mobilný drill-down + search). Tu nič nedupluj. */

.site-header--static { position: relative; }

/* FOOTER (minimal default) */

.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer__logo { display: inline-flex; align-items: center; }
.site-footer__logo img { height: 32px; width: auto; display: block; }
.site-footer__brand {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  list-style: none;
}
.site-footer__menu li { list-style: none; }
.site-footer__menu a {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.site-footer__menu a:hover,
.site-footer__menu .current-menu-item a { color: var(--color-primary); }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.site-footer__copy { font-size: 0.9375rem; color: var(--color-text-muted); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__social-link {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.site-footer__social-link:hover { color: var(--color-primary); }

/* MAIN */

/* 🔴 `main.site-main` NEMÁ `min-height`. Scaffold z prvého commitu (9675584) tu mal
   `.site-main { min-height: 60vh }` - sticky-footer poistka zo starter témy, nikdy
   nie dizajnové rozhodnutie. Na tejto téme nechráni pred ničím: pätička má ~1590 px,
   takže aj stránka s ÚPLNE prázdnym `main` má 1685 px - viac než výška okna
   (namerané 2026-08-09 na všetkých 111 verejných URL: ani jedna by bez tohto
   pravidla nebola kratšia než viewport).
   Čo naopak robilo: naťahovalo `main` NAD výšku jeho obsahu, takže pod posledným
   blokom vznikala prázdna plocha vo farbe `body`. Jej výška = 60vh − výška obsahu,
   teda RASTIE s oknom a na krátkej stránke je najväčšia. Kde posledný blok dosadá
   na pätičku vlnkou (`wave-sep` na archívoch pomôcok a manuálu), sa ukázala ako
   svetlý pás medzi navy vlnkou a navy pätičkou: `/prakticke-pomocky/?typ=kalkulacky`
   6,92 px pri okne vysokom 1244 px, 100,53 px pri 1400 px.
   Medzeru NERIEŠ záporným marginom ani konštantou - margin nekreslí pozadie a číslo
   závisí od výšky okna. Nepridávaj `min-height` späť. */

/* SKIP LINK */

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 999;
  background: var(--color-text);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 500;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 1rem; }

/* RESPONSIVE */

@media (max-width: 767px) {
  .site-footer__top,
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}