/*
Theme Name:		Phire Group 2026
Author:			John Green @ Phire Group
Author URI:		https://phiregroup.com/
Description:	The Phire Group home theme for the 2026 Phire Group network of sites.
Version:		1.0
*/

:root {color-scheme: dark; --red: #e4002b; --green: #32756a; --online: #3db692; --blue: #6191f2; --white: #fff; --tan: #ecece5; --gray: #505050; --black: #000; --hs: .9375rem; --vs: 6.25rem;}

/* basic styles */
* {margin: 0; padding: 0;}
*, ::before, ::after {box-sizing: border-box;}
html {font: 300 medium 'DM Sans', sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; color: light-dark(var(--black), var(--white)); background-color: light-dark(var(--white), var(--black));}
a {text-decoration-thickness: from-font; color: inherit;}
button {border-width: 0; font: inherit; color: inherit; background-color: transparent; cursor: pointer; touch-action: manipulation;}
h1, h2, h3, h4, h5, h6 {text-wrap: balance;}
iframe {display: block; max-width: 100%; border: 0;}
img, picture, svg, video {height: auto; max-width: 100%; vertical-align: middle;}
input, select, textarea {font: inherit; letter-spacing: inherit; word-spacing: inherit;}
ol, ul {list-style: none;}
p {text-wrap: pretty;}
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
svg[width="0"][height="0"] {position: fixed;}
svg[width="0"][height="0"][aria-hidden="true"] {display: none;}
[hidden] {display: none !important;}

/* utility classes */
.btn {display: inline-flex; gap: .625rem; align-items: center; padding: .6875rem 1.25rem; border: 1px solid; font-weight: 500; font-size: .875rem; line-height: 1.43; text-decoration: none; letter-spacing: -.02em; transition: .3s ease-out;}
.btn1 {border-color: transparent; border-radius: .375rem; color: var(--white); background-color: var(--red);}
.btn1:hover {border-radius: 1.875rem;}
.btn2 {border-color: light-dark(transparent, #6b7280); border-radius: 1.875rem; color: light-dark(var(--black), var(--white)); background-color: light-dark(var(--tan), transparent);}
.btn2:hover {border-color: transparent; color: light-dark(var(--white), var(--black)); background-color: light-dark(var(--green), var(--tan));}
.screen-reader-text {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.wrap {margin-inline: max(var(--hs), ((100% - var(--mw, 118.125rem)) / 2));}

/* WYSIWYG */
.wys * {margin: revert; margin-bottom: 0; padding: revert; list-style: revert;}
.wys > :first-child {margin-top: 0;}

/* web components */
pg-videowrap {display: grid; width: max-content; max-width: 100%; overflow: clip;}
pg-videowrap > * {grid-area: 1 / 1;}
pg-videowrap .playbtn {z-index: 1; width: 30px; height: 30px; border-radius: 50%; backdrop-filter: blur(5px);}
pg-videowrap :is(.playbtn[aria-label="Pause"] .play, .playbtn[aria-label="Play"] .pause) {display: none;}

/* header */
#maindocument {position: relative; margin-bottom: calc(200dvw * 378 / 1920); color: light-dark(var(--black), var(--white)); background-color: light-dark(var(--white), var(--black)); --fbar: 1.875rem;}
#maindocument::after {display: block; position: relative; bottom: calc(-1 * var(--fbar)); width: 100%; height: var(--fbar); border-bottom-right-radius: var(--fbar); border-bottom-left-radius: var(--fbar); background-color: light-dark(var(--white), var(--black)); content: '';}
.header-skip {display: block; padding: .5rem; text-align: center; color: light-dark(var(--white), var(--black)); background-color: light-dark(var(--black), var(--white));}
.header-skip:not(:focus) {position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;}
.header-skip:focus {outline: none;}
.header-skip span {padding-right: .25rem; padding-left: .25rem;}
.header-skip:focus-visible span {outline: 1px solid;}
.ph {width: 100%; height: calc(var(--hbar)); overflow: auto; background-color: light-dark(var(--white), var(--black)); background-image: linear-gradient(to bottom, transparent calc(var(--hbar) - 1px), light-dark(var(--tan), var(--gray)) calc(var(--hbar) - 1px), transparent var(--hbar)); --hbar: 3.875rem; --flyout: 0px;}
html:has(.ph-menubtn[aria-expanded="true"], .ph-searchbtn[aria-expanded="true"]) {overflow-y: hidden; scrollbar-gutter: stable;}
.ph:has(.ph-menubtn[aria-expanded="true"], .ph-searchbtn[aria-expanded="true"]) {--flyout: calc(100dvh - var(--hbar));}
.wrap-ph {display: grid; grid-template-columns: 1fr auto 1fr; column-gap: .625rem; align-items: center; height: var(--hbar);}
.ph-btns {display: flex;}
.ph-btn {display: inline-flex; gap: .625rem; justify-content: center; align-items: center; padding: .75rem; border-radius: .375rem; text-decoration: none; transition: .3s ease-out;}
.ph-btn span {display: none;}
.ph-btn:hover {border-radius: 1.875rem; color: light-dark(var(--black), var(--white)); background-color: light-dark(var(--tan), var(--gray));}
.ph-btn[aria-expanded="true"] {color: var(--white); background-color: var(--green);}
.ph-menubtn[aria-expanded="true"] .open, .ph-menubtn[aria-expanded="false"] .close, .ph-searchbtn[aria-expanded="true"] .open, .ph-searchbtn:not([aria-expanded="true"]) .close, .ph-menubtn:not([aria-expanded="true"]) + .ph-menu, .ph-searchbtn:not([aria-expanded="true"]) + .ph-search {display: none;}
.ph-menu, .ph-search {position: absolute; top: var(--hbar); left: 0; z-index: 10; width: 100%; height: var(--flyout); max-height: calc(100dvh - var(--hbar) - var(--wp-admin--admin-bar--height, 0px)); overflow-y: auto; background-color: light-dark(var(--white), var(--black));}
.ph-menu {--leftcol: 41.125rem;}
.wrap-menu {display: grid; gap: 5rem; padding-block: 5rem; --mw: 80rem;}
.ph-menu a {text-decoration: none;}
.ph-menu .menu {display: grid; gap: .625rem; max-width: var(--leftcol); font-weight: 500; font-size: 2.5rem; line-height: 1.25; letter-spacing: -.03em;}
.ph-menu .menu > li {padding-bottom: 1.25rem; border-bottom: 1px solid light-dark(var(--tan), var(--gray));}
.ph-menu .menu > li > a {display: grid; grid-template-columns: var(--arrow) 1fr 1.25rem; align-items: center; transition: .3s ease-out; --arrow: 0;}
.ph-menu .menu > li > a > svg:first-child {opacity: 0;}
.ph-menu .menu > li:is(.current-menu-item, .current-menu-ancestor) > a, .ph-menu .menu > li > a:hover {--arrow: 4rem;}
.ph-menu .menu > li:is(.current-menu-item, .current-menu-ancestor) > a > svg:first-child, .ph-menu .menu > li > a:hover > svg:first-child {opacity: 1;}
.ph-menu .menu > li.menu-item-has-children > a > svg:last-child {transition: .3s ease-out;}
.ph-menu .menu > li.menu-item-has-children > a[aria-expanded="false"] > svg:last-child {rotate: 180deg;}
.ph-menu .menu > li.menu-item-has-children > a[aria-expanded="false"] ~ .sub-menu {display: none;}
.ph-menu .sub-menu {grid-column: 1 / -1; margin-top: 1.25rem; padding-inline: 1.875rem; font-weight: 400; font-size: 1rem; line-height: 1.31; letter-spacing: 0;}
.ph-menu .sub-menu li a {display: block; padding: .75rem .625rem; border-radius: .375rem;}
.ph-menu .sub-menu li a:hover {background-color: light-dark(var(--tan), var(--gray));}
.ph-menu-footer {display: flex; flex-wrap: wrap; gap: 1.875rem; justify-content: space-between; align-items: start; max-width: var(--leftcol);}
.ph-menu-stats {display: grid; grid-template: auto auto / auto auto; flex-basis: 8.125rem; gap: .3125rem .625rem; justify-content: start; justify-self: start; padding-inline: .3125rem; font-weight: 300; font-size: .875rem; line-height: .86;}
.ph-menu-stats > :first-child {grid-column: 1 / -1;}
.ph-menu-stats span {font-weight: 600;}
.ph-menu-promo {max-width: 27rem;}
.ph-menu-promo > img {border-radius: .375rem;}
.ph-menu-promo-content:not(:first-child) {margin-top: 2.5rem;}
.ph-menu-promo-content h2 {font: 500 1.25rem/1.3 Gilroy, sans-serif;}
.ph-menu-promo-ctas {margin-top: 1.875rem;}
.ph-logo {color: light-dark(var(--red), var(--white));}
.ph-mode {display: flex; gap: .5rem; align-items: center; justify-self: end;}
.ph-mode-btn {display: grid; align-items: center; width: 3.5rem; height: 1.5rem; border-radius: 6.25rem; background-color: light-dark(var(--tan), var(--gray));}
.ph-mode-btn::after {width: 1.125rem; height: 1.125rem; margin-inline: .25rem; border-radius: 50%; background-color: var(--white); content: '';}
.ph-mode-btn[aria-pressed="true"]::after {justify-self: right;}

/* footer */
.pf {margin-bottom: calc(-1 * var(--fbar)); padding-top: 5rem; padding-bottom: .25rem;}
.pf a:has(svg) {display: inline-flex; gap: .625rem; align-items: center;}
.pf a:not(:hover) {text-decoration: none;}
.pf .wrap {--mw: 76.875rem;}
.wrap-pf {display: grid; gap: 5rem;}
.pf-menus {display: flex; flex-wrap: wrap; gap: 2.5rem; font-size: .875rem; line-height: 1.29;}
.pf-menus > * {flex-grow: 1;}
.pf-menus h2 {margin-bottom: 1.25rem; font-weight: 700; font-size: 1rem; line-height: 1.31;}
.pf-menus ul {display: grid; gap: .75rem;}
.pf-where li {display: grid; grid-template-columns: 1.375rem auto; gap: .625rem;}
.pf-jim {display: grid; grid-template: auto auto auto / auto 1fr; column-gap: 1.25rem; align-items: center; margin-top: 2.5rem;}
.pf-jim img {grid-row: 1 / 3; border-radius: 50%;}
.pf-jim-title {font-weight: 700; font-size: 1.125rem; line-height: 1.33;}
.pf-jim-title:not(:has(+ .pf-jim-online)) {grid-row: 1 / 3;}
.pf-jim-online {display: flex; gap: .625rem; align-items: center; font-size: .875rem; line-height: 1.29;}
.pf-jim-online::before {display: block; width: .5rem; height: .5rem; border-radius: 50%; background-color: #3db6a2; content: '';}
.pf-jim .btn {grid-area: 3 / 1 / -1 / -1; justify-self: start; margin-top: 1.875rem;}
.pf-right {display: grid; gap: 5rem;}
.pf-promo {font-weight: 300; font-size: 1.125rem; line-height: 1.33;}
.pf-promo h2 {margin: 0; font: 500 3.125rem/1.16 Gilroy, sans-serif; letter-spacing: -.03em;}
.pf-legal {margin-top: 3.75rem; padding-top: 1.875rem; border-top: 1px solid light-dark(var(--tan), var(--gray)); font-size: .875rem; line-height: 1.29;}
.wrap-legal {display: inline-flex; flex-wrap: wrap; gap: 1.25rem;}
.pf-legal a {font-weight: 500;}
.pf-legal-menu {display: flex; flex-wrap: wrap; gap: 2ch;}
.peekaboo {display: grid; position: fixed; bottom: 0; z-index: -1; place-items: end center; width: 100%; height: calc(200dvw * 378 / 1920); color: var(--white); background-color: var(--red);}
.peekaboo img {width: 100%;}

/* headline */
.wrap-pagehead {padding-block: 7.5rem; text-align: center; --mw: 50.9375rem;}
.wrap-pagehead h1 {font: 500 3.125rem/1.16 Gilroy, sans-serif; letter-spacing: -.03em;}
pg-rpagehead {display: grid; gap: 2.5rem; margin-block: 7.5rem; text-align: initial; --mw: 76.875rem;}
pg-rpagehead h1 {font: 500 3.125rem/1.16 Gilroy, sans-serif; letter-spacing: -.03em;}
pg-rpagehead h1 > div {max-width: 47.5rem;}
pg-rpagehead h1 > div + div {display: grid; overflow: clip;}
pg-rpagehead h1 > div + div > * {grid-area: 1 / 1; height: 100%; translate: 0 100%; animation: translate-up-out .3s 1 cubic-bezier(.7, 0, .3, 1);}
pg-rpagehead h1 > div + div > *:not([aria-hidden="true"]) {translate: 0 0%; animation: translate-up-in .3s 1 cubic-bezier(.7, 0, .3, 1);}

/* cards */
.card {aspect-ratio: 1; overflow: clip; border-radius: .5rem; background-color: light-dark(var(--black), var(--white));}
.card-title {place-self: end start; margin: var(--hs); margin-right: 0; padding: .75rem 1rem; border-radius: 6.25rem; font-size: .875rem; line-height: 1.29; text-decoration: none; color: var(--white); background-color: rgb(0 0 0 / .5); background-image: linear-gradient(0deg, rgb(255 255 255 / .2), rgb(255 255 255 / .2)); backdrop-filter: blur(.5rem);}
.card-image {display: grid;}
.card-image > * {grid-area: 1 / -1;}
.card-image > img {transition: .3s scale ease-out;}
.card-image:hover > img {scale: 1.05;}
.card-video {display: grid; grid-template: 1fr auto / auto minmax(1.875rem, 1fr); column-gap: .625rem;}
.card-video pg-videowrap {display: grid; grid-area: 1 / 1 / -1 / -1; grid-template: subgrid / subgrid;}
.card-video pg-videowrap video {grid-area: 1 / 1 / -1 / -1;}
.card-video pg-videowrap .playbtn {grid-area: 2 / 2; align-self: center;}
.card-video .card-title {grid-area: 2 / 1;}

/* work */
.posts-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr)); gap: 3.75rem; padding-block: 2.5rem;}
.single-work pg-videowrap button {align-self: end; margin: var(--hs);}
.wrap-work {margin-top: 7.8125rem;}
.work1 {margin-bottom: 3.75rem; padding-bottom: 2.5rem; border-bottom: 1px solid light-dark(var(--tan), var(--gray));}
.work1 h1 {margin-bottom: 2.5rem; font: 500 2.5rem/1.25 Gilroy, sans-serif; letter-spacing: -.03em;}
.work1 h2 {padding-top: 2.5rem; border-top: 1px solid light-dark(var(--tan), var(--gray)); font-size: .875rem; line-height: 1.29;}
.work1 h2:not(:first-child) {margin-top: 2.5rem;}
.work1 h2 + * {margin-top: .5rem;}
.work1 p:has(pg-number) {margin-top: 1.25rem; font: 500 1.625rem/1.192 Gilroy, sans-serif; letter-spacing: -.03em;}
.work1 p:has(pg-number) + p {margin-top: .5rem;}
.work2 > * {display: grid; margin-inline: auto; border-radius: .5rem;}
.work3 {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hs); margin-block: var(--hs);}
.work3 > * {grid-column: 1 / -1;}
.work3-pair {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hs);}
.work3 :is(img, pg-videowrap) {border-radius: .375rem;}
.work4 {padding-block: 6.25rem;}
.work4-head {display: grid; gap: 1.875rem; justify-items: center;}
.work4-head h2 {font: 500 2rem/1.1875 Gilroy, sans-serif; letter-spacing: -.03em;}
.work4 pg-slider {display: grid; row-gap: 3.75rem; margin-top: 3.75rem;}

/* people */
.wrap-person {--mw: 76.875rem;}


@media (min-width: 30em) { /* 480px */

	/* work */
	.work3-pair {grid-template-columns: subgrid;}

	/* footer */
	.pf-jim {grid-template: auto auto / auto auto 1fr;}
	.pf-jim .btn {grid-area: 1 / 3 / -1 / 4; margin-top: 0; margin-left: .625rem;}

}

@media (min-width: 48em) { /* 768px */

	/* header */
	.ph-btn {padding-inline: .9375rem;}
	.ph-btn span {display: inline;}

	/* footer */
	.pf {padding-top: 10rem;}

	/* work */
	.posts-grid {gap: 7.5rem;}
	.single-work h1 {font-size: 3.125rem;}

}

@media (min-width: 64em) { /* 1024px */

	/* header */
	.wrap-menu {display: grid; grid-template: auto auto / 658fr 432fr; padding-block: 7.5rem;}
	.ph-menu-footer {grid-area: 2 / 1;}

	/* footer */
	.wrap-pf {grid-template: auto auto / 1fr 24.375rem;}
	.pf-left, .pf-right {display: grid; grid-row: 1 / -1; grid-template-rows: subgrid;}
	.pf-menus {column-gap: 5rem; justify-self: start;}
	.pf-jim {margin-top: 0;}

	/* work */
	.wrap-work {display: grid; grid-template-columns: minmax(0, 575fr) minmax(0, 700fr); column-gap: 8.4375rem; align-items: start; max-width: 88.125rem; --mw: 88.125rem;}
	.work1 {padding-left: 5.625rem;}
	.work2 {position: sticky; top: 4.75rem; margin-bottom: 3.75rem;}
	.work3, .work4 {grid-column: 1 / -1;}
	.work4 {padding-block: 12.5rem;}
	.work4 pg-slider {margin-top: 7.5rem;}

}

@media print {

	/* @TODO: audit */

	*, *::before, *::after {border-color: #000 !important; text-shadow: none !important; color: #000 !important; background-color: transparent !important;}
	blockquote, figure {page-break-inside: avoid; break-inside: avoid;}

	/* header */
	.ph-btns *, .ph-mode * {display: none;}

	/* footer */
	.peekaboo {display: none;}

}

@media (prefers-reduced-motion: no-preference) {

	html:focus-within {scroll-behavior: smooth;}

	@view-transition {navigation: auto;}

	/* @TODO: implement this */
	.bump {position: relative; opacity: 0; translate: 0 75px;}
	.bump.bumped {opacity: 1; translate: 0 0;}

	/* header */
	.ph-btn * {transition: none;}
	.ph-menu, .ph-search {transition: .3s ease-out; transition-behavior: allow-discrete; @starting-style {height: 0;}}

	@supports (height: calc-size(auto, size)) {

		/* header */
		.ph-menu .menu > li.menu-item-has-children > .sub-menu {overflow-y: clip; transition: .3s ease-out; transition-behavior: allow-discrete;}
		.ph-menu .menu > li.menu-item-has-children > a[aria-expanded="false"] ~ .sub-menu {height: 0;}
		.ph-menu .menu > li.menu-item-has-children > a[aria-expanded="true"] ~ .sub-menu {height: calc-size(auto, size); @starting-style {height: 0;}}

	}

	/* headline */

	@keyframes translate-up-in {
		0% {translate: 0 100%;}
		100% {translate: 0 0%;}
	}

	@keyframes translate-up-out {
		0% {translate: 0 0%;}
		100% {translate: 0 100%;}
	}

}

@media (prefers-reduced-motion: reduce) {

	*, *::before, *::after {scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important;}

}

@media (forced-colors: active) {

	/* @TODO: audit */

}