/* sisu-overrides.css — autogenerated; injected via WPCode snippet wp_head hook.
   Hello Elementor + WordPress wrap page content in containers with constrained
   widths and padding. Our page templates expect full viewport width for nav and
   footer, and a self-managed inner max-width on .page / .ph-* / .city-* etc.
   These rules release the cage so our design renders 1:1. */

/* Full-width content area — undo Hello Elementor's .entry-content max-width */
body.page-template-elementor_canvas .site,
body.page-template-elementor_canvas .site-main,
body.page-template-elementor_canvas .entry-content,
body.page-template-elementor_canvas article.page,
body.page-template-elementor_canvas main.site-main,
.elementor-widget-theme-post-content,
.entry-content > p:empty {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove the WP block-editor default inner container padding */
.entry-content > * {
  max-width: 100% !important;
}

/* Pages other than canvas template (legacy live pages) — keep their wrapper but
   strip our own pages' wrap padding when present. */
body:not(.page-template-elementor_canvas) main.page,
body:not(.page-template-elementor_canvas) .ph-section,
body:not(.page-template-elementor_canvas) .city-hero-card {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Prevent horizontal scrollbar from our own wide-viewport sections */
body { overflow-x: hidden; }

/* Make wp:html block markers (visible HTML comments) display:none if any leaked */
.wp-block-html { display: contents; }

/* Hello Elementor adds a default p {margin} that fights our component spacing */
.entry-content p { margin: revert; }

/* Some pages render their hero as full-width but Hello Elementor's container
   may add max-width 1140px. Force these to viewport width: */
.ph-hero, .ph-section, .site-footer, .nav,
.dual-card, .dual-card-grid, .city-hero-card,
section.dual-card, .card-section {
  width: 100% !important;
  max-width: none !important;
}

/* Keep our internal max-widths via inner wrappers, not via constraint from above */
.site-footer .sf-inner,
.dual-card-grid,
main.page {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- WHATSAPP FLOAT — FORCE small circular icon ---------- */
/* Override any inherited width/padding/label-text from page CSS or theme.
   Final shape: 56px circular green button in bottom-right corner, icon only. */
.wa-float {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 0 !important;
  max-width: 56px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: #25D366 !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
  z-index: 9999 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.wa-float:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(37,211,102,0.45) !important;
}
.wa-float img,
.wa-float svg {
  width: 28px !important;
  height: 28px !important;
  filter: brightness(0) invert(1) !important;
  display: block !important;
}
.wa-float .wa-label,
.wa-float span,
.wa-float .label {
  display: none !important;
  font-size: 0 !important;
}

/* If a page has no <img> inside .wa-float, inject the icon as a CSS mask */
.wa-float:not(:has(img)):not(:has(svg))::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.6 6.32A7.85 7.85 0 0 0 12.05 4a7.94 7.94 0 0 0-6.88 11.89L4 20l4.22-1.11a7.94 7.94 0 0 0 3.83.98h.01a7.94 7.94 0 0 0 7.94-7.93 7.87 7.87 0 0 0-2.4-5.62zM12.06 18.5h-.01a6.6 6.6 0 0 1-3.36-.92l-.24-.14-2.5.66.67-2.44-.16-.25a6.6 6.6 0 0 1 10.08-8.27 6.55 6.55 0 0 1 1.95 4.7 6.6 6.6 0 0 1-6.43 6.66zm3.62-4.94c-.2-.1-1.17-.58-1.35-.65-.18-.07-.31-.1-.45.1-.13.2-.51.65-.62.78-.11.13-.23.15-.43.05-.2-.1-.84-.31-1.6-.99-.59-.53-.99-1.18-1.1-1.38-.12-.2-.01-.31.09-.41.09-.09.2-.23.3-.35.1-.12.13-.2.2-.33.07-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34h-.38c-.13 0-.35.05-.53.25-.18.2-.7.69-.7 1.68 0 .99.72 1.95.82 2.08.1.13 1.4 2.14 3.4 3 .47.2.85.32 1.14.42.48.15.92.13 1.26.08.39-.06 1.17-.48 1.34-.94.16-.46.16-.86.11-.94-.05-.08-.18-.13-.38-.23z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.6 6.32A7.85 7.85 0 0 0 12.05 4a7.94 7.94 0 0 0-6.88 11.89L4 20l4.22-1.11a7.94 7.94 0 0 0 3.83.98h.01a7.94 7.94 0 0 0 7.94-7.93 7.87 7.87 0 0 0-2.4-5.62zM12.06 18.5h-.01a6.6 6.6 0 0 1-3.36-.92l-.24-.14-2.5.66.67-2.44-.16-.25a6.6 6.6 0 0 1 10.08-8.27 6.55 6.55 0 0 1 1.95 4.7 6.6 6.6 0 0 1-6.43 6.66zm3.62-4.94c-.2-.1-1.17-.58-1.35-.65-.18-.07-.31-.1-.45.1-.13.2-.51.65-.62.78-.11.13-.23.15-.43.05-.2-.1-.84-.31-1.6-.99-.59-.53-.99-1.18-1.1-1.38-.12-.2-.01-.31.09-.41.09-.09.2-.23.3-.35.1-.12.13-.2.2-.33.07-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34h-.38c-.13 0-.35.05-.53.25-.18.2-.7.69-.7 1.68 0 .99.72 1.95.82 2.08.1.13 1.4 2.14 3.4 3 .47.2.85.32 1.14.42.48.15.92.13 1.26.08.39-.06 1.17-.48 1.34-.94.16-.46.16-.86.11-.94-.05-.08-.18-.13-.38-.23z'/></svg>") center/contain no-repeat;
}

/* Mobile — keep same size, just nudge slightly closer to corner */
@media (max-width: 600px) {
  .wa-float {
    right: 14px !important;
    bottom: 14px !important;
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
  }
  .wa-float img,
  .wa-float svg,
  .wa-float:not(:has(img)):not(:has(svg))::before {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ---------- HERO H1 COLOR — fix dark-on-dark on homepage + dark sections ---------- */
/* Hero H1 should inherit the light color from its dark-hero parent, not default to body ink */
.hero-copy h1,
.hero-copy h2,
.hero-copy .lead,
.hero-copy p,
.ph-hero[data-tone="dark"] h1,
.ph-hero.dark h1,
.ph-hero .hero-copy h1,
.pf2-hero h1,
.pf2-hero-inner h1,
[data-tone="dark"] h1,
[data-tone="dark"] h2 {
  color: inherit !important;
}

/* ---------- PORTFOLIO h1 oversized — constrain to standard hero size ---------- */
.pf2-hero-inner h1,
.pf2-hero h1.huge,
.pf2-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

/* ---------- PECAN HEIGHTS + GENERIC PAGE — restore internal padding stripped by elementor_canvas ---------- */
/* elementor_canvas template removes ALL container padding. Our pages expect SOME internal padding
   so content doesn't touch viewport edges. Apply a sensible default on the outer page wrapper only. */
body.page-template-elementor_canvas main.page,
body.page-template-elementor_canvas .page {
  padding-left: clamp(20px, 4vw, 64px) !important;
  padding-right: clamp(20px, 4vw, 64px) !important;
}

/* Constrain page-head + page-section content max-width so titles don't stretch across full viewport */
.page-head,
.page-section {
  max-width: min(1280px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* For floor-plans + similar standalone pages where h1 sits at viewport edge without a card,
   give the page-head an internal max-width + center to keep titles legible */
body.page-template-elementor_canvas .page-head h1,
body.page-template-elementor_canvas .page-section h1 {
  max-width: 18ch;
}

/* ---------- COST GUIDE (page-id-2149 / custom-home-rgv) ---------- */
/* Daniel reported: empty space, lack of cards, vertical menu without sense.
   Fixes: (a) make .toc + .who-grid items read clearly as cards with subtle
   border-radius + shadow; (b) stretch the hero copy column to match the
   tall book mock so the form sits centered, not floating with empty space
   below; (c) widen the .toc to 3 columns on desktop so 12 items read as a
   compact grid instead of a tall vertical menu; (d) constrain the cg-getit
   bulleted list with a 2-column layout above 720px so it doesn't read as
   a vertical list of three items under a giant heading. */
body.page-id-2149 .cg-hero { align-items: stretch; }
body.page-id-2149 .cg-hero .copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.page-id-2149 .toc {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  body.page-id-2149 .toc { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body.page-id-2149 .toc { grid-template-columns: 1fr; }
}
body.page-id-2149 .toc-item {
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 6px 16px rgba(26,26,26,0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.page-id-2149 .toc-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(26,26,26,0.06), 0 12px 24px rgba(26,26,26,0.09);
}
body.page-id-2149 .who-grid > div {
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 6px 16px rgba(26,26,26,0.06);
}
body.page-id-2149 .qfaq > details {
  border-radius: var(--radius-md, 8px);
}
/* Make cg-getit bullet list horizontal on wider screens so it doesn't
   look like a vertical "menu" of three items under the big heading. */
@media (min-width: 720px) {
  body.page-id-2149 .cg-getit > div > ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  body.page-id-2149 .cg-getit > div > ul li {
    align-items: start;
  }
}


/* ---------- WARRANTY (page-id-2193 / warranty) — stats as cards ---------- */
.wr-hero dl.meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 16px;
  margin: 0;
}
.wr-hero dl.meta dt,
.wr-hero dl.meta dd {
  background: var(--paper-100);
  border: 1px solid var(--paper-300);
  padding: 14px 18px;
  margin: 0;
  box-sizing: border-box;
}
.wr-hero dl.meta dt {
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
  padding-top: 16px;
  padding-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.wr-hero dl.meta dd {
  border-radius: 0 0 12px 12px;
  border-top: 0;
  padding-top: 4px;
  padding-bottom: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-800);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(26,26,26,0.04));
}
@media (max-width: 640px) {
  .wr-hero dl.meta { grid-template-columns: 1fr; column-gap: 0; row-gap: 14px; }
}

/* ---------- CONTACT (page-id-2140 / contact) — rebalance grid + stack 2x2 cards ---------- */
/* Cards were squeezed into narrow left column. Rebalance + stack vertically so each card breathes
   and form-column whitespace becomes parallel to a taller left column. */
.contact-grid {
  grid-template-columns: 1.4fr 1fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: start !important;
}
.contact-grid .box-list.grid-2x2 {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
@media (max-width: 880px) {
  .box-list.grid-2x2 { grid-template-columns: 1fr !important; }
}
@media (min-width: 881px) {
  .contact-grid > div:last-child {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* ---------- PECAN HEIGHTS (page-id-2187 / pecan-heights) — broader hero h1 color + padding ---------- */
/* Pecan Heights uses .ph-hero without data-tone attribute; force light color on its h1 when
   the page background is dark. Also restore some breathing room for the .ph-hero container. */
body.page-id-2187 .ph-hero h1,
body.page-id-2187 .ph-hero .hero-copy h1,
body.page-id-2187 .ph-hero h1 em {
  color: var(--paper-100) !important;
}
body.page-id-2187 .ph-hero,
body.page-id-2187 .ph-section {
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
}
body.page-id-2187 .ph-hero {
  padding-top: clamp(40px, 5vw, 80px) !important;
  padding-bottom: clamp(40px, 5vw, 80px) !important;
}


/* ===== SISU MOBILE FIXES (header nav + mobile QA) — added 2026-05-28 ===== */
/* ============================================================
   SISU — HEADER MOBILE FIX  (<= ~1100px / phone ~390px)
   ------------------------------------------------------------
   ROOT CAUSE (diagnosed from LIVE markup + LIVE CSS):
   The site header is custom HTML authored into each page's
   content as:  <nav class="nav"> .brand / .links / .right </nav>
   (.right = .lang EN|ES pill + .cta "Let's Talk" pill).

   The LIVE injected stylesheet (sisu-shell.css, served inline as
   post-17 inline <style>) hides the ENTIRE nav menu on mobile:

       @media (max-width:1100px){ .nav .links{ display:none; } }
       @media (max-width:1000px){ .nav .links{ display:none; } }

   There is NO hamburger button and NO toggle JS anywhere — not in
   the page markup, not in sisu-runtime-inline.js, not in the
   ?custom-css sheet. So below 1100px visitors literally cannot
   reach Portfolio / Process / Pecan Heights / About / Team /
   Guarantees. The top row also crowds (brand + EN/ES + CTA jammed
   by a 32px grid gap with the now-empty middle 1fr column).

   THIS FILE provides a PURE-CSS solution: a CSS-only hamburger
   that toggles the existing .nav .links using the :target
   technique + a checkbox fallback is NOT possible without markup,
   so we ship BOTH (a) a CSS-only "details/summary" pattern is also
   markup-dependent. Because a working toggle on mobile REQUIRES a
   control element that does not exist in the live markup, the
   robust fix needs a tiny button + 6 lines of vanilla JS.

   => SEE BOTTOM: "REQUIRED HTML + JS" block. That button/JS must be
      added to the .nav markup (or injected by the WPCode snippet).
      Everything ABOVE the line is pure CSS and is safe to deploy as
      part of the overrides stylesheet; it styles + animates the
      toggle and de-crowds/sizes the logo. Desktop is fully guarded
      by the max-width media query and does NOT regress.
   ============================================================ */

/* ---- 1. The hamburger button: hidden on desktop, shown on mobile ---- */
.nav .nav-toggle{
  display: none;                 /* desktop: hidden */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--paper-300, #e6ded0);
  background: #fff;
  border-radius: 12px;
  width: 44px;
  height: 44px;                  /* 44px = min tap target */
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
}
.nav .nav-toggle .bar{
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink-800, #1a1a1a);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}

/* ============================================================
   MOBILE — everything below only applies at <= 1100px so the
   desktop layout is untouched.
   ============================================================ */
@media (max-width: 1100px){

  /* 1.a Show the hamburger */
  .nav .nav-toggle{ display: inline-flex !important; }

  /* 1.b Animate to an X when open (button gets .is-open via JS) */
  .nav .nav-toggle.is-open .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav .nav-toggle.is-open .bar:nth-child(2){ opacity: 0; }
  .nav .nav-toggle.is-open .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* ---- 2. DE-CROWD the top row ----
     Switch the 3-col grid (auto 1fr auto) to a simple flex row:
     [logo] .......... [EN|ES] [hamburger]
     The CTA pill is moved INTO the dropdown panel on mobile so the
     bar isn't jammed. Tighten gap + side padding for ~390px. */
  .nav{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    column-gap: 10px !important;
  }

  /* keep brand on the left, hamburger on the right, lang between */
  .nav .brand{ margin-right: auto; }

  /* ---- 3. LOGO sizing — was 64px (too tall/cramped on phone) ---- */
  .nav .brand img{
    height: 38px !important;     /* legible but not dominating the bar */
    width: auto !important;
    max-width: 60vw !important;  /* never crowd the lang pill */
  }

  /* lang pill: shrink slightly so logo + pill + burger fit one row */
  .nav .right{
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  .nav .lang a{ padding: 8px 11px !important; min-height: 36px !important; }

  /* ---- 4. THE DROPDOWN PANEL ----
     .links is currently display:none. We turn it into a full-width
     panel that drops below the bar. Collapsed by default; opened by
     toggling .nav.is-open (added by JS to the <nav>). */
  .nav .links{
    display: flex !important;       /* override the live display:none */
    flex-direction: column !important;
    align-items: stretch !important;
    justify-self: stretch !important;
    flex-basis: 100% !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    max-height: 0;                  /* collapsed */
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .28s ease, opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .nav.is-open .links{
    max-height: 70vh;               /* expanded — room for 7 links + CTA */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overflow-y: auto;
    padding-top: 6px !important;
  }

  /* each link = full-width tappable row */
  .nav .links a{
    display: flex !important;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 4px !important;
    font-size: 14px !important;
    letter-spacing: 0.12em !important;
    border-bottom: 1px solid var(--paper-300, #e6ded0);
    white-space: normal !important;
  }
  .nav .links a:last-child{ border-bottom: 0; }

  /* keep the active-dot indicator from breaking the flex row */
  .nav .links a.is-on::after{ margin-left: 8px; }

  /* ---- 5. Move the "Let's Talk" CTA into the open panel ----
     On mobile the .cta lives in .right; we relocate it visually to
     the bottom of the dropdown by hiding the bar copy and showing a
     full-width CTA inside the panel. Simpler + robust: just keep the
     CTA in the bar but shrink it, OR hide it in the bar and rely on
     the in-panel CTA we add in the markup block below. We HIDE the
     bar CTA on mobile to fully de-crowd the row: */
  .nav .right .cta{
    display: none !important;       /* de-crowd the bar */
  }
  /* full-width CTA rendered at the bottom of the dropdown panel
     (markup: <a class="cta cta-mobile" ...> inside .links) */
  .nav .links .cta-mobile{
    display: flex !important;
    justify-content: center !important;
    margin-top: 8px;
    border: 0 !important;
    border-radius: var(--radius-pill, 999px) !important;
    background: var(--ink-800, #1a1a1a) !important;
    color: var(--paper-50, #faf7f1) !important;
    padding: 16px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
  }
  .nav .links .cta-mobile:hover{
    background: var(--gold-500, #C5A55A) !important;
    color: var(--ink-800, #1a1a1a) !important;
  }
}

/* Extra-tight phones (<=400px) — give the logo a touch more room */
@media (max-width: 400px){
  .nav{ padding: 10px 12px !important; }
  .nav .brand img{ height: 34px !important; }
  .nav .lang a{ padding: 7px 10px !important; font-size: 10px !important; }
}

/* ============================================================
   REQUIRED HTML + JS  (NOT CSS — must be added to the live markup)
   ------------------------------------------------------------
   The live <nav> has NO toggle control and NO toggle script, so a
   working hamburger CANNOT be achieved with CSS alone. Add the
   button to the nav and the in-panel CTA, plus a 6-line listener.

   1) Inside <nav class="nav"> ... </nav>, add the BUTTON as the LAST
      child of .right (or anywhere inside .nav), and add the mobile
      CTA as the LAST child of <div class="links">:

      <button class="nav-toggle" type="button"
              aria-label="Menu" aria-expanded="false" aria-controls="sisu-nav-links">
        <span class="bar"></span><span class="bar"></span><span class="bar"></span>
      </button>

      ... and give the links div an id:  <div class="links" id="sisu-nav-links">
      ... and as the last item inside that div:
      <a class="cta cta-mobile" href="/contact/">Let&#8217;s Talk</a>

   RECOMMENDED (ZERO per-page markup edits): because the <nav> is
   repeated inside every page's custom HTML, hand-editing each page
   is error-prone. Instead add this ONE global script (wp_footer via
   the WPCode snippet, or appended to sisu-runtime-inline.js). It
   BUILDS the button + in-panel CTA at runtime for every .nav on the
   site, so no page markup needs to change and the pure CSS above
   styles it:

      (function(){
        document.querySelectorAll('nav.nav').forEach(function(nav){
          if(nav.querySelector('.nav-toggle')) return;   // idempotent
          var links = nav.querySelector('.links');
          if(!links) return;
          links.id = links.id || 'sisu-nav-links';

          // build hamburger
          var btn = document.createElement('button');
          btn.type='button'; btn.className='nav-toggle';
          btn.setAttribute('aria-label','Menu');
          btn.setAttribute('aria-expanded','false');
          btn.setAttribute('aria-controls', links.id);
          btn.innerHTML='<span class="bar"></span><span class="bar"></span><span class="bar"></span>';
          (nav.querySelector('.right') || nav).appendChild(btn);

          // clone the bar CTA into the panel as a full-width mobile CTA
          var cta = nav.querySelector('.right .cta');
          if(cta && !links.querySelector('.cta-mobile')){
            var m = cta.cloneNode(true);
            m.classList.add('cta-mobile');
            links.appendChild(m);
          }

          // toggle
          btn.addEventListener('click', function(){
            var open = nav.classList.toggle('is-open');
            btn.classList.toggle('is-open', open);
            btn.setAttribute('aria-expanded', open ? 'true' : 'false');
          });
          // close on link tap
          links.querySelectorAll('a').forEach(function(a){
            a.addEventListener('click', function(){
              nav.classList.remove('is-open');
              btn.classList.remove('is-open');
              btn.setAttribute('aria-expanded','false');
            });
          });
        });
      })();

   With this runtime script, NO page markup edits are required — the
   button, the id, and the in-panel CTA are all created in JS, and
   the CSS above does the rest.
   ============================================================ */

/* ============================================================================
   mobile-qa-fix.css  —  Sisu Development
   Mobile-viewport (~390px) QA fixes. ALL rules scoped to mobile media queries
   so desktop rendering is unaffected. Intended to be appended AFTER the existing
   sisu-overrides.css inside the WPCode snippet (loads in wp_head).

   Author: Mobile-viewport QA lane.  Read-only diagnosis — NOT deployed.
   Pages audited live: / , /financing/ , /custom-home-rgv/ , /process/ ,
                        /custom-home-builder-mcallen/
   ============================================================================ */


/* ----------------------------------------------------------------------------
   FIX 1 (CRITICAL) — WhatsApp float overlaps hero body/meta text on mobile.
   The .wa-float is fixed bottom:14px right:14px (52px circle, z-index 9999).
   On the homepage hero the bottom-right of the hero-copy holds the .meta-foot
   line "LICENSED & INSURED · HABLAMOS ESPAÑOL" and the "Book a 20 minute call"
   ghost CTA — the green button sits on top of that text.

   Fix strategy (CSS-only, no markup change required):
   (a) Honor the iOS safe-area inset so the button never hides under the home
       indicator, and lift it a touch higher than the raw 14px corner.
   (b) Reserve clear space at the BOTTOM of .hero-copy and .meta-foot equal to
       the button footprint + gutter so hero text can never render under it.
   (c) Keep the 52px circle (already >=44px tap target — good) but add a small
       focus-visible ring for accessibility.
   This keeps the button in the corner (where users expect it) while guaranteeing
   it never covers copy.
---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .wa-float {
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9999 !important;
  }
  .wa-float:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
  }

  /* Reserve a safe zone at the foot of the hero so the floating button has its
     own clear corner and never overlaps the meta line or the ghost CTA. */
  .hero .hero-copy {
    padding-bottom: 96px !important;        /* button (52) + bottom gap + breathing room */
  }
  .hero .meta-foot {
    /* keep the right-most label clear of the 52px button + 14px gutter (~78px) */
    padding-right: 78px !important;
    row-gap: 10px !important;
  }
  /* The ghost CTA "Book a 20 minute call" sits just above the corner — make sure
     its tap area is not clipped by the reserved zone. */
  .hero .ctas { margin-bottom: 8px !important; }
}


/* ----------------------------------------------------------------------------
   FIX 2 (HIGH) — Tap targets below 44px.
   .btn-sm has min-height:38px; .cta-ghost has only 4px horizontal padding which
   makes its hit area thin and easy to miss with a thumb. WCAG / iOS guidance is
   44px minimum. Applies on home, financing, process, rgv, mcallen.
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .btn-sm {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Ghost / underline text CTAs: widen the hit area without changing the visual
     underline position too much. */
  .hero .cta-ghost,
  .cta-ghost,
  .cta-band .actions a {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Footer links are small and stacked close together — give them vertical room
     so adjacent links aren't a single fat-finger target. */
  .site-footer .sf-cols a,
  .site-footer a {
    display: inline-block !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.4 !important;
  }
}


/* ----------------------------------------------------------------------------
   FIX 3 (MEDIUM) — .section-head (80px 1fr) never collapses on mobile.
   On a 390px screen the fixed 80px number column + 28px gap eats ~108px before
   the heading even starts, crowding the H2 ("How custom-home financing works.")
   into a narrow column where it wraps awkwardly. Used on financing / process /
   rgv / mcallen. Stack the number above the heading on small screens.
---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-items: start !important;
  }
  .section-head .num {
    /* keep it as a small label above the title */
    display: block !important;
  }
}


/* ----------------------------------------------------------------------------
   FIX 4 (MEDIUM) — Smallest labels too small to read at 390px.
   .photo-tag is 10px and several mono eyebrows/corner-nums sit at 10–11px with
   heavy letter-spacing. For the founder reading on a phone, bump the very
   smallest to a legible floor and trim extreme tracking so they don't wrap to
   two cramped lines.
---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .hero-photo .photo-tag,
  .photo-tag {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }
  .hero .eyebrow,
  .eyebrow {
    letter-spacing: 0.18em !important;   /* 0.26–0.32em is too wide at 390px */
  }
  .hero .corner-num,
  .corner-num {
    font-size: 11px !important;
  }
}


/* ----------------------------------------------------------------------------
   FIX 5 (MEDIUM) — Belt-and-suspenders against horizontal overflow / sideways
   scroll at 390px. body{overflow-x:hidden} already exists in overrides, but that
   only hides the symptom; long unbreakable strings (e.g. the dotted city list
   "MCALLEN · EDINBURG · MISSION · PHARR · BROWNSVILLE", URLs, the wa.me anchor)
   can still force inner containers wide and create a clipped/cut-off look.
   Allow these to wrap and clamp media to container width.
---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .hero .meta-foot span,
  .meta-foot span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  /* Any image / video / iframe must never exceed its container on mobile. */
  img, video, iframe, svg, canvas, table {
    max-width: 100% !important;
    height: auto;
  }
  iframe { width: 100% !important; }
  /* Guard: prevent any leftover fixed-px-width inline element from overflowing. */
  .page, main.page, .page-section, .page-head {
    overflow-x: clip;
  }
}


/* ----------------------------------------------------------------------------
   FIX 6 (LOW) — Hero CTA row crowding at the very narrowest widths.
   .hero .ctas uses gap:24px with two CTAs; on a 390px column the gold pill +
   ghost link can sit awkwardly. Tighten the gap and let them stack cleanly so
   the gold button spans a comfortable, full-thumb width.
---------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .hero .ctas {
    gap: 14px !important;
    align-items: stretch !important;
  }
  .hero .cta-gold {
    width: 100% !important;
    text-align: center !important;
  }
  .hero .cta-ghost {
    align-self: flex-start !important;
  }
}


/* FIX 2026-05-28b: hide the cloned mobile CTA on desktop (was showing as a 2nd 'Let's Talk' pill). Mobile media query re-shows it with !important. */
.nav .links .cta-mobile{ display:none; }
.nav .links a.cta-mobile{ display:none; }


/* FIX 2026-05-28c: restore global .container (only existed in unloaded sisu-site.css) -> fixes lost margins (Pecan Heights + others) */
.container{ max-width:1240px; margin:0 auto; }
/* gold-italic hero title to match design system (was black on these interior heroes) */
.page-head h1 em, .ah-head h1 em{ color: var(--gold-500) !important; }


/* FIX 2026-05-28d: extend gold-italic hero em to remaining light-hero selectors (warranty, community head) per design audit */
.wr-hero h1 em, .community-head h2 em{ color: var(--gold-500) !important; font-style: italic; }


/* FIX 2026-05-28e: card the list-page hero title block (.ah-head left column) to match the stat-box cards (Daniel request). Applies to available-homes + casas-disponibles (shared class). */
.ah-head{ align-items: start; }
.ah-head > div:first-child{
  background: var(--bg-raised, #fff);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius-lg, 20px);
  padding: clamp(26px, 3.4vw, 44px);
  align-self: start;
}
@media (max-width: 600px){
  .ah-head > div:first-child{ padding: 22px; border-radius: 16px; }
}


/* FIX 2026-05-28f: mobile header (EN/ES into menu, hamburger flush right) + eyebrow/hero-title sizing */
@media (max-width:1100px){
  .nav .right .lang{ display:none !important; }
  .nav .links .lang-mobile{ display:flex !important; justify-content:center; align-items:center; gap:0; margin:2px 0 10px; padding:0; }
  .nav .links .lang-mobile a{ border-bottom:0 !important; padding:8px 14px !important; width:auto !important; }
}
@media (max-width:600px){
  .eyebrow, .city-hero-card .eyebrow{ font-size:10px !important; letter-spacing:0.1em !important; line-height:1.7 !important; }
  .city-hero-card h1, .page-hero-card h1, .ah-head h1, .page-head h1, .wr-hero h1, .team-hero h1, .bio-hero h1, .dr-hero h1, .pf2-hero h1, .com-hero-card h1{
    font-size: clamp(1.85rem, 8vw, 2.55rem) !important; line-height:1.1 !important; overflow-wrap:break-word; hyphens:none;
  }
  .city-hero-card, .page-hero-card, .com-hero-card{ padding:30px 20px !important; }
  .ah-head > div:first-child{ padding:22px 18px !important; }
}


/* FIX 2026-05-28g: hide the cloned mobile EN/ES on desktop (only show inside mobile menu) */
.nav .links .lang-mobile{ display:none; }

/* FIX 2026-05-29 v12b: EN/ES toggle OUT of the sandwich menu — visible in the top-RIGHT
   corner of the bar; hamburger pinned to the opposite (LEFT) side. Site-wide.
   (The hamburger is injected into .right by JS, so we position it absolutely on the
   left rather than rely on flex order, which can't move it out of .right.) */
@media (max-width:1100px){
  .nav{ position:relative !important; flex-wrap:wrap !important; align-items:center !important; }
  .nav .nav-toggle{ position:absolute !important; left:16px !important; top:10px !important; margin:0 !important; }
  .nav .brand{ margin-left:52px !important; margin-right:auto !important; }  /* clear the absolute hamburger */
  .nav .right{ display:flex !important; align-items:center !important; flex:0 0 auto !important; }
  .nav .right .lang{ display:flex !important; }      /* EN/ES visible in the bar (top-right) */
  .nav .right .cta{ display:none !important; }       /* CTA stays inside the menu */
  .nav .links{ flex-basis:100% !important; }         /* dropdown drops below the bar */
  .nav .links .lang-mobile{ display:none !important; }   /* no EN/ES inside the menu anymore */
}
@media (max-width:400px){ .nav .nav-toggle{ left:12px !important; } .nav .brand{ margin-left:48px !important; } }