/* =========================================================================
   EZHIL DENTAL CLINIC — SKIN
   =========================================================================
   Companion to the three Elementor templates. This is SKIN + STATE ONLY:
   colour, typography, radius, shadow, hover, animation, bilingual toggle,
   and the interactive-state styling the behaviour JS drives.

   LAYOUT is Elementor's job (native container flex/grid). The only layout
   here is the two unequal-ratio grids (hero, about) that a native column
   count cannot express — flagged [RATIO] — plus the bilingual show/hide.

   Load AFTER elementor-frontend (see README §9). Scoped to .ezhil-page /
   .ezhil-header / .ezhil-footer so nothing leaks into wp-admin or the editor.

   Palette aliases Elementor's four SYSTEM global colours; the six custom
   tokens stay literal (custom globals get per-install ids).
   ========================================================================= */

:root {
  --ez-primary:      var(--e-global-color-primary,   #0B3C74);
  --ez-primary-dark: var(--e-global-color-secondary, #072B54);
  --ez-ink:          var(--e-global-color-text,      #17222E);
  --ez-accent:       var(--e-global-color-accent,    #E39B2E);
  --ez-accent-dark:  #C07F1C;
  --ez-page:         #FAFBFD;
  --ez-soft:         #EAF1FA;
  --ez-ink-soft:     #4A5A6B;
  --ez-line:         #DCE5F0;
  --ez-success:      #1E9E5A;
  --ez-radius:       14px;
  --ez-radius-lg:    20px;
  --ez-shadow:       0 6px 24px rgba(11,60,116,.10);
  --ez-shadow-lg:    0 14px 40px rgba(11,60,116,.16);
  --ez-shadow-cta:   0 8px 20px rgba(227,155,46,.32);
  --ez-font-display: Georgia,'Times New Roman','Nirmala UI','Latha','Noto Sans Tamil',serif;
  --ez-font-body:    Verdana,'Segoe UI',Tahoma,'Nirmala UI','Latha','Noto Sans Tamil',sans-serif;
  --ez-font-tamil:   'Nirmala UI','Latha','Noto Sans Tamil',Verdana,'Segoe UI',Tahoma,sans-serif;
  --ez-header-h:     71px;
}

/* ---- page base ---------------------------------------------------------- */
.ezhil-page, .ezhil-header, .ezhil-footer {
  font-family: var(--ez-font-body); color: var(--ez-ink); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ezhil-page { background: var(--ez-page); }
.ezhil-tamil, .ezhil-tamil * { font-family: var(--ez-font-tamil); }

/* Headings: Elementor's .elementor-heading-title sets line-height:1 — beat it. */
.ezhil-page .elementor-heading-title,
.ezhil-header .elementor-heading-title,
.ezhil-footer .elementor-heading-title { line-height: 1.18; }

/* Anchor offset under the sticky header (+ admin bar when present). */
.ezhil-page :where(#main,#services,#about,#gallery,#testimonials,#booking,#faq,#location) {
  scroll-margin-top: calc(var(--ez-header-h) + var(--wp-admin--admin-bar--height, 0px));
}

/* ---- typography classes ------------------------------------------------- */
.ezhil-eyebrow .elementor-heading-title { display:inline-block; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ez-accent-dark); font-weight:bold; }
.ezhil-eyebrow.ezhil-on-primary .elementor-heading-title { color:var(--ez-accent); }
.ezhil-h2 .elementor-heading-title    { font-family:var(--ez-font-display); font-size:clamp(25px,4.2vw,38px); font-weight:bold; color:var(--ez-primary-dark); }
.ezhil-h2.ezhil-on-primary .elementor-heading-title { color:#fff; }
.ezhil-h2-sm .elementor-heading-title { font-family:var(--ez-font-display); font-size:clamp(24px,3.6vw,32px); font-weight:bold; color:var(--ez-primary-dark); }
.ezhil-lede .elementor-heading-title  { font-size:clamp(14.5px,1.6vw,16.5px); color:var(--ez-ink-soft); font-weight:normal; }
.ezhil-lede.ezhil-on-primary .elementor-heading-title { color:rgba(255,255,255,.78); }
.ezhil-body { font-size:clamp(14.5px,1.7vw,15.5px); color:var(--ez-ink-soft); }
.ezhil-body .elementor-heading-title { font-weight:normal; color:var(--ez-ink-soft); font-size:clamp(14.5px,1.7vw,15.5px); }
.ezhil-section-head { max-width:660px; margin-inline:auto; text-align:center; }

/* ---- icons --------------------------------------------------------------
   Icons render as CSS-mask <i> (assets/icons/ezhil-icons.css) — colour comes
   from currentColor, size from an explicit box here. The svg selectors are a
   fallback in case an icon is placed as an uploaded SVG instead. */
.ezhil-ico svg, .ezhil-ico i { width:20px; height:20px; font-size:20px; }
.ezhil-ico svg { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ezhil-ico-fill svg { fill:currentColor; stroke:none; }

/* ---- buttons ------------------------------------------------------------ */
.ezhil-btn .elementor-button,
.ezhil-btn a.elementor-button {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:999px; font-weight:bold; font-size:15px;
  border:2px solid transparent; min-height:48px; line-height:normal;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.ezhil-btn .elementor-button:hover { transform:translateY(-2px); }
.ezhil-btn-primary .elementor-button { background:var(--ez-accent); color:#fff; box-shadow:var(--ez-shadow-cta); }
.ezhil-btn-primary .elementor-button:hover { background:var(--ez-accent-dark); }
.ezhil-btn-wa .elementor-button { background:var(--ez-success); color:#fff; }
.ezhil-btn-outline .elementor-button { background:transparent; border-color:var(--ez-primary); color:var(--ez-primary); }
.ezhil-btn-outline .elementor-button:hover { background:var(--ez-primary); color:#fff; }

/* ---- header ------------------------------------------------------------- */
.ezhil-header { position:sticky; top:0; z-index:500; background:rgba(250,251,253,.97); backdrop-filter:blur(8px); border-bottom:1px solid var(--ez-line); }
.ezhil-logo img { width:42px; height:42px; }
.ezhil-brand-name .elementor-heading-title { font-family:var(--ez-font-display); font-size:clamp(16px,2.2vw,19px); font-weight:bold; color:var(--ez-primary-dark); white-space:nowrap; line-height:1.15; }
.ezhil-brand-sub .elementor-heading-title { font-size:11px; color:var(--ez-ink-soft); letter-spacing:.03em; }
.ezhil-nav a { color:var(--ez-ink); font-size:14px; font-weight:bold; }
.ezhil-lang-btn .elementor-button { border:2px solid var(--ez-line); background:#fff; border-radius:999px; padding:9px 14px; font-size:12.5px; font-weight:bold; color:var(--ez-primary); min-height:42px; }
.ezhil-burger .elementor-button { background:none; color:var(--ez-primary-dark); padding:0; width:46px; height:46px; min-height:46px; }
.ezhil-burger { display:none; }
@media (max-width:1024px){
  .ezhil-burger { display:block; }
  .ezhil-call-desktop { display:none; }
  /* Nav mobile behaviour: see README — resolve in editor (Nav Menu widget
     ships its own mobile toggle; the custom burger is optional). */
}

/* ---- hero --------------------------------------------------------------- */
.ezhil-hero { background:linear-gradient(165deg,var(--ez-soft) 0%, var(--ez-page) 62%); padding-block:clamp(32px,5vw,56px) clamp(40px,6vw,64px) !important; }
.ezhil-slider { position:relative; }
.ezhil-slide { display:none !important; }
.ezhil-slide[data-active="true"] { display:grid !important; }              /* state */
.ezhil-hero-grid { grid-template-columns:1fr; gap:clamp(28px,5vw,52px); align-items:center; }
@media (min-width:961px){ .ezhil-hero-grid { grid-template-columns:1.08fr .92fr; } }  /* [RATIO] */
.ezhil-slide[data-active="true"] .ezhil-slide-copy > * { animation:ezhilRise .5s ease both; }
.ezhil-slide[data-active="true"] .ezhil-slide-copy > *:nth-child(2){ animation-delay:.06s; }
.ezhil-slide[data-active="true"] .ezhil-slide-copy > *:nth-child(3){ animation-delay:.12s; }
.ezhil-slide[data-active="true"] .ezhil-slide-copy > *:nth-child(4){ animation-delay:.18s; }
.ezhil-slide[data-active="true"] .ezhil-slide-copy > *:nth-child(5){ animation-delay:.24s; }
@keyframes ezhilRise { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.ezhil-badge { background:#fff; border:1px solid var(--ez-line); padding:7px 13px; border-radius:999px; box-shadow:var(--ez-shadow); }
.ezhil-badge-text .elementor-heading-title { font-size:12.5px; font-weight:bold; color:var(--ez-primary-dark); }
.ezhil-badge .ezhil-ico { color:var(--ez-accent); }
.ezhil-hero-h1 .elementor-heading-title { font-family:var(--ez-font-display); font-size:clamp(28px,5.2vw,50px); font-weight:bold; color:var(--ez-primary-dark); line-height:1.18; margin-bottom:14px; }
.ezhil-hero-h1 .ezhil-accent { display:block; color:var(--ez-accent-dark); }
.ezhil-hero-tamil .elementor-heading-title { font-size:clamp(15px,2vw,18px); color:var(--ez-primary); font-weight:bold; margin-bottom:14px; }
.ezhil-hero-lede { max-width:520px; margin-bottom:26px; }
.ezhil-hero-lede .elementor-heading-title,
.ezhil-hero-lede p { font-size:clamp(14.5px,1.7vw,16.5px); color:var(--ez-ink-soft); }
.ezhil-hero-visual { position:relative; background:var(--ez-primary); border-radius:var(--ez-radius-lg); aspect-ratio:4/3; overflow:hidden; display:flex; align-items:flex-end; box-shadow:var(--ez-shadow-lg); }
@media (min-width:521px){ .ezhil-hero-visual{ aspect-ratio:16/10; } }
@media (min-width:961px){ .ezhil-hero-visual{ aspect-ratio:4/5; } }
.ezhil-hero-visual::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.14), transparent 60%); }
.ezhil-photo-note { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.82); text-align:center; padding:24px; z-index:1; }
.ezhil-photo-note .ezhil-ico svg, .ezhil-photo-note .ezhil-ico i { width:34px; height:34px; font-size:34px; }
.ezhil-photo-label .elementor-heading-title { font-size:12.5px; color:rgba(255,255,255,.82); font-weight:normal; }
.ezhil-doctor-card { position:relative; z-index:2; background:rgba(7,43,84,.92); color:#fff; margin:14px; padding:14px 16px; border-radius:12px; width:calc(100% - 28px); }
.ezhil-dc-ico { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ezhil-dc-title .elementor-heading-title { font-family:var(--ez-font-display); font-size:16px; color:#fff; font-weight:bold; }
.ezhil-dc-sub .elementor-heading-title { font-size:12.5px; color:#fff; opacity:.85; font-weight:normal; }
.ezhil-slider-controls { margin-top:26px; }
.ezhil-arrow .elementor-button { width:44px; height:44px; min-height:44px; border-radius:50%; border:2px solid var(--ez-line); background:#fff; color:var(--ez-primary); padding:0; }
.ezhil-arrow .elementor-button:hover { background:var(--ez-primary); color:#fff; border-color:var(--ez-primary); transform:none; }
.ezhil-dots { align-items:center; gap:8px; }
.ezhil-dot { width:9px; height:9px; border-radius:999px; background:var(--ez-line); transition:all .25s ease; padding:0; border:none; }
.ezhil-dot[aria-current="true"] { width:28px; background:var(--ez-accent); }
.ezhil-slide-count .elementor-heading-title { font-size:12.5px; font-weight:bold; color:var(--ez-ink-soft); margin-left:auto; }

/* ---- trust -------------------------------------------------------------- */
.ezhil-trust { background:var(--ez-primary-dark); color:#fff; }
.ezhil-stat { text-align:center; }
.ezhil-stat-ico { color:var(--ez-accent); justify-content:center; }
.ezhil-stat-num .elementor-heading-title { font-family:var(--ez-font-display); font-size:clamp(22px,3.4vw,30px); color:var(--ez-accent); font-weight:bold; }
.ezhil-stat-label .elementor-heading-title { font-size:12.5px; color:#fff; opacity:.85; font-weight:normal; }

/* ---- cards (services + why) --------------------------------------------- */
.ezhil-card { background:#fff; border:1px solid var(--ez-line); border-radius:var(--ez-radius); padding:24px; box-shadow:var(--ez-shadow); transition:transform .18s ease, box-shadow .18s ease; }
.ezhil-card:not(.ezhil-card-flat):hover { transform:translateY(-4px); box-shadow:var(--ez-shadow-lg); }
.ezhil-card-flat { padding:26px; }
.ezhil-icon-box { width:48px; height:48px; border-radius:12px; background:var(--ez-soft); color:var(--ez-primary); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.ezhil-card-h3 .elementor-heading-title, .ezhil-why-h3 .elementor-heading-title { font-family:var(--ez-font-display); font-size:17px; font-weight:bold; color:var(--ez-primary-dark); }
.ezhil-why-h3 .elementor-heading-title { font-size:16.5px; }
.ezhil-card-ta .elementor-heading-title { font-size:12.5px; color:var(--ez-ink-soft); font-weight:normal; margin:4px 0 8px; }
.ezhil-card-desc, .ezhil-card-desc p { font-size:13.5px; color:var(--ez-ink-soft); }
.ezhil-check-list .elementor-icon-list-item { align-items:flex-start; }
.ezhil-check-list .elementor-icon-list-text { font-size:13px; color:var(--ez-ink-soft); }
.ezhil-check-list .elementor-icon-list-icon svg { color:var(--ez-success); width:15px; height:15px; }
.ezhil-check-list .elementor-icon-list-icon i { color:var(--ez-success); width:15px; height:15px; font-size:15px; }

/* ---- tabs (services filter) --------------------------------------------- */
.ezhil-tab .elementor-button { border:2px solid var(--ez-line); background:#fff; padding:10px 16px; border-radius:999px; font-weight:bold; font-size:13px; color:var(--ez-ink-soft); min-height:44px; white-space:nowrap; }
.ezhil-tab.is-active .elementor-button { background:var(--ez-primary); border-color:var(--ez-primary); color:#fff; }
/* Below 960 the tab row scrolls horizontally (native flex can't scroll-snap). */
@media (max-width:960px){
  .ezhil-tabs { flex-wrap:nowrap !important; justify-content:flex-start !important; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .ezhil-tabs > * { flex:0 0 auto; scroll-snap-align:start; }
}

/* ---- about -------------------------------------------------------------- */
.ezhil-about { background:var(--ez-soft); }
.ezhil-about-grid { align-items:center; }
@media (min-width:961px){ .ezhil-about-grid { grid-template-columns:.85fr 1.15fr !important; } }   /* [RATIO] */
.ezhil-doctor-photo { background:#fff; border-radius:var(--ez-radius-lg); aspect-ratio:16/10; border:2px dashed var(--ez-primary); box-shadow:var(--ez-shadow); }
@media (min-width:961px){ .ezhil-doctor-photo { aspect-ratio:3/4; } }
.ezhil-pill { background:#fff; padding:10px 15px; border-radius:10px; border:1px solid var(--ez-line); }
.ezhil-pill-text .elementor-heading-title { font-size:12.5px; font-weight:bold; color:var(--ez-primary-dark); }
.ezhil-pill .ezhil-ico { color:var(--ez-accent-dark); }

/* ---- gallery ------------------------------------------------------------ */
.ezhil-gallery { background:var(--ez-soft); }
.ezhil-gallery-item { aspect-ratio:1; border-radius:var(--ez-radius); background:linear-gradient(140deg,var(--ez-soft),var(--ez-line)); border:1px solid var(--ez-line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ez-primary); text-align:center; padding:12px; }
.ezhil-gallery-label .elementor-heading-title { font-size:12px; color:var(--ez-primary); font-weight:normal; }

/* ---- testimonials ------------------------------------------------------- */
.ezhil-testimonials { background:var(--ez-primary); }
.ezhil-testi-card { background:#fff; border-radius:var(--ez-radius); padding:24px; }
.ezhil-quote-ico { color:var(--ez-line); margin-bottom:8px; }
.ezhil-stars { color:var(--ez-accent); margin-bottom:12px; }
.ezhil-stars .ezhil-ico svg, .ezhil-stars .ezhil-ico i { width:15px; height:15px; font-size:15px; }
.ezhil-testi-quote, .ezhil-testi-quote p { font-size:14px; color:var(--ez-ink-soft); margin-bottom:16px; }
.ezhil-testi-name .elementor-heading-title { font-size:14px; font-weight:bold; color:var(--ez-primary-dark); }
.ezhil-testi-where { color:var(--ez-ink-soft); }
.ezhil-testi-area .elementor-heading-title { font-size:12px; color:var(--ez-ink-soft); font-weight:normal; }

/* ---- booking ------------------------------------------------------------ */
.ezhil-booking-box { background:#fff; border:1px solid var(--ez-line); border-radius:var(--ez-radius-lg); box-shadow:var(--ez-shadow-lg); padding:clamp(20px,4vw,32px); max-width:840px; margin-inline:auto; }
.ezhil-step { background:var(--ez-soft); color:var(--ez-ink-soft); padding:7px 13px; border-radius:999px; }
.ezhil-step[data-active="true"] { background:var(--ez-primary); color:#fff; }
.ezhil-step-text .elementor-heading-title { font-size:12px; font-weight:bold; color:inherit; }
.ezhil-booking-label .elementor-heading-title { font-size:12.5px; font-weight:bold; color:var(--ez-primary-dark); text-transform:uppercase; letter-spacing:.06em; }
.ezhil-date-row { gap:9px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.ezhil-date-chip { flex:0 0 auto; border:2px solid var(--ez-line); border-radius:12px; padding:10px 12px; text-align:center; min-width:62px; font-size:14px; font-weight:bold; color:var(--ez-primary-dark); background:#fff; scroll-snap-align:start; }
.ezhil-date-chip[aria-pressed="true"] { border-color:var(--ez-accent); background:var(--ez-soft); }
.ezhil-date-chip .d { font-size:11px; color:var(--ez-ink-soft); font-weight:normal; }
.ezhil-slot .elementor-button { border:2px solid var(--ez-line); border-radius:10px; padding:12px 6px; text-align:center; font-size:13px; font-weight:bold; color:var(--ez-ink-soft); background:#fff; min-height:46px; width:100%; }
.ezhil-slot.is-selected .elementor-button { border-color:var(--ez-primary); color:var(--ez-primary); background:var(--ez-soft); }
.ezhil-slot[disabled] .elementor-button { opacity:.38; text-decoration:line-through; cursor:not-allowed; }
.ezhil-confirm .elementor-button { width:100%; }
.ezhil-confirm[aria-disabled="true"] .elementor-button { opacity:.45; pointer-events:none; }
.ezhil-booking-note, .ezhil-booking-note p { font-size:11.5px; color:var(--ez-ink-soft); text-align:center; margin-top:12px; }

/* ---- faq (native nested accordion skin) --------------------------------- */
.ezhil-faq { background:var(--ez-soft); }
.ezhil-accordion .e-n-accordion-item { border-bottom:1px solid var(--ez-line); }
.ezhil-accordion .e-n-accordion-item-title { font-family:var(--ez-font-display); font-weight:bold; font-size:clamp(14.5px,1.8vw,15.5px); color:var(--ez-primary-dark); padding:16px 0; }
.ezhil-accordion .e-n-accordion-item-title-icon { color:var(--ez-accent-dark); }
.ezhil-faq-text, .ezhil-faq-text p { font-size:14px; color:var(--ez-ink-soft); padding-bottom:16px; }

/* ---- contact ------------------------------------------------------------ */
.ezhil-map-slot { background:var(--ez-soft); border-radius:var(--ez-radius-lg); min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ez-primary); text-align:center; padding:24px; border:2px dashed var(--ez-primary); }
.ezhil-map-title .elementor-heading-title { font-weight:bold; color:var(--ez-primary); }
.ezhil-map-addr .elementor-heading-title { font-size:12px; color:var(--ez-primary); font-weight:normal; }
.ezhil-info-list .elementor-icon-list-item { padding:14px 0; border-bottom:1px solid var(--ez-line); font-size:14.5px; align-items:flex-start; }
.ezhil-info-list .elementor-icon-list-icon svg,
.ezhil-info-list .elementor-icon-list-icon i { color:var(--ez-primary); }
.ezhil-info-list strong { display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ez-primary-dark); margin-bottom:3px; }

/* ---- footer ------------------------------------------------------------- */
.ezhil-footer { background:var(--ez-primary-dark); color:rgba(255,255,255,.85); padding:48px 0 24px; font-size:13.5px; }
.ezhil-footer-title .elementor-heading-title { font-family:var(--ez-font-display); font-size:20px; color:#fff; font-weight:bold; }
.ezhil-footer-h4 .elementor-heading-title { color:#fff; font-size:14px; font-weight:bold; }
.ezhil-footer-about, .ezhil-footer-about p { max-width:340px; opacity:.85; }
.ezhil-footer-nav a, .ezhil-footer-contact .elementor-icon-list-text { color:rgba(255,255,255,.85); }
.ezhil-footer-contact .elementor-icon-list-icon svg,
.ezhil-footer-contact .elementor-icon-list-icon i { color:#fff; }
.ezhil-footer-bottom, .ezhil-footer-bottom p { border-top:1px solid rgba(255,255,255,.15); padding-top:18px; text-align:center; font-size:12px; opacity:.7; margin-top:12px; }

/* ---- sticky mobile bar -------------------------------------------------- */
.ezhil-mobile-bar { display:none; position:fixed; inset:auto 0 0 0; z-index:600; background:#fff; border-top:1px solid var(--ez-line); box-shadow:0 -4px 16px rgba(0,0,0,.10); padding-bottom:env(safe-area-inset-bottom); }
@media (max-width:1024px){ .ezhil-mobile-bar { display:flex; } .ezhil-page { padding-bottom:60px; } }
.ezhil-mbar-item .elementor-button { flex-direction:column; gap:3px; padding:9px 0; font-size:10.5px; font-weight:bold; color:var(--ez-primary); min-height:56px; width:100%; border-radius:0; background:none; }
.ezhil-mbar-call .elementor-button { background:var(--ez-primary); color:#fff; }
.ezhil-mbar-wa .elementor-button { color:var(--ez-success); }

/* ---- skip link ---------------------------------------------------------- */
.ezhil-skip-link .elementor-button { position:absolute; left:-9999px; top:0; z-index:1000; background:var(--ez-primary-dark); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; }
.ezhil-skip-link .elementor-button:focus { left:0; }

/* ---- bilingual toggle --------------------------------------------------- */
html[data-lang="ta"] .ezhil-lang-en { display:none !important; }
html[data-lang="en"] .ezhil-lang-ta { display:none !important; }

/* ---- focus + reduced motion --------------------------------------------- */
.ezhil-page :focus-visible, .ezhil-header :focus-visible { outline:3px solid var(--ez-accent); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  .ezhil-page *, .ezhil-header * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}