/* PMG — shared styles. Page styles: assets/css/{schema}.css. Every rule is scoped to .pmg-site; base element rules
   use :where() so component classes and inline styles always win. */

@font-face { font-family: 'Clash Display'; src: url("../fonts/clash-display-400.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url("../fonts/clash-display-500.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url("../fonts/clash-display-600.woff2") format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:where(body.pmg-site) { margin: 0; background: #000; color: #fff; font-family: 'Clash Grotesk', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:where(.pmg-site) a { color: #fff; text-decoration: none; }
:where(.pmg-site) a:hover { color: #F83900; }
.pmg-site ::selection { background: #F83900; color: #000; }

/* Press feedback on pointer-down; a hit area of at least 44px around small links and buttons. */
.pmg-site :where(a, button):active:not(:disabled) { transform: scale(.97); transition-duration: 80ms; }
:where(.pmg-site) :where(a, button) { position: relative; }
:where(.pmg-site) :where(a, button)::before { content: ""; position: absolute; inset: -8px; }
.pmg-site :where(a, button):focus-visible { outline: 2px solid #F83900; outline-offset: 3px; }

/* Screen-reader-only text. */
.pmg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Responsive visibility, replacing the design's width checks. Desktop >= 1000px for the header, 960px for content. */
@media (max-width: 959px) { .pmg-site .pmg-desktop { display: none !important; } }
@media (min-width: 960px) { .pmg-site .pmg-mobile { display: none !important; } }

/* Shared keyframes (page files may add their own, always prefixed pmg). */
@keyframes pmgRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pmgFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pmgPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pmgBreath { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes pmgScroll { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.pmg-site *, .pmg-site *::before, .pmg-site *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Header, menu, footer, loader, reveals (template-parts/header-*.php, footer.php, loader.php; assets/js/pmg.js).
   --------------------------------------------------------------------------------------------------------------- */
:root:has(body.pmg-site) { scroll-padding-top: 88px; }
.pmg-site #pmg-main:focus { outline: none; }

/* Skip link: hidden until focused. */
.pmg-site .pmg-skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: #F83900; color: #000; font-weight: 600; font-size: 14px; transform: translateY(-160%); transition: transform .2s; }
.pmg-site .pmg-skip:focus { transform: none; color: #000; }

/* Header bar. Background + line on the header; blur on its own layer (see header-bar.php). */
.pmg-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background .4s, border-color .4s; }
.pmg-header.is-scrolled { background: rgba(0, 0, 0, .72); border-bottom-color: rgba(255, 255, 255, .08); }
.pmg-header.is-scrolled .pmg-header__blur { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
@media (max-width: 999px) { .pmg-site .pmg-hd { display: none !important; } }
@media (min-width: 1000px) { .pmg-site .pmg-hm { display: none !important; } }

.pmg-site .pmg-nav__link { color: #AEA7A6; }
.pmg-site .pmg-nav__link:hover, .pmg-site .pmg-nav__link:focus-visible, .pmg-site .pmg-nav__link.is-active { color: #fff; }
.pmg-nav__caret { color: #AEA7A6; }
.pmg-drop.is-open .pmg-nav__caret { transform: rotate(180deg); color: #F83900; }
.pmg-nav__line { width: 0; }
.pmg-nav__link.is-active .pmg-nav__line { width: 100%; }

.pmg-site .pmg-cta { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }
.pmg-site .pmg-cta.is-deep { background: #F83900; color: #000; border-color: #F83900; }
.pmg-site .pmg-cta:hover, .pmg-site .pmg-cta:focus-visible { color: #000; background: #F83900; border-color: #F83900; }

/* Dropdown panel, anchored under its trigger by pmg.js (left = trigger centre, kept inside the viewport). */
.pmg-panel { left: 50%; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
.pmg-drop.is-open .pmg-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .28s cubic-bezier(.2, .7, .2, 1), transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.pmg-site .pmg-panel__link { color: #fff; }
.pmg-site .pmg-panel__link:hover, .pmg-site .pmg-panel__link:focus-visible { background: rgba(248, 57, 0, .08); color: #fff; }

/* Mobile menu overlay. */
.pmg-menu[hidden], .pmg-menu__sub[hidden] { display: none !important; }
.pmg-menu.is-closing { animation: pmgMenuOut .22s ease both; pointer-events: none; }
.pmg-site .pmg-menu__link { color: #AEA7A6; font: inherit; }
.pmg-site .pmg-menu__link.is-active, .pmg-site .pmg-menu__link[aria-expanded="true"] { color: #fff; }
.pmg-site .pmg-menu__link:hover { color: #fff; }
.pmg-menu__sub:not([hidden]) { animation: pmgMenuIn .35s ease both; }
.pmg-site .pmg-menu__sublink { color: #F3E3E1; }
.pmg-site .pmg-menu__sublink:hover { color: #F83900; }
.pmg-site .pmg-menu__cta:hover, .pmg-site .pmg-menu__cta:focus-visible { color: #000; }
html.pmg-menu-open, html.pmg-menu-open body { overflow: hidden; }
@keyframes pmgMenuIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pmgMenuOut { to { opacity: 0; transform: translateY(12px); } }

/* Logged-in toolbar: fixed at every width so the fixed header never slides under it. */
@media (max-width: 600px) { .pmg-site #wpadminbar { position: fixed; } }
.admin-bar .pmg-header, .admin-bar .pmg-menu { top: 32px !important; } /* !important: the menu's inline inset */
@media (max-width: 782px) { .admin-bar .pmg-header, .admin-bar .pmg-menu { top: 46px !important; } }

/* Footer. */
.pmg-site .pmg-social { color: #AEA7A6; }
.pmg-site .pmg-social:hover, .pmg-site .pmg-social:focus-visible { color: #F83900; border-color: #F83900 !important; }
.pmg-site .pmg-footer__legal a { color: #AEA7A6; }
.pmg-site .pmg-footer__legal a:hover, .pmg-site .pmg-footer__legal a:focus-visible { color: #F83900; }

/* Scroll reveals (pmg.js): only elements below the fold at load wait; they rise in (or grow from the left) once. */
.pmg-reveal-wait { opacity: 0; translate: 0 32px; transition: none !important; }
.pmg-reveal-wait[data-reveal="bar"] { translate: none; scale: 0 1; }
[data-reveal="bar"] { transform-origin: left center; }
.pmg-reveal-in { animation: pmgRevealUp .9s cubic-bezier(.2, .7, .2, 1) both; }
.pmg-reveal-in[data-reveal="bar"] { animation-name: pmgRevealBar; animation-duration: 1.2s; }
@keyframes pmgRevealUp { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
@keyframes pmgRevealBar { from { opacity: 0; scale: 0 1; } to { opacity: 1; scale: 1 1; } }

/* First-visit loader. Shown only while html.pmg-loader-on; hides itself after 4s even if its script never runs. */
#pmg-loader { display: none; position: fixed; inset: 0; z-index: 10001; background: #000; color: #fff; place-items: center; overflow: hidden; clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.76, 0, .24, 1) .08s; font: 500 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; animation: pmgLoaderGone .3s ease 4s forwards; }
.pmg-loader-on #pmg-loader { display: grid; }
#pmg-loader .pl-lines { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 18px); }
#pmg-loader .pl-glow { position: absolute; left: 50%; bottom: -55vmax; width: 110vmax; height: 110vmax; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(248, 57, 0, .34), rgba(248, 57, 0, 0) 62%); filter: blur(30px); opacity: .25; transition: opacity 1.2s ease; }
#pmg-loader .pl-center { position: relative; display: grid; justify-items: center; gap: 28px; width: min(360px, 78vw); transition: opacity .45s ease, transform .6s cubic-bezier(.76, 0, .24, 1); }
#pmg-loader .pl-logo { width: clamp(120px, 30vw, 168px); height: auto; opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
#pmg-loader.pl-in .pl-logo { opacity: 1; transform: none; }
#pmg-loader svg { width: 100%; height: auto; overflow: visible; display: block; }
#pmg-loader .pl-meta { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; letter-spacing: .16em; text-transform: uppercase; color: #AEA7A6; }
#pmg-loader .pl-count { font-variant-numeric: tabular-nums; letter-spacing: .08em; color: #fff; font-size: 12px; }
#pmg-loader .pl-count b { color: #F83900; font-weight: 500; }
#pmg-loader.pl-out { clip-path: inset(0 0 100% 0); }
#pmg-loader.pl-out .pl-center { opacity: 0; transform: translateY(-24px); }
html.pmg-loading .pmg-site [style*="animation"] { animation-play-state: paused !important; }
@keyframes pmgLoaderGone { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
	.pmg-site #pmg-loader { transition: opacity .3s ease !important; }
	.pmg-site #pmg-loader.pl-out { clip-path: none; opacity: 0; }
}

/* Generic pages, posts, search and 404 (page.php, single.php, index.php, search.php, 404.php). */
.pmg-prose { color: #F3E3E1; font-size: 17px; line-height: 1.7; }
.pmg-prose > :first-child { margin-top: 0; }
.pmg-prose :where(h2, h3, h4) { font-family: 'Clash Display', sans-serif; font-weight: 500; color: #fff; letter-spacing: -.02em; line-height: 1.15; margin: 1.8em 0 .6em; }
.pmg-prose h2 { font-size: clamp(26px, 3vw, 36px); }
.pmg-prose h3 { font-size: clamp(21px, 2.2vw, 26px); }
.pmg-prose :where(p, ul, ol, blockquote, figure, table) { margin: 0 0 1.2em; }
.pmg-prose :where(ul, ol) { padding-left: 1.3em; }
.pmg-prose li + li { margin-top: .4em; }
.pmg-prose li::marker { color: #F83900; }
.pmg-site .pmg-prose a { color: #F83900; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pmg-site .pmg-prose a:hover { color: #fff; }
.pmg-prose a::before { display: none; }
.pmg-prose blockquote { border-left: 2px solid #F83900; padding: 4px 0 4px 20px; color: #fff; font-size: 1.1em; }
.pmg-prose :where(img, video, iframe) { max-width: 100%; height: auto; border-radius: 14px; }
.pmg-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.pmg-prose :where(th, td) { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 10px 14px 10px 0; text-align: left; }
.pmg-prose hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 2.4em 0; }
.pmg-prose :where(pre, code) { font-size: .9em; background: rgba(255, 255, 255, .06); border-radius: 6px; }
.pmg-prose pre { padding: 16px; overflow-x: auto; }
.pmg-prose .alignleft { float: left; margin: 0 1.5em 1em 0; }
.pmg-prose .alignright { float: right; margin: 0 0 1em 1.5em; }
.pmg-prose .aligncenter { margin-left: auto; margin-right: auto; }
.pmg-prose .wp-caption-text, .pmg-prose figcaption { font-size: 13px; color: #AEA7A6; margin-top: 8px; }
.pmg-site .pmg-pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 600; font-size: 14px; padding: 13px 22px; border-radius: 999px; transition: color .3s, background .3s, border-color .3s; }
.pmg-site .pmg-pill--solid { background: #F83900; border-color: #F83900; color: #000; }
.pmg-site .pmg-pill:hover, .pmg-site .pmg-pill:focus-visible { background: #F83900; border-color: #F83900; color: #000; }
.pmg-site .pmg-pill--solid:hover, .pmg-site .pmg-pill--solid:focus-visible { background: #fff; border-color: #fff; color: #000; }
.pmg-site .pmg-entry { display: block; padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; transition: color .25s; }
.pmg-site .pmg-entry:hover, .pmg-site .pmg-entry:focus-visible { color: #F83900; }
.pmg-search { display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; }
.pmg-search input[type="search"] { flex: 1 1 220px; min-width: 0; height: 50px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 15px; }
.pmg-search input[type="search"]:focus { outline: 2px solid #F83900; outline-offset: 2px; border-color: transparent; }
.pmg-search button { height: 50px; padding: 0 24px; border-radius: 999px; border: 0; background: #F83900; color: #000; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.pmg-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.pmg-site .pmg-pagination .page-numbers { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); color: #AEA7A6; font-size: 14px; }
.pmg-site .pmg-pagination .page-numbers.current, .pmg-site .pmg-pagination a.page-numbers:hover { border-color: #F83900; color: #F83900; }
.pmg-site .post-password-form input[type="password"] { height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; }
.pmg-site .post-password-form input[type="submit"] { height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: #F83900; color: #000; font: inherit; font-weight: 600; cursor: pointer; }
