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

:root {--red: #e4002b; --green: #327469; --blue: #6191f2; --online: #3db591; --white: #fff; --black: #000; --black55: rgb(0 0 0 / .55); --gray: #4f4f4f; --gray30: #cacaca; --gray20: #dcdcdc; --tan: #ecece5; --tanhover: #dfdfd7; --tan50: rgb(236 236 229 / .5); --mw: 76.875rem; --hs: .9375rem; --vs: 3.125rem;}

/* basic styles */
* {margin: 0; padding: 0;}
*, ::before, ::after {box-sizing: border-box;}
html {font: 300 medium/1.3125 'DM Sans', sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; color: #000; background-color: #fff;}
a {text-decoration-thickness: from-font; color: inherit;}
button, input:where([type="submit"]) {border-width: 0; font: inherit; color: inherit; background-color: transparent; cursor: pointer; touch-action: manipulation;}
dialog {overscroll-behavior: contain;}
dialog::backdrop {overflow: hidden; overscroll-behavior: contain;}
h1, h2, h3, h4, h5, h6 {font-weight: 500; font-family: Gilroy, serif; letter-spacing: -.03em; 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 !important; text-decoration: none; letter-spacing: -.02em; transition: .3s ease-out;}
.btn1 {border-color: var(--black); border-radius: 1.875rem; color: var(--white); background-color: var(--black);}
.btn1:hover {border-color: var(--tan); color: var(--black); background-color: var(--tan);}
.btn2 {border-color: var(--tan); border-radius: 1.875rem; color: var(--black); background-color: var(--tan);}
.btn2:hover {border-color: var(--black); color: var(--white); background-color: var(--black);}
.btn3 {border-color: var(--tan); border-radius: 1.875rem; color: var(--black); background-color: var(--white);}
.btn3:hover {border-color: var(--black); color: var(--white); background-color: var(--black);}
.btn4 {border-color: var(--black); border-radius: .375rem; color: var(--white); background-color: var(--black);}
.btn4:hover {border-radius: 1.875rem;}
.ctas {display: flex; flex-wrap: wrap;}
.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)) / 2));}
.wys *:where(:not(.btn)) {margin: revert; margin-bottom: 0; padding: revert; list-style: revert;}
.wys > :first-child {margin-top: 0;}

/* components */
pg-videowrap {display: grid;}
pg-videowrap > * {grid-area: 1 / 1;}
pg-videowrap button {place-self: end start; margin: var(--hs); border: 1px solid var(--white); border-radius: 50%; background-color: rgb(0 0 0 / .1); backdrop-filter: blur(5px);}
pg-videowrap video {width: 100%; height: 100%; max-width: none; object-fit: cover;}

/* login */
.main {display: grid;}
.main .loginform {display: grid; align-content: center;}
.main .loginform > * {grid-column: 2;}
.main .loginform h1 {margin-top: 3.75rem; font-size: 2rem; line-height: normal;}
.main .loginform #loginform {display: grid; gap: 1.25rem; margin-top: 2.5rem;}
.main .loginform #loginform label {display: block; margin-bottom: .25rem; font-weight: 300; font-size: .875rem; line-height: 1.2857;}
.main .loginform #loginform input:is([type="password"], [type="text"]) {width: 100%; padding: .75rem 1rem; border: 1px solid var(--tan); border-radius: .5rem; font: inherit; line-height: inherit !important; background-color: var(--tan);}
.main .loginform #loginform .login-password {position: relative;}
.main .loginform #loginform .login-password button {position: absolute; right: 1.25rem; bottom: 0; height: 47px;}
.main .loginform #loginform .login-remember label {display: flex; gap: .625rem; align-items: center; color: var(--gray);}
.main .loginform #loginform #rememberme {width: 1.25rem; height: 1.25rem; border: 1px solid var(--tan); border-radius: 0; appearance: none;}
.main .loginform #loginform #rememberme:checked {background-color: var(--black);}
.main .loginform #loginform .login-submit {padding-top: 1.25rem;}
.main .loginform .pl-nav {display: flex; flex-wrap: wrap; margin-top: 3.75rem; font-size: .875rem; line-height: 1.2857; color: var(--gray);}
.main .loginform .pl-nav li:not(:last-child) {margin-right: 1.25rem; padding-right: 1.25rem; border-right: 1px solid;}
.main .loginform .pl-nav a:hover {text-decoration: none;}
.main .loginform .pl-legal {margin-top: 1.25rem; font-size: .875rem; line-height: 1.2857; color: var(--gray);}
.main .media {background: var(--black);}

@media (orientation: portrait) {

	.main {grid-template: auto auto / 1fr; row-gap: 3.75rem; align-items: start; max-width: 24.375rem; margin-inline: auto; padding: var(--hs);}
	.main .loginform {grid-template-columns: auto min(22.5rem, 100%) auto;}
	.main .media {aspect-ratio: 16 / 10; overflow: clip; border-radius: .75rem;}

}

@media (orientation: landscape) {

	body {overflow-y: hidden;}

	pg-videowrap, pg-videowrap video {height: 100dvh;}

	.main {grid-template: 100dvh / 56.25fr 43.75fr; align-items: start; overflow-y: auto;}
	.main .loginform {grid-template-columns: min(6.875rem, ((100% - var(--midcol)) / 2)) var(--midcol) 1fr; padding-block: var(--hs); --midcol: min(22.5rem, calc(100% - 2 * var(--hs)));}
	.main .media {position: sticky; top: 0; grid-area: 1 / 1; max-height: 100dvh;}

	@media (min-height: 600px) {

		.main {align-items: center; width: 100%; height: 100%;}

	}

}

@media (width >= 90rem) {

	body {display: grid; place-items: center; height: 100dvh;}

}

@media print {

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

}

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

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

	@view-transition {navigation: auto;}

}

@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 */

}