/* ==========================================================
   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);
}
.soapkits-btn--icon {
  display: inline-flex;
  align-items: center;
}
.soapkits-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease;
}
.soapkits-btn__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111827;
  color: #ffffff;
  flex-shrink: 0;
  transition: all 300ms ease;
}
.soapkits-btn__bubble svg {
  width: 14px;
  height: 14px;
}
.soapkits-btn__bubble i {
  font-size: 14px;
  line-height: 1;
}


/* ==========================================================
   SOAPKITS — "Solid Pill" button preset  (.soapkits-pill)

   A reusable copy of the home-page hero button (element 2d11670):
   white pill, dark-green label, orange circular arrow badge, and a
   hover that inverts to dark green.

   HOW TO USE
     Elementor → select the Button widget → Style tab → "Solid Pill
     Preset" → On.  The widget then prints `soapkits-pill` on the <a>
     itself, so every selector below is `.soapkits-btn.soapkits-pill …`.

     It is deliberately NOT driven by Elementor's own Advanced → CSS
     Classes field: this widget sets has_widget_inner_wrapper() = false,
     so there is no .elementor-widget-container for `_css_classes` to be
     written onto and the value is dropped from the markup. Verified on
     the live site — the setting stored fine and never reached the page.

   WHY !important
     The same look is also hard-coded per widget in Elementor's
     generated CSS, e.g.
       .elementor-2 .elementor-element.elementor-element-2d11670 .soapkits-btn
     which is specificity (0,4,0) and therefore beats any sane
     selector we can write from here. `!important` is what makes the
     preset authoritative. It is deliberately scoped to `.soapkits-pill`,
     so buttons WITHOUT the class are completely unaffected — which is
     also what makes the preset reversible: switch the preset Off and the
     button's original Elementor styling comes straight back.

   FLUID SCALE
     Every value is anchored to the reference button as measured at a
     1440px viewport (root font-size 18px), then expressed with clamp()
     so the pill scales smoothly with the viewport instead of sitting
     still until a breakpoint fires. Each clamp() returns the reference
     value at exactly 1440px — see the comment on each token.
   ========================================================== */

.soapkits-btn.soapkits-pill {
  /* spacing — reference: 5.625px / 4.5px / 5.625px / 21.6px @1440 */
  --sk-pill-pad-y: clamp(4px,  0.250vw + 2.03px,  6.5px);
  --sk-pill-pad-r: clamp(3px,  0.200vw + 1.62px,  6px);
  --sk-pill-pad-l: clamp(16px, 0.900vw + 8.64px, 26px);

  /* type — reference: 15px / 700 */
  --sk-pill-font:  clamp(14px, 0.400vw + 9.24px, 16px);

  /* icon badge — reference: 30px bubble, 16px glyph, 14px gap */
  --sk-pill-bubble: clamp(26px, 1.100vw + 14.16px, 32px);
  --sk-pill-icon:   clamp(14px, 0.500vw +  8.80px, 17px);
  --sk-pill-gap:    clamp(10px, 0.600vw +  5.36px, 16px);

  /* palette — Elementor global kit 9 */
  --sk-pill-bg:            #ffffff;  /* --e-global-color-0bc7e93 */
  --sk-pill-fg:            #092210;  /* --e-global-color-primary  */
  --sk-pill-bubble-bg:     #ffb565;  /* --e-global-color-8b82a99  */
  --sk-pill-bubble-fg:     #092210;
  --sk-pill-icon-fg:       #17201a;
  --sk-pill-hover-bg:      #092210;
  --sk-pill-hover-fg:      #ffffff;
  --sk-pill-bubble-hover:  #ffffff;
  --sk-pill-bubble-hover-fg: #2b2b2b; /* --e-global-color-text */
}

.soapkits-btn.soapkits-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--sk-pill-pad-y) var(--sk-pill-pad-r) var(--sk-pill-pad-y) var(--sk-pill-pad-l) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: var(--sk-pill-bg) !important;
  color: var(--sk-pill-fg) !important;
  font-family: "Inter", sans-serif !important;
  font-size: var(--sk-pill-font) !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: all 300ms cubic-bezier(.4, 0, .2, 1) !important;
  /* line-height is intentionally NOT set: the reference inherits the
     site's fluid body line-height (clamp(1.9rem, 1.7rem + 0.8vw, 2.125rem)
     → 38.25px @1440), which is what makes the pill 49.5px tall there.
     Leaving it alone is what reproduces that height, and its shrink to
     ~45.5px on small screens. */
}

/* icon wrapper — reference: rotate(310deg), 14px gap, 300ms ease */
.soapkits-btn.soapkits-pill .soapkits-btn__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: var(--sk-pill-gap) !important;
  transform: rotate(310deg) !important;
  transition: all 300ms ease !important;
}
.soapkits-btn.soapkits-pill .soapkits-btn__icon--before {
  margin-left: 0 !important;
  margin-right: var(--sk-pill-gap) !important;
}
.soapkits-btn.soapkits-pill .soapkits-btn__icon--after {
  margin-left: var(--sk-pill-gap) !important;
  margin-right: 0 !important;
}
.soapkits-btn.soapkits-pill .soapkits-btn__icon i,
.soapkits-btn.soapkits-pill .soapkits-btn__icon svg {
  font-size: var(--sk-pill-icon) !important;
  width: var(--sk-pill-icon) !important;
  height: var(--sk-pill-icon) !important;
  color: var(--sk-pill-icon-fg) !important;
  fill: var(--sk-pill-icon-fg) !important;
}

/* circular badge — reference: 30x30, rotate(48deg) */
.soapkits-btn.soapkits-pill .soapkits-btn__bubble {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--sk-pill-bubble) !important;
  height: var(--sk-pill-bubble) !important;
  border-radius: 50% !important;
  background-color: var(--sk-pill-bubble-bg) !important;
  color: var(--sk-pill-bubble-fg) !important;
  flex-shrink: 0 !important;
  transform: rotate(48deg) !important;
  transition: all 300ms ease !important;
}
.soapkits-btn.soapkits-pill .soapkits-btn__bubble i {
  font-size: var(--sk-pill-icon) !important;
  line-height: 1 !important;
}
.soapkits-btn.soapkits-pill .soapkits-btn__bubble svg {
  width: var(--sk-pill-icon) !important;
  height: var(--sk-pill-icon) !important;
  fill: var(--sk-pill-bubble-fg) !important;
}

/* hover — colours invert; no movement, no size change (as the reference) */
.soapkits-btn.soapkits-pill:hover,
.soapkits-btn.soapkits-pill:focus-visible {
  background-color: var(--sk-pill-hover-bg) !important;
  color: var(--sk-pill-hover-fg) !important;
}
.soapkits-btn.soapkits-pill:hover .soapkits-btn__bubble,
.soapkits-btn.soapkits-pill:focus-visible .soapkits-btn__bubble {
  background-color: var(--sk-pill-bubble-hover) !important;
  color: var(--sk-pill-bubble-hover-fg) !important;
}
.soapkits-btn.soapkits-pill:hover .soapkits-btn__bubble i,
.soapkits-btn.soapkits-pill:hover .soapkits-btn__bubble svg,
.soapkits-btn.soapkits-pill:focus-visible .soapkits-btn__bubble i,
.soapkits-btn.soapkits-pill:focus-visible .soapkits-btn__bubble svg {
  color: var(--sk-pill-bubble-hover-fg) !important;
  fill: var(--sk-pill-bubble-hover-fg) !important;
}


/* ==========================================================
   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;
}

/* ==========================================================
   Team Widget — Hover Social Pop Enhancement
   Matches the rounded modern card aesthetic where social icons
   pop up smoothly over the bottom of the photo on hover.
   ========================================================== */
.jeg-elementor-kit.jkit-team .profile-card,
.soapkits-team-card {
  position: relative;
  /*
   * The fallback (20px / #fff / the hover shadow) is exactly what this rule shipped
   * with, so pages that never touch the widget look identical. Reading the widget's
   * variables here is what keeps this global sheet from overriding the Card controls
   * in the editor — it is enqueued before every widget stylesheet, so a plain
   * `20px !important` used to make Border Radius a no-op.
   */
  border-radius: var(--soapkits-team-card-radius, 20px) !important;
  overflow: hidden !important;
  background: var(--soapkits-team-card-bg, #ffffff);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.jeg-elementor-kit.jkit-team .profile-card:hover,
.soapkits-team-card:hover {
  transform: translateY(-4px);
  /* Not `!important`: a card shadow set from the widget must survive the hover. */
  box-shadow: var(--soapkits-team-card-hover-shadow, 0 16px 36px -8px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.04));
}

/* Image container with rounded top */
.jeg-elementor-kit.jkit-team .profile-header,
.jeg-elementor-kit.jkit-team .profile-header.jkit-team-img {
  position: relative;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 0;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background-color: #f1f3f5;
}

.jeg-elementor-kit.jkit-team .profile-header img {
  width: 100% !important;
  height: 280px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.jeg-elementor-kit.jkit-team .profile-card:hover .profile-header img {
  transform: scale(1.04);
}

/* Social icons container positioned over the bottom of the photo */
.jeg-elementor-kit.jkit-team .profile-footer,
.jeg-elementor-kit.jkit-team .profile-card .social-list {
  position: absolute !important;
  bottom: 120px !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  z-index: 10 !important;
  pointer-events: none;
}

/* Each social icon pill/circle */
.jeg-elementor-kit.jkit-team .social-list li,
.jeg-elementor-kit.jkit-team .social-list .social-icon {
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.7);
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0.3s ease !important;
  pointer-events: auto;
}

/* Staggered Pop Animation on Hover */
.jeg-elementor-kit.jkit-team .profile-card:hover .social-list li,
.jeg-elementor-kit.jkit-team:hover .social-list li,
.jeg-elementor-kit.jkit-team .profile-box:hover .social-list li {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

.jeg-elementor-kit.jkit-team .profile-card:hover .social-list li:nth-child(1) { transition-delay: 0.03s !important; }
.jeg-elementor-kit.jkit-team .profile-card:hover .social-list li:nth-child(2) { transition-delay: 0.08s !important; }
.jeg-elementor-kit.jkit-team .profile-card:hover .social-list li:nth-child(3) { transition-delay: 0.13s !important; }
.jeg-elementor-kit.jkit-team .profile-card:hover .social-list li:nth-child(4) { transition-delay: 0.18s !important; }
.jeg-elementor-kit.jkit-team .profile-card:hover .social-list li:nth-child(5) { transition-delay: 0.23s !important; }

/* Circular Mint/Lime pill style as seen in reference image */
.jeg-elementor-kit.jkit-team .social-list li a,
.jeg-elementor-kit.jkit-team .social-list .social-icon a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #A3E6B5 !important;
  color: #111827 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  font-size: 13px !important;
}

.jeg-elementor-kit.jkit-team .social-list li a:hover,
.jeg-elementor-kit.jkit-team .social-list .social-icon a:hover {
  transform: translateY(-3px) scale(1.1) !important;
  background-color: #82dc99 !important;
  color: #000000 !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2) !important;
}

.jeg-elementor-kit.jkit-team .social-list li a i,
.jeg-elementor-kit.jkit-team .social-list li a svg {
  width: 14px;
  height: 14px;
  fill: currentColor !important;
  color: currentColor !important;
}

/* Clean Name & Position body section */
.jeg-elementor-kit.jkit-team .profile-body {
  padding: 20px 16px 22px !important;
  text-align: center !important;
  background: #ffffff !important;
}

.jeg-elementor-kit.jkit-team .profile-body .profile-title,
.jeg-elementor-kit.jkit-team .profile-body .profile-title a {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 5px 0 !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}

.jeg-elementor-kit.jkit-team .profile-body .profile-designation {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* Also support hover-social style if selected in elementor */
.jeg-elementor-kit.jkit-team.style-hover-social:hover .profile-body {
  transform: none !important;
}
.jeg-elementor-kit.jkit-team.style-hover-social .profile-body:before {
  display: none !important;
}

/* ==========================================================
   SOAPKITS — Post List Widget (Happy Addons compatible)
   ========================================================== */
.ha-post-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ha-post-list .ha-post-list-item {
  display: flex;
  margin: 0 0 16px;
  padding: 0;
  min-width: 0;
}
/* Inline layout = responsive card grid. The number of columns comes from the
   widget's "Columns" setting (--soapkits-post-list-columns). minmax(0, 1fr)
   forces every card to an equal share of the row so long titles wrap inside
   their own card instead of stretching the column (which used to push
   neighbouring cards around and overlap them). */
.ha-post-list.ha-post-list-inline {
  display: grid;
  grid-template-columns: repeat(var(--soapkits-post-list-columns, 2), minmax(0, 1fr));
  gap: 20px;
}
.ha-post-list.ha-post-list-inline .ha-post-list-item {
  margin: 0;
}
.ha-post-list .ha-post-list-item:last-child {
  margin-bottom: 0;
}
.ha-post-list .ha-post-list-item a {
  width: 100%;
  display: flex;
  text-decoration: none;
  color: inherit;
}
.ha-post-list-title {
  display: block;
  margin-top: 0;
  margin-bottom: 6px;
  color: #111827;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  transition: all 0.3s ease;
}
.ha-post-list .ha-post-list-item a:hover .ha-post-list-title {
  color: var(--soapkits-accent, #ef4444);
}
.ha-post-list-item a img {
  margin-right: 16px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
span.ha-post-list-icon {
  margin-right: 10px;
  color: #111827;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
span.ha-post-list-icon svg {
  width: auto;
  height: 1em;
  fill: currentColor;
}
.ha-post-list-content {
  flex: 1;
  min-width: 0;
}
.ha-post-list-meta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 6px;
}
.ha-post-list-meta-wrap span {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
  color: #6b7280;
  font-size: 13px;
}
.ha-post-list-meta-wrap span:last-child {
  margin-right: 0;
}
.ha-post-list-meta-wrap span i,
.ha-post-list-meta-wrap span svg {
  margin-right: 4px;
  width: auto;
  height: 1em;
  fill: currentColor;
}
.ha-post-list-excerpt p {
  margin-top: 4px;
  margin-bottom: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================
   SOAPKITS - Post List Pagination + Empty State
   ========================================================== */
.ha-post-list-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.ha-post-list-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: #ffffff;
  color: #111827;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.ha-post-list-pagination a.page-numbers:hover {
  border-color: var(--soapkits-accent);
  color: var(--soapkits-accent);
}
.ha-post-list-pagination .page-numbers.current {
  border-color: var(--soapkits-accent);
  background-color: var(--soapkits-accent);
  color: #ffffff;
}
.ha-post-list-pagination .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
}
.ha-post-list-empty,
.soapkits-post-list-empty {
  padding: 18px 20px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}

/* ==========================================================
   SOAPKITS - Archive fallback loop (used only when no soapKit
   archive layout and no designed Posts page exist)
   ========================================================== */
.soapkits-archive-fallback {
  padding: 40px 20px;
}
.soapkits-archive-fallback__heading {
  margin: 0 0 8px;
  color: #111827;
  font-size: 2rem;
  line-height: 1.25;
}
.soapkits-archive-fallback__description {
  margin-bottom: 24px;
  color: #6b7280;
  font-size: 15px;
}
.soapkits-archive-fallback__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.soapkits-archive-fallback__item {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
}
.soapkits-archive-fallback__thumb img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.soapkits-archive-fallback__post-title {
  margin: 12px 0 8px;
  font-size: 1.15rem;
  line-height: 1.35;
}
.soapkits-archive-fallback__post-title a {
  color: #111827;
  text-decoration: none;
  transition: color 0.2s ease;
}
.soapkits-archive-fallback__post-title a:hover {
  color: var(--soapkits-accent);
}
.soapkits-archive-fallback__excerpt p {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}
.soapkits-archive-fallback__empty {
  padding: 18px 20px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  color: #6b7280;
  text-align: center;
}