/* ==========================================================================
   CLEANTIME: mobilná vrstva
   Načítava sa ako posledná na všetkých stránkach, aby vedela prebiť
   predchádzajúce súbory. Rieši tri veci:
     1. žiadne vodorovné rolovanie, nikde a za žiadnych okolností
     2. odlišnosti iOS Safari a Androidu (výška okna, zoom, bezpečné zóny)
     3. ovládateľnosť prstom a plynulosť na slabších telefónoch
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Základ: iba zvislé rolovanie
   overflow-x: clip namiesto hidden, pretože hidden na html/body ruší
   position: sticky u potomkov (hlavička na právnej stránke).
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
}

/* Nič sa nesmie roztiahnuť cez šírku obrazovky. */
img, svg, video, canvas, iframe, table {
  max-width: 100%;
}
img, video, canvas { height: auto; }

/* Dlhé slová, e-mailové adresy a URL nesmú tlačiť rozloženie do šírky. */
h1, h2, h3, h4, p, li, dd, dt, a, summary, td, th, figcaption, label, button {
  overflow-wrap: break-word;
  word-break: normal;
}
/* Automatické delenie slov tu zámerne nie je. Stránka má lang="sk", takže
   prehliadač delil aj slová, ktoré sa na riadok pohodlne zmestia
   („poško-deniu“). Proti pretečeniu stačí overflow-wrap vyššie. */
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; }

/* --------------------------------------------------------------------------
   2. Ľahšie obrázky
   WebP je podporovaný v Safari od verzie 14 aj v Chrome pre Android.
   Fotky vážili 2 MB za kus, teraz 114 KB a na telefóne 28 KB.
   -------------------------------------------------------------------------- */
.hero-backdrop {
  background-image: url('../images/cleantime-hero-interior-v2.webp');
}
body[data-page="about"] .about-hero-backdrop {
  background-image: url('../images/cleantime-services-interior-v1.webp');
}

@media (max-width: 900px) {
  .hero-backdrop {
    background-image: url('../images/cleantime-hero-interior-v2-mobile.webp');
  }
  body[data-page="about"] .about-hero-backdrop {
    background-image: url('../images/cleantime-services-interior-v1-mobile.webp');
  }
}

/* <picture> preberá triedu po pôvodnom <img>, vnútorný obrázok potrebuje
   rovnaké rozmery, inak by porovnávací posuvník stratil výplň. */
.before-after-image > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Zvislé gesto nech roluje stránku, vodorovné nech ťahá posuvník. */
.before-after-range { touch-action: pan-y; }

/* CTA sa do navigácie vkladá skriptom, mimo otvoreného menu nesmie byť vidno. */
.nav-cta { display: none !important; }

/* Ikony položiek patria len do mobilného menu. Na širokej obrazovke je
   navigácia úzka pilulka a ikony by ju rozhodili. Skrývame ich tu, mimo
   media query, aby sa nezobrazili ani bez načítaného mobilného bloku:
   SVG bez rozmerov by sa inak roztiahol na svoju predvolenú veľkosť. */
.nav-icon { display: none; }

/* --------------------------------------------------------------------------
   3. Bezpečné zóny (výrez displeja, indikátor domov)
   Týka sa iPhonov s výrezom, v na šírku otočenom telefóne aj Androidov
   s gestami namiesto tlačidiel.
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  .site-header,
  .booking-header {
    padding-left: max(5%, env(safe-area-inset-left));
    padding-right: max(5%, env(safe-area-inset-right));
  }
  .cc-banner {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
  }
  .site-footer, footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   4. Telefóny
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* --- Formuláre: iOS priblíži stránku, ak má pole menej ako 16 px ------- */
  input, select, textarea,
  .contact-form input, .contact-form textarea,
  .booking-form input, .booking-form textarea,
  .form-stack input, .form-stack textarea, .form-stack select,
  .detail-field input, .detail-field select,
  .auth-card input {
    font-size: 16px;
    max-width: 100%;
  }
  input, select, textarea { border-radius: 10px; }

  /* Číselné a e-mailové polia nech otvoria správnu klávesnicu. */
  input[type="number"] { -moz-appearance: textfield; }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* Logo v hlavičke je na telefóne o čosi menšie, hlavička sama je nižšia. */
  body[data-page] .site-header .brand img,
  .admin-side .brand img,
  .auth-card .brand img {
    height: 46px;
  }

  /* Administrácia: bočný panel ide nad obsah ako vodorovný pás, nie vedľa. */
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px; gap: 10px 14px; }
  .admin-side .brand { margin-bottom: 0; padding: 0; }
  .admin-side .brand img { height: 34px; }
  .admin-side nav { display: flex; flex-wrap: wrap; gap: 4px 8px; width: 100%; }
  .admin-side nav .nav-group-label { display: none; }
  .admin-side nav a { padding: 6px 10px; font-size: .78rem; }
  .admin-side nav .admin-nav-icon { width: 15px; height: 15px; }
  .admin-side form { margin-top: 0; }
  .admin-main { padding: 24px 5%; }

  /* --- Ciele na dotyk: Apple odporúča 44 px, Android 48 px -------------- */
  .site-header nav a,
  .menu-toggle,
  .button,
  .slot,
  .text-link,
  .footer-legal a,
  .footer-legal button,
  .cc-btn,
  .cc-link {
    min-height: 44px;
  }
  .button, .cc-btn {
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Odkaz je <a>, nastavenia cookies sú <button>. Tlačidlo si text centruje
     samo, odkaz ho po zväčšení na 44 px nechal hore, takže dvojica sedela
     rozdielne vysoko. Rovnaké zobrazenie ich zarovná na jednu linku. */
  body[data-page] .footer-legal a,
  body[data-page] .footer-legal button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
  }
  /* body[data-page] dorovnáva špecifickosť pravidla na stránke O nás,
     ktoré si vynucuje display: block a čiarky by nezostali v strede. */
  body[data-page] .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    padding: 0;
  }
  .calendar-day { min-height: 44px; }

  /* --- Menu -------------------------------------------------------------
     Pôvodne sa len prepínalo display: none / grid, čo prehliadač animovať
     nevie, takže menu naskočilo skokom. Panel teraz zostáva v dokumente
     a otvára sa cez opacity, transform a visibility. Vypnutý stav si drží
     pointer-events: none, aby sa nedal omylom klepnúť.
     Selektory začínajú na body[data-page], aby dorovnali špecifickosť
     pravidiel scopovaných na jednotlivé stránky (home, about, legal).
     ---------------------------------------------------------------------- */
  body[data-page] .site-header nav {
    display: grid !important;
    position: absolute;
    top: calc(100% + 8px); right: 5%; left: 5%;
    gap: 4px;
    max-height: calc(100dvh - 104px);
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(23, 32, 28, .1);
    border-radius: 18px;
    background: rgba(248, 250, 245, .97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 44px rgba(11, 25, 18, .16);
    color: var(--ink);
    transform-origin: top center;

    /* Zatvorený stav. Kratšie časy = zatvorenie pôsobí svižnejšie. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0) scale(.97);
    transition: opacity .2s ease,
                transform .24s cubic-bezier(.16, 1, .3, 1),
                visibility .24s;
  }

  body[data-page] .site-header nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .3s ease,
                transform .44s cubic-bezier(.16, 1, .3, 1),
                visibility .44s;
  }

  /* Položky: pri otváraní prilietajú s odstupom, pri zatváraní naraz. */
  body[data-page] .site-header nav a {
    display: flex; align-items: center;
    min-height: 48px; padding: 12px 15px;
    border-radius: 12px;
    font-size: .97rem; font-weight: 650;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition: opacity .16s ease, transform .18s ease, background-color .2s ease;
  }
  body[data-page] .site-header nav.open a {
    opacity: 1;
    transform: none;
    transition: opacity .34s ease,
                transform .46s cubic-bezier(.16, 1, .3, 1),
                background-color .2s ease;
  }
  body[data-page] .site-header nav.open a:nth-child(1) { transition-delay: .06s; }
  body[data-page] .site-header nav.open a:nth-child(2) { transition-delay: .11s; }
  body[data-page] .site-header nav.open a:nth-child(3) { transition-delay: .16s; }
  body[data-page] .site-header nav.open a:nth-child(4) { transition-delay: .21s; }
  body[data-page] .site-header nav.open a:nth-child(5) { transition-delay: .26s; }
  body[data-page] .site-header nav a:active { background: rgba(23, 32, 28, .08); }

  /* Ikony položiek. Vkladá ich app.js, kreslia sa cez currentColor. */
  body[data-page] .site-header nav .nav-icon {
    display: grid; place-items: center;
    flex: 0 0 34px; width: 34px; height: 34px;
    margin-right: 12px;
    border-radius: 11px;
    background: rgba(23, 32, 28, .06);
    color: #3f5142;
    opacity: 0;
    transform: translate3d(-8px, 0, 0) scale(.84);
    transition: opacity .26s ease,
                transform .5s cubic-bezier(.16, 1, .3, 1),
                background-color .26s ease;
  }
  body[data-page] .site-header nav .nav-icon svg {
    display: block; width: 19px; height: 19px;
  }
  body[data-page] .site-header nav.open .nav-icon {
    opacity: 1;
    transform: none;
  }
  /* Ikona prilieta o chlp neskôr než text položky, aby sa to pekne rozvinulo. */
  body[data-page] .site-header nav.open a:nth-child(1) .nav-icon { transition-delay: .12s; }
  body[data-page] .site-header nav.open a:nth-child(2) .nav-icon { transition-delay: .17s; }
  body[data-page] .site-header nav.open a:nth-child(3) .nav-icon { transition-delay: .22s; }
  body[data-page] .site-header nav.open a:nth-child(4) .nav-icon { transition-delay: .27s; }
  body[data-page] .site-header nav.open a:nth-child(5) .nav-icon { transition-delay: .32s; }
  body[data-page] .site-header nav a:active .nav-icon { transform: scale(.9); }
  /* Na tmavom tlačidle Rezervovať ide ikona bez podkladu, samotné tlačidlo
     ju odlíši dosť. Šírku necháme, drží odstup od textu. */
  body[data-page] .site-header nav .nav-cta .nav-icon {
    background: none;
    color: #fff;
    margin-right: 8px;
  }

  /* Indikátor posuvu pod odkazmi nedáva vo zvislom menu zmysel. */
  body[data-page] .site-header nav .nav-hover-indicator { display: none !important; }

  /* Tlačidlo Rezervovať je v menu užitočnejšie než skryté. */
  body[data-page] .site-header nav.open .nav-cta {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-height: 48px; margin-top: 4px;
    background: var(--ink); color: #fff;
  }

  /* Stmavenie stránky za menu. Pseudoprvok hlavičky, aby netreba nový
     element v markupe. Hlavička má vlastný stacking context, takže
     z-index: -1 ho položí pod jej obsah, ale nad stránku. */
  body[data-page] .site-header::after {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background: rgba(12, 26, 18, .38);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
  }
  body[data-page] .site-header.nav-open::after {
    opacity: 1;
    visibility: visible;
  }

  /* Prepínač: jemná odozva na stlačenie a zvýraznenie v otvorenom stave. */
  body[data-page] .menu-toggle {
    border-radius: 999px;
    transition: background-color .24s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
  }
  body[data-page] .site-header.nav-open .menu-toggle {
    background: rgba(23, 32, 28, .09);
  }
  body[data-page] .menu-toggle:active { transform: scale(.93); }

  /* --- Typografia: obrie nadpisy sa na 360 px nezmestia ------------------ */
  .hero h1,
  .section h2,
  .cta-panel h2,
  .booking-content h1,
  .booking-content h2,
  .error-page h1 {
    letter-spacing: -.045em;
  }
  body[data-page="legal"] .legal-hero h1 { font-size: clamp(2.3rem, 10vw, 3.1rem); }
  body[data-page="home"] .trust-panel h2 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  body[data-page="about"] .about-hero h1 { letter-spacing: -.055em; }

  /* --- Tabuľky: rolujú vo vlastnom rámci, nie celou stránkou ------------ */
  .legal-table-wrap,
  .admin-card,
  .booking-summary {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* Chyba v style.css: min-width sedel na rolovacom obale, nie na tabuľke,
     takže obal sám pretekal cez šírku displeja. */
  .admin-table { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table table { min-width: 520px; }

  /* --- Kalendár a termíny ----------------------------------------------- */
  .calendar { max-width: 100%; gap: 3px; }
  .calendar-weekday { font-size: .64rem; }
  .slots { gap: 7px; }
  .slot { flex: 1 1 auto; min-width: 82px; text-align: center; }

  /* --- Rezervácia --------------------------------------------------------
     Karta služby je na šírku mriežka 1fr auto, kde cena sedí v druhom
     stĺpci cez obidva riadky (grid-row: 1/3). Na úzkom displeji z toho
     vznikalo odsadenie a dlhý cenník sa orezával. Flex stĺpec to celé
     zjednoduší: nadpis, popis a cena idú pod sebou od ľavého okraja.
     ---------------------------------------------------------------------- */
  body[data-page="booking"] .booking-service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
  }
  body[data-page="booking"] .booking-service span,
  body[data-page="booking"] .booking-service small,
  body[data-page="booking"] .booking-service b {
    width: 100%;
    margin: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
  }
  body[data-page="booking"] .booking-service span { line-height: 1.1; }
  /* Cena ako štítok, aby sa oddelila od popisu a nepôsobila zabudnuto.
     nowrap drží cenník na jednom riadku. Bez neho si štítok bral šírku
     podľa najkratšieho slova a text ako „Individuálne podľa obhliadky“
     sa lámal do troch riadkov. */
  body[data-page="booking"] .booking-service b {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    margin-top: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(23, 32, 28, .07);
    font-size: .79rem;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  body[data-page="booking"] .booking-service.selected b {
    background: rgba(23, 32, 28, .12);
  }

  .booking-nav { gap: 12px; }
  .booking-nav .button { flex: 1 1 auto; }

  /* --- Súhlas s cookies: na malom displeji radšej ako spodný panel ------- */
  .cc-actions { gap: 8px; }
  .cc-dialog-foot { gap: 8px; }
  .cc-groups { max-height: 52vh; }

  /* --- Plynulosť: rozmazanie pozadia je na slabších telefónoch drahé ----- */
  .site-header.scrolled,
  .site-header nav,
  .cc-overlay {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  /* Paralaxa a veľké tiene na dotykových displejoch len uberajú snímky. */
  .hero-backdrop { will-change: auto; transform: none !important; }
  .orb { display: none; }
}

/* --------------------------------------------------------------------------
   5. Nízke displeje na šírku (telefón otočený nabok)
   100vh sa na iOS počíta so schovanou lištou, preto min-height radšej uvoľniť.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  .hero, .about-hero, .booking-shell { min-height: 0; }
  .hero { padding-block: 72px 56px; }
}

/* --------------------------------------------------------------------------
   6. Dotykové zariadenia bez ohľadu na šírku
   Na tablete sa hover nikdy nespustí, tak nech efekt neblokuje prvý dotyk.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .button:hover, .cc-btn:hover, .service-card:hover {
    transform: none;
  }
  .site-header .nav-hover-indicator { display: none; }
}

/* --------------------------------------------------------------------------
   7. Obmedzený pohyb
   Menu musí zostať funkčné, len bez posunu a bez postupného nabiehania
   položiek. Priehľadnosť si necháme, aby prechod nebol úplne surový.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  body[data-page] .site-header nav,
  body[data-page] .site-header nav.open,
  body[data-page] .site-header nav a,
  body[data-page] .site-header nav.open a,
  body[data-page] .site-header nav .nav-icon,
  body[data-page] .site-header nav.open .nav-icon {
    transform: none !important;
    transition-duration: .12s !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   Rezervácia na telefóne: navigácia kroku ukotvená dole

   „Späť“ a „Pokračovať“ boli v bežnom toku pod obsahom, takže sa pri
   dlhšom kroku stratili pod okrajom a rozbaľovací zoznam sa s nimi
   prekrýval. Teraz sedia na spodku obrazovky ako pruh s vlastným
   podkladom, takže sú stále po ruke a nič cez ne nepresvitá.
   ========================================================================== */
@media (max-width: 760px) {
  body[data-page="booking"] .booking-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 10px;
    /* Záporné okraje vyrušia odsadenie .booking-content, aby pruh
       siahal od kraja po kraj displeja. */
    margin: 26px -7% 0;
    padding: 11px 7%;
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: rgba(248, 248, 244, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  body[data-page="booking"] .booking-nav .button {
    flex: 1 1 0;
    min-height: 48px;
  }

  /* Rozbaľovací zoznam musí zostať nad ukotveným pruhom. */
  body[data-page="booking"] .booking-select { position: relative; z-index: 8; }
  body[data-page="booking"] .booking-select.is-open,
  body[data-page="booking"] .booking-select.is-closing { z-index: 20; }
  body[data-page="booking"] .booking-select-menu {
    z-index: 21;
    background: #fff;
  }
}

/* --------------------------------------------------------------------------
   Rezervácia na telefóne: titulok kroku
   Spodná hranica clamp bola 2,5 rem, teda 40 px. Pri tejto veľkosti sa
   „Kde máme spraviť čistotu?“ lámalo na tri riadky, hoci sa pokojne zmestí
   na jeden. Zmenšíme písmo a necháme riadky vyvážiť, keď sa predsa zalomí.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body[data-page="booking"] .booking-content h1,
  body[data-page="booking"] .booking-content h2 {
    font-size: clamp(1.7rem, 7.4vw, 2.4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
    margin-bottom: 26px;
    text-wrap: balance;
  }
  body[data-page="booking"] .booking-step-eyebrow { margin-bottom: 6px; }
}