/* ==========================================================================
   halco-mobile-polish.css — 10 September 2026

   Touch, type and contrast corrections found by auditing all 134 live URLs in
   WebKit with a real iOS Safari user agent (scripts/mobile_audit.py), then
   verified by injecting this file into the live pages and re-measuring.

   WHY A SEPARATE FILE, NOT AN APPEND TO style.css
   style.css on production is 8,454 lines and holds the same blocks appended
   three times over — 13 duplicate `.halco-btn {` rules and 3 duplicate footer
   blocks. That duplication is a direct cause of the cascade bugs fixed below.
   Appending again would make it worse. This file is enqueued last (see
   mu-plugins/halco-mobile-polish.php), so equal-specificity rules win without
   !important. Deleting the two files is a complete rollback.

   HOUSE RULES
   - No blanket font-size floor. Reading text and interactive labels go to 14px;
     uppercase micro-labels keep a 11.5-13px floor, because flattening every
     label to 14px destroys the typographic hierarchy and looks worse.
   - Touch areas grow via padding or a transparent ::after. Nothing here moves
     the layout. (Verified: no page changed height by more than 1%.)
   - Colours come from the existing palette. Where contrast fails, the darker
     brand sage #5F6D59 (5.50:1) replaces the lighter #707F6A (4.19:1).
   - Elementor-authored typography is left alone so the editor keeps matching
     the page. Where an Elementor value is genuinely unreadable it is listed as
     an editor task in docs/MOBILE-FIXES-2026-09-10.md instead of overridden.
   - Specificity is matched deliberately where a theme or plugin rule outranks a
     single class. Each such case is commented with the rule it must beat.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. INVISIBLE TEXT — the two worst defects on the site
   -------------------------------------------------------------------------- */

/* 1a. A bare .halco-btn inside article content rendered sage-on-sage: contrast
   1.00 — the label was completely invisible. `.halco-content a` (0,1,1)
   outranks `.halco-btn` (0,1,0), so the link colour overwrote the button's
   white. (0,2,1) restores it. The 5 Sep pass fixed the underline from this
   same collision but not the colour.
   Seen on /what-is-keystart-home-loans/, /first-home-owners-grant-wa-calculator/,
   /first-home-buyers-grant-wa-application-form/. */
.halco-content a.halco-btn,
.halco-prose a.halco-btn,
.halco-article__cta a.halco-btn        { color: var(--halco-canvas, #FFFFFE); }
.halco-content a.halco-btn--primary,
.halco-prose a.halco-btn--primary,
.halco-article__cta a.halco-btn--primary { color: var(--halco-ink, #15161A); }

/* 1b. The mobile menu's primary CTA rendered #2A2D31 on #15161A — near-black on
   near-black. Elementor's header stylesheet sets the nav link colour at (0,4,1),
   beating `.halco-panel-actions .is-book` (0,2,0). The ID takes this to (1,2,1),
   so no !important is needed. */
#halco-header .halco-panel-actions a.is-book {
  color: var(--halco-canvas, #FFFFFE);
  background: var(--halco-ink, #15161A);
}
#halco-header .halco-panel-actions a.is-call { color: var(--halco-ink, #15161A); }


/* --------------------------------------------------------------------------
   2. CONTRAST
   Must beat `.elementor-widget-posts .elementor-post__read-more` (0,2,0) from
   the Elementor per-page stylesheet, hence the widget prefix on each.
   -------------------------------------------------------------------------- */

.elementor-widget-posts a.elementor-post__read-more { color: #5F6D59; }   /* was 4.19 -> 5.50 */
.elementor-widget-posts .elementor-post__badge      { background-color: #5F6D59; } /* was 4.26 -> 5.50 */
.elementor-widget-posts .elementor-post-date        { color: #737373; }   /* was 2.21 (#ADADAD) */

/* The muted sage-grey #8A8F84 used for eyebrows and secondary lines is 3.10:1
   on the warm canvas. #6A7064 is the same hue family and clears 4.5 on every
   background in use (canvas 4.78, card 5.03, white 5.10). */
.halco-t-eyebrow  .elementor-heading-title,
.halco-t-micro    .elementor-heading-title,
.halco-muted, .halco-lctx__label { color: #6A7064; }


/* --------------------------------------------------------------------------
   3. TOUCH TARGETS — 44px minimum (WCAG 2.5.8 / Apple HIG)
   Layout is never moved; the hit area grows underneath.
   NOTE: links inline within a sentence are deliberately excluded — WCAG 2.5.8
   exempts them, and padding them would break the text flow.
   -------------------------------------------------------------------------- */

/* Breadcrumb links were 36x21px and appear 636 times sitewide — the single
   biggest touch defect. A transparent ::after gives a 45px target with no
   visual or layout change at all. */
.halco-article__crumbs a { position: relative; font-size: 14px; }
.halco-article__crumbs a::after { content: ""; position: absolute; inset: -12px -6px; }

/* Footer accordion headers: the <button> was 330x14px inside a 47px row, so
   only the text line responded to a tap.
   Must beat `[id^="halco-foot-col-"] .halco-foot-toggle` (0,2,0) inside a
   max-width:767px media query — matched exactly below, and this file loads
   later, so it wins. */
@media (max-width: 767px) {
  [id^="halco-foot-col-"] .halco-foot-toggle {
    font-size: 15px;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding-block: 15px; margin-block: -15px;   /* 14px text -> 44px target, no layout change */
  }
}

/* Header logo was 124x39px — five pixels short. */
.halco-logo__link { display: inline-flex; align-items: center; min-height: 44px; }

/* FAQ accordion headers were 167x25px on 207 pages. */
.elementor-accordion-title,
.e-n-accordion-item-title { min-height: 44px; display: flex; align-items: center; }

/* Design gallery arrows were 38x38px. */
.halco-gal__arrow { min-width: 44px; min-height: 44px; }

/* Team cards: the booking button was 214x43 (one pixel short), the "more"
   disclosure 214x25, and the name link 105x22. */
.halco-team__book  { min-height: 44px; font-size: 14px; }
.halco-team__more > summary {
  min-height: 44px; font-size: 14px;
  display: flex; align-items: center;
}
.halco-team__namelink { position: relative; }
.halco-team__namelink::after { content: ""; position: absolute; inset: -12px -6px; }

/* Blog "Read the guide" was 134x21. */
.elementor-widget-posts a.elementor-post__read-more { position: relative; }
.elementor-widget-posts a.elementor-post__read-more::after {
  content: ""; position: absolute; inset: -12px -6px;
}

/* Table-of-contents entries were 350x40 and 348x35. */
.halco-toc a, .halco-toc__d a { display: block; min-height: 44px; padding-block: 11px; margin-block: -11px; }

/* Qualifier form radios/checkboxes shipped at 12x12 — too small to hit, and the
   surrounding label was not a target either. */
.halco-q__opts input[type="radio"],
.halco-q__opts input[type="checkbox"] { width: 22px; height: 22px; }
.halco-q__opts > label { display: flex; align-items: center; min-height: 44px; gap: 10px; }

/* Pagination numbers were 14x33px. */
.page-numbers { display: inline-flex; align-items: center; justify-content: center;
                min-width: 44px; min-height: 44px; }

/* Leaflet ships its zoom controls at 30x30 with inline-level styling. */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out { width: 44px !important; height: 44px !important;
                            line-height: 44px !important; }   /* !important 1 of 1 */

/* The skip link is correctly 1x1 until focused, but had no visible focus state,
   so keyboard users got nothing. */
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 10000;
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: 12px 18px; border-radius: 8px;
  background: var(--halco-ink, #15161A); color: var(--halco-canvas, #FFFFFE);
  font-size: 15px; text-decoration: none;
}


/* --------------------------------------------------------------------------
   4. TYPE — raise what is genuinely too small, keep the hierarchy intact
   -------------------------------------------------------------------------- */

/* Reading text and interactive labels -> 14px */
.halco-stagger            { font-size: 14px; }   /* "Keep reading" */
.halco-consultant__role   { font-size: 14px; }
.halco-pk__cta            { font-size: 14px; }

/* Form labels must be comfortably readable */
.halco-calc__field-label  { font-size: 14px; }
.halco-q__field > span    { font-size: 13.5px; }
.halco-pk__facet > span   { font-size: 13px; }

/* Secondary and tabular text */
.halco-pk__specs li               { font-size: 13.5px; }
.halco-calc__rates-table td       { font-size: 13.5px; }
.halco-team__role                 { font-size: 13.5px; }
.halco-toc__title                 { font-size: 13px; }
.halco-pk__suburb, .halco-pk__band { font-size: 13px; }
.halco-record__plan-zoom          { font-size: 13px; }

/* Uppercase micro-labels: 11.5-12.5px floor, hierarchy preserved */
.halco-calc__disclaimer   { font-size: 12.5px; }
.halco-record__kind       { font-size: 12.5px; }
.halco-related__eyebrow   { font-size: 12px; }
.halco-calc__eyebrow      { font-size: 12px; }
.halco-gal__plantag       { font-size: 11.5px; }   /* was 9.3px — unreadable */
.halco-team__tag          { font-size: 11.5px; }   /* was 10.5px */


/* --------------------------------------------------------------------------
   5. OVERFLOW
   The design-gallery backdrop is scaled 1.18x inside an unclipped parent and
   bleeds 35px past both edges on 65 design pages.
   -------------------------------------------------------------------------- */
.halco-gal__frame, .halco-gal__stage { overflow: hidden; }


/* --------------------------------------------------------------------------
   6. FOOTER — 1,263px on a 390px screen, and ~190px of it was dead gap
   Four collapsed rows sat 32px apart inside a container adding 16px of its own.
   Mobile only: desktop keeps Elementor's spacing so the editor still matches.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-location-footer .e-con-inner:has(> .is-collapsible) { gap: 0; }
  .elementor-location-footer .is-collapsible { gap: 0; }
  .elementor-location-footer .is-collapsible:first-of-type { margin-top: 20px; }
}


/* --------------------------------------------------------------------------
   7. LATE ADDITIONS from the verification pass
   -------------------------------------------------------------------------- */

/* The Acknowledgement of Country and the legal disclaimer render at 11.5px —
   the smallest text on the site. Scoped to the footer template so page content
   authored in Elementor is untouched. */
@media (max-width: 767px) {
  .elementor-location-footer .elementor-widget-text-editor p { font-size: 13px; line-height: 1.55; }
}

/* Elementor's "small" button preset lands at 37px tall on mobile. */
@media (max-width: 767px) {
  .elementor-button.elementor-size-sm { min-height: 44px; }
}

/* Package filter reset is interactive, so it takes the 14px label floor. */
.halco-pk__reset { font-size: 14px; }


/* --------------------------------------------------------------------------
   8. CROSS-SCREEN LAYOUT — horizontal scroll at the extremes
   Found by auditing 320 / 430 / 768 / 1024 / 1440, not just phone widths.
   -------------------------------------------------------------------------- */

/* Every /designs/ and /executive-listings/ page scrolls 70px sideways at
   1024px and above. Classic grid blowout: a grid item defaults to
   min-width:auto and so refuses to shrink below its content. The theme already
   applies min-width:0 — but only inside @media (max-width: 1023px), so desktop
   never gets it. Applying it at all widths is the standard remedy. */
.halco-record__media,
.halco-record__summary { min-width: 0; }

/* The careers strip's "next" arrow is positioned at right:-8px inside a
   full-bleed relative parent, so it hangs 8px past the viewport and puts a
   scrollbar on the page. Sitting it flush keeps the design and kills the bar. */
.halco-strip__nav--next { right: 0; }

/* 320px phones (iPhone SE and older Androids): the calculator and qualifier
   cards carry an intrinsic minimum width that will not fit inside the 24px
   gutters, giving 44px of sideways scroll on the homepage and 14px on
   /building/. Letting them shrink fixes both without touching wider screens. */
@media (max-width: 359px) {
  .halco-calc__card, .halco-calc__stack,
  .halco-q, .halco-q__step, .halco-q__opts { min-width: 0; max-width: 100%; }
  .halco-q { overflow-x: clip; }
}