/* Kenan SPA Theme Overrides - Frontend polish */

/* Prevent layout shift when scroll-lock happens (menu/dialog). */
html { scrollbar-gutter: stable; }

/* Fallback for browsers without scrollbar-gutter support */
body { overflow-y: scroll; }

/* Brand mark replacement sizing */
img.kenan-brand-mark {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* Enlarge brand mark inside the hero section. The first icon shown in the hero
   (within a section marked by our kenan-hero-bg class) should be
   significantly larger than the icons used in the navigation bar or
   footer. We do this by targeting brand mark images that are
   descendants of a .kenan-hero-bg element and overriding their size. */
.kenan-hero-bg img.kenan-brand-mark {
  width: 80px !important;
  height: 80px !important;
}

/* Hero background helper */
.kenan-hero-bg {
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.kenan-hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  pointer-events:none;
}
.kenan-hero-bg > * { position: relative; z-index: 1; }

/* Services illustration row */
.kenan-service-illustrations {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px){
  .kenan-service-illustrations { grid-template-columns: 1fr; }
}
.kenan-service-illustrations .kenan-service-illustration {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.kenan-service-illustrations img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

/* Service card hover: keep meta readable (duration + price) */
[data-kenan-service-card]:hover [data-kenan-service-meta]{
  color: inherit !important;
  opacity: 1 !important;
}