/* ──────────────────────────────────────────────────────────────────────
   Native Elementor widget compatibility
   Bridges the design system onto native container/widget output so
   sections rebuilt with native Elementor elements match the prototype.
   (Targets widget-level classes — container _css_classes don't render from
   raw-injected data, so section styling is done via native Elementor controls.)
   ────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   LIVE QA FIXES (Chrome desktop/mobile review)
   ══════════════════════════════════════════════════════════════════════ */

/* FIX 1 — Sizes grid overflowed horizontally: repeat(3,1fr) let columns grow
   past the container (cards' min-content > track). minmax(0,1fr) lets them shrink. */
.hu-sizes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 980px) { .hu-sizes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .hu-sizes-grid { grid-template-columns: minmax(0, 1fr) !important; } }
/* …and let each card shrink to its track (its content's min-content was ~512px,
   overflowing the 341px track). min-width:0 + shrinkable desc column. */
.hu-size { min-width: 0; grid-template-columns: auto minmax(0, 1fr); }
.hu-size .desc { padding-right: 56px; }
/* desc had white-space:nowrap in the cascade → text couldn't wrap and overflowed */
.hu-size .desc, .hu-size .desc span { white-space: normal; }

/* FIX 2 — A theme/Elementor-kit rule sets a, button, [type=submit] to #cc3366 (pink).
   Buttons with an explicit type attribute and the FAQ <button>s inherited it.
   Restore the design colors with winning specificity. */
.hu-faq-q { color: var(--ink); border: 0; }
/* theme's button reset adds a 1px #cc3366 border; design buttons have none.
   Include [type=submit]/[type=button] selectors so submit buttons (which match
   the theme's attribute selector) are beaten on specificity. */
.hu-btn, .hu-drawer-close,
.hu-btn[type="submit"], .hu-btn[type="button"],
button.hu-btn { border: 0; }
.hu-nav-mobile-link { color: var(--ink); }
.hu-nav-link { color: var(--ink-2); }
.hu-burger { color: var(--ink); border-color: transparent; }
/* .hu-size is itself a <button> → its size number inherited the pink. Restore ink
   (featured cards keep their own light color via .hu-size.featured). */
.hu-size { color: var(--ink); }
/* theme adds padding:8px 16px + line-height:27px → the ✕ glyph sat high.
   Zero them so grid place-items:center truly centres it. */
.hu-drawer-close { color: var(--ink); padding: 0; line-height: 1; }
.hu-loc-toggle button { color: var(--ink-2); }
/* safety net: any link inside the page chrome/sections with no explicit colour
   should inherit, not turn pink */
.hu-nav a, .hu-hero a:not(.hu-btn), .hu-section a:not(.hu-btn), .hu-footer a { color: inherit; }
button.hu-btn-primary,
.hu-btn-primary[type="submit"],
.hu-btn-primary[type="button"] { background: var(--accent); color: var(--accent-ink); }
button.hu-btn-primary:hover,
.hu-btn-primary[type="submit"]:hover { background: var(--accent-deep); color: var(--accent-ink); }
button.hu-btn-dark,
.hu-btn-dark[type="submit"],
.hu-btn-dark[type="button"] { background: var(--ink); color: var(--bg); }
button.hu-btn-ghost,
.hu-btn-ghost[type="submit"],
.hu-btn-ghost[type="button"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-2); }

/* Hero photo: the source is landscape but the 4:5 portrait frame cropped most of
   the width to a narrow centre strip. Widen the frame so both rows of doors show. */
.hu-hero-photo { aspect-ratio: 4 / 3; }
.hu-hero-photo img { object-position: center 45%; }

/* FIX 3 — theme's `button:hover { background-color:#cc3366 }` turned every
   <button> pink on hover (size cards, FAQ rows, burger, location tabs…).
   Restore the design's intended hover backgrounds. */
/* (button:hover also sets color:#fff → the inherited-color size number went
   white-on-white. Pin both background AND text colour for the cards.) */
.hu-size:hover { background: var(--bg); color: var(--ink); }
.hu-size.featured:hover { background: var(--ink); color: var(--bg); }
/* Each hover rule MUST re-pin `color` too — otherwise the theme's
   `button:hover{color:#fff}` bleeds through and the text/glyph turns white
   (invisible on the light cards). Match each control's resting colour. */
.hu-faq-q:hover, .hu-faq-q:focus { background: transparent; color: var(--ink); }
.hu-burger:hover, .hu-burger:focus { background: var(--surface); color: var(--ink); }
.hu-drawer-close:hover, .hu-drawer-close:focus { background: var(--surface); color: var(--ink); }
.hu-loc-toggle button:hover, .hu-loc-toggle button:focus { background: var(--bg); color: var(--ink-2); }
.hu-loc-toggle button[aria-pressed="true"]:hover, .hu-loc-toggle button[aria-pressed="true"]:focus { background: var(--accent); color: var(--ink); }
.hu-loc-toggle .dark[aria-pressed="true"]:hover, .hu-loc-toggle .dark[aria-pressed="true"]:focus { background: var(--ink); color: var(--bg); }
button.hu-btn-dark:hover, .hu-btn-dark[type="submit"]:hover { background: #2d2d29; color: var(--bg); }
button.hu-btn-ghost:hover, .hu-btn-ghost[type="submit"]:hover { background: var(--surface); color: var(--ink); }

/* Text Editor widgets only exist in native sections — tidy default spacing */
.elementor-widget-text-editor p { margin: 0; }

/* Step number → circle (text-editor widget styled as the badge) */
.hu-step-num {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  display: grid; place-items: center;
}
.hu-step-num .elementor-widget-container,
.hu-step-num p { display: contents; }

/* Eyebrow pill renders inline inside its text-editor */
.elementor-widget-text-editor .hu-eyebrow { vertical-align: middle; }

/* Feature icon badge (text-editor widget holding an inline SVG) */
.hu-feat-ic {
  width: 48px; height: 48px; flex: none;
  border-radius: 14px;
  background: var(--accent-soft, #fff7d6);
  color: var(--ink, #1a1a17);
  display: grid; place-items: center;
}
.hu-feat-ic svg { width: 22px; height: 22px; }
.hu-feat-ic .elementor-widget-container, .hu-feat-ic p { display: contents; }

/* Polylang language switcher pills (anchors, styled like the old toggle buttons) */
.hu-lang a {
  font-family: var(--f-body, "Manrope"); font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; color: var(--ink-3, #8b8a82);
  letter-spacing: 0.04em; text-decoration: none; display: inline-block; line-height: 1.4;
}
.hu-lang a.on { background: var(--bg, #fff); color: var(--ink, #1a1a17); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Testimonial avatar (initials) */
.hu-testi-av {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--surface, #f6f6f1);
  color: var(--ink, #1a1a17);
  font-family: var(--f-display, "Bricolage Grotesque");
  font-weight: 600; font-size: 15px;
  display: grid; place-items: center;
}
.hu-testi-av .elementor-widget-container, .hu-testi-av p { display: contents; }