/* ⚠️ WHY THESE CARRY .elementor-widget
   Elementor writes an UNSCOPED .elementor-widget-heading .elementor-heading-title{font-weight;
   color} into the generated stylesheet of every document holding a Heading widget — templates
   included. Those sheets load after this file and, at a tied (0,2,0), took the footer eyebrow,
   the footer H2 and the Newsletter column title to weight 300 / ink on a DARK footer.
   The tell was line 66: ".arc-fcol__title, .arc-foot-coltitle .elementor-heading-title" —
   one declaration block where the shortcode-rendered selector rendered correctly and the
   widget selector did not. Pinning .elementor-widget makes these (0,3,0). Do not remove. */
/* Arcadia Homes — header (Theme Builder template + nav shortcodes).
   Reference: build/Header.js on the approved static site. Breakpoint: 1040px. */

/* Fixed shell — transparent over hero, solid past 40px scroll (body.arc-scrolled) */
.elementor-location-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
body.admin-bar .elementor-location-header { top: 32px; }
.elementor-location-header .arc-header.e-con {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  padding: 0;
  gap: 0 !important;
}
body.arc-scrolled .elementor-location-header .arc-header.e-con {
  background: var(--header-solid-bg);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--border-hair);
}

/* ---- Utility strip (desktop only) ---- */
.arc-header .arc-header-util.e-con { background: var(--surface-inverse); padding: 0; }
.arc-header .arc-header-util-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); min-height: 38px;
  flex-direction: row; align-items: center; justify-content: flex-end;
}
.arc-nav--utility { display: flex; gap: 26px; align-items: center; }
.arc-nav--utility .arc-nav__item { position: relative; display: flex; align-items: center; }
.arc-nav--utility .arc-nav__link {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em;
  text-decoration: none; color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur-fast) var(--ease-out); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0;
}
.arc-nav--utility .arc-nav__link:hover,
.arc-nav--utility .arc-has-dd.is-open > .arc-nav__link { color: #fff; }
/* Client Portal item — extra gap + person icon */
.arc-nav--utility .arc-portal { margin-left: 4px; }
.arc-nav--utility .arc-portal .arc-nav__link {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; gap: 7px;
}
.arc-nav--utility .arc-portal .arc-nav__link::before {
  content: ""; width: 13px; height: 13px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3Cpath d='M4 21c0-3.6 3.6-6.2 8-6.2s8 2.6 8 6.2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3Cpath d='M4 21c0-3.6 3.6-6.2 8-6.2s8 2.6 8 6.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- Main row ---- */
.arc-header .arc-header-main.e-con { padding: 0; background: transparent; }
.arc-header .arc-header-main-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); min-height: 82px;
  flex-direction: row; align-items: center; justify-content: space-between; gap: 28px;
}
/* Logo: white over hero, black when solid */
.arc-header .arc-logo-light, .arc-header .arc-logo-dark { line-height: 0; }
.arc-header .arc-logo-light img, .arc-header .arc-logo-dark img {
  height: 48px !important; width: auto !important; max-width: none !important; display: block;
  transform: translateY(-1px);
}
body.arc-scrolled .arc-header .arc-logo-light { display: none; }
body:not(.arc-scrolled) .arc-header .arc-logo-dark { display: none; }

/* Primary nav */
.arc-nav--primary { display: flex; gap: 32px; align-items: center; }
.arc-nav--primary .arc-nav__item { position: relative; }
.arc-nav--primary .arc-nav__link {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  height: 24px; border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  background: none; cursor: pointer;
}
body.arc-scrolled .arc-nav--primary .arc-nav__link { color: var(--text-primary); }
.arc-nav--primary .arc-nav__item:not(.arc-has-dd) .arc-nav__link:hover,
.arc-nav--primary .arc-has-dd.is-open > .arc-nav__link { border-bottom-color: #fff; }
body.arc-scrolled .arc-nav--primary .arc-nav__item:not(.arc-has-dd) .arc-nav__link:hover,
body.arc-scrolled .arc-nav--primary .arc-has-dd.is-open > .arc-nav__link { border-bottom-color: var(--brand-accent); }

/* Dropdown panels (shared by primary + utility) */
.arc-nav__panel {
  position: absolute; top: 100%; left: 0; margin-top: 12px; z-index: 60;
  background: var(--surface-page); border: 1px solid var(--border-hair);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px;
  min-width: 248px; display: flex; flex-direction: column; gap: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.arc-has-dd.is-open > .arc-nav__panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.arc-nav__panel--mega { min-width: 560px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.arc-nav__sub {
  display: block; padding: 0.6rem 0.85rem; border-radius: var(--radius-xs);
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-nav__sub:hover { background: var(--surface-alt); color: var(--text-primary); }

/* Right cluster: phone + CTA */
.arc-header .arc-header-right.e-con { flex-direction: row; align-items: center; gap: 18px; width: auto; padding: 0; }
.arc-header-phone.elementor-widget .elementor-heading-title { line-height: 1; font-size: 0.82rem; }
.arc-header-phone.elementor-widget .elementor-heading-title a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  /* Measured 2026-09-04: wrapped to two lines from 1346px down (clean at 1350). The number is
     a single unit and must never break across lines. */
  white-space: nowrap;
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  color: #fff !important; transition: color var(--dur-fast) var(--ease-out);
}
body.arc-scrolled .arc-header-phone.elementor-widget .elementor-heading-title a { color: var(--text-primary) !important; }
.arc-header-phone.elementor-widget .elementor-heading-title a::before {
  content: ""; width: 15px; height: 15px; background-color: currentColor; opacity: 0.85; flex: 0 0 auto;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Header CTA: 190px, inverse over hero → primary when solid (state overrides widget settings) */
.arc-header-cta .elementor-button {
  width: 190px;
  background: var(--arc-white) !important; color: var(--arc-black) !important; border-color: var(--arc-white) !important;
}
body.arc-scrolled .arc-header-cta .elementor-button {
  background: var(--brand-primary) !important; color: #FFFFFF !important; border-color: var(--brand-primary) !important;
}

/* Burger (bare button — pin against Hello reset) */
body .arc-burger {
  background: none !important; border: none !important; border-radius: 0 !important;
  cursor: pointer; padding: 10px !important; width: auto !important;
  display: flex !important; flex-direction: column; gap: 5px; line-height: 0;
}
body .arc-burger:hover, body .arc-burger:focus { background: none !important; }
body .arc-burger:focus:not(:focus-visible) { outline: none; }
.arc-burger span { width: 26px; height: 2px; background: #fff; display: block; }
body.arc-scrolled .arc-burger span, body.arc-menu-open .arc-burger span { background: var(--arc-black); }

/* ---- Mobile slide-down panel ---- */
.arc-header .arc-header-panel.e-con {
  display: none; background: var(--surface-page); border-top: 1px solid var(--border-hair);
  padding: var(--gutter); max-height: 72vh; overflow-y: auto;
}
body.arc-menu-open .arc-header .arc-header-panel.e-con { display: flex; }
body.arc-menu-open .elementor-location-header .arc-header.e-con { background: var(--surface-page); border-bottom-color: var(--border-hair); }
body.arc-menu-open .elementor-location-header .arc-logo-light { display: none; }
body.arc-menu-open .elementor-location-header .arc-logo-dark { display: block; }
.arc-mnav { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.arc-mnav__link {
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-primary) !important; text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid var(--border-hair);
}
.arc-macc { border-bottom: 1px solid var(--border-hair); }
body .arc-macc__btn {
  width: 100% !important; display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
  background: none !important; border: none !important; cursor: pointer; padding: 12px 0 !important; text-align: left;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-primary) !important; line-height: 1.4 !important;
}
body .arc-macc__btn:hover, body .arc-macc__btn:focus { background: none !important; color: var(--text-primary) !important; }
.arc-macc__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); }
.arc-macc.is-open > .arc-macc__wrap { grid-template-rows: 1fr; }
.arc-macc__clip { overflow: hidden; }
.arc-macc__inner { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 14px; }
.arc-macc__link {
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500;
  color: var(--text-secondary) !important; text-decoration: none; padding: 7px 0 7px 14px;
}
.arc-mnav__ctas { display: flex; gap: 12px; margin-top: 16px; }

/* ---- Responsive: mobile-menu cutover ----
   RAISED 1040px -> 1340px on 2026-09-04 (BugHerd #29, owner decision). The desktop header
   physically cannot fit below ~1340: logo + 661px nav + phone + CTA exceed the width, and
   every way of redistributing that just moves the damage (nav over the CTA, logo crushed to
   89px, or the CTA pushed 131px off-screen). The burger now takes over before the header runs
   out of room, so 1025-1339 gets the mobile panel instead of a broken desktop header.
   ⚠️ The reference switches at 1040 — this is a deliberate divergence, not a porting error. */
@media (max-width: 1339px) {
  .arc-header .arc-header-util.e-con { display: none; }
  .arc-header .arc-header-main-inner.e-con { min-height: 68px; }
  .arc-header .arc-header-nav-w { display: none; }
  .arc-header .arc-header-right.e-con { display: none; }
}
@media (min-width: 1340px) {
  .arc-header .arc-burger-w { display: none; }
  .arc-header .arc-header-panel.e-con { display: none !important; }
}

/* ---- BugHerd #29: desktop nav overflowing into the phone/CTA block (2026-09-04) ------
   `.arc-header-nav-w` was `flex: 0 1 auto` with `min-width: 0`, so the header row could
   squeeze it BELOW its own content — measured at 1040px: wrapper 444px against 508px of nav.
   A flex item cannot overlap a sibling, but its overflowing CONTENT can, so the nav painted
   over the phone number and the CTA.

   ⚠️ SCOPED TO >=1340px ON PURPOSE. Refusing the shrink does not create room, it only chooses
   a different victim, and below ~1340 there is genuinely not enough width for
   logo + 661px nav + phone + CTA at their design sizes. Measured, all three:
     - as built:                nav overlaps the phone and CTA (up to 158px at 1040)
     - nav flex-shrink:0:       logo absorbs it, 194px -> 89px at 1040, glyphs over the nav
     - nav + logo flex-shrink:0: CTA pushed to x=1171 on a 1040 viewport, 131px off-screen
   So this rule is applied only where it is a clean win: from 1340px up it holds the original
   32px gap and 1.82px letter-spacing with 28px clearance and the logo at full size.

   The two workarounds proposed for the band below it do not hold up either:
     - GAP alone cannot cover it. Three gaps x 32px = 96px of savings against a 102px deficit
       at 1040 — and worse, the row reclaims whatever the nav gives up, sliding the right-hand
       block left, so gap + letter-spacing together never converged below 1200px.
     - ZOOM is worse. It could not clear 1040 even at 0.70, and by 1100 it needed 0.73 — that
       is 9.5px nav text in an 18px box, under the 24x24 target size this site's accessibility
       score depends on. It would trade a layout bug for an accessibility regression.
   1040-1340 therefore needs the mobile-menu cutover raised, which is a design decision. */
@media (min-width: 1340px) {
  /* Both: the wrapper AND the nav inside it are shrinkable flex items, and fixing only the
     wrapper left the nav itself squeezed 4px below its content at 1340. */
  .arc-header-nav-w, .arc-nav--primary { flex-shrink: 0; }
}