/* safe-area.css — make the fixed header and the nav panel respect the notch / Dynamic Island.
 *
 * ── THE DEFECT, MEASURED ───────────────────────────────────────────────────────────────────────
 * Hares, reviewing Home on an iPhone 14 Pro Max: "the header does not reach to the full top on
 * phone." Confirmed on the device 2026-08-02 via `?tw-probe=1` — `env(safe-area-inset-*)` returned
 * **0px on every side, on all three pages**, because the served viewport meta was
 * `width=device-width, initial-scale=1` with no `viewport-fit=cover`.
 *
 * Without `viewport-fit=cover`, Safari insets the layout viewport BELOW the status bar. A
 * `position:fixed; top:0` bar therefore starts under the Dynamic Island and leaves a strip above it
 * that the bar neither covers nor blurs. `viewport-fit=cover` is added by the plugin's
 * `hello_elementor_viewport_content` filter (see the-wicked-widgets.php) — this file handles the
 * consequence: with cover on, `top:0` is the PHYSICAL top, so the background is right but the
 * CONTENT would sit under the island unless it is inset.
 *
 * ── WHY THE PADDING GOES ON THE WRAPPER, NOT THE CONTENT ───────────────────────────────────────
 * ⭐ `twh00010` (the bar) and the nav panel both carry `padding: 0` and both carry the BACKGROUND.
 * Padding them pushes their content clear of the island while the painted box still reaches the
 * physical edge — which is exactly the requirement. The alternative, adding the inset to
 * `twh00020`'s `padding-top:18px` or the panel `<ul>`'s `100px`, would mean hard-coding those
 * numbers here, where they would silently rot the next time either is tuned.
 *
 * ── LANDSCAPE IS NOT AN AFTERTHOUGHT ───────────────────────────────────────────────────────────
 * ⚠️ On a notched phone `safe-area-inset-left/right` are 0 in portrait and ~44-59px in landscape.
 * The bar's inner row pads to `max(clamp(24px,5vw,96px), …)`, i.e. at least 24px — NOT enough to
 * clear the island in landscape. Both horizontal insets are applied for that reason alone.
 *
 * ── TESTABILITY, DELIBERATELY BUILT IN ─────────────────────────────────────────────────────────
 * ⭐ `env()` cannot be faked: no headless engine on this machine reports a non-zero safe area, and
 * on desktop it is legitimately 0 — so a rule written as bare `env()` is UNTESTABLE anywhere except
 * on Hares's phone, and the last bug that could only be seen there cost four passes. Each value is
 * therefore `max(env(...), var(--tw-safe-*, 0px))`. In production the var is unset, resolves to 0px,
 * and `max()` returns the real inset — a no-op. In a test, setting `--tw-safe-top: 59px` on :root
 * reproduces an iPhone 14 Pro Max portrait inset in any browser. Costs nothing, makes the rule
 * measurable.
 */

/* ── THE FROSTED STATUS BAR — HISTORY, NOT INSTRUCTIONS ─────────────────────────────────────────
 *
 * ⛔ READ THIS FIRST. Everything in this block below the next paragraph is a RECORD of attempts,
 * several of which were wrong and were reverted. **No rule in this stylesheet implements any of
 * it.** An earlier version of this comment argued for the 0.3.10 architecture in the present tense
 * while that architecture sat tombstoned twenty lines further down, in this same file —
 * `branch-auditor` caught it on 2026-08-03. If you are here to change how the band looks, start
 * from PROJECT-NOTES §4b, which is reconciled against the live site; this is background.
 *
 * ── WHAT IS ACTUALLY LIVE TODAY ────────────────────────────────────────────────────────────────
 * The glass stays on `twh00010::before` (`position:absolute; inset:0; z-index:-1`) with the tint
 * and blur set by `scripts/pages/header-263/bar_tint.php` in the project repo:
 * `--tw-bar-tint: rgba(8,8,10,.92)`, `--tw-bar-blur: 14px`. The fixed bar itself carries neither a
 * background-color nor a backdrop-filter — that was 0.3.10 and it is reverted (tombstone below).
 * ⚠️ The tint is NOT transparent, whatever older comments in this file used to say. Hares's "Keep
 * it how it is right now" (2026-08-02) was SUPERSEDED by his approval of the restored tint the
 * same day: "This seems to work. The top part is solid black and the header has its normal frosted
 * glass look."
 *
 * ── WHAT WAS MEASURED, SEPARATED FROM WHAT WAS CONCLUDED ───────────────────────────────────────
 * ⚠️ A PUBLISHED DESCRIPTION OF SAFARI'S SAMPLER SAYS IT READS `background-color` and
 * `backdrop-filter` ON THE FIXED ELEMENT ITSELF and IGNORES absolutely-positioned children,
 * including pseudo-elements. **This project's own measurement contradicts the second half.**
 * `?tw-hdr=pseudo` painted `twh00010::before` — an absolutely-positioned pseudo-element — bright
 * green, and the band went green too (darker and flat; snapshots/mobile-iphone14-pro-max/
 * IMG_3132.jpeg). Whatever the documented rule is, on Hares's iOS the band tracks what the glass
 * LAYER paints. Do not rely on the "ignores pseudo-elements" claim; it is not what this device did.
 *
 * ⚠️ AND THE CLAIM THAT STARTED ALL OF THIS WAS MINE AND WAS WRONG: I told Hares a frosted status
 * bar was impossible in a Safari tab, reasoning from first principles instead of searching. He had
 * to tell me to look it up. PROJECT-NOTES §9a keeps that lesson.
 *
 * ⛔ UNTESTABLE ON THIS MACHINE. The status bar is browser chrome, not page content — no headless
 * engine renders it and no JS can read it. Only Hares's phone can confirm anything here.
 *
 * ── ⛔ TOMBSTONE: 0.3.10 TRIED THIS AND IT WAS REVERTED IN 0.3.11. DO NOT PUT IT BACK. ──────────
 *
 *     .elementor.elementor-263 .elementor-element.elementor-element-twh00010 {
 *       background-color: var(--tw-bar-tint, transparent);
 *       backdrop-filter: blur(var(--tw-bar-blur, 5px));
 *     }
 *     .elementor.elementor-263 .elementor-element.elementor-element-twh00010::before {
 *       backdrop-filter: none;
 *     }
 *
 * Half the premise held: Safari DOES sample `position:fixed` elements near the top edge and read
 * their `background-color` / `backdrop-filter`, so moving the glass onto the bar did make Safari
 * notice it, and Hares confirmed the change took effect. ⚠️ The OTHER half — "and it ignores
 * absolutely-positioned children" — is contradicted by this project's own `?tw-hdr=pseudo`
 * measurement; see the top of this block. It is left here because it is what was believed at the
 * time and it is why 0.3.10 was attempted at all, not because it is true.
 *
 * ⛔ BUT SAFARI TINTS; IT DOES NOT GLASS. It flattens whatever it samples into a SOLID FILL behind
 * the status bar. There is no live blur of page content up there in a Safari TAB on any iOS version
 * tested. So the bar's `rgba(8,8,10,0)` flattened to pure black, which is a shade off the page's
 * `#08080a` — and Hares got "a black strip which wasn't there before". It bought a visible artefact
 * and delivered nothing.
 *
 * ⭐ WHAT WAS SHOWN TO WORK, AND ITS PRICE. A genuinely frosted status bar was achieved only in
 * STANDALONE mode (0.3.12) — a home-screen launch, where the page extends under the band. That is
 * a product decision, not a bug fix: standalone has no address bar and no back button. Hares's
 * call. ⛔ And never review the PUBLIC experience from a home-screen launch: it frosts there and
 * does not in a tab, which has misled this project once already.
 *
 * ⛔ DO NOT READ THIS TOMBSTONE AS "THE QUESTION IS CLOSED". It records that 0.3.10's specific
 * approach failed. PROJECT-NOTES §4b previously declared the whole goal impossible on the strength
 * of that, and Hares refuted it with a video of page content drawing normally at the very top of
 * an untouched `.studio` page. The standing objective is his: "The final goal stays to retrieve the
 * frosted glass look at the top there and we have to find a way. Failing is not a possibility."
 *
 * Two inputs decide that band and BOTH are live: `theme-color` (0.3.9, `class-plugin.php`) paints
 * it a flat colour, and the sampler picks up what the header's glass layer paints (`?tw-hdr=pseudo`,
 * measured). Which one wins in which circumstance is NOT settled here — treat it as open.
 */

@supports (padding: env(safe-area-inset-top)) {

	/* The fixed bar. Zero padding of its own, carries the background and the blur. */
	.elementor .elementor-element.elementor-element-twh00010 {
		padding-top: max(env(safe-area-inset-top), var(--tw-safe-top, 0px));
		padding-left: max(env(safe-area-inset-left), var(--tw-safe-left, 0px));
		padding-right: max(env(safe-area-inset-right), var(--tw-safe-right, 0px));
	}

	/* The full-screen nav panel: position:fixed; inset:0; padding:0, background on this element.
	 * ⚠️ SPECIFICITY. post-263.css owns this box at
	 *   `.elementor-263 .elementor-element.elementor-element-twh00050 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container`
	 * = five classes + one type = (0,5,1). The selector below is six classes + one type = (0,6,1),
	 * so it wins outright and does not depend on which stylesheet prints first. Anything shorter
	 * loses silently, which is the failure mode PROJECT-NOTES §6 keeps recording. */
	.elementor .elementor-element.elementor-element-twh00050
		nav.elementor-nav-menu--dropdown.elementor-nav-menu__container.elementor-nav-menu__container {
		padding-top: max(env(safe-area-inset-top), var(--tw-safe-top, 0px));
		padding-right: max(env(safe-area-inset-right), var(--tw-safe-right, 0px));
		padding-bottom: max(env(safe-area-inset-bottom), var(--tw-safe-bottom, 0px));
		padding-left: max(env(safe-area-inset-left), var(--tw-safe-left, 0px));
	}

	/* The home indicator sits over the last ~34px of the screen in portrait. The footer is the only
	 * thing under it, so its bottom padding absorbs the inset. Additive via calc on Elementor's own
	 * custom property, so the designed padding is not restated here and cannot drift. */
	.elementor .elementor-location-footer > .e-con:last-child {
		padding-bottom: calc(var(--padding-bottom, 0px)
			+ max(env(safe-area-inset-bottom), var(--tw-safe-bottom, 0px)));
	}
}