/* ==========================================================================
   Focus Singh site kit v1 (23 Sep 2026)  -  fsm-kit.css
   Shared base for EVERY preview, concept and client site. Import it FIRST,
   then the site's own site.css. Never edit per client: map your tokens instead.
   Covers Quality Gate G1 (mobile nav), G2 (sticky bar), G3 (states + theme
   bleed), G4 (text fit), G6 (print), G9 (tap targets, focus, reduced motion).
   ========================================================================== */

/* ---- 1. Tokens the kit reads. Each site maps its own tokens onto these. ---- */
[data-fsk-page]{
  --fsk-bg:#FFFFFF; --fsk-surface:#F6F6F4; --fsk-text:#141414; --fsk-muted:#555555;
  --fsk-line:#E2E2DE; --fsk-accent:#1A1A1A; --fsk-on-accent:#FFFFFF;
  --fsk-accent-hover:#333333; --fsk-link:#1A1A1A; --fsk-focus:#3B5BFF;
  --fsk-header-bg:var(--fsk-bg); --fsk-header-text:var(--fsk-text);
  --fsk-bar-bg:#111111; --fsk-bar-text:#FFFFFF; --fsk-wa:#128C3C; --fsk-on-wa:#FFFFFF;
  --fsk-font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fsk-font-display:var(--fsk-font-body);
  --fsk-container:1200px; --fsk-gutter:clamp(16px,4vw,32px);
  --fsk-header-h:64px; --fsk-bar-h:0px;
  /* spacing scale (G5) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
}

/* ---- 2. Reset scoped to the page wrapper (WordPress/Hello Elementor safe) ---- */
[data-fsk-page],[data-fsk-page] *,[data-fsk-page] *::before,[data-fsk-page] *::after{box-sizing:border-box}
[data-fsk-page]{background:var(--fsk-bg);color:var(--fsk-text);font-family:var(--fsk-font-body);
  line-height:1.6;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;overflow-x:clip;}
[data-fsk-page] :where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote){margin:0}
[data-fsk-page] :where(h1,h2,h3,h4){font-family:var(--fsk-font-display);text-wrap:balance;overflow-wrap:anywhere;line-height:1.1}
[data-fsk-page] :where(p,li){overflow-wrap:break-word;text-wrap:pretty}
[data-fsk-page] :where(img,video,svg,canvas,iframe){max-width:100%;height:auto;display:block}
[data-fsk-page] :where(button,input,select,textarea){font:inherit;color:inherit}
[data-fsk-page] :where(a){color:var(--fsk-link);text-decoration:none}
[data-fsk-page] :where(p a,li a,.fsk-prose a){text-decoration:underline;text-underline-offset:3px}
body:has([data-fsk-page]){margin:0;padding:0}
/* grid/flex children may shrink: kills the #1 cause of 360px overflow */
[data-fsk-page] :where(*){min-width:0}
[data-fsk-page] :where(table){width:100%;border-collapse:collapse}
.fsk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fsk-container{width:100%;max-width:var(--fsk-container);margin-inline:auto;padding-inline:var(--fsk-gutter)}
/* one visible focus ring everywhere (G9) */
[data-fsk-page] :focus-visible{outline:3px solid var(--fsk-focus);outline-offset:2px}

/* ---- 3. Buttons with every state written out (G3) ---- */
.fsk-btn,.fsk-btn:link,.fsk-btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;border:2px solid var(--fsk-accent);border-radius:var(--fsk-radius,6px);
  background:var(--fsk-accent);color:var(--fsk-on-accent);font-weight:600;font-size:16px;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .08s}
.fsk-btn:hover{background:var(--fsk-accent-hover);border-color:var(--fsk-accent-hover);color:var(--fsk-on-accent);text-decoration:none}
.fsk-btn:focus-visible{outline:3px solid var(--fsk-focus);outline-offset:3px;color:var(--fsk-on-accent)}
.fsk-btn:active{transform:translateY(1px)}
.fsk-btn:disabled,.fsk-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.fsk-btn--ghost,.fsk-btn--ghost:link,.fsk-btn--ghost:visited{background:transparent;color:var(--fsk-text);border-color:currentColor}
.fsk-btn--ghost:hover{background:var(--fsk-text);color:var(--fsk-bg);border-color:var(--fsk-text)}
.fsk-btn--ghost:focus-visible{color:var(--fsk-text)}
.fsk-btn--wa,.fsk-btn--wa:link,.fsk-btn--wa:visited{background:var(--fsk-wa);border-color:var(--fsk-wa);color:var(--fsk-on-wa)}
.fsk-btn--wa:hover{filter:brightness(.92);background:var(--fsk-wa);color:var(--fsk-on-wa)}
.fsk-header .fsk-btn--wa,.fsk-header .fsk-btn--wa:link,.fsk-header .fsk-btn--wa:visited{
  background:var(--fsk-text);border-color:var(--fsk-text);color:var(--fsk-bg);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:transform .18s,background-color .18s,box-shadow .18s;
}
.fsk-header .fsk-btn--wa:hover{
  background:#17171C;border-color:#17171C;color:var(--fsk-bg);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,0.22);filter:none;
}


/* ---- 4. Header + mobile menu (G1) ---- */
.fsk-header{position:sticky;top:0;z-index:50;background:var(--fsk-header-bg);color:var(--fsk-header-text);
  border-bottom:1px solid var(--fsk-line)}
.fsk-header__in{display:flex;align-items:center;gap:16px;min-height:var(--fsk-header-h)}
.fsk-logo{display:flex;align-items:center;gap:10px;max-width:70%;min-height:44px;color:inherit;font-weight:700;line-height:1.1}
.fsk-logo img,.fsk-logo svg{max-height:40px;width:auto}
.fsk-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.fsk-nav a,.fsk-nav a:link,.fsk-nav a:visited{color:inherit;text-decoration:none;padding:10px 12px;border-radius:4px;font-weight:500}
.fsk-nav a:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.fsk-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--fsk-accent)}
.fsk-burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;color:inherit;
  cursor:pointer;border-radius:6px;position:relative;flex:0 0 44px}
.fsk-burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.fsk-burger span:nth-child(1){top:15px}.fsk-burger span:nth-child(2){top:21px}.fsk-burger span:nth-child(3){top:27px}
.fsk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.fsk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.fsk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.fsk-menu{display:none}
@media (max-width:1023.98px){
  .fsk-nav{display:none}
  .fsk-burger{display:block}
  .fsk-menu{position:fixed;inset:var(--fsk-header-h) 0 0 0;z-index:49;background:var(--fsk-header-bg);color:var(--fsk-header-text);
    overflow-y:auto;padding:16px var(--fsk-gutter) calc(24px + env(safe-area-inset-bottom,0px))}
  .fsk-menu.is-open{display:block}
  .fsk-menu a:not(.fsk-btn),.fsk-menu a:not(.fsk-btn):link,.fsk-menu a:not(.fsk-btn):visited{display:flex;align-items:center;min-height:52px;
    font-size:19px;font-weight:600;color:inherit;text-decoration:none;border-bottom:1px solid var(--fsk-line)}
  .fsk-menu .fsk-menu__cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
}
html.fsk-lock, html.fsk-lock body, body.fsk-lock { overflow: hidden !important; touch-action: none; }

/* ---- 5. Phone sticky bar + desktop floating WhatsApp (G2) ---- */
.fsk-bar{display:none}
@media (max-width:860px){
  .fsk-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--fsk-bar-bg);
    transition:transform .22s ease}
  .fsk-bar a{min-height:48px}
  .fsk-bar .fsk-btn:not(.fsk-btn--wa),.fsk-bar .fsk-btn:not(.fsk-btn--wa):link,.fsk-bar .fsk-btn:not(.fsk-btn--wa):visited{background:var(--fsk-bar-text);color:var(--fsk-bar-bg);border-color:var(--fsk-bar-text)}
  .fsk-bar .fsk-btn:not(.fsk-btn--wa):hover{filter:brightness(.92)}
  .fsk-bar .fsk-btn--wa{background:#128C3C !important;border-color:#128C3C !important;color:#FFFFFF !important;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .fsk-bar .fsk-btn--wa svg{width:18px;height:18px;fill:currentColor}
  .fsk-bar.is-hidden{transform:translateY(110%)}
}
.fsk-fab{display:none !important}
@media (min-width:861px){
  .fsk-fab{position:fixed;right:24px;bottom:24px;z-index:40;display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
    width:56px;height:56px;border-radius:28px;
    background:#0F0F12;color:#F3F1EC;border:1px solid rgba(243,241,236,0.15);box-shadow:0 6px 20px rgba(0,0,0,0.3);
    transition:width .35s cubic-bezier(.2,.7,.2,1),padding .35s cubic-bezier(.2,.7,.2,1),transform .22s,opacity .22s;
    text-decoration:none;cursor:pointer;overflow:hidden;white-space:nowrap;padding:0}
  .fsk-fab svg{width:22px;height:22px;fill:currentColor;flex-shrink:0}
  .fsk-fab .fsk-fab-text{display:none;font-family:var(--fsk-font-body);font-size:14px;font-weight:600;color:#F3F1EC;padding-right:6px}
  .fsk-fab-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#25D366;border:2px solid #0F0F12}
  .fsk-fab.is-expanded{width:auto;padding-inline:16px}
  .fsk-fab.is-expanded .fsk-fab-text{display:inline-block}
  .fsk-fab.is-expanded .fsk-fab-dot{right:12px}
  .fsk-fab:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.4);color:#F3F1EC}
  .fsk-fab.is-hidden{opacity:0;transform:translateY(20px);pointer-events:none}
}


/* ---- 6. Reveal motion: content is visible at rest; JS opts in (G9) ---- */
.fsk-js [data-fsk-reveal]:not(.is-in){opacity:0;transform:translateY(14px)}
[data-fsk-reveal]{transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion:reduce){
  [data-fsk-page] *,[data-fsk-page] *::before,[data-fsk-page] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fsk-js [data-fsk-reveal]:not(.is-in){opacity:1;transform:none}
}

/* ---- 7. Forms (G9 labels, 16px inputs so iOS does not zoom) ---- */
.fsk-field{display:grid;gap:6px}
.fsk-field label{font-weight:600;font-size:15px}
.fsk-field :where(input,select,textarea){width:100%;min-height:48px;padding:12px 14px;font-size:16px;
  background:var(--fsk-bg);color:var(--fsk-text);border:1.5px solid var(--fsk-line);border-radius:6px}
.fsk-field textarea{min-height:112px;resize:vertical}

/* ---- 8. Accordion that wraps long titles (G4) ---- */
.fsk-acc summary{display:grid;grid-template-columns:1fr 28px;gap:12px;align-items:start;cursor:pointer;list-style:none;padding:16px 0;min-height:48px}
.fsk-acc summary::-webkit-details-marker{display:none}
.fsk-acc summary::after{content:"+";font-size:24px;line-height:1;text-align:center}
.fsk-acc[open] summary::after{content:"\2212"}

/* ---- 9. Print (G6) ---- */
@media print{
  @page{size:A4;margin:15mm}
  [data-fsk-page]{background:#fff!important;color:#000!important;padding:0!important;font-size:11pt}
  .fsk-header nav,.fsk-nav,.fsk-burger,.fsk-menu,.fsk-bar,.fsk-fab,.fsk-strip,.fsk-noprint,
  [data-fsk-page] :where(video,iframe,form,canvas){display:none!important}
  .fsk-header{position:static!important;border:0}
  [data-fsk-page] *{box-shadow:none!important;text-shadow:none!important;background-image:none!important}
  [data-fsk-page] a[href]::after{content:none!important}
  [data-fsk-page] :where(section,article,li,tr,.fsk-card,figure){break-inside:avoid}
  .fsk-js [data-fsk-reveal]{opacity:1!important;transform:none!important}
  html.fsk-printing-tool body *{visibility:hidden!important}
  html.fsk-printing-tool [data-print-target],html.fsk-printing-tool [data-print-target] *{visibility:visible!important}
  html.fsk-printing-tool [data-print-target]{position:absolute;left:0;top:0;width:100%}
}