/* Smart Appliance Care — generated by build/builder.php. Edit build/extras.css, not this file. */
/* ── Color tokens ──────────────────────────────────────────────────────
   Anchored on the Sri Vaari brand blue (#3870C0), sampled directly from
   the logo. Cool slate neutrals keep the system calm and trustworthy;
   restrained semantic colors signal status without competing with brand.
   ──────────────────────────────────────────────────────────────────── */
:root {
  /* Brand blue scale */
  --blue-50:  #eef4fb;
  --blue-100: #d8e6f6;
  --blue-200: #b3cdec;
  --blue-300: #84aedf;
  --blue-400: #568cd0;
  --blue-500: #3870c0;   /* ← brand blue (logo) */
  --blue-600: #2f5ca3;
  --blue-700: #294d85;
  --blue-800: #243f6b;
  --blue-900: #1f3556;

  /* Slate neutral scale */
  --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;

  /* Semantic hues */
  --green-500:  #1f9d5b;
  --green-50:   #e8f6ee;
  --amber-500:  #e29412;
  --amber-50:   #fdf3e0;
  --red-500:    #d8453a;
  --red-50:     #fbe9e7;

  /* ── Semantic aliases ── */
  --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);

  --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 ─────────────────────────────────────────────────
   Display: Poppins (rounded geometric, echoes the logo wordmark)
   Body:    Mulish (humanist, highly legible at small sizes)
   ──────────────────────────────────────────────────────────────────── */
: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;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    800; /* @kind other */

  /* Type scale (1.25 major-third-ish, tuned for service-business UI) */
  --fs-display: 3.5rem;   /* 56px hero */
  --fs-h1:      2.5rem;   /* 40px */
  --fs-h2:      2rem;     /* 32px */
  --fs-h3:      1.5rem;   /* 24px */
  --fs-h4:      1.25rem;  /* 20px */
  --fs-lg:      1.125rem; /* 18px lead */
  --fs-base:    1rem;     /* 16px body */
  --fs-sm:      0.875rem; /* 14px */
  --fs-xs:      0.75rem;  /* 12px label/eyebrow */

  /* Line heights */
  --lh-tight:   1.1; /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide:   0.04em; /* @kind other */
  --ls-eyebrow: 0.18em; /* @kind other */
}

/* ── Spacing, radius, shadow, motion tokens ───────────────────────────── */
:root {
  /* 4px base spacing scale */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* Radii — soft & rounded to echo the friendly logo */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Shadows — soft, cool-tinted, never harsh */
  --shadow-xs: 0 1px 2px rgba(20, 26, 33, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 26, 33, 0.07);
  --shadow-md: 0 6px 18px rgba(31, 53, 86, 0.10);
  --shadow-lg: 0 16px 40px rgba(31, 53, 86, 0.14);
  --shadow-brand: 0 10px 24px rgba(56, 112, 192, 0.28);

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-5);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* ── Base element styles & helpers ─────────────────────────────────────
   Light-touch resets and brand defaults. Tokens come from the other
   imported files; this provides sensible document defaults.
   ──────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  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;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Eyebrow / kicker — tracked caps, the "SERVICE POINT" treatment */
.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);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Design canvas overrides ── */

:root{
  --font-display:'DM Sans',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --blue-50:#f2fafa; --blue-100:#d5eeef; --blue-200:#b0dfe1; --blue-300:#6fb9bd;
  --blue-400:#1a8f95; --blue-500:#10767b; --blue-600:#0d6165; --blue-700:#0a4d51;
  --blue-800:#06282a; --blue-900:#111111;
  --slate-50:#f7f7f7; --slate-100:#f0f0f0; --slate-200:#e4e4e4; --slate-300:#c9c9c9;
  --slate-400:#6e6e6e; --slate-500:#595959; --slate-600:#454545; --slate-700:#333333;
  --slate-800:#1f1f1f; --slate-900:#111111;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 2px 6px rgba(0,0,0,.07);
  --shadow-md:0 6px 18px rgba(0,0,0,.09);
  --shadow-lg:0 16px 40px rgba(0,0,0,.14);
  --shadow-brand:0 10px 22px rgba(19,128,134,.30);
  --focus-ring:rgba(19,128,134,.40);
  --text-link:var(--slate-900);
}
body{margin:0;background:var(--slate-50);}
a{color:#111111;text-decoration:none;}
a:hover{color:var(--slate-600);text-decoration:underline;}
@keyframes sacFade{from{opacity:0}to{opacity:1}}
@keyframes sacMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sacRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── WordPress / Elementor integration layer ───────────────────────── */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.sac-lock{overflow:hidden}
body.sac{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--slate-50);font-family:var(--font-body);color:var(--slate-700);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.sac>[data-elementor-type="wp-page"],body.sac>.sac-main{flex:1 0 auto;width:100%}
body.sac>.sac-site-header,body.sac>.sac-site-footer{width:100%}
img{max-width:100%}
button,input,select,textarea{font:inherit}
button{-webkit-tap-highlight-color:transparent}

/* Sticky site header (the wrapper is a direct child of <body>) */
.sac-site-header{position:sticky;top:0;z-index:60}
body.admin-bar .sac-site-header{top:32px}
@media (max-width:782px){body.admin-bar .sac-site-header{top:46px}}
@media (max-width:600px){body.admin-bar .sac-site-header{top:0}}

/* Desktop / mobile switches (design breakpoint: 980px) */
.sac-desk,.sac-mob{display:contents}
@media (max-width:979.98px){.sac-desk{display:none!important}}
@media (min-width:980px){.sac-mob,#sac-menu{display:none!important}}

/* Active nav underline */
.sac-ind{display:none}
body.sac-page-home .sac-ind[data-nav="home"],
body.sac-page-about .sac-ind[data-nav="about"],
body.sac-page-washing .sac-ind[data-nav="washing"],
body.sac-page-fridge .sac-ind[data-nav="fridge"],
body.sac-page-ac .sac-ind[data-nav="ac"],
body.sac-page-contact .sac-ind[data-nav="contact"]{display:block}

/* Neutralise Elementor boxing around the design sections */
.elementor .e-con.sac-sec{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;--margin-block-start:0px;--margin-block-end:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--width:100%;padding:0!important;margin:0!important;gap:0!important;max-width:none!important;width:100%}
.elementor .e-con.sac-sec>.elementor-element{margin:0!important;width:100%;max-width:100%}
.elementor .sac-sec .elementor-widget-html,.elementor .sac-sec .elementor-widget-container{margin:0;padding:0}
.elementor-widget-html{--kit-widget-spacing:0px}

/* Converted buttons (design buttons that navigate are real links) */
a.sac-btn,a.sac-btn:hover,a.sac-btn:focus{text-decoration:none}
a[style*="border-radius:999px"]:hover{text-decoration:none}
[class*="sac-h-"]{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .2s ease,transform .2s ease}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* Form fields — Input / Select from the design system */
.sac-input{display:block;width:100%;min-width:0;margin:0;padding:12px 16px;font-family:var(--font-body);font-size:var(--fs-base);line-height:1.4;color:var(--text-strong);background:var(--surface-card);border:1.5px solid var(--border-default);border-radius:var(--radius-md);outline:none;box-sizing:border-box;-webkit-appearance:none;appearance:none;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.sac-input:focus{border-color:var(--border-brand);box-shadow:0 0 0 3px var(--focus-ring)}
.sac-input::placeholder{color:var(--slate-400);opacity:1}
select.sac-input{padding-right:40px;cursor:pointer}
.sac-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
button[disabled]{opacity:.7;cursor:progress}

/* Accessibility helpers (theme stylesheet is disabled) */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:8px;top:8px;z-index:100000;padding:12px 18px;background:#fff;color:#111;border-radius:8px;box-shadow:var(--shadow-md)}