/* =========================================================
   LumiDent — companion CSS for the NATIVE Elementor build.
   Layout, colours, spacing and typography are set on the
   Elementor elements themselves (editable in the editor).
   This file only adds the few effects Elementor can't do
   natively: the fixed header, diagonal service ribbons,
   number badges, gallery caption overlays and card hovers.
   Classes are assigned to containers/widgets via "CSS Classes".
   ========================================================= */

:root{ --lum-navy:#0B1F3A; --lum-blue:#2F80ED; --lum-ink:#1A202C; --lum-muted:#54657A; }

html{ scroll-behavior:smooth; }
.lum-anchor{ scroll-margin-top:92px; }

/* ---------- Image crop boxes (uniform card & gallery images) ---------- */
.lum-crop{ position:relative; overflow:hidden; }
.lum-crop .elementor-widget-image{ position:absolute; inset:0; height:100%; width:100%; margin:0; }
.lum-crop .elementor-widget-image .elementor-widget-container,
.lum-crop .elementor-widget-image figure,
.lum-crop .elementor-widget-image img{ height:100%; width:100%; margin:0; display:block; }
.lum-crop img{ object-fit:cover; }
.lum-usp-media{ aspect-ratio:4 / 3; }
.lum-serv-media{ aspect-ratio:4 / 3; }
.lum-portrait{ aspect-ratio:4 / 5; }
.lum-about-media{ aspect-ratio:1 / 1; }
.lum-gitem{ aspect-ratio:4 / 3; }

/* ---------- Hero: Ken Burns zoom on its OWN layer (.lum-hero-bg, injected by the
   loader footer JS). #home's background image is PINNED to the pre-made high-quality
   hero.png.webp so Hostinger's LiteSpeed on-the-fly server WebP (which recompresses
   .png/.jpg down to a soft ~88KB) leaves it untouched = sharp on every device. The
   zoom layer inherits it, so the zoom is sharp too. Dimming stays editable via
   Elementor's Background Overlay > Opacity (that's #home::before, untouched here).
   To change the hero photo: swap the file + regenerate hero.png.webp (q92). */
#home{ overflow:hidden !important; position:relative !important;
  background-image:url("https://lumidentkl.com/wp-content/uploads/lumident/hero.png.webp") !important;
  background-size:cover !important; background-position:center center !important; }
#home > .e-con-inner{ position:relative; z-index:2; }
#home > .lum-hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("https://lumidentkl.com/wp-content/uploads/lumident/hero.png.webp");
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  transform:scale(1); transform-origin:center center; will-change:transform, opacity;
  animation:lumHeroZoom 12s ease-in-out infinite;
}
@keyframes lumHeroZoom{
  0%   { transform:scale(1);    opacity:1; }
  85%  { transform:scale(1.18); opacity:1; }
  100% { transform:scale(1.24); opacity:0; }
}
/* (reduced-motion cutoff intentionally removed — user wants the zoom to always run, incl. mobile) */
/* Phone: drop the 100vh so the landscape photo isn't magnified as hard (content-height hero). */
@media (max-width:767px){
  #home{ min-height:auto !important; }
}

/* ---------- Brand logos (injected by the loader JS so an open Elementor editor
   can't revert them). Header uses the navy logo on the white bar; footer uses the
   white logo on the navy panel. The loader hides the original text/icon brand. --- */
.lum-header .lum-brand .lum-logo-inj{ display:inline-flex; align-items:center; line-height:0; }
.lum-header .lum-brand .lum-logo-inj img{ width:150px; height:auto; display:block; }
@media (max-width:1024px){ .lum-header .lum-brand .lum-logo-inj img{ width:146px; } }
@media (max-width:767px){ .lum-header .lum-brand .lum-logo-inj img{ width:132px; } }
.lum-logo-foot-inj{ width:184px; height:auto; display:block; margin:0 0 12px; }
@media (max-width:767px){ .lum-logo-foot-inj{ width:164px; margin-left:auto; margin-right:auto; } }

/* ---------- Hero: Warm & Premium restyle ---------- */
.lum-hero-inner{ text-align:center !important; }
.lum-eyebrow .elementor-heading-title{
  display:inline-block; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.26);
  border-radius:999px; padding:8px 16px; }
.lum-eyebrow .elementor-heading-title::before{ content:"\2726"; color:#E7C27D; margin-right:9px; }
.lum-hero-title .elementor-heading-title{
  font-family:'Fraunces',Georgia,serif !important; font-optical-sizing:auto;
  text-shadow:0 2px 24px rgba(0,0,0,0.38); letter-spacing:-0.01em; }
.lum-hero-title .lum-gold{ color:#E7C27D !important; font-style:italic; }
.lum-hero-sub .elementor-widget-container{ text-shadow:0 1px 14px rgba(0,0,0,0.32); }
.lum-hero-trust{ margin-top:4px; }
.lum-hero-trust .elementor-icon-list-items.elementor-inline-items{
  justify-content:center; border-top:1px solid rgba(255,255,255,0.22); padding-top:16px; margin-top:8px; }
.lum-hero-trust .elementor-icon-list-icon i{ color:#E7C27D !important; }
.lum-hero-trust .elementor-icon-list-text{ text-shadow:0 1px 8px rgba(0,0,0,0.3); }
.lum-scroll{ margin-top:12px; opacity:.85; animation:lumBounce 1.9s ease-in-out infinite; }
@keyframes lumBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }
.lum-hero-inner > *{ animation:lumFadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
.lum-hero-inner > *:nth-child(1){ animation-delay:.05s; }
.lum-hero-inner > *:nth-child(2){ animation-delay:.14s; }
.lum-hero-inner > *:nth-child(3){ animation-delay:.23s; }
.lum-hero-inner > *:nth-child(4){ animation-delay:.32s; }
.lum-hero-inner > *:nth-child(5){ animation-delay:.41s; }
.lum-hero-inner > *:nth-child(6){ animation-delay:.5s; }
@keyframes lumFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .lum-hero-inner > *, .lum-scroll{ animation:none !important; } }

/* ---------- Fixed header ---------- */
.lum-header.e-con,
.lum-header{ position:fixed !important; top:0; left:0; right:0; width:100%; z-index:1000;
  box-shadow:0 6px 24px -18px rgba(11,31,58,.4); }
/* spacer under the fixed header is a real element, so no body offset needed */

/* ---------- Buttons: pill shape + lift ---------- */
.lum-btn .elementor-button{ border-radius:999px; font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:700; letter-spacing:.005em; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.lum-btn .elementor-button:hover{ transform:translateY(-2px); }
.lum-btn-wa .elementor-button{ box-shadow:0 10px 24px -10px rgba(37,211,102,.7); }

/* ---------- Card hover lift ---------- */
.lum-card{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lum-card:hover{ transform:translateY(-4px); box-shadow:0 28px 60px -24px rgba(11,31,58,.28); }

/* ---------- USP number badge (circle is native; just the type) ---------- */
.lum-num .elementor-heading-title{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; }

/* ---------- Service card: diagonal corner ribbon ---------- */
.lum-serv-card{ position:relative; overflow:hidden; }
.lum-ribbon{ position:absolute; top:0; right:0; width:150px; height:150px; z-index:3; pointer-events:none; overflow:hidden; }
.lum-ribbon .elementor-heading-title{ position:absolute; top:26px; right:-40px; width:170px; text-align:center;
  transform:rotate(45deg); background:var(--lum-blue); color:#fff;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.08em;
  padding:.34rem 0; box-shadow:0 2px 8px rgba(11,31,58,.3); }

/* ---------- Services: horizontal swipe slider (tablet + mobile) ---------- */
/* Desktop keeps the 4-across grid; below 1025px it becomes a scroll-snap carousel. */
@media (max-width:1024px){
  .lum-serv-slider{
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:0;
    padding-bottom:14px;
  }
  .lum-serv-slider > .lum-serv-card{
    flex:0 0 auto !important;
    scroll-snap-align:start;
  }
  .lum-serv-slider::-webkit-scrollbar{ height:8px; }
  .lum-serv-slider::-webkit-scrollbar-thumb{ background:rgba(11,31,58,.20); border-radius:999px; }
  .lum-serv-slider::-webkit-scrollbar-track{ background:rgba(11,31,58,.06); border-radius:999px; }
}
@media (min-width:768px) and (max-width:1024px){
  .lum-serv-slider > .lum-serv-card{ width:calc((100% - 40px) / 2.4) !important; }
}
@media (max-width:767px){
  /* centre the active card: pad each side by (half the track − half a card) */
  .lum-serv-slider{ padding-inline: calc(50% - 39vw) !important; scroll-padding-inline: calc(50% - 39vw) !important; margin-inline:0 !important; }
  .lum-serv-slider > .lum-serv-card{ width:78vw !important; scroll-snap-align:center !important; }
}

/* ---------- Gallery: image zoom + gradient caption ---------- */
.lum-gitem{ position:relative; overflow:hidden; border-radius:22px; }
.lum-gitem .elementor-widget-image,
.lum-gitem .elementor-widget-image .elementor-widget-container,
.lum-gitem .elementor-widget-image figure,
.lum-gitem .elementor-widget-image img{ height:100%; width:100%; }
.lum-gitem img{ object-fit:cover; transition:transform .5s ease; display:block; }
.lum-gitem:hover img{ transform:scale(1.06); }
.lum-gcap{ position:absolute !important; inset:auto 0 0 0; z-index:2; pointer-events:none; }

/* ---------- USP number badge (positioned via CSS) ---------- */
.lum-numbadge{ position:absolute !important; top:14px; left:14px; z-index:2;
  box-shadow:0 6px 14px -4px rgba(47,128,237,.7); }

/* ---------- Header: keep the XPro menu compact ---------- */
.lum-header .elementor-widget-xpro-horizontal-menu ul,
.lum-header .elementor-widget-xpro-horizontal-menu li{ height:auto !important; min-height:0 !important; align-items:center !important; }
.lum-header .elementor-widget-xpro-horizontal-menu a{ padding:10px 14px !important; line-height:1.25 !important; height:auto !important; min-height:0 !important; }
.lum-header .elementor-button{ padding-top:12px !important; padding-bottom:12px !important; }
.lum-header > .e-con-inner{ min-height:0 !important; flex-wrap:nowrap !important; }
.lum-header .lum-brand,
.lum-header .lum-brand-text{ flex:0 0 auto !important; width:auto !important; }
.lum-header .elementor-widget-xpro-horizontal-menu{ flex:0 1 auto; }
.lum-gcap .elementor-heading-title{ color:#fff; font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:700; font-size:.98rem; }

/* ---------- Reviews: quote glyph ---------- */
.lum-quote .elementor-heading-title{ font-family:Georgia,serif; font-size:2.6rem; line-height:1; color:rgba(47,128,237,.35); }
/* review avatars: force the 48px round box (Elementor drops the fixed size when
   the reviews are edited, collapsing the avatar to 0 height). CSS-driven so it
   survives editor re-saves. */
#reviews .lum-crop{ width:48px !important; height:48px !important; min-width:48px !important; max-width:48px !important; flex:0 0 48px !important; border-radius:999px !important; overflow:hidden !important; align-self:center; }
#reviews .lum-crop img{ object-position:center 20% !important; }

/* ---------- FAQ: native accordion, restyled to the design ---------- */
.lum-faq .elementor-accordion .elementor-accordion-item{ background:#fff; border:1px solid rgba(11,31,58,.08);
  border-radius:16px; box-shadow:0 2px 8px rgba(11,31,58,.06); margin-bottom:.8rem; overflow:hidden; }
.lum-faq .elementor-accordion .elementor-tab-title{ border:none !important; padding:1.05rem 1.3rem;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:700; font-size:1.02rem; color:var(--lum-navy); }
.lum-faq .elementor-accordion .elementor-tab-title.elementor-active{ color:var(--lum-blue); }
.lum-faq .elementor-accordion .elementor-tab-content{ border:none !important; padding:0 1.3rem 1.2rem;
  color:var(--lum-muted); font-size:.95rem; line-height:1.65; }
.lum-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon{ color:var(--lum-blue); }

/* ---------- Header nav (xpro menu) polish ---------- */
.lum-brand-name{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; color:var(--lum-navy); line-height:1.05; }
.lum-brand-sub{ font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lum-blue); }

/* ---------- Rating stars row ---------- */
.lum-stars .elementor-heading-title{ color:#F6B73C; letter-spacing:2px; font-size:1.4rem; }

/* ---------- Mobile + tablet: hamburger dropdown menu ----------
   XPro's own mobile drawer JS is unreliable, so the nav is driven entirely by
   our own `.lum-nav-open` class (toggled by a tiny script in the footer). */
@media (max-width:1024px){
  /* logo on the left; hamburger + Book grouped on the right */
  .lum-header > .e-con-inner{ justify-content:flex-start !important; gap:10px !important; }
  .lum-header > .e-con-inner > .lum-brand{ margin-right:auto !important; }
  /* show the menu widget as just the hamburger toggler */
  .lum-header .elementor-widget-xpro-horizontal-menu{ display:flex !important; align-items:center; flex:0 0 auto !important; }
  .lum-header .xpro-elementor-horizontal-menu-toggler-wrapper{ display:block !important; }
  .lum-header .xpro-elementor-horizontal-menu-toggler{
    width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
    background:#fff; border:1.5px solid rgba(11,31,58,.14); border-radius:12px; color:#0B1F3A; font-size:20px; cursor:pointer; }
  /* neutralise XPro's own drawer / overlay / close — only .lum-nav-open shows anything */
  .lum-header .elementor-widget-xpro-horizontal-menu .xpro-elementor-horizontal-navbar-wrapper,
  .lum-header .elementor-widget-xpro-horizontal-menu .xpro-elementor-horizontal-menu-overlay,
  .lum-header .elementor-widget-xpro-horizontal-menu .xpro-elementor-horizontal-menu-close{ display:none !important; }
  /* OPEN: dropdown panel directly below the header */
  .lum-header .elementor-widget-xpro-horizontal-menu.lum-nav-open .xpro-elementor-horizontal-navbar-wrapper{
    display:block !important; position:fixed; top:var(--lum-hh,90px); left:0; right:0; z-index:1001;
    background:#fff; box-shadow:0 26px 44px -22px rgba(11,31,58,.5); border-top:1px solid rgba(11,31,58,.08);
    padding:10px 20px 18px; max-height:calc(100dvh - var(--lum-hh,90px)); overflow-y:auto;
    transform:none !important; visibility:visible !important; opacity:1 !important; }
  .lum-header .elementor-widget-xpro-horizontal-menu.lum-nav-open .xpro-elementor-horizontal-navbar{ width:100% !important; }
  .lum-header .elementor-widget-xpro-horizontal-menu.lum-nav-open ul.xpro-elementor-horizontal-navbar-nav{
    display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:2px !important; width:100% !important; padding:0 !important; margin:0 !important; }
  .lum-header .elementor-widget-xpro-horizontal-menu.lum-nav-open li.menu-item{ display:block !important; width:100% !important; }
  .lum-header .elementor-widget-xpro-horizontal-menu.lum-nav-open li.menu-item a{
    display:block !important; padding:13px 12px !important; font-size:16px !important; line-height:1.2 !important;
    color:#0B1F3A !important; border-radius:8px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:600 !important; }
  .lum-header .elementor-widget-xpro-horizontal-menu.lum-nav-open li.menu-item a:hover{ background:rgba(47,128,237,.08); color:#2F80ED !important; }
}

/* ---------- Small screens ---------- */
@media (max-width:767px){
  .lum-ribbon .elementor-heading-title{ font-size:.66rem; }
  /* (removed the hard 34px hero-title override so the Elementor font-size control works) */
  .lum-header .elementor-button{ padding-left:16px !important; padding-right:16px !important; font-size:14px !important; }
  .lum-brand-name{ font-size:16px !important; }
  /* mobile side gutters so content isn't flush to the screen edge */
  .lum-anchor > .e-con-inner,
  .lum-header > .e-con-inner,
  #site-footer > .e-con-inner{ padding-left:18px !important; padding-right:18px !important; }
  /* gallery stays 2-up on phones (3 rows x 2 cols), matching the localhost design */
  .lum-gitem{ width:calc((100% - 16px) / 2) !important; }
}