/* ==========================================================================
   MyVizion Builder — rows × columns × components (footer v1, header v2)
   ========================================================================== */

/* The builder owns its own vertical rhythm, so drop the default footer padding. */
.site-footer.mzv-builder { padding-block: 0; }

.mzv-builder .container { max-width: none; padding-inline: clamp(1rem, 4vw, 2.5rem); }

.mzv-row {
  background: var(--mzv-row-bg, transparent);
  color: var(--mzv-row-text, inherit);
  padding-block: var(--mzv-row-pt, 24px) var(--mzv-row-pb, 24px);
}
.mzv-row.is-bordered { border-top: 1px solid var(--mzv-border); }

.mzv-row__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
/* Footer main row mirrors the original 1.4fr / 1fr / 1fr layout */
.mzv-footer .mzv-row--main .mzv-row__inner { grid-template-columns: 1.4fr 1fr 1fr; }

.mzv-col { min-width: 0; display: grid; gap: .5rem; align-content: start; justify-items: start; }
.mzv-component { min-width: 0; }
.mzv-footer .mzv-row--bottom .mzv-col--right { justify-items: end; }

/* text alignment helpers (components) */
.mzv-align--left { text-align: left; }
.mzv-align--center { text-align: center; }
.mzv-align--right { text-align: right; }

/* social links */
.mzv-social a { color: var(--mzv-text); }
.mzv-social a:hover { color: var(--mzv-accent); }

/* html component */
.footer-html { color: var(--mzv-text-muted); }
.footer-html > :first-child { margin-top: 0; }
.footer-html > :last-child { margin-bottom: 0; }

/* responsive: stack the columns */
@media (max-width: 720px) {
  .mzv-row__inner,
  .mzv-footer .mzv-row--main .mzv-row__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .mzv-footer .mzv-row--bottom .mzv-col--right { justify-items: start; }
}

/* ==========================================================================
   Header builder
   ========================================================================== */
.site-header.mzv-header { display: block; }
.mzv-header .container { position: relative; }

.mzv-header .mzv-row__inner { grid-template-columns: 1fr auto 1fr; align-items: center; }
.mzv-header .mzv-col { display: flex; align-items: center; gap: 1rem; }
.mzv-header .mzv-col--left { justify-content: flex-start; }
.mzv-header .mzv-col--center { justify-content: center; }
.mzv-header .mzv-col--right { justify-content: flex-end; }
.mzv-header .mzv-component { display: flex; align-items: center; }

/* sticky vs static */
.mzv-header--sticky { position: fixed; }
.mzv-header--static { position: relative; }
/* solid background (transparent uses the base .site-header gradient) */
.mzv-header--solid { background: rgba(0, 0, 0, .9); }
.mzv-header--solid.is-stuck,
.mzv-header--transparent.is-stuck { background: rgba(0, 0, 0, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* the mobile toggle sits top-right in the builder header */
.mzv-header .nav-toggle { position: absolute; top: 50%; right: clamp(1rem, 4vw, 2.5rem); translate: 0 -50%; }

/* drawer extras — hidden on desktop (they live in the mobile drawer only) */
.mzv-nav-extras { display: none; }

@media (max-width: 720px) {
  .mzv-header .mzv-row__inner { display: flex; align-items: center; justify-content: space-between; }
  .mzv-header .mzv-col--center,
  .mzv-header .mzv-col--right { order: 2; }
  /* hide the bar copies of the extras (drawer copies live in .mzv-nav-extras) */
  .mzv-header .mzv-col > .mzv-component--button,
  .mzv-header .mzv-col > .mzv-component--search,
  .mzv-header .mzv-col > .mzv-component--social,
  .mzv-header .mzv-col > .mzv-component--html1,
  .mzv-header .mzv-col > .mzv-component--html2 { display: none; }

  /* the drawer now carries the extras */
  .mzv-nav-extras { display: grid; gap: .9rem; width: 100%; padding-top: 1.1rem; }
  .mzv-nav-extras .mzv-search__toggle { display: none; }
  .mzv-nav-extras .mzv-search__panel {
    position: static; opacity: 1; visibility: visible; transform: none; width: auto;
    padding: 0; background: transparent; border: 0; box-shadow: none;
  }
  .mzv-nav-extras .wp-block-button,
  .mzv-nav-extras .wp-block-button__link { width: 100%; justify-content: center; text-align: center; }
  .mzv-nav-extras .mzv-social { display: flex; flex-wrap: wrap; gap: 1rem; }
  .mzv-nav-extras .mzv-social a { padding: 0; border: 0; font-family: var(--mzv-font-body); font-size: .85rem; letter-spacing: 0; text-transform: none; }
  .mzv-nav-extras .header-html { color: var(--mzv-text-muted); font-size: .85rem; }
}

/* search component */
.mzv-search { position: relative; }
.mzv-search__toggle { display: grid; place-items: center; width: 38px; height: 38px; background: none; border: 0; color: var(--mzv-text); cursor: pointer; }
.mzv-search__toggle:hover { color: var(--mzv-accent); }
.mzv-search__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; width: min(88vw, 320px);
  padding: 10px; background: #0a0a0a; border: 1px solid var(--mzv-border); border-radius: 10px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .25s var(--mzv-ease), transform .25s var(--mzv-ease), visibility .25s;
}
.mzv-search.is-open .mzv-search__panel { opacity: 1; visibility: visible; transform: none; }
.mzv-search__panel .search-form { display: flex; gap: .5rem; }
.mzv-search__panel input[type="search"] { flex: 1; min-width: 0; background: var(--mzv-surface-2); border: 1px solid var(--mzv-border); color: var(--mzv-text); border-radius: 6px; padding: .5rem .7rem; }
.mzv-search__panel input[type="submit"] { background: var(--mzv-accent); color: #fff; border: 0; border-radius: 6px; padding: .5rem .9rem; cursor: pointer; }

/* ==================================================================
   Mobile drawer presentation — MyVizion Builder → Header → Mobile menu
   Body classes are emitted by mzv_builder_mobile_body_class().
   Defaults (right / panel / left / dim / slide / sticky) = the original look.
   ================================================================== */
@media (max-width: 720px) {

  /* page backdrop behind the drawer (z 39 < .nav 40) */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 39; pointer-events: none;
    background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s var(--mzv-ease);
  }
  body.nav-open::after { opacity: 1; }
  body.mzv-drawer--bd-blur::after { background: rgba(0, 0, 0, .3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  body.mzv-drawer--bd-none::after { display: none; }

  /* slide in from the left */
  body.mzv-drawer--side-left .nav { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--mzv-border); transform: translateX(-100%); }
  body.mzv-drawer--side-left .nav.is-open { transform: translateX(0); }

  /* full screen */
  body.mzv-drawer--full .nav { inset: 0; width: 100%; border: 0; padding-top: clamp(4.5rem, 12vh, 7rem); }
  body.mzv-drawer--full .nav.is-open { transform: translateX(0); }

  /* centered content */
  body.mzv-drawer--align-center .nav { align-items: center; }
  body.mzv-drawer--align-center .nav .menu { width: 100%; }
  body.mzv-drawer--align-center .nav .menu > li { text-align: center; border-bottom: 0; }
  body.mzv-drawer--align-center .nav .menu > li > a { display: inline-flex; justify-content: center; text-align: center; padding: 1rem .5rem; border: 0; }
  body.mzv-drawer--align-center .submenu-toggle { position: static; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin-left: .35rem; padding: .5rem; vertical-align: middle; }
  body.mzv-drawer--align-center .nav .sub-menu { text-align: center; border-left: 0; padding-left: 0; }
  body.mzv-drawer--align-center .nav .sub-menu a { padding-left: 0; padding-right: 0; }
  body.mzv-drawer--align-center .mzv-nav-extras { text-align: center; justify-items: center; }

  /* fade instead of slide */
  body.mzv-drawer--motion-fade .nav { transform: none; opacity: 0; visibility: hidden; transition: opacity .3s var(--mzv-ease), visibility 0s linear .3s; }
  body.mzv-drawer--motion-fade .nav.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--mzv-ease), visibility 0s; }

  /* non-sticky header on mobile */
  body.mzv-mobile-header--static .mzv-header--sticky,
  body.mzv-mobile-header--static .site-header { position: relative; }
}