/* Global Detect site overrides loaded after the legacy theme. */

.footer-legal {
  margin-top: 26px;
  font-size: 0.78rem;
}

.link-inherit {
  color: inherit;
  text-decoration: none;
}

/* Sekcie s triedou .text-light / .dark-scheme z legacy témy nastavujú farbu
   odkazov cez `.text-light a` (css/style.css:212). To je špecificita 0-1-1
   a prebíja .link-inherit (0-1-0), takže telefón a e-mail v kontaktnom pruhu
   dostali svetlú farbu aj na svetlom podklade. Opt-out musí byť vyššie. */
.text-light a.link-inherit,
.dark-scheme a.link-inherit {
  color: inherit;
}

.link-on-dark {
  color: #fff;
  text-decoration: underline;
}

.cf-status.is-success {
  text-align: center;
  padding: 26px 20px;
  color: #fff;
  background: rgba(80, 180, 120, 0.2);
  border: 1px solid rgba(120, 210, 150, 0.4);
  border-radius: 14px;
  font-size: 1.05rem;
}

.lead.content-narrow-760 {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.img-fluid.certificate-image {
  max-width: 49%;
}

/* These selectors retain the precedence of the former inline !important
   declarations while making the two intentional hero offsets explicit. */
#section-hero .abs-centered.hero-content-offset-60 {
  top: 60% !important;
}

#section-hero .abs-centered.hero-content-offset-56 {
  top: 56% !important;
}

/* =========================================================
   Spoločné responzívne opravy (načítané na všetkých stránkach)
   ========================================================= */

/* Hlavička na úzkych telefónoch: pravý blok (jazyky + Konfigurátor + hamburger)
   sa nezmestí vedľa loga a hamburger (menu) je vytlačený mimo obrazovky.
   Zmenšíme logo a "Konfigurátor" tlačidlo skryjeme, aby sa hamburger vždy
   zmestil. (Na mobile sa zobrazuje .logo-main, nie .logo-mobile.) */
@media (max-width: 575px) {
  header .logo-main,
  header .logo-scroll,
  header .logo-mobile { max-width: 130px !important; }
  header .lang-switcher { font-size: 11px !important; gap: 2px !important; }
  header .lang-switcher a { padding: 3px 7px !important; }  /* 29 px široké, nad 24x24 z WCAG 2.2 */
  header .de-flex-col .btn-main.fx-slide { display: none !important; }
}
@media (max-width: 360px) {
  header .logo-main,
  header .logo-scroll,
  header .logo-mobile { max-width: 115px !important; }
}

/* "Kontakt" v menu chceme len na mobile (v hamburgeri). Na desktope ho
   skryjeme, aby menu vyzeralo presne ako pôvodne (bez položky Kontakt).

   Pravidlo bolo pôvodne viazané na názov súboru (`a[href$="contact.html"]`).
   Nemecká verzia má stránku `kontakt.html`, takže ho minulo, položka sa
   zobrazila navyše a menu sa zalomilo na dva riadky pri každej šírke. Trieda
   je jazykovo neutrálna a rovnakú už používa konfigurátor.

   Viaže sa na stav hlavičky, nie na šírku. Pôvodných 992 px nesúhlasilo
   s hranicou, pri ktorej hlavička prepína na hamburger (1400 px), takže medzi
   nimi bolo pásmo s hamburgerom, v ktorého menu Kontakt chýbal, a v hlavičke
   nebol iný odkaz naň. */
header:not(.header-mobile) #mainmenu > li.menu-kontakt-mobile {
  display: none !important;
}

/* Kontaktné položky (Adresa/Telefón/E-mail) v sekcii "Spojme sa" — na mobile
   zarovnať vľavo na rovnaký začiatok, aby neboli "schodíky" (každá inak
   vycentrovaná podľa dĺžky textu). */
@media (max-width: 767px) {
  .d-flex.justify-content-center:has(> i.icofont-google-map),
  .d-flex.justify-content-center:has(> i.icofont-phone),
  .d-flex.justify-content-center:has(> i.icofont-envelope) {
    justify-content: flex-start !important;
    padding-left: 6px;
  }
}

/* Pätička na mobile vycentrovaná — platí na všetkých stránkach.
   CTA blok vycentrujeme hneď ako sa zalomí pod seba (≤991px), zvyšok
   pätičky (logo, ikony, nadpisy, odkazy, kontakt) na telefónoch (≤767px). */
@media (max-width: 991px) {
  .footer-cta-banner { text-align: center; }
}
@media (max-width: 767px) {
  .footer-main { text-align: center; }
  .footer-main .footer-social { justify-content: center; }
  .footer-main .footer-heading { padding-left: 0; }
  .footer-main .footer-heading::before { display: none; }
  /* Kontaktná karta: vycentrovaná ako celok, ale položky vnútri vľavo,
     aby boli ikony zarovnané pod sebou (nie "schodíky"). */
  .footer-main .footer-contact-card { display: inline-block; text-align: left; }
  .footer-main .footer-contact-item { justify-content: flex-start; }
}

/* Hero nadpis (názov služby) na úzkych telefónoch — dlhé slová ako
   OUTSOURCING / CONTRACTING / CYBERSECURITY / MANAGEMENT sa pri veľkom
   fs-100/fs-120 orežú. Zmenšíme ho, aby sa vždy zmestil celý. */
@media (max-width: 575px) {
  #section-hero h1:not(.hero-subheadline) {
    font-size: 7.5vw !important;    /* škáluje podľa šírky, aby sa dlhé slovo (CYBERSECURITY) zmestilo na 1 riadok */
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    overflow-wrap: normal;
    word-break: normal;             /* nedeliť slovo uprostred */
  }
}
/* iPad / tablet (576–1199 px): 12vw je priveľa, dlhé slová (OUTSOURCING,
   CYBERSECURITY) sa orežú — zmenšíme, aby sa celé zmestili. */
@media (min-width: 576px) and (max-width: 1199px) {
  #section-hero h1:not(.hero-subheadline) {
    font-size: 8.5vw !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Na mobile vycentrovať obsahové bloky s podnadpisom (.subtitle + nadpis +
   text + tlačidlo), ktoré sú na desktope v stĺpci zarovnané vľavo (napr.
   úvodné sekcie služieb "Čo je ..."). Ostatné (už text-center) ostávajú. */
@media (max-width: 991px) {
  .container [class*="col-"]:has(> .subtitle) {
    text-align: center;
  }
}
/* Odznak "Dobrý anjel" v pätičke pod sociálnymi sieťami.
   inline-block => na desktope vľavo (pätička vľavo), na mobile vycentrovaný
   (footer-main má na mobile text-align:center). */
.footer-angel-img {
  display: block;
  width: 110px !important;     /* prebije .footer-main ... img { width: 260px } zo style.css */
  max-width: 110px !important;
  height: auto;
  margin: 22px auto 0;         /* mobil: vycentrované (pätička je na mobile v strede) */
}
/* Desktop: prvý stĺpec pätičky (logo, sociálne siete, Dobrý anjel) zarovnať
   vľavo na rovnaký okraj (template ho inak centruje). */
@media (min-width: 768px) {
  .footer-main > .container > .row > div:first-child { text-align: left; }
  .footer-main .footer-social { justify-content: flex-start; }
  .footer-angel-img { margin-left: 0; margin-right: auto; }
  /* Logo má v PNG priehľadný okraj — posunieme ho hore a vľavo, nech jeho
     viditeľný okraj sedí s nadpismi stĺpcov aj s ikonami/odznakom. */
  .footer-main > .container > .row > div:first-child > img:first-of-type {
    margin-top: -20px;
    margin-left: -24px;
  }
}

/* Zvislý pruh "Späť hore" (.scrollbar-v) a zvislý popis (.float-text) sú
   position:fixed a zaberajú pás x = 0…56px. Legacy téma ich skrýva až pod
   768px (css/style.css:12905), ale voľný okraj na ne vznikne až od 1200px.
   Medzi tým ležia na obsahu — na 768px prekrývali 26 textových prvkov.
   Skrývame ich na celom rozsahu, kde na ne nie je miesto. Override je tu,
   nie v téme, pretože style.css načítavajú aj en/ a de/. */
@media only screen and (max-width: 1199px) {
  .scrollbar-v,
  .float-text {
    display: none;
  }
}

/* "Konfigurátor" ako položka v hamburger menu tam, kde je tlačidlo Konfigurátor
   v hlavičke skryté, teda do 767px vrátane. Legacy téma skrýva
   `header a.btn-main` v @media (max-width: 767px); tento breakpoint s ním musí
   súhlasiť, inak vznikne pásmo bez akéhokoľvek vstupu do konfigurátora. */
@media (min-width: 768px) {
  .menu-konfig-mobile { display: none !important; }
}

/* Rytmus odsadení: celoplošný fotopás musí klesať spolu so sekciami okolo neho.
   Utility .pt-80/.pb-80 (css/style.css:7700 a :7688) nie sú v žiadnom media
   query a držia 80 px, kým `section` klesá na 60 px pod 1200 px
   (css/style.css:12672) a na 40 px pod 768 px (:12919). Pás je preto na desktope
   najtesnejší zo všetkého a na mobile najširší — presne naopak, než ako je
   navrhnutý. Namerané pred opravou: 51 susedstiev, kde je pás širší než bežná
   sekcia vedľa neho, na 1194 a 768 px 1,33x a na 390 px rovno dvojnásobne.
   Dávame mu rovnaký zostup a držíme pomer 0,8, ktorý používa desktop.
   `section.pt-80` je 0-1-1 a prebíja `.pt-80` (0-1-0); ani jedna z tých utilít
   nemá nikde v kaskáde !important.
   Override je tu, nie v téme: css/style.css načítavajú aj en/ a de/. */
@media (max-width: 1199px) {
  section.pt-80 { padding-top: var(--space-5xl); }      /* 48 px = 0,8 x 60 */
  section.pb-80 { padding-bottom: var(--space-5xl); }
}
@media (max-width: 767px) {
  section.pt-80 { padding-top: var(--space-3xl); }      /* 32 px = 0,8 x 40 */
  section.pb-80 { padding-bottom: var(--space-3xl); }
}

/* Tá istá chyba o stupeň nižšie: .pt-60 (css/style.css:7698) tiež nie je
   v žiadnom media query. Používa ju #section-client-challenge na dvanástich
   prípadových štúdiách, takže na 390 px mala tá sekcia 60 px zhora proti 40 px
   bežnej sekcie a proti 32 px vlastného spodku. Rovnaký zostup, zachovaný pomer
   0,75 medzi vrchom a spodkom, ktorý má sekcia na desktope (60 proti 80).
   .pb-60 sa v slovenskom markupe nepoužíva ani raz, preto tu nie je. */
@media (max-width: 1199px) {
  section.pt-60 { padding-top: var(--space-3xl); }      /* 32 px */
}
@media (max-width: 767px) {
  section.pt-60 { padding-top: var(--space-xl); }       /* 24 px */
}

/* Vlastné rozmery obrázkov (zistenie 9). Do každej značky <img> pribudli
   width/height podľa skutočného súboru, aby si prehliadač vedel vyhradiť miesto
   ešte pred stiahnutím obrázka a stránka pri načítaní neposkakovala.
   Bez `height: auto` je to ale regresia: tam, kde štýly určujú len šírku, začne
   výškový atribút výšku vynucovať a obrázok sa roztiahne. Namerané na 2100
   obrázkoch: 657 z nich zmenilo výšku, logo v pätičke zo 104 px na 300 px.
   Toto pravidlo má špecificitu 0-0-1, teda najnižšiu možnú — čokoľvek, čo výšku
   nastavuje zámerne, ho prebije. */
img { height: auto; }