/* =============================================================
   AIntelligize – Frontend Styles (all selectors namespaced)
   ============================================================= */

/* Public shell */
.myls{font-family:var(--myls-font); color:var(--myls-text)}

/* Buttons (theme-agnostic, namespaced) */
.myls-btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--myls-border);border-radius:var(--myls-radius-sm);padding:.5rem .9rem;background:var(--myls-bg);cursor:pointer;text-decoration:none}
.myls-btn-primary{background:var(--myls-primary);border-color:var(--myls-primary);color:var(--myls-primary-contrast)}
.myls-btn-outline{background:transparent}

/* Cards */
.myls-card{background:var(--myls-bg);border:1px solid var(--myls-border);border-radius:var(--myls-radius);box-shadow:var(--myls-shadow)}
.myls-card-head{padding:.75rem var(--myls-space-4);border-bottom:1px solid var(--myls-border)}
.myls-card-body{padding:var(--myls-space-4)}

/* MYLS responsive card grid (center last row, CSS-variable columns) */
.myls-grid {
  --gap: 1rem;
  --mobile-columns: 1;
  --tablet-columns: 2;
  --desktop-columns: 3;
  --wide-columns: 4;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Compute active column count for each breakpoint */
.myls-grid { --cols: var(--mobile-columns); }
@media (min-width: 768px)  { .myls-grid { --cols: var(--tablet-columns); } }
@media (min-width: 992px)  { .myls-grid { --cols: var(--desktop-columns); } }
@media (min-width: 1400px) { .myls-grid { --cols: var(--wide-columns); } }

/* Each item width = (container - gaps) / columns, last row centered.
   [myls_card_grid_static] renders .myls-flip-box children directly (no .col
   wrapper) - size those the same way or cards fall back to natural width. */
.myls-grid > .col,
.myls-grid > .myls-flip-box {
  padding: 0 !important;
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  box-sizing: border-box;
  min-width: 0;
}

/* Primary color scoped to our components only (NOT :root) */
.myls-flip-box,
.ssseo-card,
.myls-grid {
  --myls-primary-color: #136B92;
}

.myls-flip-box {
	border:2px solid var(--myls-primary-color);
	padding:0.25em 0.25em 1em 0.25em;
	border-radius:1em;
}
/* Scoped to our flip-box cards only */
.myls-flip-box .card-body h3 a {
	color:var(--myls-primary-color);
}
.myls-flip-box .flip-excerpt {padding:0.5em 0 1em 0;}

/* Optional: make cards stretch equal height nicely */
.myls-grid .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Scoped to our flip-box cards only */
.myls-flip-box a.flip-button {
	background-color:var(--myls-primary-color);
}
.myls-grid .card-body {
  display: flex;
  flex-direction: column;
	align-content:center;
	align-items:center;
}


/* Media wells for icon/image tiles */
.myls-media{position:relative;overflow:hidden;border-bottom:1px solid var(--myls-border)}
.myls-media img{display:block;width:100%;height:auto}
.myls-media .myls-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.45), transparent 50%);}

/* List styles commonly used in service/service-area output */
.myls-list{list-style:none;padding:0;margin:0}
.myls-list li{padding:.35rem 0;border-bottom:1px dotted var(--myls-border)}
.myls-list li:last-child{border-bottom:0}


/* ============= SSSEO Card Grid (responsive, variable columns) ============= */
.ssseo-grid {
  --gap: 1rem;
  --mobile-columns: 1;
  --tablet-columns: 2;
  --desktop-columns: 3;
  --wide-columns: 4;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  margin: 0;
  padding: 0;

  --cols: var(--mobile-columns);
}
@media (min-width: 768px)  { .ssseo-grid { --cols: var(--tablet-columns); } }
@media (min-width: 992px)  { .ssseo-grid { --cols: var(--desktop-columns); } }
@media (min-width: 1400px) { .ssseo-grid { --cols: var(--wide-columns); } }

/* Child column sizing */
.ssseo-grid > .ssseo-flip-box {
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

/* ============= Card ============= */
.ssseo-card {
  --ssseo-primary: var(--bs-primary, #0d6efd);
  background: var(--bs-body-bg, #fff);
  border: 2px solid var(--ssseo-primary);
  border-radius: 0.75rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ssseo-card-shadow, 0 4px 14px rgba(0,0,0,.06));
}

/* Center text in the card body */
.ssseo-card .card-body {
  padding: 1rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Title */
.ssseo-card .flip-title {
  margin: 0;
  font-size: clamp(1rem, 1.2vw + .8rem, 1.25rem);
  line-height: 1.25;
}
.ssseo-card .flip-title a {
  color: var(--bs-body-color, #212529);
  text-decoration: none;
}
.ssseo-card .flip-title a:hover,
.ssseo-card .flip-title a:focus {
  color: var(--myls-primary-color);
  text-decoration: underline;
}

/* Excerpt */
.ssseo-card .flip-excerpt {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .95rem;
}

/* Media (image/icon) */
.ssseo-card .card-media {
  display: block;
  position: relative;
  overflow: hidden;
}
.ssseo-card .card-media img {
  display: block;
  width: 100%;
  height: auto;
}
.ssseo-card .card-media i {
  font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
  color: var(--ssseo-primary);
  padding: 2rem 0;
}

/* Button = use Bootstrap .btn .btn-primary when present;
   otherwise provide a decent native fallback */
.ssseo-card .flip-button.btn {
  /* If Bootstrap exists, this inherits the primary style */
}
.ssseo-card .flip-button:not(.btn) {
  display: inline-block;
  border: 1px solid var(--myls-primary-color);
  background: var(--myls-primary-color);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: .5rem;
  text-decoration: none;
}
.ssseo-card .flip-button:not(.btn):hover,
.ssseo-card .flip-button:not(.btn):focus {
  filter: brightness(0.95);
  color: #fff;
}

/* Small utility: ensure buttons don't stretch full width unless needed */
.ssseo-card .flip-button {
  align-self: center;
}

/* ---------------------------------------------------------
   FLEXBOX CARD GRID (image top, button bottom)
   - myls-row / myls-col / myls-box
   --------------------------------------------------------- */
.myls-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--myls-gap);
  align-items:stretch;
  margin:0; padding:0; width:100%;
  box-sizing:border-box;
}

/* Auto-fit columns based on --myls-min-col */
.myls-col{
  flex:1 1 var(--myls-min-col);
  min-width:var(--myls-min-col);
  display:flex;
  box-sizing:border-box;
}

/* Card/box */
.myls-box{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  border:1px solid var(--myls-primary);
  border-radius:var(--myls-radius);
  padding:1rem;
  text-align:center;
  overflow:hidden;
  background:#fff;
}

/* Top image */
.myls-box img{
  width:100%;
  height:auto;
  border-radius:var(--myls-radius) var(--myls-radius) 0 0;
  margin-bottom:1rem;
  object-fit:cover;
}

/* Content grows | actions pinned bottom */
.myls-box .myls-content{ flex:1 1 auto; }
.myls-box .myls-actions,
.myls-box .myls-button{
  margin-top:auto;
	margin-bottom:5px;
  align-self:center;
}

/* Button styling */
.myls-button{
  background:var(--myls-primary);
  color:#fff;
  border:0;
  border-radius:var(--myls-radius);
  padding:.75em 1.25em;
  font-weight:600;
  cursor:pointer;
  transition:background-color .2s ease-in-out;
  text-decoration:none;
  display:inline-block;
	align-self:bottom !important;
}
.myls-button:hover{ background:white;
color:var(--myls-primary);
border:1px solid var(--myls-primary);
	text-decoration:none;
}
/* ---------------------------------------------------------
   UTILITIES – Fixed column counts (apply to .myls-row)
   --------------------------------------------------------- */
.myls-row.cols-2 .myls-col{
  flex:0 0 calc((100% - var(--myls-gap)) / 2);
  min-width:0;
}
.myls-row.cols-3 .myls-col{
  flex:0 0 calc((100% - (2 * var(--myls-gap))) / 3);
  min-width:0;
}
.myls-row.cols-4 .myls-col{
  flex:0 0 calc((100% - (3 * var(--myls-gap))) / 4);
  min-width:0;
}
.myls-row.cols-5 .myls-col{
  flex:0 0 calc((100% - (4 * var(--myls-gap))) / 5);
  min-width:0;
}

/* ---------------------------------------------------------
   RESPONSIVE TUNING – scoped to .myls-row (NOT :root)
   --------------------------------------------------------- */
@media (max-width:1200px){ .myls-row{ --myls-min-col:260px; } }
@media (max-width:992px){  .myls-row{ --myls-min-col:320px; } }
@media (max-width:768px){  .myls-row{ --myls-min-col:100%; } }

/* ---------------------------------------------------------
   OPTIONAL: full-bleed row inside constrained parents
   --------------------------------------------------------- */
.myls-row.full{
  margin-left:0; margin-right:0; width:100%;
}

/* ===== Service Posts Grid (moved from inline CSS) ===== */
.mlseo-service-posts-grid {
  margin: 30px 0;
}
.service-posts-heading {
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 600;
  color: #333;
  text-align: center;
}
.service-post-card {
  background: #fff !important;
  border: 2px solid #e8e8e8 !important;
  border-radius: 8px !important;
  padding: 1em !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}
.service-post-card:hover {
  border-color: #2271b1 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}
.service-post-image-wrapper,
.service-post-icon-wrapper {
  margin-bottom: 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}
.service-post-image {
  max-width: 100% !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}
.service-post-icon {
  font-size: 48px !important;
  color: #2271b1 !important;
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
}
.service-post-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  width: 100% !important;
}
.service-post-title a {
  color: #2271b1 !important;
  text-decoration: none !important;
}
.service-post-title a:hover {
  color: #135e96 !important;
  text-decoration: underline !important;
}
.service-post-tagline {
  font-size: 13px !important;
  color: #666 !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  width: 100% !important;
}
.service-post-button {
  display: block !important;
  background: #2271b1 !important;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: background 0.3s ease !important;
  border: none !important;
  margin-top: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  width: fit-content !important;
}
.service-post-button:hover {
  background: #135e96 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.service-type-heat { border-left: 4px solid #ff6b6b !important; }
.service-type-ac { border-left: 4px solid #4ecdc4 !important; }
.service-type-heat:hover { border-left-color: #ff6b6b !important; }
.service-type-ac:hover { border-left-color: #4ecdc4 !important; }
.service-type-heat .service-post-icon { color: #ff6b6b !important; }
.service-type-ac .service-post-icon { color: #4ecdc4 !important; }
@media (max-width: 767px) {
  .service-post-card { padding: 1em !important; }
  .service-post-image { max-height: 120px !important; }
  .service-post-icon { font-size: 36px !important; }
  .service-post-title { font-size: 18px !important; }
  .service-posts-heading { font-size: 24px !important; }
}

/* ===== Service Grid (moved from inline CSS) ===== */
.myls-service-grid { --bs-gutter-x: 1.75rem; --bs-gutter-y: 1.75rem; }
.myls-service-grid .service-box {
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid #CBD3DE;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(16,24,40,.07);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.myls-service-grid .service-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(16,24,40,.16);
  border-color: #B4BECD;
}
/* Image: full-bleed across the card top, zoom on hover (clipped by card radius) */
.myls-service-grid .myls-sg-img-link { display: block; overflow: hidden; border-radius: 0; margin: 0; }
.myls-service-grid .myls-sg-img { width: 100%; height: auto; display: block; border-radius: 0 !important; margin: 0 !important; transition: transform .5s ease; }
.myls-service-grid .myls-sg-img-link:hover .myls-sg-img { transform: scale(1.06); }
.myls-sg-has-ratio .myls-sg-img { aspect-ratio: var(--myls-sg-ratio, auto); object-fit: cover; height: auto !important; }
.myls-sg-crop .myls-sg-img { height: var(--myls-img-h, 220px); object-fit: cover; }
/* Text block - padded inside the card */
.myls-service-grid .myls-sg-title { margin: 1.15rem 1.25rem .4rem !important; font-size: 1.18rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.myls-service-grid .myls-sg-title a { text-decoration: none; color: #1f2733; transition: opacity .2s ease; }
.myls-service-grid .myls-sg-title a:hover { opacity: .75; }
.myls-service-grid .myls-sg-tagline,
.myls-service-grid .myls-sg-excerpt { margin: 0 1.25rem 1.25rem !important; font-size: .95rem; line-height: 1.55; color: #5A6373; opacity: 1; }
.myls-service-grid .myls-sg-btn {
  margin: auto 1.25rem 1.25rem !important;
  align-self: center;
  background-color: var(--myls-sg-btn-bg, revert) !important;
  border-color: var(--myls-sg-btn-bg, revert) !important;
  color: var(--myls-sg-btn-color, revert) !important;
}
.myls-sg-featured-first .col-md-6.col-lg-6:first-child .myls-sg-img { min-height: 280px; object-fit: cover; }

/* ===== Divi 5-Column Layout (moved from inline CSS) ===== */
@media (min-width: 768px) {
  .col-md-custom-5 { flex: 0 0 20%; max-width: 20%; }
}

/* ===== AIntelligize Compare Grid =================================
   Responsive replacement for <table> markup inside rich_content
   sections. Renders a table-style grid on desktop/tablet and stacks
   each row as a labeled card on phones.

   Markup:
     <div class="aintelligize-compare-grid">
       <div><div>Header A</div><div>Header B</div>...</div>          <!-- first row = header -->
       <div><div><span class="aintelligize-compare-cell-label">Header A</span>Value</div>...</div>
       ...
     </div>

   IMPORTANT - selector strategy:
   Layout is driven entirely off the OUTER .aintelligize-compare-grid class
   using child combinators, NOT the inner .aintelligize-compare-row /
   .aintelligize-compare-head classes. The Elementor + Beaver builders store
   this markup in their own meta and keep every class, but the Divi 4 builder
   writes it into post_content inside an et_pb_text module, whose sanitizer
   strips class attributes (and the --aintelligize-compare-cols inline style)
   from nested elements - only the outer grid class survives. Flexbox with
   `flex:1 1 0` gives equal-width columns without a column count, so the
   stripped custom property no longer matters. Each direct child of the grid
   is a row; the first row is the header.
   ============================================================= */
.aintelligize-compare-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #d8d8d8;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0;
}
.aintelligize-compare-grid > div {
  display: flex;
}
.aintelligize-compare-grid > div > * {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  word-break: break-word;
}
.aintelligize-compare-grid > div:first-child > * {
  background: #0079bc;
  color: #fff;
  font-weight: 700;
}
.aintelligize-compare-cell-label {
  display: none;
}
@media (max-width: 767px) {
  .aintelligize-compare-grid {
    background: transparent;
    gap: 12px;
    border-radius: 0;
    overflow: visible;
  }
  .aintelligize-compare-grid > div {
    flex-direction: column;
    border: 2px solid #0079bc;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .aintelligize-compare-grid > div:first-child {
    display: none;
  }
  .aintelligize-compare-grid > div > * {
    gap: 2px;
    border-bottom: 1px solid #eee;
  }
  .aintelligize-compare-grid > div > *:last-child {
    border-bottom: 0;
  }
  .aintelligize-compare-cell-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0079bc;
    font-weight: 700;
  }
}

/* === [myls_media_band] - split media/text band (base layout; themes skin colors) === */
.myls-media-band{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;border-radius:16px;padding:36px;margin:36px 0 0}
.myls-media-band.mmb-tint-paper{background:#f6f8fa;border:1px solid #e7ecf1}
.myls-media-band.mmb-img-right .mmb-media{order:2}
.myls-media-band .mmb-media img{width:100%;height:auto;display:block;border-radius:12px}
.myls-media-band .mmb-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;color:var(--myls-primary-color,#136B92)}
.myls-media-band .mmb-heading{margin:0 0 12px;line-height:1.15}
.myls-media-band .mmb-content > :first-child{margin-top:0}
.myls-media-band .mmb-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.myls-media-band .mmb-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:9px;font-weight:700;text-decoration:none;transition:.15s}
.myls-media-band .mmb-btn-primary{background:var(--myls-primary-color,#136B92);color:#fff}
.myls-media-band .mmb-btn-primary:hover{filter:brightness(.92)}
.myls-media-band .mmb-btn-phone{border:1.5px solid var(--myls-primary-color,#136B92);color:var(--myls-primary-color,#136B92)}
@media(max-width:860px){.myls-media-band{grid-template-columns:1fr;gap:24px;padding:24px}.myls-media-band.mmb-img-right .mmb-media{order:0}}