/* ==========================================================================
   PLOŠINA Senohraby - Modern UI layer (2026)
   Navrstvené NAD pôvodný template style.css. Nemení layout ani sekcie,
   len modernizuje vizuál. Farebnosť zachovaná (oranžová #f14814 -> #ffad1e).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --brand-orange: #f14814;
  --brand-amber:  #ffad1e;
  --brand-grad:   linear-gradient(100deg, #f14814 0%, #ffad1e 100%);
  --brand-grad-soft: linear-gradient(100deg, rgba(241,72,20,.14), rgba(255,173,30,.14));
  --ink:      #140f0c;
  --ink-2:    #110a06;
  --ink-soft: #1c1512;
  --paper:    #faf8f5;
  --paper-2:  #ffffff;
  --text-dark:  #241d18;
  --text-muted: #7d746d;
  --radius:   18px;
  --radius-sm: 12px;
  --shadow-sm: 0 4px 20px rgba(20,15,12,.06);
  --shadow-md: 0 12px 40px rgba(20,15,12,.10);
  --shadow-brand: 0 12px 34px rgba(241,72,20,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   1. Základ - typografia, plynulý scroll, rytmus
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

.page,
.page p,
.page li,
.page a,
.page div,
.page span,
.page dd,
.page dt,
.page address {
  font-family: 'Plus Jakarta Sans', 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page p { line-height: 1.7; }

.page h1, .page h2, .page h3,
.page h4, .page h5, .page h6 {
  font-family: 'Plus Jakarta Sans', 'Raleway', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 700;
}
/* Veľké nadpisy verzálkami chcú jemne kladný spacing */
.page h1.text-uppercase, .page h2.text-uppercase, .page h3.text-uppercase,
.page .text-uppercase h1, .page .text-uppercase h2, .page .text-uppercase h3,
.page h1 .text-uppercase, .page h2 .text-uppercase, .page h3 .text-uppercase {
  letter-spacing: 0.04em;
  font-weight: 800;
}

/* Anchor sekcie odsadené pod fixnú navigáciu */
section[id], div[id="cenik"], div[id="reference"], div[id="foto"], div[id="kontakt"] {
  scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   2. Signature divider - gradient, modernejší
   -------------------------------------------------------------------------- */
.page .divider.bg-mantis,
.page hr.bg-mantis {
  width: 64px;
  height: 4px;
  border-radius: 99px;
  background: var(--brand-grad) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Tlačidlá - gradient, jemný lift, stavy
   -------------------------------------------------------------------------- */
.page .btn-primary,
.page .btn.btn-primary {
  background: var(--brand-grad) !important;
  border: none !important;
  border-radius: 99px;
  padding: 15px 34px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff !important;
  box-shadow: var(--shadow-brand);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.page .btn-primary:hover,
.page .btn.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 18px 44px rgba(241,72,20,.36);
  color: #fff !important;
}
.page .btn-primary:active,
.page .btn.btn-primary:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 8px 22px rgba(241,72,20,.28);
}

/* --------------------------------------------------------------------------
   4. HERO - bohatšie tmavé pozadie, čitateľný scrim, glass karty
   -------------------------------------------------------------------------- */
.page .bg-gray-darkest {
  background: var(--ink) !important;
}
/* Teplejší radiálny nádych do hero pozadia */
.page section.bg-gray-darkest .parallax-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 12% 0%, rgba(241,72,20,.22), transparent 60%),
    radial-gradient(900px 480px at 100% 100%, rgba(255,173,30,.14), transparent 55%),
    linear-gradient(180deg, rgba(17,10,6,.55) 0%, rgba(17,10,6,.78) 100%);
  pointer-events: none;
  z-index: 1;
}
.page section.bg-gray-darkest .parallax-content { position: relative; z-index: 2; }

/* H1 hero - punchy, s gradientovým akcentom cez slogan */
.page .parallax-content h1 .text-light {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Glass karty v hero */
.page .parallax-content .post-classic {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 30px 30px 34px;
  margin-bottom: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.page .parallax-content .post-classic:hover {
  transform: translateY(-4px);
  border-color: rgba(255,173,30,.35);
}
.page .parallax-content .post-media figure img {
  border-radius: var(--radius-sm);
  width: 100%;
  height: auto;
  display: block;
}

/* Kontaktný mail v hero */
.page .parallax-content .post-body a[href^="mailto"] {
  color: var(--brand-amber);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,173,30,.35);
  transition: color .2s var(--ease);
}
.page .parallax-content .post-body a[href^="mailto"]:hover { color: #fff; }

/* Oddeľovač medzi hero kartami je pri kartách zbytočný */
.page .parallax-content hr.bg-gray-darker { display: none; }

/* --------------------------------------------------------------------------
   5. CENÍK - čistá svetlá karta, moderné riadky
   -------------------------------------------------------------------------- */
.page section.section-66,
.page section.section-lg-110 {
  background: var(--paper);
}
.page section.section-66 h3 .text-light,
.page section.section-66 h3.text-light {
  color: var(--text-dark) !important;
}

/* Karta cenníka */
.page .box-pricing.box-pricing-type-1 {
  background: var(--paper-2);
  border: 1px solid #efe9e2;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 10px 26px 26px;
  margin-top: 8px;
}
/* Riadok ceny */
.page .box-pricing-type-1 .box-pricing-title.big {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 4px;
  margin: 0;
  border-bottom: 1px solid #f0ebe4;
  transition: background .2s var(--ease);
  border-radius: 8px;
}
.page .box-pricing-type-1 .box-pricing-title.big:hover {
  background: var(--brand-grad-soft);
}
.page .box-pricing-type-1 .box-pricing-name {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  font-size: 15px;
  flex: 0 1 auto;
}
.page .box-pricing-type-1 .box-pricing-dots {
  flex: 1 1 auto;
  border-bottom: 2px dotted #d9d0c6;
  transform: translateY(-4px);
  min-width: 24px;
}
.page .box-pricing-type-1 .box-pricing-price {
  color: var(--brand-orange) !important;
  font-weight: 800 !important;
  font-size: 18px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Prázdny oddeľovací riadok schovať */
.page .box-pricing-type-1 .box-pricing-title.big:has(.box-pricing-name:empty),
.page .box-pricing-type-1 .box-pricing-title.big:has(.box-pricing-price:only-child) {
  display: none;
}
.page .box-pricing-desc {
  color: var(--text-muted) !important;
  font-size: 13px;
  padding-top: 14px;
}
/* Fotku pri cenníku zarovnať dolu k spodku cenníka (len keď sú vedľa seba) */
@media (min-width: 1200px) {
  .page .cenik-row { align-items: flex-end; }
}

/* Obrázok pri cenníku */
.page .shadow-drop-xl {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.page .shadow-drop-xl figure img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   6. REFERENCE - moderné testimonial karty
   -------------------------------------------------------------------------- */
.page section.bg-gray-darkest .quote.quote {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 44px 40px 40px;
  max-width: 760px;
  margin: 0 auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Avatar ikona nad recenziou */
.page .quote .icon.mdi {
  display: inline-flex;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin: 0 auto;
  font-size: 0;
  color: transparent;
  box-shadow: var(--shadow-brand);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><circle cx='12' cy='8' r='4'/><path d='M12 14c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/></svg>"),
    linear-gradient(100deg, #f14814 0%, #ffad1e 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px, cover;
}
.page .quote .icon.mdi::before { content: ""; }
.page .quote q { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.6; color: #f4efe9; }
.page .quote cite { color: var(--brand-amber) !important; font-weight: 600; }

/* Owl dots */
.page .owl-dots .owl-dot span { background: rgba(255,255,255,.3); transition: all .25s var(--ease); }
.page .owl-dots .owl-dot.active span { background: var(--brand-amber); width: 26px; border-radius: 99px; }

/* Owl šípky - okrúhle s chevron ikonou */
.page .owl-nav .owl-prev,
.page .owl-nav .owl-next,
.page .owl-prev,
.page .owl-next {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  color: transparent;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.page .owl-prev::before, .page .owl-next::before { content: ""; }
.page .owl-prev {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
  background-color: rgba(255,255,255,.05);
}
.page .owl-next {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  background-color: rgba(255,255,255,.05);
}
.page .owl-prev:hover, .page .owl-next:hover {
  border-color: transparent;
  background-color: transparent;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>"),
    linear-gradient(100deg, #f14814 0%, #ffad1e 100%);
  box-shadow: var(--shadow-brand);
}
.page .owl-next:hover {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>"),
    linear-gradient(100deg, #f14814 0%, #ffad1e 100%);
}

/* --------------------------------------------------------------------------
   7. FOTO galéria - rounded, hover zoom + overlay
   -------------------------------------------------------------------------- */
.page #foto .isotope-item { padding: 8px; }
.page .thumbnail-classic {
  display: block;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.page .thumbnail-classic figure { margin: 0; overflow: hidden; }
.page .thumbnail-classic figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--ease);
}
.page .thumbnail-classic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20,15,12,.55) 100%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.page .thumbnail-classic::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  transform: translate(-50%,-50%) scale(.8);
  border-radius: 99px;
  background: var(--brand-grad);
  box-shadow: var(--shadow-brand);
  opacity: 0;
  z-index: 2;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  /* lupa ikona */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>") center/26px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>") center/26px no-repeat;
}
.page .thumbnail-classic:hover figure img { transform: scale(1.08); }
.page .thumbnail-classic:hover::after { opacity: 1; }
.page .thumbnail-classic:hover::before { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* --------------------------------------------------------------------------
   8. NAVBAR - moderný, sticky glass + CTA telefón
   -------------------------------------------------------------------------- */
.page .rd-navbar-default.rd-navbar-static,
.page .rd-navbar-default.rd-navbar-fixed {
  transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
/* Desktop sticky navbar - glass s blur */
.page .rd-navbar-default.rd-navbar-static.rd-navbar--is-stuck {
  background: rgba(17,10,6,.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Mobilný navbar - len pevné pozadie.
   POZOR: backdrop-filter/transform/filter tu NEDÁVAŤ - vytvoril by
   containing block pre position:fixed a rozbil by vysúvacie menu. */
.page .rd-navbar-default.rd-navbar-fixed {
  background: rgba(17,10,6,.92) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page .rd-navbar-brand-slogan {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
.page .rd-navbar-nav > li > a {
  font-weight: 600;
  position: relative;
  transition: color .2s var(--ease);
}
.page .rd-navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--brand-grad);
  transition: width .25s var(--ease);
}
.page .rd-navbar-nav > li:hover > a::after,
.page .rd-navbar-nav > li.active > a::after { width: 100%; }
.page .rd-navbar-nav > li.active > a,
.page .rd-navbar-nav > li:hover > a { color: var(--brand-amber) !important; }
.page .form-search-wrap a {
  color: var(--brand-amber);
  font-weight: 700;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   9. FOOTER - čistejší, akcentované nadpisy a odkazy
   -------------------------------------------------------------------------- */
.page .page-footer.bg-gray-base { background: var(--ink-2) !important; }
.page .page-footer h6 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 18px;
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
}
.page .page-footer h6::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 40px; height: 3px;
  border-radius: 99px;
  background: var(--brand-grad);
}
.page .page-footer.context-dark { color: #b9afa6; }
.page .page-footer .text-dark { color: #8a7f75 !important; }
.page .page-footer a { color: var(--brand-amber); text-decoration: none; transition: color .2s var(--ease); }
.page .page-footer a:hover { color: #fff; }
.page .page-footer dd, .page .page-footer div { line-height: 1.9; }

/* Footer 4-stĺpcový layout */
.page .footer-col { margin-bottom: 40px; }
.page .footer-col dl { margin-bottom: 12px; }
.page .footer-col dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.page .footer-col dd { margin: 0; font-size: 15px; }
.page .footer-tagline { color: #9a8f85; font-size: 14px; line-height: 1.7; margin-top: 2px; }
.page .footer-address div { font-size: 15px; }
.page .footer-line { font-size: 15px; line-height: 1.7; margin-bottom: 6px; }
.page .footer-line .text-dark { margin-right: 4px; }
.page .footer-small { color: #8a7f75 !important; font-size: 12.5px; line-height: 1.6; margin-top: 16px; }

/* Na desktope zarovnať nadpisy a podčiarknutie doľava */
@media (min-width: 992px) {
  .page .page-footer h6::after { left: 0; transform: none; }
  .page .footer-col { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   10. Reveal on scroll (aktivované cez modern.js, bez JS nič neschováva)
   -------------------------------------------------------------------------- */
.js-reveal .reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js-reveal .reveal-init.reveal-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   11. Plávajúce mobilné CTA - Zavolať (tel:) + Email (mailto:)
   -------------------------------------------------------------------------- */
.floating-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.floating-cta .fab-call,
.floating-cta .fab-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.30);
}
.floating-cta .fab-call { background: var(--brand-grad); }
.floating-cta .fab-mail {
  background: var(--ink-soft);
  border: 1px solid rgba(255,255,255,.16);
}
.floating-cta .fab-call:active,
.floating-cta .fab-mail:active { transform: scale(.95); }
.floating-cta svg { width: 22px; height: 22px; }
@media (max-width: 991px) {
  .floating-cta { display: flex; }
}

/* --------------------------------------------------------------------------
   11b. Sekcia "Kde vám pomohu" - grid ikon (svetlá)
   -------------------------------------------------------------------------- */
.page section.kde-pomohu { background: var(--paper); }
.page section.kde-pomohu h3 .text-light,
.page section.kde-pomohu h3.text-light { color: var(--text-dark) !important; }
.page .kp-col { margin-bottom: 24px; }
.page .kp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 30px 18px;
  background: var(--paper-2);
  border: 1px solid #efe9e2;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
}
.page .kp-card:hover {
  transform: translateY(-6px);
  border-color: rgba(241,72,20,.35);
  box-shadow: var(--shadow-md);
}
.page .kp-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--shadow-brand);
  flex: 0 0 auto;
}
.page .kp-ico svg { width: 28px; height: 28px; }
.page .kp-label {
  color: var(--text-dark);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
}
@media (max-width: 575px) {
  .page .kp-card { padding: 22px 12px; gap: 12px; }
  .page .kp-ico { width: 54px; height: 54px; }
  .page .kp-ico svg { width: 24px; height: 24px; }
  .page .kp-label { font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   12. Jemné doladenie sekcií a nadpisov
   -------------------------------------------------------------------------- */
.page main > section { position: relative; }
.page .post-content h2,
.page .post-content h3 { letter-spacing: .02em; }

/* Poistka proti horizontálnemu pretečeniu */
.page { overflow-x: hidden; }

/* Mobilné doladenie cenníka, aby sa ceny nezorezali */
@media (max-width: 575px) {
  .page .box-pricing.box-pricing-type-1 { padding: 6px 16px 20px; }
  .page .box-pricing-type-1 .box-pricing-title.big { gap: 8px; padding: 13px 2px; }
  .page .box-pricing-type-1 .box-pricing-name { font-size: 13.5px; }
  .page .box-pricing-type-1 .box-pricing-price { font-size: 16px; }
  .page .parallax-content h1 .text-light { font-size: 25px; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .floating-cta .fab-call { animation: none; }
  .js-reveal .reveal-init { transition: none; transform: none; opacity: 1; }
}