/* ==========================================================
   SOAPKITS — Global Design Tokens
   All widgets inherit these. Override per widget as needed.
   ========================================================== */
:root {
  --soapkits-primary:        #111827;
  --soapkits-primary-hover:  #374151;
  --soapkits-accent:         #ef4444;
  --soapkits-accent-hover:   #dc2626;
  --soapkits-white:          #ffffff;
  --soapkits-surface:        #f9fafb;
  --soapkits-border:         #e5e7eb;
  --soapkits-text:           #111827;
  --soapkits-text-muted:     #6b7280;
  --soapkits-radius-sm:      6px;
  --soapkits-radius-md:      12px;
  --soapkits-radius-lg:      20px;
  --soapkits-radius-full:    9999px;
  --soapkits-shadow-sm:      0 1px 3px rgba(0,0,0,.08);
  --soapkits-shadow-md:      0 4px 16px rgba(0,0,0,.12);
  --soapkits-shadow-lg:      0 16px 48px rgba(0,0,0,.18);
  --soapkits-transition:     all .22s cubic-bezier(.4,0,.2,1);
  --soapkits-transition-slow: all .4s cubic-bezier(.4,0,.2,1);
  --soapkits-badge-bg:       var(--soapkits-accent);
  --soapkits-badge-color:    var(--soapkits-white);
  --soapkits-badge-size:     18px;
  --soapkits-drawer-width:   400px;
  --soapkits-drawer-z:       99999;
  --soapkits-overlay-bg:     rgba(0,0,0,.5);
  --soapkits-overlay-z:      99998;
}

html { scroll-behavior: smooth; }

.soapkits-btn:focus-visible,
.soapkits-icon-btn:focus-visible {
  outline: 3px solid var(--soapkits-accent);
  outline-offset: 3px;
}

@keyframes soapkits-skeleton {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.soapkits-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: soapkits-skeleton 1.4s ease infinite;
  border-radius: var(--soapkits-radius-sm);
}

.soapkits-overlay {
  position: fixed;
  inset: 0;
  background: var(--soapkits-overlay-bg);
  z-index: var(--soapkits-overlay-z);
  opacity: 0;
  visibility: hidden;
  transition: var(--soapkits-transition);
}
.soapkits-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.soapkits-btn {
  display: inline-block;
  padding: 12px 24px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--soapkits-radius-md);
  cursor: pointer;
  transition: var(--soapkits-transition);
  background: var(--soapkits-primary);
  color: var(--soapkits-white);
}
.soapkits-btn:hover {
  background: var(--soapkits-primary-hover);
}

/* ==========================================================
   soapKit Theme Builder — Page Layout
   Header and footer are rendered inside #page.site via
   Jeg Kit style get_header/get_footer template overriding.
   The body layout is left as-is (display: block) to prevent
   Elementor editor drag-and-drop / style-update conflicts.
   The #page wrapper becomes the flex container to push the
   footer to the bottom of the viewport on short pages.
   ========================================================== */

/* Page wrapper as flex container (Jeg Kit standard)
   Resist theme CSS that constrains #page with max-width, margin, or padding. */
.soapkit-template.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  box-sizing: border-box;
}

/* soapKit Custom Header — inside #page.site flex flow */
#soapkits-header-wrapper.soapkits-custom-header {
  position: relative;
  width: 100%;
  z-index: 9999;
  top: 0;
  flex-shrink: 0;
}

/* soapKit Custom Footer — pushed to bottom via margin-top: auto */
#soapkits-footer-wrapper.soapkits-custom-footer {
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}

#soapkits-footer-wrapper.soapkits-custom-footer .elementor-section:last-child,
#soapkits-footer-wrapper.soapkits-custom-footer .elementor-widget:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#soapkits-footer-wrapper.soapkits-custom-footer .elementor-container {
  margin-bottom: 0 !important;
}

/* Body padding compensation for sticky/fixed headers (set via JS custom prop) */
body.soapkit-has-header {
  --soapkits-header-height: 0px;
}

/* Elementor canvas page fix */
body.elementor-template-canvas #soapkits-footer-wrapper.soapkits-custom-footer {
  position: relative;
}

/* ==========================================================
   Hide theme's default header / footer when soapKit
   templates are active. Both class spellings are targeted
   (with and without trailing "s") for maximum compatibility.

   Common theme selectors covered:
     - .site-header / .site-footer, header.site-header, footer.site-footer
     - #masthead, #colophon
     - #header, #footer
     - #site-header, #site-footer
     - .header / .footer, .header-main / .footer-main
     - #main-header
     - .fusion-header-wrapper / .fusion-footer (Avada)
     - .wp-site-blocks > header / .wp-site-blocks > footer (block themes)
     - [class*="site-header"] / [class*="site-footer"] catch-all
   ========================================================== */

/* ---- Headers ---- */
body.soapkit-has-header header.site-header,
body.soapkit-has-header .site-header,
body.soapkit-has-header #masthead,
body.soapkit-has-header header#site-header,
body.soapkit-has-header .header,
body.soapkit-has-header #header,
body.soapkit-has-header header#header,
body.soapkit-has-header #site-header,
body.soapkit-has-header .header-main,
body.soapkit-has-header #main-header,
body.soapkit-has-header .fusion-header-wrapper,
body.soapkit-has-header .wp-site-blocks > header,
body.soapkit-has-header .nav-wrapper,
body.soapkit-has-header .primary-navigation,
body.soapkit-has-header .top-header,
body.soapkits-has-header header.site-header,
body.soapkits-has-header .site-header,
body.soapkits-has-header #masthead,
body.soapkits-has-header header#site-header,
body.soapkits-has-header .header,
body.soapkits-has-header #header,
body.soapkits-has-header header#header,
body.soapkits-has-header #site-header,
body.soapkits-has-header .header-main,
body.soapkits-has-header #main-header,
body.soapkits-has-header .fusion-header-wrapper,
body.soapkits-has-header .wp-site-blocks > header,
body.soapkits-has-header .nav-wrapper,
body.soapkits-has-header .primary-navigation,
body.soapkits-has-header .top-header {
  display: none !important;
}

/* ---- Footers ---- */
body.soapkit-has-footer footer.site-footer,
body.soapkit-has-footer .footer-widget-area,
body.soapkit-has-footer .site-footer,
body.soapkit-has-footer footer#site-footer,
body.soapkit-has-footer .footer,
body.soapkit-has-footer #footer,
body.soapkit-has-footer footer#footer,
body.soapkit-has-footer #colophon,
body.soapkit-has-footer .footer-main,
body.soapkit-has-footer footer.ct-footer,
body.soapkit-has-footer .fusion-footer,
body.soapkit-has-footer .wp-site-blocks > footer,
body.soapkit-has-footer .site-info,
body.soapkit-has-footer .footer-wrapper,
body.soapkit-has-footer .footer-area,
body.soapkits-has-footer footer.site-footer,
body.soapkits-has-footer .footer-widget-area,
body.soapkits-has-footer .site-footer,
body.soapkits-has-footer footer#site-footer,
body.soapkits-has-footer .footer,
body.soapkits-has-footer #footer,
body.soapkits-has-footer footer#footer,
body.soapkits-has-footer #colophon,
body.soapkits-has-footer .footer-main,
body.soapkits-has-footer footer.ct-footer,
body.soapkits-has-footer .fusion-footer,
body.soapkits-has-footer .wp-site-blocks > footer,
body.soapkits-has-footer .site-info,
body.soapkits-has-footer .footer-wrapper,
body.soapkits-has-footer .footer-area {
  display: none !important;
}

/* ==========================================================
   Page-level padding-top for sticky/fixed headers.
   The --soapkits-header-height custom property is set
   dynamically by kit-global.js; this rule applies the
   compensation only when a header is present and sticky.
   ========================================================== */
body.soapkit-has-header.has-sticky-header {
  padding-top: var(--soapkits-header-height, 0px);
}

/* ==========================================================
   Prevent FOUC on Nav Menu before its CSS is loaded
   ========================================================== */
.soapkits-nav-menu--preload .soapkits-nav-menu__wrapper,
.soapkits-nav-menu--preload .soapkits-nav-menu__toggle {
  display: none;
}