/* =========================================================
   FORMEX – spoločné štýly (rýchle, bez frameworku)
   ========================================================= */

/* Reset / base */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --page-pad: 20px;
  --content-max: 1100px;

  --header-bg: #101b24;
  --header-fg: #ffffff;
  --header-border: rgba(255,255,255,0.10);
  --header-h: 72px;
  --header-hover: #2f80ed;
  --lang-button-active: #2f80ed;
}

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

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: #0f172a;
}

/* Links */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button, a[href] { font: inherit; }

/* =========================================================
   LAYOUT (spacing system)
   ========================================================= */

main { padding: 0; }

/* all regular sections centered */
main > section:not(.hero){
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 24px var(--page-pad);
}

/* HERO must be full-width */
main > section.hero{
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   HEADER (dark + sticky)
   ========================================================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid var(--header-border);
}

/* common horizontal padding for header content */
.site-header{
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.header-bar{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo-img{
  display: block;
  height: 40px;
  width: auto;
}

.header-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header a{ color: var(--header-fg); }

/* NAV baseline */
#siteNav{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* dropdown */
.nav-dd{ position: relative; }

.nav-dd > summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-dd > summary::-webkit-details-marker{ display: none; }
.nav-dd > summary::after{ content: "▾"; font-size: 12px; opacity: 0.7; }

.nav-dd-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--header-bg);
  color: var(--header-fg);
  border: 1px solid var(--header-border);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  gap: 4px;
  z-index: 100;
}

.nav-dd-menu a{
  padding: 8px 10px;
  border-radius: 8px;
  display: block;
  color: var(--header-fg);
}

.nav-dd-menu a:hover{
  background: var(--header-hover);
  text-decoration: none;
}

/* language + CTA */
.lang{
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

.lang button{
  border: 1px solid var(--header-border);
  background: transparent;
  color: var(--header-fg);
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
}

.lang button[aria-pressed="true"]{
  background: var(--lang-button-active);
  color: var(--header-fg);
}

/* CTA button */
.cta-btn{
  border: 1px solid var(--header-border);
  background: #2f80ed;
  color: var(--header-fg);
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
}

.cta-btn:hover{
  background: #2f80ed;
  color: #101b24;
  text-decoration: none;
}

/* hamburger button */
.menu-btn{
  display: none;
  border: 1px solid var(--header-border);
  background: transparent;
  color: var(--header-fg);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.menu-icon{ display: block; width: 24px; height: 24px; }

/* CTA visibility rules */
.cta-mobile { display: none !important; }
.cta-desktop { display: inline-flex !important; }

/* desktop header layout: logo | nav center | lang right */
@media (min-width: 821px){
  .site-header{
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .header-bar{ padding: 0; }

  #siteNav{
    flex: 1;
    flex-wrap: nowrap;
    justify-content: center;
    position: relative;
    --lang-w: 0px; /* set by JS */
  }

  #siteNav .lang{ margin-left: auto; }

  #siteNav::before{ content: none; }

  .menu-btn{ display: none; }
}

@media (min-width: 1110px){
  #siteNav::before{
    content: "";
    width: var(--lang-w);
    flex: 0 0 var(--lang-w);
  }
}

/* =========================================================
   TYPO
   ========================================================= */

h1{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 12px;
}

h2{ font-size: 1.4rem; margin: 0 0 12px; }
h3{ font-size: 1.1rem; margin: 0 0 6px; }

p{ margin: 0 0 16px; }

ul, ol{ padding-left: 20px; }
li{ margin-bottom: 8px; }

/* =========================================================
   HERO – 1 stĺpec (bez cardu), centrované, fullscreen-ish
   ========================================================= */

.hero.hero--bg{
  position: relative;
  overflow: hidden;

  /* B: pocit fullscreen, ale s max cap */
  min-height: clamp(560px, 100svh, 880px);

  /* vertikálne vycentrovať obsah */
  display: flex;
  align-items: center;

  padding: 56px 0 44px;
  scroll-margin-top: 90px;
}

/* background layer */
.hero.hero--bg .hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(0) scale(1.08);
  will-change: transform;
  z-index: 0;

  /* readability tuning on image */
  filter: brightness(0.9) contrast(0.9) saturate(0.9);
}

/* overlay */
.hero.hero--bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.60);
  z-index: 1;
}

.hero.hero--bg .hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.hero.hero--bg .hero-copy{
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.hero-title{ margin: 0 0 12px; }
.hero-lead{
  font-size: 1.1rem;
  margin: 0 auto 16px;
  color: rgba(15, 23, 42, 0.85);
  max-width: 64ch;
}

/* points as centered list without bullets */
.hero-points{
  list-style: none;
  padding: 0;
  margin: 0 auto 18px;
  display: grid;
  gap: 10px;
  max-width: 70ch;
}
.hero-points li{ margin: 0; }

.hero-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 10px;
}

.hero-meta{
  margin: 0 auto;
  font-size: 0.95rem;
  color: rgba(15, 23, 42, 0.75);
  max-width: 64ch;
}

/* buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}

.btn-primary{ background: #2f80ed; color: #fff; }
.btn-primary:hover{ text-decoration: none; opacity: 0.92; }

.btn-ghost{
  background: transparent;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.18);
}

/* HERO ghost button – white background */
.hero.hero--bg .btn-ghost {
  background: #ffffff;
}

.hero.hero--bg .btn-ghost:hover {
  background: #f4f6f8;
}

.btn-ghost:hover{ text-decoration: none; background: rgba(15, 23, 42, 0.06); }

/* =========================================================
   CARD SYSTEM (Variant A + C for all boxes)
   ========================================================= */

.card{
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #2f80ed;
  opacity: 0.9;
}

.card:hover,
.card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
  border-color: rgba(47, 128, 237, 0.45);
  text-decoration: none;
}

.card-title{ margin: 0 0 8px; }
.card-text{ margin: 0 0 14px; color: rgba(15, 23, 42, 0.85); }

.card-more{
  font-weight: 600;
  color: #2f80ed;
}
.card-more::after{ content: " →"; opacity: 0.85; }

/* mobile: no lift */
@media (max-width: 820px){
  .card:hover{ transform: none; box-shadow: none; }
}

/* =========================================================
   Sections (grids)
   ========================================================= */

.services-home{ padding-top: 0; } /* section already has padding from layout */
.services-head{ margin-bottom: 14px; }
.services-sub{ margin: 0; color: rgba(15, 23, 42, 0.75); }

.services-grid{ display: grid; gap: 14px; margin-top: 14px; }
.services-foot{ margin-top: 14px; }

.how-head{ margin-bottom: 14px; }
.how-sub{ margin: 0; color: rgba(15, 23, 42, 0.75); }
.how-grid{ display: grid; gap: 14px; margin-top: 14px; }
.how-foot{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.how-num{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid rgba(15, 23, 42, 0.16);
  margin-bottom: 10px;
}

.why-head{ margin-bottom: 14px; }
.why-sub{ margin: 0; color: rgba(15, 23, 42, 0.75); }
.why-grid{ display: grid; gap: 14px; margin-top: 14px; }
.why-foot{ margin-top: 16px; }

@media (min-width: 821px){
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .how-grid{ grid-template-columns: repeat(3, 1fr); }
  .why-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   MOBILE NAV
   ========================================================= */

@media (max-width: 820px){
  .menu-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cta-mobile{ display: inline-flex !important; }
  .cta-desktop{ display: none !important; }

  /* hide desktop CTA inside nav on mobile */
  #siteNav .cta-desktop,
  #siteNav .lang .cta-desktop{ display: none !important; }

  #siteNav{
    display: none;
    width: 100%;
    margin-top: 10px;
    padding: 10px var(--page-pad) 16px;
    border-top: 1px solid var(--header-border);
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
  }

  #siteNav[data-open="true"]{ display: flex; }

  #siteNav a,
  .nav-dd > summary{ width: 100%; }

  .lang{
    margin-left: 0;
    align-self: flex-end;
  }

  .nav-dd-menu{
    position: static;
    min-width: auto;
    width: 100%;
    border-radius: 10px;
    text-align: right;
  }

  .nav-dd-menu a{ text-align: right; }

  /* kill iOS/Chrome tap highlight + focus rings (mobile only) */
  #menuBtn,
  #menuBtn:focus,
  #menuBtn:focus-visible,
  .menu-btn,
  .menu-btn:focus,
  .menu-btn:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  button{
    -webkit-appearance: none;
    appearance: none;
  }

  #siteNav a,
  #siteNav summary,
  #siteNav button{
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
  }
}

/* =========================================================
   FOOTER (loaded via /partials/footer.html)
   ========================================================= */

.site-footer{
  background: #101b24;
  color: #ffffff;
  margin-top: 40px;
}

.site-footer .footer-inner{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 30px var(--page-pad) 20px;
}

.footer-cols{
  display: grid;
  gap: 20px;
}

.footer-col h4{ margin: 0 0 8px; }

.footer-col p,
.footer-col li{
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}

.footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col a{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.footer-col a:hover{ text-decoration: underline; color: #fff; }

.footer-logo{
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.footer-bottom{
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}

@media (min-width: 821px){
  .footer-cols{ grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* =========================================================
   CONTACT FORM (uses .card accent strip)
   ========================================================= */

.form-card {
  /* .card už má border + pásik + padding, tu len doladenie */
  padding: 18px 18px 16px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.field label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: #fff;
  color: #0f172a;
  padding: 10px 12px;
  border-radius: 0; /* aby sedelo k ostrým kartám */
  outline: none;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(47, 128, 237, 0.65);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.15);
}

.form-actions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.form-note {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(15, 23, 42, 0.75);
}

/* checkbox row */
.check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2f80ed;
}

.urgent-word {
  color: #2f80ed;
  font-weight: 800;
}

/* 2 columns on desktop */
@media (min-width: 821px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .field-full {
    grid-column: 1 / -1;
  }
  .form-actions {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .form-actions .btn {
    justify-self: start;
  }
}

/* =========================================================
   URGENT form state
   ========================================================= */

.form-card.is-urgent {
  border-color: #2f80ed;
  box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.25);
}

.form-card.is-urgent::before {
  background: #2f80ed;
}

/* =========================================================
   FORM VALIDATION (show after submit attempt)
   ========================================================= */

.form-card .error-text {
  display: none;
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: #b42318;
}

/* show invalid states only after user tries to submit */
.form-card.was-submitted .field input:invalid,
.form-card.was-submitted .field select:invalid,
.form-card.was-submitted .field textarea:invalid {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.14);
}

.form-card.was-submitted .field input:invalid + .error-text,
.form-card.was-submitted .field select:invalid + .error-text,
.form-card.was-submitted .field textarea:invalid + .error-text {
  display: block;
}

/* =========================================================
   COOKIE BANNER
   ========================================================= */

.cookie-banner{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;

  width: min(920px, calc(100% - 24px));
  background: #101b24;
  color: #ffffff;

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);

  padding: 16px 18px;
  display: none; /* JS zapne */
}

.cookie-banner.show{
  display: block;
}

.cookie-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-text{
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}

.cookie-text a{
  color: #2f80ed;
  text-decoration: none;
  font-weight: 750;
}

.cookie-text a:hover{
  text-decoration: underline;
}

.cookie-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.cookie-btn:hover{
  background: rgba(255,255,255,0.12);
}

.cookie-btn.primary{
  background: #2f80ed;
  border-color: transparent;
}

.cookie-btn.primary:hover{
  filter: brightness(0.95);
}

@media (max-width: 720px){
  .cookie-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-actions{
    width: 100%;
  }
  .cookie-btn{
    flex: 1;
  }
}

/* =========================================================
   WORK-IN-PROGRESS MODAL (same style as cookie banner)
   ========================================================= */

.wip-backdrop{
  position: fixed;
  inset: 0;
  z-index: 100000; /* nad cookie banner */
  display: none; /* JS zapne */
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0,0,0,0.45);
}

.wip-backdrop.show{
  display: flex;
}

/* square modal: width == height, based on cookie width */
.wip-modal{
  width: min(520px, calc(100% - 40px));
  background: rgba(16, 27, 36);
  backdrop-filter: blur(4px);

  color: #ffffff;

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);

  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

.wip-text{
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
}

.wip-actions{
  display: flex;
  justify-content: center;
}