/* ==========================================================================
   Sri Velavan Home Care — Foundation stylesheet
   Design system: Sri Vaari Service Point (tokens) + Sri Velavan brand skin.
   Assembled from _ds/tokens/{colors,typography,spacing,base}.css in import
   order, then the kit's runtime layout classes and the Elementor layer.
   ========================================================================== */

/* ── Color tokens ──────────────────────────────────────────────── */
:root{
  --blue-50:#eef4fb;--blue-100:#d8e6f6;--blue-200:#b3cdec;--blue-300:#84aedf;
  --blue-400:#568cd0;--blue-500:#3870c0;--blue-600:#2f5ca3;--blue-700:#294d85;
  --blue-800:#243f6b;--blue-900:#1f3556;
  --slate-0:#ffffff;--slate-50:#f6f8fb;--slate-100:#eef1f6;--slate-200:#dde3ec;
  --slate-300:#c4cdda;--slate-400:#95a2b3;--slate-500:#677687;--slate-600:#4b5868;
  --slate-700:#36414e;--slate-800:#232c36;--slate-900:#141a21;
  --green-600:#1a844d;--green-500:#1f9d5b;--green-50:#e8f6ee;--amber-500:#e29412;--amber-50:#fdf3e0;
  --red-500:#d8453a;--red-50:#fbe9e7;
  --color-brand:var(--blue-500);--color-brand-strong:var(--blue-600);
  --color-brand-stronger:var(--blue-700);--color-brand-soft:var(--blue-100);
  --color-brand-tint:var(--blue-50);--color-brand-ink:var(--blue-900);--color-whatsapp:var(--green-600);
  --text-strong:var(--slate-900);--text-body:var(--slate-700);
  --text-muted:var(--slate-500);--text-faint:var(--slate-400);
  --text-on-brand:var(--slate-0);--text-link:var(--blue-600);
  --surface-page:var(--slate-50);--surface-card:var(--slate-0);
  --surface-sunken:var(--slate-100);--surface-brand:var(--blue-500);
  --surface-brand-soft:var(--blue-50);--surface-ink:var(--slate-900);
  --border-subtle:var(--slate-200);--border-default:var(--slate-300);
  --border-strong:var(--slate-400);--border-brand:var(--blue-500);
  --focus-ring:color-mix(in srgb,var(--blue-500) 45%,transparent);
  --status-success:var(--green-500);--status-success-bg:var(--green-50);
  --status-warning:var(--amber-500);--status-warning-bg:var(--amber-50);
  --status-danger:var(--red-500);--status-danger-bg:var(--red-50);
}

/* ── Typography tokens ─────────────────────────────────────────── */
:root{
  --font-display:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-body:'Mulish','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;
  --fs-display:3.5rem;--fs-h1:2.5rem;--fs-h2:2rem;--fs-h3:1.5rem;--fs-h4:1.25rem;
  --fs-lg:1.125rem;--fs-base:1rem;--fs-sm:0.875rem;--fs-xs:0.75rem;
  --lh-tight:1.1;--lh-snug:1.25;--lh-normal:1.5;--lh-relaxed:1.65;
  --ls-tight:-0.02em;--ls-normal:0;--ls-wide:0.04em;--ls-eyebrow:0.18em;
}

/* ── Spacing / radius / shadow / motion tokens ───────────────────────── */
:root{
  --space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --radius-xl:24px;--radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(20,26,33,.06);
  --shadow-sm:0 2px 6px rgba(20,26,33,.07);
  --shadow-md:0 6px 18px rgba(31,53,86,.10);
  --shadow-lg:0 16px 40px rgba(31,53,86,.14);
  --shadow-brand:0 10px 24px rgba(56,112,192,.28);
  --container-max:1200px;--container-pad:var(--space-5);
  --ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms;--dur-base:220ms;--dur-slow:360ms;
}

/* ── Sri Velavan brand skin (overrides the Sri Vaari defaults) ─────────── */
:root{
  --blue-50:#eef1fd;--blue-100:#dbe0fb;--blue-200:#b9c3f6;--blue-300:#94a3f1;
  --blue-400:#6f83ec;--blue-500:#4B64E8;--blue-600:#3a4fc4;--blue-700:#2f409e;
  --blue-800:#28357d;--blue-900:#212b5e;
  --amber-500:#E6C06A;--amber-50:#fbf4e2;
  --surface-page:#ffffff;
  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --sv-secondary:#BC4999;
}

/* ── Base element styles ─────────────────────────────────────── */
.svhc *,.svhc *::before,.svhc *::after{box-sizing:border-box}
body.svhc{
  margin:0;font-family:var(--font-body);font-size:var(--fs-base);
  line-height:var(--lh-normal);color:var(--text-body);background:var(--surface-page);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* overflow-x:clip rather than hidden, so the sticky header keeps working */
html.svhc-html,body.svhc{overflow-x:clip;max-width:100%}
.svhc h1,.svhc h2,.svhc h3,.svhc h4,.svhc h5{
  font-family:var(--font-display);color:var(--text-strong);line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);margin:0;
}
.svhc p{margin:0}
.svhc a{color:var(--text-link);text-decoration:none}
.svhc a:hover{color:var(--color-brand-strong);text-decoration:underline}
.svhc img{max-width:100%;height:auto}
.svhc :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.sv-eyebrow{
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-brand);
}

/* ── Kit runtime layout classes ────────────────────────────────── */
.sv-hero-grid{display:grid}
.sv-2col{display:grid}
.sv-rail{-ms-overflow-style:none;scrollbar-width:none}
.sv-rail::-webkit-scrollbar{display:none;width:0;height:0}
@keyframes sv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sv-marquee-track{animation:sv-marquee 38s linear infinite}
.sv-marquee:hover .sv-marquee-track{animation-play-state:paused}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary::marker{content:''}
.sv-faq[open] .sv-faq-ico{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){
  .sv-marquee-track{animation:none}
}

/* ── Header / footer chrome responsive rules ───────────────────────── */
.sv-topbar{display:block}
@media(max-width:600px){.sv-topbar{display:none!important}}
.sv-desktop-nav{display:flex}
.sv-menu-btn{display:none}
.sv-head-book{display:inline-flex}
@media(max-width:900px){
  .sv-desktop-nav{display:none!important}
  .sv-menu-btn{display:inline-flex!important}
  .sv-head-book{display:none!important}
}
.sv-mobile-menu{display:none}
.sv-mobile-menu.is-open{display:block}
.sv-menu-btn .sv-ico-close{display:none}
.sv-menu-btn.is-open .sv-ico-close{display:block}
.sv-menu-btn.is-open .sv-ico-open{display:none}

/* ── Sticky mobile CTA bar ───────────────────────────────────── */
.sv-cta-bar{display:none}
@media(max-width:768px){
  .sv-cta-bar{display:grid!important}
  .sv-fab{bottom:84px!important}
  body.svhc{padding-bottom:56px}
}

/* ── Page responsive rules carried over from the kit ─────────────────── */
@media(max-width:900px){.sv-hero-grid{grid-template-columns:1fr!important;gap:32px!important}}
@media(max-width:760px){.sv-2col{grid-template-columns:1fr!important;gap:24px!important}}
@media(max-width:600px){
  .sv-stats-grid{grid-template-columns:1fr 1fr!important;gap:14px 20px!important}
  .sv-stat-num{font-size:24px!important}
  .sv-brand-logo{max-width:120px!important;height:52px!important}
  .sv-2up{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .sv-hero-cta{flex-wrap:nowrap!important;gap:10px!important}
  .sv-hero-cta .sv-cta-btn{flex:1 1 0;min-width:0;font-size:13px!important;padding:12px 10px!important;white-space:nowrap}
}

/* ── Hover states (replaces the kit runtime's generated .scp* classes) ──── */
.svh-nav:hover{background:var(--surface-brand-soft)!important;color:var(--color-brand-strong)!important;text-decoration:none!important}
.svh-soft:hover{background:var(--surface-brand-soft)!important;text-decoration:none!important}
.svh-light:hover{color:#ffffff!important;text-decoration:underline!important}
.svh-bright:hover{text-decoration:none!important;filter:brightness(1.05)!important}
.svh-lift{transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.svh-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.svh-press:active{transform:scale(.97)}

/* ── Modal / overlay layer ───────────────────────────────────── */
.sv-ov{
  position:fixed;inset:0;z-index:300;background:rgba(20,26,33,.55);
  backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:24px;
}
.sv-ov.is-open{display:flex}
.sv-ov--nudge{z-index:290;background:rgba(20,26,33,.5)}
.sv-ov-card{
  background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;padding:32px;position:relative;max-height:calc(100vh - 48px);overflow:auto;
}
.sv-ov-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:none!important;background:var(--surface-sunken)!important;color:var(--text-muted)!important;
  cursor:pointer;font-size:16px;line-height:1;padding:0!important;box-shadow:none!important;
  display:flex;align-items:center;justify-content:center;text-shadow:none;
}
.sv-ov-close:hover{background:var(--slate-200)!important;color:var(--text-strong)!important}
.sv-ov-close:focus,
.sv-ov-close:focus-visible{
  outline:2px solid var(--color-brand)!important;outline-offset:2px;
  background:var(--surface-sunken)!important;color:var(--text-muted)!important;
}
.sv-ov-card:focus,.sv-ov-card:focus-visible{outline:none}
body.sv-lock{overflow:hidden}

/* ── Form primitives (match the kit's DS Input/Select styling) ────────── */
/* Hidden staging area: forms are rendered here, then moved into the kit
   markup by svhc-ui.js (Elementor cannot nest a Form inside an HTML widget). */
.sv-form-holder,
.sv-form-holder.elementor-section,
section.sv-form-holder{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important}
/* Elementor stacks form fields with no breathing room once our section
   resets strip its margins — restore the kit's 14px rhythm. */
.sv-form .elementor-form-fields-wrapper{
  display:flex!important;flex-direction:column!important;gap:14px!important;
  margin:0!important;padding:0!important;width:100%!important;
}
.sv-form .elementor-field-group{
  width:100%!important;max-width:100%!important;flex:0 0 auto!important;
  margin:0!important;padding:0!important;
}
.sv-form .elementor-field-group > label{
  font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text-strong);margin-bottom:6px;display:block;
}
.sv-form .elementor-field-textual{
  width:100%;padding:12px 14px;border:1.5px solid var(--border-default);
  border-radius:var(--radius-md);font-family:var(--font-body);font-size:15px;
  color:var(--text-strong);background:var(--surface-card);line-height:1.4;height:auto;
}
.sv-form .elementor-field-textual:focus{
  border-color:var(--color-brand);box-shadow:0 0 0 3px var(--focus-ring);outline:none;
}
/* Elementor's Form widget paints its submit button with the global Accent
   colour; force the kit's brand button instead. */
.sv-form .elementor-button,
.sv-form button[type="submit"],
.sv-form .elementor-button[type="submit"]{
  width:100%!important;justify-content:center!important;padding:13px 24px!important;
  border-radius:var(--radius-pill)!important;background-color:var(--color-brand)!important;
  background-image:none!important;color:#fff!important;font-family:var(--font-display)!important;
  font-weight:600!important;font-size:16px!important;border:1px solid var(--color-brand)!important;
  box-shadow:var(--shadow-brand)!important;cursor:pointer;min-height:0!important;
}
.sv-form .elementor-button:hover{filter:brightness(1.05)}
.sv-form .elementor-button .elementor-button-content-wrapper{justify-content:center}
.sv-form .elementor-field-group.elementor-field-type-submit{margin-top:2px}
.sv-form .elementor-message{font-family:var(--font-body);font-size:14px}

/* ── WordPress / Elementor integration ──────────────────────────── */
/* Neutralise Elementor's content boxing on kit sections so full-bleed
   backgrounds reach the viewport edge. Scoped to our own class, and never
   using section-stretched (the usual cause of mobile right-side overflow). */
.svhc-sec > .elementor-container{max-width:100%!important;width:100%!important}
.svhc-sec.elementor-section{padding:0!important;margin:0!important}
.svhc-sec .elementor-column,
.svhc-sec .elementor-element-populated,
.svhc-sec .elementor-widget-wrap{padding:0!important;margin:0!important}
.svhc-sec .elementor-widget-html > .elementor-widget-container{margin:0!important;padding:0!important}
.svhc-sec .elementor-widget:not(:last-child){margin-bottom:0!important}
.svhc-sec .elementor-widget{margin-bottom:0!important}
.svhc-chrome > .elementor-container{max-width:100%!important;width:100%!important}
body.svhc .site-main,body.svhc .page-content{margin:0;padding:0;max-width:none}
body.svhc .entry-header,body.svhc .page-header,body.svhc .entry-title{display:none}

/* ── Small-screen hardening (mobile QA pass, 2026-08-19) ─────────────────
   The kit's inline auto-fit grids declare track minimums (260–300px) that are
   wider than the content box on 320–390px phones. Because html/body use
   overflow-x:clip, the excess is silently cut off rather than scrolled — text
   disappears past the right edge. Collapse those tracks to a single column and
   trim the largest card paddings. Nothing here changes desktop rendering.   */
@media (max-width:600px){
  body.svhc [style*="minmax(240px"]:not(.sv-stats-grid):not(.sv-2up),
  body.svhc [style*="minmax(260px"]:not(.sv-stats-grid):not(.sv-2up),
  body.svhc [style*="minmax(280px"]:not(.sv-stats-grid):not(.sv-2up),
  body.svhc [style*="minmax(300px"]:not(.sv-stats-grid):not(.sv-2up){
    grid-template-columns:1fr!important;
  }
  /* Oversized promo/card padding on narrow screens */
  body.svhc [style*="padding: 52px 44px"],
  body.svhc [style*="padding: 48px 44px"],
  body.svhc [style*="padding: 48px 40px"]{padding:30px 20px!important}
  /* FAQ answers reserve 46px on the right for the toggle glyph — not needed once stacked */
  body.svhc [style*="padding: 0px 46px 24px 0px"]{padding:0 0 20px 0!important}
  /* Flex rows holding long copy must be allowed to shrink below their content width */
  body.svhc span[style*="display: flex"],
  body.svhc div[style*="display: flex"]{min-width:0}
  body.svhc [style*="font-size: 120px"]{font-size:72px!important}
  /* The 404 template's own <style> block forces 120px below 860px; that glyph
     runs off a 320px screen. Higher specificity wins over its !important. */
  body.svhc .sv-404-code{font-size:64px!important;line-height:1!important}
}
@media (max-width:400px){
  body.svhc [style*="minmax(200px"]:not(.sv-stats-grid):not(.sv-2up),
  body.svhc [style*="minmax(220px"]:not(.sv-stats-grid):not(.sv-2up){
    grid-template-columns:1fr!important;
  }
}