/* ==========================================================================
   HOMES AT THE FALLS — ELEMENTOR / HELLO ENVIRONMENT COMPATIBILITY
   Enqueue as `haf-compat`, AFTER client.css. Not part of the standalone
   build in _project/design/ — this file only fixes environment conflicts.

   WHY THIS EXISTS
   client.css loads at #4, hello reset.css at #5, elementor frontend.min.css
   at #8. Every rule below is a specificity TIE with a later sheet, so the
   later sheet wins on order and the authored intent is lost. These rules
   re-assert it at higher specificity. No !important is used.

   SCOPING RULE — READ BEFORE EDITING
   Header and footer are child-theme PHP (DECISIONS 2026-09-17, Option B),
   so they render OUTSIDE any .elementor wrapper. Two consequences:
     1. `.elementor img {height:auto}` never reaches the logos — they need
        no compat rule for Elementor at all.
     2. Prefixing a header/footer rule with `.elementor` would simply fail
        to match. Header/footer rules here use a doubled class instead.
   ========================================================================== */

/* ── Images inside Elementor containers ───────────────────────────────────
   Elementor ships `.elementor img{height:auto;max-width:100%}` at (0,1,1).
   Every plate rule below is also (0,1,1) and loads earlier, so `height:100%`
   silently became `height:auto` — which collapses every cover-fit frame back
   to the render's native 3.2:1 letterbox and breaks the whole image system.
   Values copied verbatim from client.css. */
.elementor .haf-plate img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.elementor .haf-plate--auto img{height:auto;object-fit:initial}
.elementor .haf-plate--multiply img{object-fit:contain;object-position:50% 50%;padding:8%;mix-blend-mode:multiply}
.elementor .haf-plate--cover img{height:100%;object-fit:cover}
.elementor .haf-wide-plate img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.elementor .haf-hero__img img{width:100%;height:100%;object-fit:cover;animation:haf-pan 24s var(--ease) infinite alternate;transform-origin:60% 40%}

@media (prefers-reduced-motion:reduce){
  .elementor .haf-hero__img img{animation:none}
  .elementor .haf-plate img,.elementor .haf-wide-plate img{transition:none}
}

/* ── Form controls ────────────────────────────────────────────────────────
   hello reset.css sets
     input[type="text"],…,select,textarea{border:1px solid #666;border-radius:3px;
                                          padding:.5rem 1rem;width:100%}
   at (0,1,1) — the same specificity as `.haf-field input`, loading later. Without
   this the tour form renders as grey 3px-radius boxes instead of the hairline
   fields, and the select loses its custom chevron. */
.elementor .haf-field input,
.elementor .haf-field select,
.elementor .haf-field textarea{width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:.9375rem;color:var(--ink);background:var(--paper);border:1px solid var(--hair-light);border-radius:4px;transition:border-color .2s var(--ease)}
.elementor .haf-field textarea{min-height:120px;resize:vertical}
.elementor .haf-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237F5C3A' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.elementor .haf-field input:focus,
.elementor .haf-field select:focus,
.elementor .haf-field textarea:focus{outline:2px solid var(--brass-mid);outline-offset:2px;border-color:var(--brass-mid)}

/* CF7 wraps every field in <span class="wpcf7-form-control-wrap">, which is
   inline by default and collapses the field width inside the grid. */
.elementor .haf-field .wpcf7-form-control-wrap{display:block;width:100%}
.elementor .haf-form .wpcf7-not-valid-tip{font-size:.8125rem;color:var(--brass-text);margin-top:6px}
.elementor .haf-form .wpcf7-response-output{margin:16px 0 0;padding:14px 16px;border:1px solid var(--brass);border-radius:4px;background:var(--paper-2);font-size:.9375rem}

/* ── Anchor states ────────────────────────────────────────────────────────
   Hello styles `a:visited` at (0,1,1). Our link rules are (0,1,1) too, so a
   VISITED link silently takes Hello's colour — the failure only appears after
   someone has clicked the link once, which is why it survives a first pass.
   Page content is scoped with .elementor; header/footer sit outside it and use
   a doubled class to reach the same weight. */
/* Buttons are excluded deliberately. Every .haf-btn variant authors its own
   colour, and an author rule already beats the UA :visited style, so they never
   needed covering here — while a blanket a:visited at (0,2,1) outranks
   .haf-btn--secondary (0,1,0) and .haf-ground-ink .haf-btn--primary (0,2,0),
   which silently repainted button text after the link had been clicked once.
   On ground-ink that meant brass text on a brass button: invisible. */
.elementor a:visited:not([class*="haf-btn"]){color:var(--brass-text)}
.elementor .haf-ground-ink a:visited:not([class*="haf-btn"]){color:var(--brass)}
.elementor .haf-cta__micro a:visited{color:var(--brass)}
.haf-header .haf-nav a:visited{color:var(--ink)}
.haf-header .haf-header__portal:visited{color:var(--ink-text)}
.haf-header .haf-menu a:visited{color:var(--ink)}
.haf-ann .haf-ann__dot + span a:visited,.haf-ann a:visited{color:var(--brass)}
.haf-footer .haf-footer__links a:visited,
.haf-footer a:visited:not([class*="haf-btn"]){color:var(--cream)}

/* ── Hello chrome failsafe ────────────────────────────────────────────────
   The theme filter (functions.php) already suppresses Hello's header/footer.
   This rule costs nothing and covers the case where that filter is lost in a
   future edit or a Hello update reorders the gate — DECISIONS, Option B / H3. */
header#site-header,
footer#site-footer{display:none}

/* ── Elementor container reset ────────────────────────────────────────────
   Each section is one full-width container with zero padding; client.css owns
   all vertical rhythm. Elementor's default container padding would double it. */
.elementor .e-con,
.elementor .e-con-inner{padding:0;margin:0;max-width:none}
.elementor .elementor-widget-html{margin-bottom:0}

/* ==========================================================================
   v2 ADDITIONS — written against the REAL hello-elementor 3.5.1 reset.css and
   elementor 4.2.4 frontend.css read from the LocalWP install, not a simulation.
   Each rule below fixes a measured difference between the approved design
   render and the ported render. Specificity is stated per block.
   ========================================================================== */

/* T1 · Compare table — reset.css styles bare <table> harder than client.css.
   reset: table td,table th{border:1px solid hsla(0,0%,50%,.502)} (0,0,2)
   client sets border-bottom only, so top/left/right grid lines survive. */
.elementor .haf-table td,
.elementor .haf-table th{border-top:0;border-left:0;border-right:0}

/* reset: table tbody>tr:nth-child(odd)>td{background} (0,1,3) — zebra stripes
   the design never had. client.css sets no background on plain rows, so this
   wins by default. (0,2,3) clears it; client's hover/featured rules are also
   (0,2,3) but load later, so they still win. */
.elementor .haf-table tbody > tr:nth-child(odd) > td,
.elementor .haf-table tbody > tr:nth-child(odd) > th{background-color:transparent}

/* reset: table{font-size:.9em;margin-block-end:15px} (0,0,1) — client.css sets
   neither, so cells render 10% small with a stray bottom margin. */
.elementor .haf-table{font-size:inherit;margin-block-end:0}

/* T2 · Captions — reset: figcaption{font-style:italic;line-height:1.4} (0,0,1).
   client.css styles .haf-plate__cap / .haf-wide-plate__bar but never sets
   font-style, so every caption renders italic. */
.elementor .haf-plate__cap,
.elementor .haf-wide-plate__bar{font-style:normal;line-height:inherit}
.elementor .haf-wide-plate__bar em{font-style:normal}

/* T3 · Focus ring — reset (0,1,1) paints box-shadow:0 0 0 4px #fff plus a BLACK
   outline on every focusable element. The white halo is off-brand on paper and
   the black outline is invisible on ink grounds. Replaced, not removed:
   currentColor reads on both grounds and keeps the AA focus indicator. */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor input:focus-visible,
.elementor select:focus-visible,
.elementor textarea:focus-visible,
.elementor [tabindex]:not([tabindex="-1"]):focus-visible{
  box-shadow:none;outline:2px solid currentColor;outline-offset:2px}

/* Header, footer and the skip link render OUTSIDE .elementor, so they need the
   doubled-class form instead of the .elementor prefix. */
.haf-header.haf-header a:focus-visible,
.haf-header.haf-header button:focus-visible,
.haf-footer.haf-footer a:focus-visible,
.haf-skip.haf-skip:focus-visible,
.haf-totop.haf-totop:focus-visible{
  box-shadow:none;outline:2px solid currentColor;outline-offset:2px}

/* T4 · CF7 output. The form markup is authored in the CF7 template to match
   contact.html, but CF7 and wpautop still wrap and decorate it. */
.elementor .haf-form > p{display:contents}
.elementor .haf-form > p > br{display:none}
.elementor .haf-form .wpcf7-form-control-wrap{display:block;width:100%}
.elementor .haf-form .wpcf7-not-valid-tip{display:block;font-size:.8125rem;
  margin-top:4px;color:var(--brass-text)}
.elementor .wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;
  border:1px solid var(--hair-light);border-radius:4px;font-size:.875rem;color:inherit}
.elementor .wpcf7 form.sent .wpcf7-response-output{border-color:var(--brass-mid)}
.elementor .wpcf7 form.invalid .wpcf7-response-output,
.elementor .wpcf7 form.unaccepted .wpcf7-response-output,
.elementor .wpcf7 form.spam .wpcf7-response-output{border-color:var(--brass-mid)}
.elementor .wpcf7-spinner{background-color:var(--brass)}
.elementor .wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
  border:0;padding:0;margin:-1px}

/* T5 · Elementor zeroes figure margins only for widgets it recognises; the HTML
   widget is not excluded, but assert it so plates never inherit a margin. */
.elementor .haf-plate,
.elementor .haf-wide-plate{margin:0}

/* T7 · Button :focus — reset.css repaints every native button crimson.
     [type=button]:focus,[type=submit]:focus,button:focus
       { background-color:#c36; color:#fff }
   A pseudo-class scores in the CLASS column, so that selector is (0,1,1) and it
   outranks .haf-btn--primary at (0,1,0). Rest and hover are safe — the variant
   base wins at rest, and .haf-btn--primary:hover is (0,2,1) — but the moment a
   native <button> takes focus it turns crimson with white text. Only <button>
   and <input type=submit> are affected; the <a class="haf-btn"> CTAs are not,
   which is why this hides until someone clicks the form's submit.
   Fix: re-assert each variant at :focus. Focus VISIBILITY is unaffected — the
   ring is handled by the :focus-visible block above. */
.elementor .haf-btn--primary:focus{background-color:var(--brass);color:var(--ink);border-color:var(--brass)}
.elementor .haf-btn--primary:focus:hover{background-color:var(--brass-mid);border-color:var(--brass-mid);color:var(--paper)}
.elementor .haf-ground-ink .haf-btn--primary:focus,
.elementor .haf-card--ink .haf-btn--primary:focus{color:var(--ink)}
.elementor .haf-ground-ink .haf-btn--primary:focus:hover,
.elementor .haf-card--ink .haf-btn--primary:focus:hover{color:var(--paper)}
.elementor .haf-btn--primary.haf-btn--white:focus,
.elementor .haf-btn--primary.haf-btn--white:focus:hover{color:#fff}
.elementor .haf-btn--secondary:focus{background-color:var(--ink);color:var(--cream);border-color:var(--ink)}
.elementor .haf-btn--secondary:focus:hover{background-color:var(--ink-2);border-color:var(--ink-2);color:var(--cream)}
.elementor .haf-btn--tertiary:focus{background-color:transparent;color:var(--brass-text)}
.elementor .haf-btn--tertiary:focus:hover{color:var(--brass-mid)}
.elementor .haf-btn--ghost:focus{background-color:var(--paper-3);color:var(--ink);border-color:var(--paper-3)}
.elementor .haf-btn--ghost:focus:hover{background-color:var(--sand);border-color:var(--sand);color:var(--ink)}
.elementor .haf-tab:focus{background-color:var(--paper);color:var(--ink-text)}
.elementor .haf-tab:focus:hover{color:var(--brass-text)}
.elementor .haf-tab[aria-selected="true"]:focus{background-color:var(--ink);border-color:var(--ink);color:var(--cream)}

/* The header renders outside .elementor, so the menu toggles need the doubled
   class instead of the prefix. Same crimson-on-focus problem.
   The two rules that sat here are superseded by the T7 correction at the end
   of this file — they set background-color:var(--paper), but the hamburger's
   authored rest background is transparent. */

/* T6 · --display token collision — measured on the real install, not predicted.
   Elementor writes `--display:flex` onto EVERY container in its generated
   uploads/elementor/css/post-<id>.css and then reads it back as
   `.e-con{display:var(--display)}`. client.css declares `--display` on :root as
   the Playfair Display stack, so inside any container the container's value wins
   for every descendant: `font-family:var(--display)` resolved to `flex`, which
   is invalid, and every .haf-h1/h2/h3/h4, .haf-price, .haf-stat and .haf-table
   first cell silently fell back to the body face. Header and footer render
   OUTSIDE .elementor and were unaffected, which is what hides this in a quick
   visual pass.

   Re-assert the token on the HTML widget wrapper, NOT on .e-con: the container
   still needs its own `--display:flex` to lay out at all, and overriding it
   there makes `display` invalid at computed-value time and collapses every
   section. The wrapper is the first element Elementor does not read the token
   from, and every piece of ported markup is inside one. */
.elementor .elementor-widget-html{--display:"Playfair Display",Georgia,serif}

/* T7 correction: the hamburger's authored rest background is transparent,
   not --paper. Supersedes the two T7 menu lines. */
.haf-menu-btn.haf-menu-btn:focus,
.haf-menu-btn.haf-menu-btn:hover{background-color:transparent;color:var(--ink);border-color:var(--hair-light)}
.haf-menu__close.haf-menu__close:focus,
.haf-menu__close.haf-menu__close:hover{background-color:transparent;color:var(--ink)}

/* T7b: reset.css paints :focus AND :hover crimson in one selector list. T7
   covered :focus only, so any button whose authored :hover sets no
   background-color still loses at (0,1,1). client.css:454 .haf-tab:hover sets
   colour only — that colour already wins at (0,2,0); only the background
   needs re-asserting. */
.elementor .haf-tab:hover{background-color:var(--paper)}
.elementor .haf-tab[aria-selected="true"]:hover{background-color:var(--ink)}