/* ==========================================================================
   ALL-IN-ONE ADAPTER (Infinity + Flare + Kairos)
   Purpose: Override hard-coded colors & per-template quirks using Empass tokens.
   Load order: after each page's template CSS and after base.tokens.css + base.components.css
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------
   Buttons (shared)
---------------------------------------------------------*/
.btn, button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  font-family: var(--font-heading, var(--font-2, inherit));
  color: var(--color-btn-text);
  background-color: var(--color-btn);
  border-color: var(--color-btn);
  border-radius: var(--radius-s);
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:hover, button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.btn:focus, button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background-color: var(--color-btn-hover);
  border-color: var(--color-btn-hover);
  color: var(--color-btn-hover-text);
}
.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
  background-color: var(--color-btn-primary);
  border-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}
.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover,
.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus {
  background-color: var(--color-btn-primary-hover);
  border-color: var(--color-btn-primary-hover);
  color: var(--color-btn-primary-hover-text);
}
.btn--stroke,
button.btn--stroke {
  background: transparent !important;
  border: 2px solid var(--color-btn-stroke);
  color: var(--color-btn-stroke-text);
}
.btn--stroke:hover, .btn--stroke:focus,
button.btn--stroke:hover, button.btn--stroke:focus {
  background: var(--color-btn-stroke-hover) !important;
  border-color: var(--color-btn-stroke-hover);
  color: var(--color-btn-stroke-hover-text);
}
/* sizes/pills keep from template CSS; we only unify tokens */

/* ------------------------------------------------------
   Header + Nav (all templates)
---------------------------------------------------------*/
/* Infinity/Flare */
.s-header__nav a,
.header-nav-wrap .header-main-nav li a,
.header-nav-wrap .header-cta__btn,
.s-header__menu-text {
  color: var(--header-link);
  font-family: var(--font-heading, var(--font-2, inherit));
}
.s-header__nav a:hover,
.s-header__nav a:focus,
.header-nav-wrap .header-main-nav li a:hover,
.header-nav-wrap .header-main-nav li a:focus,
.header-nav-wrap .header-main-nav li.current a,
.header-nav-wrap .header-cta__btn:hover {
  color: var(--header-link-hover);
}
/* mobile overlay panels */
.s-header__nav,
.header-nav-wrap {
  background: var(--color-bg);
}
/* logo treatments */
.header-logo, .s-header__logo, .logo, .site-logo {
  font-family: var(--font-logo, var(--font-heading));
  color: var(--brand-title, var(--header-link-hover));
}
/* menu toggle / close button */
.s-header__menu-toggle,
.s-header__nav-close-btn,
.header-menu-toggle {
  background: rgba(0,0,0,.25);
  color: var(--color-text-dark);
}

/* ------------------------------------------------------
   Footer (shared)
---------------------------------------------------------*/
.s-footer,
footer.s-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}
.s-footer .h6, .s-footer__block .h6, .s-footer h6 {
  color: var(--footer-heading);
}
.s-footer__block--end::before,
.s-footer__bottom::before {
  background-color: var(--footer-sep);
}
.ss-go-top a,
.ss-go-top .smoothscroll {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* ------------------------------------------------------
   Section: ABOUT (all templates)
---------------------------------------------------------*/
.s-about {
  background-color: var(--section-bg-strong); color: var(--color-text-dark);
  color: color-mix(in srgb, var(--color-text-dark) 80%, white);
}
.s-about .display-1,
.s-about h1, .s-about h2, .s-about h3 {
  color: var(--color-text-dark);
  font-family: var(--font-heading);
}
.s-about .section-header.has-bottom-sep::before,
.s-about__process::before {
  background-color: color-mix(in srgb, var(--color-text-dark) 15%, transparent);
}
.s-about__desc,
.about-desc {
  color: color-mix(in srgb, var(--color-text-dark) 60%, white);
}

/* ------------------------------------------------------
   Section: FEATURES (Kairos & others)
---------------------------------------------------------*/
.s-features {
  background-color: var(--color-gray-2);
  color: #111;
}
.features { margin-top: 7.2rem; }
.item-feature__icon {
  color: var(--color-1);
}
.features .item-feature .display-1,
.features .item-feature h3 {
  color: #111;
}

/* ------------------------------------------------------
   Section: DOWNLOAD (Kairos)
---------------------------------------------------------*/
.s-download {
  background-color: var(--section-bg-strong); color: var(--color-text-dark); 
  color: color-mix(in srgb, white 80%, var(--color-1));
}
.s-download .display-1,
.s-download h3 { color: #fff; }
.s-download p.lead { color: color-mix(in srgb, white 65%, var(--color-1)); }
.download-content__badges .badge-appstore,
.download-content__badges .badge-googleplay {
  border-color: color-mix(in srgb, #fff 30%, var(--color-1));
  color: #fff;
}

/* ------------------------------------------------------
   Section: SERVICES / PORTFOLIO / CONTACT (Infinity/Flare)
---------------------------------------------------------*/
.s-services__bg,
.s-portfolio__header {
  background-color: var(--color-bg);
}
.s-services .h1, .s-services h1,
.s-services .h2, .s-services h2,
.s-portfolio .h1, .s-portfolio h1,
.s-contact .h1, .s-contact h1 {
  color: var(--brand-title, var(--color-text));
}
.s-contact__list a { color: var(--color-1); }
.s-contact__mail-block .btn--primary { background-color: var(--color-1); border-color: var(--color-1); }

/* ------------------------------------------------------
   Section: HOME/HERO (shared)
---------------------------------------------------------*/
body:not([data-page="products"]) .s-home,
body:not([data-page="products"]) .s-hero {
  background-color: var(--color-bg);
}

.s-home,
.s-hero {
  color: var(--color-text);
}

.home-content__buttons .btn--stroke { border-color: var(--color-btn-stroke); color: var(--color-btn-stroke-text); }
.home-content__buttons .btn--primary { background-color: var(--color-btn-primary); border-color: var(--color-btn-primary); }

/* ------------------------------------------------------
   Section: PRICING / TESTIMONIALS / CLIENTS / STATS
---------------------------------------------------------*/
.s-pricing,
.testimonials,
.clients-outer,
.stats,
.stats-tabs,
.clients {
  background-color: var(--color-bg);
  color: var(--color-text);
}
.testimonials .slick-prev,
.testimonials .slick-next,
.testimonial-slider .slick-prev,
.testimonial-slider .slick-next {
  background: color-mix(in srgb, var(--color-1) 20%, transparent);
  border-color: transparent;
}
.testimonials__name, .testimonial-slider__author { color: var(--brand-title, #fff); }
.clients__slide img, .clients-outer .column img { filter: grayscale(100%) contrast(.9) brightness(.9); opacity: .8; }
.clients__slide img:hover, .clients-outer .column img:hover { filter: none; opacity: 1; }

/* ------------------------------------------------------
   Forms & inputs (shared)
---------------------------------------------------------*/
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
textarea, select {
  background-color: color-mix(in srgb, #fff 6%, var(--color-bg));
  color: var(--color-text);
  border-color: var(--color-border);
}
input::placeholder, textarea::placeholder { color: var(--color-placeholder); }
.ss-custom-select::after { border-top-color: var(--color-text); }

/* ------------------------------------------------------
   Tables / cards / utilities
---------------------------------------------------------*/
.card, .panel, .box, .tile {
  background: color-mix(in srgb, var(--color-bg) 90%, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: 0 10px 30px rgb(0 0 0 / .08);
}
.section-header.has-bottom-sep::before,
.block-1-3 .line {
  background: color-mix(in srgb, var(--color-text) 15%, transparent);
}

/* ensure consistent link color in dark sections */
.s-about a, .s-download a { color: #fff; }
.s-about a:hover, .s-download a:hover { color: color-mix(in srgb, #fff 70%, var(--color-1)); }

/* ------------------------------------------------------
   Accessibility and motion prefs
---------------------------------------------------------*/
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-1) 75%, white);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


body, .body, .site-wrapper, .page-wrapper { font-family: var(--font-body); }
h1.site-title, .major h2, .page-title, .intro h1 { font-family: var(--font-heading); }
.header-logo, .logo, .brandmark { font-family: var(--font-heading); }


/* ===== Flare footer (token-driven, responsive) ===== */
.s-footer{background:var(--footer-bg);color:var(--footer-text);padding:var(--space) 0;}

/* links */
.s-footer a{color:var(--brand-title);text-decoration:none;text-underline-offset:2px;}
.s-footer a:hover{opacity:.9;text-decoration:underline;}

/* 3-column grid by default (desktop & tablet) */
.s-footer__main{
  max-width:1200px;margin:0 auto;
  display:grid;gap:var(--space);
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:0 var(--space);
}

/* headings & logo */
.s-footer__block .h6{color:var(--footer-heading);margin:0 0 .75rem;}
.s-footer__logo{max-width:160px;height:auto;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2));}

/* end block separator */
.s-footer__block--end{position:relative;padding-right:1.25rem;}
.s-footer__block--end::before{
  content:"";position:absolute;right:0;top:.25rem;bottom:.25rem;
  width:2px;background:var(--footer-sep);
}

/* bottom row */
.s-footer__bottom{
  max-width:1200px;margin:var(--space) auto 0;padding:0 var(--space);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.ss-copyright{margin:0;}

/* go-top button (uses FA icon) */
.ss-go-top{z-index:2;position:fixed;bottom:4.4rem;right:4rem;opacity:0;visibility:hidden;
  transform:translate(0,200%);transition:all .5s cubic-bezier(.215,.61,.355,1);}
.ss-go-top.link-is-visible{opacity:1;visibility:visible;transform:translate(0,0);}
.ss-go-top a{
  display:inline-flex;align-items:center;justify-content:center;
  height:calc(1.875 * var(--space));width:calc(1.875 * var(--space));
  border-radius:50%;background:var(--color-black);color:#fff;transition:transform .3s;
}
.ss-go-top a i{font-size:1.25rem;line-height:1;}
.ss-go-top a:hover{transform:translateY(-2px);}

/* ---------- Harden typography (insulate from template globals) ---------- */
.s-footer{font-size:clamp(14px,1.2vw,16px);font-family:var(--font-body);line-height:1.6;}
.s-footer p{margin:0 0 .5rem 0;}
.s-footer .h6{
  font-family:var(--font-heading);font-weight:700;text-transform:uppercase;
  letter-spacing:clamp(.15em,.1em + .2vw,.25em);
  font-size:clamp(12px,1.2vw,14px);margin-top:0;
}
/* big address lines */
.s-footer__address p{
  font-family:var(--font-body);font-weight:var(--font-body-weight);
  font-size:clamp(12px,1.2vw,14px);
}

/* ---------- Responsiveness ---------- */
/* Keep 3 columns on tablet; only stack on small phones */
@media (max-width:700px){
  .s-footer__main{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .s-footer__block--end::before{display:none;}
  .s-footer__bottom{flex-direction:column;text-align:center;gap:.75rem;}
  .ss-go-top{right:var(--vspace-1);bottom:var(--vspace-1_5);}
}