/**
 * PF Glass — one surface treatment, three kinds of target.
 *
 * The glass is always two layers: the element carries the backdrop blur, and an
 * ::after ring draws the rim. The rim is a layer of its own precisely so it can
 * be blurred independently — that is the "Edge blur" control.
 *
 * Targets opt in three different ways, all landing on the same rules:
 *   .pf-glass                 blocks, class added by render_block
 *   body.pf-glass-button      header buttons, body class from the Customizer.
 *                             Honours .pf-glass-off, so a header button that
 *                             is meant to read as a plain link (the quiet CV)
 *                             can opt out without a specificity fight.
 *   body.pf-glass-topbar      header bar, body class from the Customizer
 *   body.pf-glass-footer      footer, body class from the Customizer
 *   body.pf-glass-buttons    every button on the site (the default style)
 *   .pf-glass-btn            editor canvas only — a button block's wrapper, so
 *                            the glass can be put on the button inside it
 *
 * The body-class selectors are what beat Kadence's own header CSS — they carry
 * one more class than its rules do, so this never depends on stylesheet order.
 *
 * The var() fallbacks are a safety net; live values are printed inline, scoped
 * to each target, so two surfaces can carry different blur.
 */

/* ---------- blur: every glass surface ---------- */

.pf-glass,
body.pf-glass-button #main-header .header-button:not(.pf-glass-off),
body.pf-glass-topbar #masthead .site-header-row-container-inner,
body.pf-glass-footer #colophon,
.pf-glass-btn .wp-block-button__link,
.pf-glass-btn .kb-button,
body.pf-glass-buttons :is(.wp-block-button__link,.kb-button,.button,input[type="submit"],button[type="submit"]):not(.pf-glass-off):not(.header-button):not(.drawer-toggle):not(.menu-toggle):not(.social-button) {
	position: relative;
	-webkit-backdrop-filter: blur(var(--pf-glass-blur, 12px)) saturate(var(--pf-glass-saturate, 160%));
	backdrop-filter: blur(var(--pf-glass-blur, 12px)) saturate(var(--pf-glass-saturate, 160%));
}

/* ---------- rim: every glass surface ---------- */

.pf-glass::after,
body.pf-glass-button #main-header .header-button:not(.pf-glass-off)::after,
body.pf-glass-topbar #masthead .site-header-row-container-inner::after,
body.pf-glass-footer #colophon::after,
body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.sub-menu::after,
body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.submenu::after,
.pf-glass-btn .wp-block-button__link::after,
.pf-glass-btn .kb-button::after,
body.pf-glass-buttons :is(.wp-block-button__link,.kb-button,.button,input[type="submit"],button[type="submit"]):not(.pf-glass-off):not(.header-button):not(.drawer-toggle):not(.menu-toggle):not(.social-button)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	border: var(--pf-glass-rim-width, 1.5px) solid var(--pf-glass-rim, rgba(245, 243, 247, 0.45));
	filter: blur(var(--pf-glass-edge-blur, 3px));
	transition: border-color 0.25s ease;
}

/* A full rim around a full-width bar reads as a stray box outline, so the bar
   gets the bottom edge only — a soft version of the border it already had. */
body.pf-glass-topbar #masthead .site-header-row-container-inner::after {
	border-width: 0 0 var(--pf-glass-rim-width, 1.5px) 0;
}

/* Same for the footer, mirrored: its one edge is the top one, where the page
   content ends. */
body.pf-glass-footer #colophon::after {
	border-width: var(--pf-glass-rim-width, 1.5px) 0 0 0;
}

/* ---------- prismatic edge ---------- */

/* The part of the reference look that survives everywhere. Refraction needs
   url() inside backdrop-filter, which is Chromium-only — Safari and Firefox fall
   back to frosted. This ring does not: it is a conic gradient masked to the
   border area, so Dispersion still produces the rainbow fringe there.
   At Dispersion 0 it is fully transparent, so it costs nothing when unused. */

.pf-glass::before,
body.pf-glass-button #main-header .header-button:not(.pf-glass-off)::before,
body.pf-glass-topbar #masthead .site-header-row-container-inner::before,
body.pf-glass-footer #colophon::before,
body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.sub-menu::before,
body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.submenu::before,
.pf-glass-btn .wp-block-button__link::before,
.pf-glass-btn .kb-button::before,
body.pf-glass-buttons :is(.wp-block-button__link,.kb-button,.button,input[type="submit"],button[type="submit"]):not(.pf-glass-off):not(.header-button):not(.drawer-toggle):not(.menu-toggle):not(.social-button)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	padding: var(--pf-glass-rim-width, 1.5px);
	background: var(--pf-glass-spectrum, conic-gradient(from 210deg, #ff5f6d, #ffc371, #7ee8fa, #6ad5a0, #a06bff, #ff5f6d));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: var(--pf-glass-dispersion, 0);
	filter: blur(var(--pf-glass-edge-blur, 3px));
}

/* Bar and footer get their one edge only, matching their ::after rims — a full
   rainbow ring around a full-width band reads as a stray box outline. */
body.pf-glass-topbar #masthead .site-header-row-container-inner::before {
	padding: 0 0 var(--pf-glass-rim-width, 1.5px) 0;
}

body.pf-glass-footer #colophon::before {
	padding: var(--pf-glass-rim-width, 1.5px) 0 0 0;
}

/* ---------- tint ---------- */

/* Surfaces whose own background the glass replaces. The header bar is absent on
   purpose: it keeps its Kadence background and uses that as its tint, so the
   gradient set in the Customizer survives. The footer is here rather than there
   because it has no background of its own — without the tint its glass would be
   completely invisible. */
.pf-glass,
body.pf-glass-button #main-header .header-button:not(.pf-glass-off),
body.pf-glass-footer #colophon,
.pf-glass-btn .wp-block-button__link,
.pf-glass-btn .kb-button,
body.pf-glass-buttons :is(.wp-block-button__link,.kb-button,.button,input[type="submit"],button[type="submit"]):not(.pf-glass-off):not(.header-button):not(.drawer-toggle):not(.menu-toggle):not(.social-button) {
	background: var(--pf-glass-tint, rgba(245, 243, 247, 0.06));
}

/* ---------- the header button ---------- */

body.pf-glass-button #main-header .header-button:not(.pf-glass-off) {
	border: 0;
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.45);
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

body.pf-glass-button #main-header .header-button:not(.pf-glass-off):hover,
body.pf-glass-button #main-header .header-button:not(.pf-glass-off):focus-visible {
	background: var(--pf-glass-tint-hover, rgba(245, 243, 247, 0.10));
	box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.5);
}

body.pf-glass-button #main-header .header-button:not(.pf-glass-off):hover::after,
body.pf-glass-button #main-header .header-button:not(.pf-glass-off):focus-visible::after {
	border-color: var(--pf-glass-rim-hover, rgba(245, 243, 247, 0.65));
}

/* ---------- accessibility / fallbacks ---------- */

@media (prefers-reduced-motion: reduce) {
	.pf-glass,
	.pf-glass::after,
	body.pf-glass-button #main-header .header-button:not(.pf-glass-off),
	body.pf-glass-button #main-header .header-button:not(.pf-glass-off)::after {
		transition: none;
	}
}

/* No backdrop-filter (older Firefox): lean on a more opaque fill instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pf-glass,
	body.pf-glass-button #main-header .header-button:not(.pf-glass-off),
	body.pf-glass-footer #colophon {
		background: var(--pf-glass-tint-solid, rgba(245, 243, 247, 0.14));
	}
}

/* ---------- the nav dropdown ---------- */

/* Every other glass surface gets `position: relative` from the shared blur rule
   above. The dropdown must NOT: Kadence positions it `absolute; top: 100%`, and
   that is the only thing hanging the panel under its menu item. So the blur is
   written out here instead, without touching position — absolute already gives
   the rim and prism pseudos a containing block. */
body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.sub-menu,
body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.submenu {
	-webkit-backdrop-filter: blur(var(--pf-glass-blur, 20px)) saturate(var(--pf-glass-saturate, 160%));
	        backdrop-filter: blur(var(--pf-glass-blur, 20px)) saturate(var(--pf-glass-saturate, 160%));
}

/* The panel colour stays Kadence's — Appearance → Header → Dropdown → Design →
   Dropdown Background — so it is one translucent surface, tunable without code.
   The items paint no background of their own until hover, which is where the
   accent belongs. */
body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.sub-menu > li.menu-item > a,
body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.submenu > li.menu-item > a {
	position: relative;
	z-index: 2;
}

/* Without backdrop-filter there is nothing to see through, and a 78 %-opaque
   panel over a bright frame is a legibility risk rather than a style. Browsers
   that cannot blur get the solid surface instead. Same for a visitor who has
   asked for less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.sub-menu,
	body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.submenu {
		background: var(--pf-glass-panel-solid, #1E1A24);
	}
}

@media (prefers-reduced-transparency: reduce) {
	body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.sub-menu,
	body.pf-glass-dropdown .header-navigation .header-menu-container ul ul.submenu {
		-webkit-backdrop-filter: none;
		        backdrop-filter: none;
		background: var(--pf-glass-panel-solid, #1E1A24);
	}
}