/* ==========================================================================
   Lasadent Static Site - Main CSS
   ========================================================================== */

/* --- Font Face Declarations --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/yantramanav/yantramanav-400-latin-ext.woff2') format('woff2'),
       url('../fonts/yantramanav/yantramanav-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/yantramanav/yantramanav-500-latin-ext.woff2') format('woff2'),
       url('../fonts/yantramanav/yantramanav-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/yantramanav/yantramanav-700-latin-ext.woff2') format('woff2'),
       url('../fonts/yantramanav/yantramanav-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato/lato-400-latin-ext.woff2') format('woff2'),
       url('../fonts/lato/lato-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato/lato-700-latin-ext.woff2') format('woff2'),
       url('../fonts/lato/lato-700-latin.woff2') format('woff2');
}

/* Font Awesome */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/fa/fa-solid-900.woff2') format('woff2'),
       url('../fonts/fa/fa-solid-900.woff') format('woff');
}
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fa/fa-brands-400.woff2') format('woff2'),
       url('../fonts/fa/fa-brands-400.woff') format('woff');
}
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fa/fa-regular-400.woff2') format('woff2'),
       url('../fonts/fa/fa-regular-400.woff') format('woff');
}

.fas, .fa { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal; }
.far { font-family: 'Font Awesome 5 Free'; font-weight: 400; font-style: normal; }
.fab { font-family: 'Font Awesome 5 Brands'; font-weight: 400; font-style: normal; }

/* --- CSS Variables --- */
:root {
  --text-font: "Inter", Arial, Helvetica, sans-serif;
  --title-font: "Yantramanav", Arial, Helvetica, sans-serif;
  --alt-font: "Lato", Arial, Helvetica, sans-serif;

  --primary-color: rgb(29, 58, 76);
  --link-color: #333333;
  /* Darkened from rgb(1,175,190) — original failed WCAG AA on white (2.67:1).
     This shade preserves the teal identity while passing AA for normal text. */
  --link-hover: rgb(0, 121, 132);
  /* Darkened from #777777 — original failed WCAG AA on page-bg #F9F9F9 (4.25:1). */
  --text-color: #595959;
  --title-color: #242424;
  --accent-teal: #01E1ED;
  --accent-green: rgb(41, 192, 147);
  --accent-green-hover: rgb(37, 177, 136);
  --light-blue-tint: rgba(45, 156, 218, 0.05);
  --page-bg: #F9F9F9;
  --price-header-bg: #1b5b6a;
  --page-title-bg: rgb(42, 155, 204);
  --shape-fill-blue: #2D9CDA;

  --container-width: 1222px;
  --body-font-size: 14px;
  --header-font-size: 15px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Smooth scroll only for in-page anchor jumps; never on regular wheel/touch
   scrolling, where it fights with native momentum on Chrome (Windows trackpad
   especially) and can feel like the page "stops short" of the bottom. The JS
   scroll-to-top button still animates explicitly via jQuery .animate(). */
html { scroll-behavior: auto; }

/* Skip-to-content link — visible only when focused via Tab. Keyboard users hit
   this first and bypass the entire top-bar + nav (~12 tab stops). */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  :focus-visible { scroll-margin-top: 100px; }
}

body {
  font-family: var(--text-font);
  font-size: var(--body-font-size);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link-color); text-decoration: none; transition: color .3s; }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-font);
  font-weight: 500;
  color: var(--title-color);
  line-height: 1.2;
}

ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 15px;
}

/* --- Top Bar (matches WP whb-top-bar: 3-col grid, info-items center, social right) --- */
.top-bar {
  background-color: var(--primary-color);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  min-height: 58px;
  border-bottom: 1px solid rgba(255,255,255,.15);
  position: relative;
  z-index: 110;
  padding: 9px 0;
}
.top-bar .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.top-bar-left {
  /* Left column kept empty to match WP layout */
}
.top-bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.top-bar .info-item,
.top-bar a.info-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  white-space: nowrap;
}
.top-bar a { color: #fff; }
.top-bar a:hover { color: var(--link-hover); }
.top-bar .icon-img {
  width: 39px;
  height: 39px;
  flex-shrink: 0;
}
.top-bar-social {
  display: inline-flex;
  gap: 8px;
}
.top-bar-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3b5998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  line-height: 1;
  text-decoration: none;
}
.top-bar-social a.ig {
  background: #c13584;
}

/* --- Header --- */
.site-header {
  background:
    linear-gradient(90deg, rgba(29,58,76,.78) 0%, rgba(2,158,182,.55) 70%, rgba(2,158,182,.55) 100%),
    url('../images/misc/head-2.jpg') center / cover no-repeat;
  border-top: 1px solid #fff;
  position: relative;
  z-index: 100;
  height: 90px;
  transition: all .3s;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-header .logo img {
  height: 64px;
  width: auto;
}
.site-header .logo {
  flex-shrink: 0;
}

/* Main Navigation */
.main-nav {
  display: flex;
  align-items: center;
}
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 0;
}
.main-nav > ul > li {
  position: relative;
}
.main-nav > ul > li > a {
  display: block;
  padding: 0 14px;
  font-family: var(--text-font);
  font-size: var(--header-font-size);
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  line-height: 90px;
  transition: color .3s;
  white-space: nowrap;
}
.main-nav > ul > li > a:hover {
  color: var(--link-hover);
}
.main-nav > ul > li.active > a,
.main-nav > ul > li.has-dropdown.active > a {
  color: #fff;
  position: relative;
}
.main-nav > ul > li.active > a::before,
.main-nav > ul > li.has-dropdown.active > a::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 30px;
  height: 2px;
  background: var(--link-hover);
}

/* Dropdown */
.main-nav .has-dropdown > a::after {
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.main-nav .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .3s;
  z-index: 200;
  padding: 10px 0;
}
.main-nav .has-dropdown:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav .dropdown li a {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}
.main-nav .dropdown li a:hover {
  color: var(--link-hover);
  background: #f9f9f9;
}

/* Sticky Header — `border-top: 0` strips the white separator that the base
   .site-header carries (between top-bar and header), so it doesn't show as a
   thin line at the very top of viewport when the header is fixed there. */
.site-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background:
    linear-gradient(90deg, rgba(29,58,76,.78) 0%, rgba(2,158,182,.55) 70%, rgba(2,158,182,.55) 100%),
    url('../images/misc/head-2.jpg') center / cover no-repeat;
  border-top: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  animation: slideDown .3s ease;
}
.site-header.sticky .main-nav > ul > li > a {
  line-height: 80px;
  color: #fff;
}
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Mobile hamburger */
.hamburger {
  display: none;
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
  z-index: 300;
}
.hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: #333;
  left: 0;
  transition: all .3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { top: 22px; }
.hamburger.active span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* Mobile Nav Overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  /* visibility:hidden already disables pointer events in most browsers, but
     some mobile Chromes still treat the element as hit-testable. Force it. */
  pointer-events: none;
  transition: all .3s;
}
.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile Nav Sidebar */
.mobile-nav {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background: #fff;
  z-index: 999;
  overflow-y: auto;
  transition: left .3s;
  padding: 20px 0;
  /* When the panel is off-screen (left:-300px) it still occupies the layer
     above content. Disable pointer events so it can't swallow touches/clicks
     near the left edge of the viewport. */
  pointer-events: none;
}
.mobile-nav.active { left: 0; pointer-events: auto; }
.mobile-nav .close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}
.mobile-nav ul { padding: 15px 0; }
.mobile-nav ul li a {
  display: block;
  padding: 10px 25px;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  color: #333;
  border-bottom: 1px solid #eee;
}
.mobile-nav ul li a:hover { color: var(--link-hover); }
.mobile-nav .sub-toggle {
  float: right;
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}
.mobile-nav .dropdown {
  display: none;
  padding-left: 15px;
  background: #f9f9f9;
}
.mobile-nav .dropdown.open { display: block; }
.mobile-nav .dropdown li a {
  font-size: 14px;
  text-transform: none;
  font-weight: 400;
  padding: 8px 25px;
}

/* --- Hero Slider — matches WP wd-slider 645px tall, CSS bg-image based --- */
.hero-slider {
  position: relative;
  margin-bottom: 0;
}
.hero-slider .flickity-slider-wrap {
  width: 100%;
}
.hero-slider .slide {
  width: 100%;
  height: 645px;
  position: relative;
  overflow: hidden;
  background-color: #1d3a4c;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Per-slide background images — moved out of inline style="" so the page
   passes strict CSP (style-src 'self' without 'unsafe-inline'). */
.hero-slider .slide-1 { background-image: url('../images/sliders/slider.webp?v=2'); }
.hero-slider .slide-2 { background-image: url('../images/sliders/slider2-2.webp?v=2'); }
.hero-slider .slide-3 { background-image: url('../images/sliders/slider3.webp?v=2'); }
.hero-slider .slide-content {
  position: absolute;
  top: 50%;
  left: 120px;
  transform: translateY(-50%);
  z-index: 5;
  text-align: left;
  max-width: 520px;
  padding: 0;
}
/* Per-slide override: anchor the text on the right side of the picture
   instead of the left (used for slides where the focal subject sits left). */
.hero-slider .slide.slide-text-right .slide-content {
  left: auto;
  right: 120px;
  text-align: right;
}
.hero-slider .slide-content h1, .hero-slider .slide-content h2 {
  font-family: var(--title-font);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.hero-slider .slide-content p {
  font-size: 16px;
  color: #fff;
  margin-top: 20px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
/* Drop-in animation: text falls from above each time JS adds .animate-in to
   the active slide. The 700ms delay lets the image fade settle first, so the
   user sees image-in → then text-in. Animating the inner elements (not
   .slide-content itself) avoids fighting the parent's translateY(-50%) centering. */
.hero-slider .slide.animate-in .slide-content > * {
  animation: slideTextDrop 1.3s ease-out both;
  animation-delay: 400ms;
}
.hero-slider .slide.animate-in .slide-content > * + * {
  animation-delay: 600ms;
}
/* Hide text by default (frame-0 of the keyframes) so it doesn't pop in
   visible before .animate-in is applied or before the delay elapses. */
.hero-slider .slide-content > * {
  opacity: 0;
}
@keyframes slideTextDrop {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Prev/next arrows — chevron only (no circle), slide in from outside on hover */
.hero-slider .flickity-prev-next-button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity .3s ease, left .35s ease, right .35s ease;
}
.hero-slider .flickity-prev-next-button:hover,
.hero-slider .flickity-prev-next-button:focus {
  background: transparent;
  box-shadow: none;
}
.hero-slider .flickity-prev-next-button.previous { left: -50px; }
.hero-slider .flickity-prev-next-button.next     { right: -50px; }
.hero-slider:hover .flickity-prev-next-button { opacity: 1; }
.hero-slider:hover .flickity-prev-next-button.previous { left: 20px; }
.hero-slider:hover .flickity-prev-next-button.next     { right: 20px; }
.hero-slider .flickity-prev-next-button .flickity-button-icon {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  fill: #fff;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
}
/* Slide image fades in (Flickity-fade animates inline opacity each frame
   based on slider progress; selectedAttraction/friction in main.js tune the
   fade duration). Text animation is held back by `animation-delay` so it
   starts AFTER the image fade has settled. */

/* Wave divider at the bottom of the hero slider — flipped vertically so
   the curve faces upward into the slider, blending into the section below */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  z-index: 5;
  pointer-events: none;
  line-height: 0;
}
.hero-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
}
.hero-slider .flickity-page-dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 6;
  pointer-events: none;
}
.hero-slider .flickity-page-dots .dot {
  pointer-events: auto;
  background: rgba(255,255,255,.5);
  opacity: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
  cursor: pointer;
}
.hero-slider .flickity-page-dots .dot.is-selected {
  background: #fff;
}

/* --- Services Grid --- */
.services-grid {
  padding: 60px 0 40px;
}
.services-grid .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.service-box {
  text-align: center;
  transition: transform .3s;
}
.service-box:hover {
  transform: translateY(-5px);
}
.service-box a { display: block; }
.service-box img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 4px;
}
.service-box h3 {
  font-family: var(--title-font);
  font-size: 17px;
  font-weight: 500;
  color: var(--title-color);
  margin-top: 14px;
  text-align: center;
}
.service-box a:hover h3 { color: var(--link-hover); }

/* --- Wave Section divider (used by about/mission/offer to match WP) --- */
.wave-section {
  position: relative;
}
.wave-section .wave-top,
.wave-section .wave-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;
  z-index: 1;
  line-height: 0;
}
.wave-section .wave-top { top: 0; }
.wave-section .wave-bottom { bottom: 0; transform: scaleY(-1); }
.wave-section .wave-top svg,
.wave-section .wave-bottom svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- About Section (50/50 cols: icon+image | content) --- */
.about-section {
  background: var(--light-blue-tint) url('../images/misc/lupa.png') right center no-repeat;
  background-size: auto 80%;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.about-section .container {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 2;
}
.about-section .about-image {
  flex: 1;
  position: relative;
}
.about-section .about-image .icon-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  background: var(--accent-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  transition: background .3s;
  z-index: 3;
}
.about-section .about-image .icon-badge:hover {
  background: var(--accent-green);
}
.about-section .about-image img {
  width: 100%;
  max-width: 546px;
  height: auto;
  display: block;
  margin-left: 35px;
  border-radius: 0;
}
.about-section .about-content {
  flex: 1;
}
.about-section .about-content h2 {
  font-family: var(--title-font);
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 18px;
  max-width: 480px;
  line-height: 1.25;
}
.about-section .about-content p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 25px;
  max-width: 560px;
}

/* Progress Bars */
.progress-bar {
  margin-bottom: 14px;
}
.progress-bar .bar-track {
  width: 100%;
  height: 22px;
  background: #e6e9ec;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.progress-bar .bar-fill {
  height: 100%;
  background: var(--accent-teal);
  transition: width 1.5s ease;
  display: flex;
  align-items: center;
  padding-left: 12px;
  width: 0;
}
.progress-bar .bar-text {
  font-size: 11px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: .3px;
}

/* --- Doctor Mission Section (50/50 cols: image | content) --- */
.mission-section {
  background: var(--light-blue-tint);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.mission-section .container {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 2;
}
.mission-section .mission-image {
  flex: 1;
  text-align: center;
}
.mission-section .mission-image img {
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.mission-section .mission-content {
  flex: 1;
}
.mission-section h2 {
  font-family: var(--title-font);
  font-size: 30px;
  color: var(--primary-color);
  margin-bottom: 18px;
}
.mission-section p {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 10px;
}

/* --- Special Offer Section (50/50 cols: content | image) --- */
.offer-section {
  background: var(--light-blue-tint);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.offer-section .container {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: var(--container-width);
  position: relative;
  z-index: 2;
}
.offer-section .offer-content {
  flex: 1;
}
.offer-section .offer-image {
  flex: 1;
  text-align: center;
}
.offer-section .offer-image img {
  max-width: 360px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
.offer-section h2 {
  font-family: var(--title-font);
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 18px;
}
.offer-section p {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
  max-width: 720px;
}

/* --- Blog Section (Homepage carousel) --- */
.blog-section {
  padding: 60px 0;
}
.blog-section h2 {
  font-family: var(--title-font);
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
}
.blog-carousel .blog-card {
  padding: 0 8px;
}
.blog-card {
  background: transparent;
}
.blog-card .blog-thumb {
  display: block;
  position: relative;
  overflow: hidden;
}
.blog-card .blog-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .5s;
}
.blog-card:hover .blog-thumb img {
  transform: scale(1.05);
}
.blog-card .date-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: #000;
  text-align: center;
  padding: 6px 10px;
  z-index: 2;
  line-height: 1;
  font-family: var(--title-font);
}
.blog-card .date-badge .day {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.blog-card .date-badge .mon {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  margin-top: 3px;
  color: #777;
}
.blog-card .blog-tag {
  position: absolute;
  bottom: 0;
  left: 14px;
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.blog-card .blog-body {
  border: 1px solid #e8e8e8;
  border-top: none;
  padding: 25px 22px 22px;
  background: #fff;
  text-align: left;
}
.blog-card h3 {
  font-family: var(--title-font);
  font-size: 17px;
  margin-bottom: 12px;
  line-height: 1.3;
}
.blog-card h3 a { color: var(--title-color); }
.blog-card h3 a:hover { color: var(--link-hover); }
.blog-card .blog-meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 14px;
}
.blog-card .blog-meta i { margin-right: 4px; color: #aaa; }
.blog-card .blog-excerpt {
  font-size: 13px;
  line-height: 1.65;
  color: #777;
  margin-bottom: 16px;
}
.blog-card .read-more {
  font-size: 12px;
  font-weight: 700;
  color: var(--title-color);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  display: inline-block;
}
.blog-card .read-more:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

/* Owl Carousel nav arrows for blog + testimonials — chevron only, sit OUTSIDE
   the carousel so they don't overlap card content. Slide in on hover.
   Note: Owl renders nav as <div class="owl-prev">, NOT <button> — selectors
   without the `button` qualifier are required so these styles actually apply. */
.blog-carousel,
.testimonials-carousel {
  position: relative;
}
.blog-carousel .owl-nav,
.testimonials-carousel .owl-nav {
  margin: 0;
}
.blog-carousel .owl-nav .owl-prev,
.blog-carousel .owl-nav .owl-next,
.testimonials-carousel .owl-nav .owl-prev,
.testimonials-carousel .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  cursor: pointer;
  /* Vendor CSS sets `.owl-nav { pointer-events: none }` and re-enables only
     on <button> children — but Owl renders these arrows as <div>, so without
     this explicit override, clicks would be swallowed by the parent. */
  pointer-events: auto;
  background: transparent !important;
  color: var(--primary-color) !important;
  font-size: 28px;
  line-height: 1;
  padding: 10px 14px !important;
  margin: 0 !important;
  opacity: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: opacity .3s ease, left .35s ease, right .35s ease;
  border: 0 !important;
  z-index: 5;
}
/* Resting positions: arrows tucked off-screen of the carousel sides */
.blog-carousel .owl-nav .owl-prev,
.testimonials-carousel .owl-nav .owl-prev {
  left: -10px;
  transform: translate(-30px, -50%);
  /* prev: animate via `left`; transform stays as the centering offset */
}
.blog-carousel .owl-nav .owl-next,
.testimonials-carousel .owl-nav .owl-next {
  right: -10px;
  transform: translate(30px, -50%);
}
/* Hover: slide into final position (just outside the card content).
   Triggered by `.blog-section:hover` / `.testimonials-section:hover` rather
   than the carousel itself, so when the cursor moves to an arrow positioned
   OUTSIDE the carousel the hover state stays active and the arrow remains
   clickable. */
.blog-section:hover .blog-carousel .owl-nav .owl-prev,
.testimonials-section:hover .testimonials-carousel .owl-nav .owl-prev {
  opacity: 1;
  transform: translate(0, -50%);
  left: -40px;
}
.blog-section:hover .blog-carousel .owl-nav .owl-next,
.testimonials-section:hover .testimonials-carousel .owl-nav .owl-next {
  opacity: 1;
  transform: translate(0, -50%);
  right: -40px;
}
.blog-carousel .owl-nav .disabled,
.testimonials-carousel .owl-nav .disabled { opacity: 0 !important; pointer-events: none; cursor: default; }

/* --- Testimonials Section --- */
.testimonials-section {
  background: var(--light-blue-tint);
  padding: 70px 0 90px;
  text-align: center;
}
.testimonials-section h2 {
  font-family: var(--title-font);
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
}
.testimonial-item {
  text-align: center;
  padding: 10px 40px;
  max-width: 800px;
  margin: 0 auto;
}
.testimonial-item blockquote {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 18px;
  font-style: normal;
}
.testimonial-item .author {
  font-family: var(--title-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--title-color);
}

/* --- Footer (single-column, left-aligned, matches WP) --- */
.site-footer {
  background-color: var(--primary-color);
  color: rgba(255,255,255,.8);
  padding: 60px 0 0;
}
.site-footer .container {
  display: block;
  max-width: var(--container-width);
}
.site-footer .footer-logo {
  margin-bottom: 28px;
}
.site-footer .footer-logo img {
  width: 230px;
  height: auto;
  display: block;
}
.site-footer .footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-contact li {
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  line-height: 1.6;
}
.site-footer .footer-contact li i {
  width: 20px;
  margin-right: 12px;
  color: var(--link-hover);
  font-size: 14px;
  text-align: center;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 40px;
  padding: 18px 0;
  font-size: 11.2px;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.footer-bottom strong {
  color: rgba(255,255,255,.95);
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-right: 6px;
}
.footer-bottom .copyright-icon {
  margin: 0 6px;
  opacity: .75;
}

/* --- Scroll to Top --- */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  background: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  z-index: 900;
  cursor: pointer;
}
.scroll-top.visible {
  opacity: 1;
  visibility: visible;
}
.scroll-top:hover {
  background: var(--link-hover);
}

/* --- Inner Page Content --- */
.page-content {
  padding: 70px 0;
}
.page-content .container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.page-content .content-text {
  flex: 1;
}
.page-content .content-image {
  flex: 1;
}
.page-content .content-image img {
  width: 100%;
  border-radius: 4px;
}
.page-content h3 {
  font-family: var(--title-font);
  font-size: 22px;
  margin-bottom: 18px;
  color: var(--title-color);
}
/* Page title (h1) on inner pages without a banner — applies the same look as h3
   but a step larger, matching .content-text h1 used on service/about pages. */
.page-title,
.page-content .content-text h1,
.services-overview .page-title {
  font-family: var(--title-font);
  font-size: 28px;
  margin: 0 0 22px;
  color: var(--title-color);
  font-weight: 500;
}
.page-content p {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 16px;
  color: #555;
}

/* --- Price List --- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.price-table-wrapper {
  overflow-x: auto;
}
.price-table th,
.price-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #000;
}
.price-table .category-header td {
  background-color: var(--price-header-bg);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 2px solid rgba(255,255,255,.2);
}
.price-table tr:not(.category-header):hover td {
  background-color: #f5f5f5;
}
.price-table td:last-child {
  text-align: right;
  white-space: nowrap;
}
.pension-note {
  font-size: 14px;
  color: #000;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* --- Magnific Popup overrides — show images larger --- */
.mfp-img {
  max-height: 90vh !important;
  max-width: 95vw !important;
  width: auto;
  height: auto;
}
.mfp-figure {
  max-width: 95vw;
}
.mfp-bg { background: #000; opacity: .85; }
.mfp-arrow:before, .mfp-arrow:after { border-color: transparent; }
.mfp-arrow-left:after { border-right-color: #fff; }
.mfp-arrow-right:after { border-left-color: #fff; }

/* --- Gallery — masonry-like via CSS columns --- */
.gallery-grid {
  column-count: 4;
  column-gap: 10px;
}
.gallery-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s, opacity .3s;
}
.gallery-item:hover img {
  transform: scale(1.05);
  opacity: .9;
}

/* --- Contact Page --- */
.contact-info {
  margin-bottom: 30px;
}
.contact-info h3 {
  font-family: var(--title-font);
  font-size: 22px;
  margin-bottom: 18px;
}
.contact-info p {
  font-size: 14px;
  margin-bottom: 8px;
  color: #444;
}
/* Icon next to each contact-info line — replaces inline style="color:var(--link-hover);margin-right:8px" */
.contact-info .contact-icon {
  color: var(--link-hover);
  margin-right: 8px;
}
.contact-map {
  border: 0;
  margin-top: 30px;
}
.map-link {
  margin-top: 10px;
  font-size: 14px;
}

/* --- 404 page --- */
.page-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-404 .error-code {
  font-size: 72px;
  margin: 0;
  color: var(--primary-color);
}
.page-404 .error-title {
  margin: 10px 0 20px;
  font-weight: 400;
}
.page-404 .error-message {
  margin-bottom: 30px;
  font-size: 16px;
  color: #555;
}
.page-404 .btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
.page-404 .error-links-title {
  margin-top: 40px;
  font-size: 16px;
  font-weight: 600;
  color: var(--title-color);
}
.page-404 .error-links {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.page-404 .error-links li {
  padding: 4px 0;
}

/* Replaces inline style="display:block" on .page-content > .container — used on
   pages whose content area isn't laid out in two columns (cenovnik, galerija,
   kontakt, blog index). The compound selector wins specificity over
   ".page-content .container" without needing !important. */
.page-content > .container.container-block,
.page-content > .container-block {
  display: block;
}

/* --- Blog Archive --- */
.blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-archive-card {
  background: transparent;
  position: relative;
}
.blog-archive-card .thumb {
  display: block;
  position: relative;
  overflow: hidden;
}
.blog-archive-card .thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .5s;
}
.blog-archive-card:hover .thumb img {
  transform: scale(1.05);
}
.blog-archive-card .date-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: #000;
  text-align: center;
  padding: 6px 10px;
  z-index: 2;
  line-height: 1;
  font-family: var(--title-font);
}
.blog-archive-card .date-badge .day {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.blog-archive-card .date-badge .mon {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  margin-top: 3px;
  color: #777;
}
.blog-archive-card .blog-tag {
  position: absolute;
  bottom: 0;
  left: 14px;
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.blog-archive-card .card-body {
  padding: 24px 18px 28px;
  text-align: center;
  border: 1px solid #e8e8e8;
  border-top: none;
  background: #fff;
}
.blog-archive-card h3 {
  font-family: var(--title-font);
  font-size: 17px;
  margin-bottom: 12px;
}
.blog-archive-card h3 a { color: var(--title-color); }
.blog-archive-card h3 a:hover { color: var(--link-hover); }
.blog-archive-card .meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 12px;
}
.blog-archive-card p {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  margin-bottom: 14px;
}
.blog-archive-card .read-more {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--title-color);
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  display: inline-block;
}
.blog-archive-card .read-more:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

/* --- Single Blog Post (with sidebar) --- */
.single-post-section {
  padding: 60px 0;
}
.single-post-section .container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.single-post-content {
  flex: 1 1 720px;
  max-width: 720px;
}
.single-post-content .post-tag {
  display: inline-block;
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 14px;
}
.single-post-content h1 {
  font-family: var(--title-font);
  font-size: 28px;
  font-weight: 500;
  color: var(--title-color);
  margin-bottom: 12px;
}
.single-post-content .post-meta {
  font-size: 13px;
  color: #999;
  margin-bottom: 26px;
}
.single-post-content .post-meta i { margin-right: 4px; }
.single-post-content .featured-image {
  position: relative;
  margin-bottom: 28px;
}
.single-post-content .featured-image img {
  width: 100%;
  display: block;
}
.single-post-content .featured-image .date-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: #000;
  text-align: center;
  padding: 6px 10px;
  line-height: 1;
  font-family: var(--title-font);
}
.single-post-content .featured-image .date-badge .day { display:block; font-size:18px; font-weight:700; }
.single-post-content .featured-image .date-badge .mon { display:block; font-size:11px; text-transform:uppercase; margin-top:3px; color:#777; }
.single-post-content p {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 16px;
}
.single-post-content ol,
.single-post-content ul {
  padding-left: 25px;
  margin-bottom: 20px;
  list-style: decimal;
}
.single-post-content li {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}
.single-post-content .post-share {
  border-top: 1px solid #eee;
  padding-top: 22px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.single-post-content .post-share a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
}
.single-post-content .post-share a.fb { background: #3b5998; }
.single-post-content .post-share a.tw { background: #1da1f2; }
.single-post-content .post-share a.pi { background: #e60023; }
.single-post-content .post-share a.li { background: #0a66c2; }
.single-post-content .post-share a.tg { background: #2ca5e0; }

.post-sidebar {
  flex: 0 0 280px;
}
.post-sidebar .widget {
  margin-bottom: 35px;
}
.post-sidebar .widget h2,
.post-sidebar .widget h3 {
  font-family: var(--title-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--title-color);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
  padding-bottom: 0;
}
.post-sidebar .widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.post-sidebar .widget ul li {
  margin-bottom: 8px;
  font-size: 13px;
}
.post-sidebar .widget ul li a {
  color: var(--link-hover);
}
.post-sidebar .widget ul li a:hover {
  color: var(--primary-color);
}
.post-sidebar .recent-posts li {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.post-sidebar .recent-posts img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  flex-shrink: 0;
}
.post-sidebar .recent-posts .info {
  font-size: 12px;
  line-height: 1.4;
}
.post-sidebar .recent-posts .info a {
  color: var(--link-hover);
  font-weight: 500;
}
.post-sidebar .recent-posts .info .date {
  display: block;
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}
/* Instagram widget — header CTA + 3-column thumbnail grid linking to the IG
   profile. Real Instagram screenshots can be dropped into /assets/images/
   instagram/post-1.webp..post-6.webp; missing files just leave an empty tile
   with the IG-pink ::before backdrop, so the grid still looks intentional. */
.post-sidebar .instagram-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--link-color);
  text-decoration: none;
  margin-bottom: 12px;
  font-weight: 500;
}
.post-sidebar .instagram-cta i {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.post-sidebar .instagram-cta:hover { color: var(--link-hover); }

/* --- Usluge (Services Overview) --- */
.services-overview {
  padding: 70px 0;
}
.services-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s;
}
.service-tile:hover {
  transform: translateY(-3px);
}
.service-tile img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
.service-tile .label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(255,255,255,.92);
  padding: 8px 14px;
  font-family: var(--title-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--title-color);
}
.service-tile a:hover .label {
  background: var(--link-hover);
  color: #fff;
}

/* --- Button --- */
.btn {
  display: inline-block;
  padding: 12px 30px;
  font-family: var(--text-font);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  transition: all .3s;
  border: none;
  cursor: pointer;
}
/* --- Responsive Design --- */
@media (max-width: 1024px) {
  .top-bar { min-height: 44px; padding: 6px 0; font-size: 12px; }
  .top-bar .icon-img { width: 28px; height: 28px; }
  .top-bar-center { gap: 18px; }
  .site-header { height: 70px; }
  .main-nav > ul > li > a { line-height: 70px; padding: 0 10px; font-size: 13px; }
  .site-header.sticky { height: 60px; }
  .site-header.sticky .main-nav > ul > li > a { line-height: 60px; }

  .hero-slider { margin-bottom: 40px; }
  .hero-slider .slide { height: 480px; }
  .hero-slider .slide-content { left: 60px; max-width: 60%; }
  .hero-slider .slide-content h1, .hero-slider .slide-content h2 { font-size: 30px; }

  .services-grid .container { grid-template-columns: repeat(2, 1fr); }

  .about-section .container { flex-direction: column; gap: 30px; }
  .about-section .about-image { flex: 0 0 auto; }

  .page-content .container { flex-direction: column; }

  .gallery-grid { column-count: 3; }

  .services-overview-grid { grid-template-columns: repeat(2, 1fr); }

  .single-post-section .container { flex-direction: column; }
  .single-post-content { max-width: 100%; }
  .post-sidebar { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .hamburger { display: block; }

  .top-bar-left,
  .top-bar-right { display: none; }
  .top-bar { text-align: center; }
  .top-bar .container { display: block; }
  .top-bar-center { justify-content: center; gap: 14px; flex-wrap: wrap; }

  .hero-slider { margin-bottom: 30px; }
  .hero-slider .slide { height: 380px; }
  .hero-slider .slide-content { left: 20px; right: 20px; max-width: none; padding: 0; }
  .hero-slider .slide-content h1, .hero-slider .slide-content h2 { font-size: 22px; }
  .hero-slider .slide-content p { font-size: 13px; }
  /* Hover-revealed arrows aren't usable on touch — hide them; users swipe instead. */
  .hero-slider .flickity-prev-next-button,
  .blog-carousel .owl-nav,
  .testimonials-carousel .owl-nav { display: none; }

  .services-grid .container { grid-template-columns: 1fr; }

  .about-section { padding: 50px 0; }
  .about-section .about-content h2 { font-size: 22px; }

  .mission-section h2,
  .offer-section h2 { font-size: 24px; }

  .gallery-grid { column-count: 2; }

  .blog-archive-grid { grid-template-columns: 1fr; }

  .services-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-slider .slide { height: 340px; }
  .hero-slider .slide-content h1, .hero-slider .slide-content h2 { font-size: 18px; }
  .hero-slider .hero-wave { height: 36px; }
  .hero-wave svg { height: 36px; }
  .gallery-grid { column-count: 1; }
}