/**
 * The Wicked — Elementor Pro POPUP CHROME.
 *
 * Not a widget. This file styles the dialog furniture Pro renders around a popup
 * — today only the close button — which is why it is enqueued site-wide rather
 * than pulled in by a widget's get_style_depends().
 *
 * ── THE DEFECT IT EXISTS FOR ──────────────────────────────────────────────────
 * Hares, on the case-study popup: "on the top right there is a dark circle. What
 * is that? Can we get rid of it?" He could not tell it was a close button.
 * Measured on the live popup before changing anything:
 *
 *   button  44x44, background rgba(0,0,0,.5), border-radius 50%
 *           display:flex — but align-items:normal, justify-content:normal
 *   svg     18x18 at the button's TOP-LEFT corner, dx -12 dy -12 from centre,
 *           where the 50% radius clips it
 *   fill    rgb(31,33,36) — dark grey, on a dark circle, over a dark modal
 *
 * ⛔ THE FILL IS PRO'S OWN, and it is written for LIGHT popups:
 *   `.elementor-popup-modal .dialog-close-button svg{fill:#1f2124}` in
 *   popup.min.css?ver=4.1.3 — specificity (0,2,1), MEASURED, not assumed.
 *
 * ── HOW THIS BEATS IT, AND WHY NOT `!important` ───────────────────────────────
 * By specificity, per §6a: `.elementor-popup-modal .dialog-close-button
 * .dialog-close-button svg` would be wrong (descendant), so the class is DOUBLED
 * on the same element — (0,3,1) against Pro's (0,2,1). Doubling a class the
 * element already carries is this project's sanctioned way up the ladder, and it
 * is deliberately TAG-INDEPENDENT: Pro renders an `<a role="button">` today, and
 * a rule leaning on `a` would fail silently the day that becomes a `<button>`.
 *
 * ⭐ `fill: currentColor`, NOT A LITERAL. The button's own `color` is already
 * styled per popup (668 sets it in its Custom CSS), so the icon should follow
 * whatever that popup asked for rather than have one hex forced on it. A future
 * LIGHT popup gets a dark ✕ from ONE line of its own Custom CSS — `color:` on its
 * close button, any readable value — where a hard-coded #f6f4f0 here would have
 * ignored that line while looking correct on this popup.
 *
 * ⛔ IT DOES NOT GET THAT FOR FREE, AND THIS FILE CLAIMED IT DID UNTIL 0.4.14.
 * The last rule below paints `color:#f6f4f0` on any popup that sets none, so a
 * light popup that sets no colour gets a near-white ✕ on a light ground: the same
 * unreadable blob this file exists to remove, inverted. That default is kept
 * anyway and the reason is that there is no better answer available — CSS cannot
 * tell a light popup from a dark one, so every possible default is wrong for
 * half of them, and the alternative (Elementor's `--e-a-color-txt`, see that
 * rule) is not a brand value at all. This site is dark; the default is
 * dark-correct; the override is one line on the popup. **`currentColor` buys
 * FOLLOWING a popup that states a colour, not GUESSING for one that doesn't.**
 * Theoretical today: 668 sets its own and is the only popup that exists.
 *
 * ── WHAT THIS FILE DELIBERATELY DOES NOT DO ───────────────────────────────────
 * ⛔ IT DOES NOT SET `display`. Pro ships `.elementor-popup-modal
 * .dialog-close-button{display:none}` and each popup's own "Close Button" setting
 * turns it on. Setting `display:flex` here would force a close button onto every
 * popup whose author switched it OFF — a much worse bug than the one being fixed,
 * and invisible until someone builds such a popup.
 * ⛔ It does not touch size, position, background or `aria-label`. Those already
 * match the reference (work.html's modal block: 44x44, radius 50%,
 * rgba(0,0,0,.5), 1px var(--line2), color var(--ink), 18px) and the label is the
 * only name assistive tech has for the only visible way out of the modal.
 * ⚠️ The design's hover — `border-color: var(--tan)` — IS ALREADY PRESENT, in
 * popup 668's own Custom CSS, so it is not restated here. One owner.
 */

/* Centre the icon. Nothing else in the cascade declares either property — the
   computed values were `normal`, i.e. the initial ones — so this needs no ladder
   at all. The doubled class is for consistency with the rule below, not for
   specificity. */
.elementor-popup-modal .dialog-close-button.dialog-close-button {
	align-items: center;
	justify-content: center;
}

/* ⛔ (0,3,1). Pro's `.elementor-popup-modal .dialog-close-button svg{fill:#1f2124}`
   is (0,2,1). Do not "tidy" the doubled class away — the rule stops applying and
   the icon goes back to being an unreadable blob on a dark circle. */
.elementor-popup-modal .dialog-close-button.dialog-close-button svg {
	fill: currentColor;
}

/* ⛔ THIS RULE IS THE LIMIT ON THE HEADER'S `currentColor` NOTE — read them
   together. A popup that states a colour is followed; a popup that states none
   lands HERE, on a dark-site value, whatever colour its own panel is.

   A DEFAULT colour for a popup that sets none, and nothing more than a default:
   this is (0,3,0), so popup 668's `#elementor-popup-modal-668 .dialog-close-button`
   at (1,1,0) still wins, exactly as it should — the page owns its own chrome.
   ⭐ MEASURED, not reasoned from the numbers (0.4.14): CDP matched-styles on the
   live button lists 668's rule LAST, above this one and above Elementor's. Both
   resolve to the same #f6f4f0 today, so the rendered colour cannot tell them
   apart — disable this stylesheet alone and the colour does not move, while
   `fill` reverts to Pro's #1f2124 and `align-items` to `normal`.
   Without it, Elementor's `.dialog-close-button{color:var(--e-a-color-txt)}`
   decides, and that variable is an app-UI token with no promise about this site.
   #f6f4f0 is `--ink` from design-reference/work.html L444, hard-coded on purpose:
   this element is popup chrome and sits OUTSIDE `.tw-scope`, so no `--tw-*` token
   resolves here (§6c). */
.elementor-popup-modal .dialog-close-button.dialog-close-button {
	color: #f6f4f0;
}

/* ⚠️ THERE WAS NO VISIBLE FOCUS INDICATOR AT ALL — measured `outline-style: none`
   on the focused button. It is the popup's only visible exit and it is reachable
   by Tab, so a keyboard user could reach it and see nothing. `:focus-visible`
   only, so a pointer click never paints a ring. The colour is `--ink` rather than
   the house tan: the ring sits on a tan-on-hover border, and tan on tan is the
   one place the house focus colour is the wrong answer — the same reasoning as
   the play button in widget-case-hero-video.css. */
.elementor-popup-modal .dialog-close-button.dialog-close-button:focus-visible {
	outline: 2px solid #f6f4f0;
	outline-offset: 3px;
}