/*
  base.css — GHL builder layout framework re-implementation
  These rules replace the styles that GHL's runtime JS bundle would have injected.
  Must load BEFORE style.css.
*/

/* ─── Reset / Box model ────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; }
a { color: inherit; }

/* ─── Section  ─────────────────────────────────────────────── */
.c-section {
  position: relative;   /* needed for .bg absolute overlays */
  width: 100%;
  display: block;
}
.fullSection {
  width: 100%;
}
/* background overlay divs injected inside sections */
.bgCover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
/* section bg overlays are absolutely positioned children */
.c-section > .bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
}

/* ─── Inner container (max-width centring) ─────────────────── */
.inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* ─── Row  ─────────────────────────────────────────────────── */
.c-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.row-align-center {
  align-items: center;
}
/*
  flex-wrap: nowrap keeps all columns on one line even when their
  percentage widths + margins sum fractionally over 100%.
  flex-shrink:1 on columns (via flex:1 1 auto) distributes the
  tiny overage proportionally — visually identical to the original.
*/
.c-row > .inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

/* ─── Column  ─────────────────────────────────────────────────*/
/*
  flex: 1 1 auto — flex-basis reads the column's width property
  (set per-column in style.css, e.g. 56.8% / 43.2%).
  flex-shrink:1 lets columns absorb margin overflow without wrapping.
  flex-grow:1 fills any leftover space in columns without explicit widths.
*/
.c-column {
  flex: 1 1 auto;
  min-width: 0;
}
.c-column > .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vertical > .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* ─── Mobile column stacking (matches GHL's 480px breakpoint) ─ */
@media (max-width: 480px) {
  .c-row > .inner {
    flex-wrap: wrap;
  }
  .c-column {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ─── Border / radius helpers (used as classes on cols/rows) ── */
.noBorder  { border: none !important; }
.borderFull { border-style: solid; }
.borderTopBottom { border-top-style: solid; border-bottom-style: solid; border-left: none; border-right: none; }
.radius0  { border-radius: 0; }
.radius4  { border-radius: 4px; }
.radius10 { border-radius: 10px; }
.radius15 { border-radius: 15px; }
.cornersTop { border-radius: 0; }
.none { /* box-shadow: none handled per-element */ }

/* ─── Desktop-only / hidden helpers ───────────────────────── */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 768px) {
  .desktop-hidden { display: none !important; }
}
.sf-hidden { display: none !important; }

/* ─── Text output wrapper ─────────────────────────────────── */
.text-output {
  width: 100%;
}
.text-output > div {
  width: 100%;
}

/* ─── Image component ─────────────────────────────────────── */
.image-container {
  width: 100%;
}
.hl-image-picture {
  display: block;
  width: 100%;
}
.hl-image-picture img {
  width: 100%;
  height: auto;
}
.mw-100 { max-width: 100%; }
.img-round-corners { border-radius: 8px; }

/* ─── Button component ─────────────────────────────────────── */
.c-button {
  display: inline-block;
}
.c-button a,
.c-button button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border: none;
  font-family: inherit;
}
.main-heading-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-loader-position { display: none; }

/* ─── Nav ─────────────────────────────────────────────────── */
.nav-menu-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.flex { display: flex; }
.relative { position: relative; }
.items-center { align-items: center; }
.w-full { width: 100%; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-row { flex-direction: row; }
.mr-2 { margin-right: 0.5rem; }
.text-nowrap { white-space: nowrap; }
.pointer { cursor: pointer; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.p-3 { padding: 0.75rem; }
.rounded-sm { border-radius: 4px; }
.min-w-24 { min-width: 6rem; }
.overflow-hidden { overflow: hidden; }
.mb-6 { margin-bottom: 1.5rem; }

/* ─── Sub-menu (Services dropdown) ───────────────────────── */
.sub-menu-align {
  display: none;
  position: absolute;
  top: 100%;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-radius: 6px;
  z-index: 200;
  padding: 8px 0;
}
.menu-item:hover > .sub-menu-align,
.menu-item:focus-within > .sub-menu-align {
  display: block;
}
.submenu-column { padding: 4px 0; }
.submenu-item {
  padding: 8px 16px;
  display: block;
}
.submenu-content-container a:hover .submenu-item {
  background: #f5f5f5;
}

/* ─── Social icons ────────────────────────────────────────── */
.social-icons-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-icon { display: inline-flex; }
.social-media-icon {
  width: 24px;
  height: 24px;
}

/* ─── Contact form helpers ────────────────────────────────── */
.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}
.form-control:focus {
  outline: none;
  border-color: #66969D;
  box-shadow: 0 0 0 2px rgba(102,150,157,0.2);
}
.label-alignment {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
}
.field-label span { color: #c0392b; margin-left: 2px; }
.flex-col { display: flex; flex-direction: column; gap: 4px; }
.col-12 { width: 100%; }
.col-6  { width: 50%; }

/* ─── Grid helpers for form columns ──────────────────────── */
.fields-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 -8px;
}
.form-field-wrapper {
  padding: 0 8px;
  box-sizing: border-box;
}
.col-sm-6 { width: 50%; }

@media (max-width: 640px) {
  .col-sm-6 { width: 100%; }
  .col-6    { width: 100%; }
}

/* ─── Empty slot (GHL placeholder) ───────────────────────── */
.empty-slot,
.empty-component-wrapper,
.empty-component-min-height {
  display: none;
}