/* base.css — GHL layout framework re-implementation for Peer & Co */

/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; font-family: "Jost", sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Abyssinica SIL", serif; margin: 0 0 0.5em; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }

/* ─── Section ────────────────────────────────────── */
/* IMPORTANT: No isolation:isolate here — it traps dropdown z-index */
.c-section {
  position: relative;
  width: 100%;
  display: block;
}
.fullSection { width: 100%; }

/* Background overlay divs 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;
}
.c-section > .bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
}
.c-section > .inner {
  position: relative;
}

/* ─── Inner container ────────────────────────────── */
.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; }
.c-row > .inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

/* ─── Column ─────────────────────────────────────── */
.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 ─────────────────────── */
@media (max-width: 767px) {
  .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;
  }
  .desktop-only { display: none !important; }
}
@media (min-width: 768px) {
  .desktop-hidden { display: none !important; }
}

/* ─── Border/radius helpers ──────────────────────── */
.noBorder  { border: none !important; }
.borderFull { border-style: solid; }
.borderBottom { border-top: none !important; border-left: none !important; border-right: none !important; }
.radius0  { border-radius: 0; }
.radius5  { border-radius: 5px; }
.radius10 { border-radius: 10px; }
.radius15 { border-radius: 15px; }
.radius25 { border-radius: 25px; }

/* ─── Visibility helpers ─────────────────────────── */
.sf-hidden { display: none !important; }

/* ─── Text/image components ──────────────────────── */
.text-output { width: 100%; }
.text-output > div { width: 100%; }
.image-container { width: 100%; }
.hl-image-picture { display: block; width: 100%; }
.hl-image-picture img { width: 100%; height: auto; }
.mw-100 { max-width: 100%; }

/* ─── Gallery image padding ──────────────────────── */
[class*="cimage-"] { padding: 10px !important; }

/* ─── 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;
}
.btn-loader-position { display: none; }

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

/* ─── Nuxt announcer ─────────────────────────────── */
.nuxt-route-announcer { display: none !important; }

/* ─── Preview container ──────────────────────────── */
.preview-container { width: 100%; }

/* ─── Mega menu / nav dropdown ───────────────────── */
/* Override the GHL-generated margin:20px 0 0 350px on the dropdown section */
#section-X71rDMQM2G {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin: 0 !important;
  z-index: 200 !important;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 220px;
}
.menu-item:hover .mega-menu,
.menu-item:focus-within .mega-menu {
  display: block;
}
.menu-item { position: relative; }

/* Nav layout */
.c-nav-menu-v2 { width: 100%; }
.mega-menu-container { width: 100%; }
.menu-layout { width: 100%; }
.nav-menu-ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-menu-ul li { position: relative; }
.mega-menu-link, .mega-menu-link:active, .mega-menu-link:hover {
  color: inherit;
  text-decoration: none;
}
.menu-item-title {
  padding: 8px 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* Dropdown child container */
.child-container { padding: 10px; }
.child-container .c-button a {
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  display: block;
}

/* Mobile nav */
#mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: #fff;
  z-index: 1000;
  overflow-y: auto;
  padding: 20px;
  box-shadow: -4px 0 16px rgba(0,0,0,0.2);
  flex-direction: column;
}
#mobile-nav.open { display: flex; }
#mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}
#mobile-nav-overlay.open { display: block; }
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #2d3865;
}

/* ─── Button animation helpers ───────────────────── */
@keyframes elevate {
  0% { box-shadow: 0 0 0 0 transparent; transform: translateY(0); }
  to { box-shadow: 0 8px 5px -5px rgba(0,0,0,.25); transform: translateY(-10px); }
}
.buttonElevate:hover { animation: elevate .2s forwards; }

/* ─── Flex helpers ───────────────────────────────── */
.flex { display: flex; }
.items-center { align-items: center; }
.w-full { width: 100%; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.text-center { text-align: center; }
.relative { position: relative; }
.mr-2 { margin-right: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-15 { padding-left: 0.375rem; padding-right: 0.375rem; }
.rounded-sm { border-radius: 0.125rem; }
.text-nowrap { white-space: nowrap !important; }
.pointer { cursor: pointer; }
.flex-row { flex-direction: row; }

/* ─── Image handling ─────────────────────────────── */
/* Logo images use src="/images/logo.webp" directly — no CSS override needed */

/* Background sections */
.bg-section-oTHenzaa7a {
  background-image: url('/images/bg-oTHenzaa7a.webp');
  background-size: cover;
  background-position: center;
}
.bg-section-K5KaO7Dlf1 {
  background-image: url('/images/bg-K5KaO7Dlf1.webp');
  background-size: cover;
  background-position: center;
}

/* ─── Cookie banner ──────────────────────────────── */
.hl-cookie-consent-banner { display: none; } /* handled separately if needed */

/* ─── Nav popup ──────────────────────────────────── */
#nav-menu-popup { display: none !important; }