/*
 * TRÆINFORMATION 2026 DESIGN SYSTEM
 * Refactored to use Modern CSS Scoping (@scope)
 * Status: Baseline 2024 / Widely Available
 */
:root {
	--gp-font--akko-rounded-pro: "Akko Rounded Pro", system-ui, sans-serif;
	--wp--preset--line-height--body: 1.5;
	--staff-member-max-card-width: 100%;
}

/*
 * CORE ALIGNMENT REPAIR
 * Placed outside layers for maximum compatibility with WP Editor Style parser.
 */

/* 1. Indent aligned blocks in the editor so they stay in the 1200px column */
@media (min-width: 1200px) {

	.is-root-container > .alignleft {
		margin-left: calc((100% - 1200px) / 2) !important;
	}

	.is-root-container > .alignright {
		margin-right: calc((100% - 1200px) / 2) !important;
	}
}

/* 2. Basic float & margin rules (Universal) */
.alignleft {
	float: left;
	margin-right: var(--wp--preset--spacing--size-20);
	margin-bottom: var(--wp--preset--spacing--size-20);
	max-width: 100%;
}

.alignright {
	float: right;
	margin-left: var(--wp--preset--spacing--size-20);
	margin-bottom: var(--wp--preset--spacing--size-20);
	max-width: 100%;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--wp--preset--spacing--size-20);
	max-width: 100%;
}

/* 3. Sync Wide alignment to 1200px (Prevents sticking out on frontend) */
.site-content .alignwide {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1200px !important;
	width: 100% !important;
}

/* 4. UNIVERSAL BUTTON SYSTEM
   (Excluding Header to allow native GP/GB styling) */
:where(:not(.gb-site-header *)) .wp-block-button__link,
:where(:not(.gb-site-header *)) .gb-button,
:where(:not(.gb-site-header *)) a.gb-text[class*="is-style-"],
:where(:not(.gb-site-header *)) a.gb-headline[class*="is-style-"],
:where(:not(.gb-site-header *)) .button,
:where(:not(.gb-site-header *)) button,
:where(:not(.gb-site-header *)) .btn,
:where(:not(.gb-site-header *)) [type="button"],
:where(:not(.gb-site-header *)) [type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Akko Rounded Pro", system-ui, sans-serif;
	font-size: var(--wp--preset--font-size--size-1, 20px);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 3px solid #d09b54; /* Fallback for --wp--preset--color--accent */
	border-color: var(--wp--preset--color--accent);
	background-color: #d09b54;
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	color: var(--wp--preset--color--white);
	padding: 15px 40px;
	border-radius: 0;
	transition: all 0.2s ease-in-out;
	box-sizing: border-box;
}

:where(:not(.gb-site-header *)) .button:hover,
:where(:not(.gb-site-header *)) button:hover,
:where(:not(.gb-site-header *)) .btn:hover,
:where(:not(.gb-site-header *)) [type="button"]:hover,
:where(:not(.gb-site-header *)) [type="submit"]:hover {
	background-color: #b98843; /* Fallback for --wp--preset--color--accent-hover */
	background-color: var(--wp--preset--color--accent-hover);
	border-color: var(--wp--preset--color--accent-hover);
	color: #fff;
}

/* Secondary / Outline Variation */
:where(:not(.gb-site-header *)) :is(.button, button, .btn, a).is-style-outline,
:where(:not(.gb-site-header *)) .btn-reset {
	background-color: #fff !important;
	background-color: var(--wp--preset--color--white) !important;
	color: #000 !important;
	color: var(--wp--preset--color--black) !important;
	border-color: #d09b54 !important;
	border-color: var(--wp--preset--color--accent) !important;
}

:where(:not(.gb-site-header *)) :is(.button, button, .btn, a).is-style-outline:hover,
:where(:not(.gb-site-header *)) .btn-reset:hover {
	background-color: #d09b54 !important;
	background-color: var(--wp--preset--color--accent) !important;
	color: #fff !important;
}

/*
 * GLOBAL BODY OVERRIDE
 * Must be unlayered to win over GP's unlayered CSS.
 */
html {
	scrollbar-gutter: stable;
}

body {
	min-block-size: 100svh;
}

html body {
	font-family: var(--gp-font--akko-rounded-pro);
	font-size: var(--wp--preset--font-size--size-1);
	line-height: var(--wp--preset--line-height--body, 1.5);
	font-weight: 300;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--neutral-dark);
}

/*
 * BLOCK EDITOR SKIN
 * Visual override only. No layout skewing/padding.
 */
.editor-styles-wrapper {
	background-color: var(--wp--preset--color--white);
}

/**
 * STAFF CARD COMPONENT
 * Used for group and single staff memeber card display.
 */
.traeinfo-staff-card {
	max-width: var(--staff-member-max-card-width);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--size-30);
}

.traeinfo-staff-card > *,
.traeinfo-staff-card__content > * {
	margin-block: 0;
}

.traeinfo-staff-card__image {
	overflow: clip;
	aspect-ratio: 19 / 15;
	width: 100%;
	filter: grayscale();
}

.traeinfo-staff-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.traeinfo-staff-card__name {
	font-size: var(--wp--preset--font-size--size-3);
	font-weight: var(--wp--preset--font-weight--light, 300);
	margin-inline: 0;
}

.traeinfo-staff-card__content {
	font-size: var(--wp--preset--font-size--size-1);
}

.traeinfo-staff-card__company > span {
	display: block;
}

/**
 * MEMBER SUPPORT & REGISTRATION FORMS
 * Shared styles for both forms, which have identical structure.
 */

.member-support-form,
.member-registration-form {
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--size-30);
	margin-block-end: var(--wp--preset--spacing--size-30);
}

.member-support-form__columns,
.member-registration-form__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--wp--style--global--content-size) / 3), 1fr));
	column-gap: var(--wp--preset--spacing--size-30);
	row-gap: var(--wp--preset--spacing--size-20);
}

.member-support-form__column,
.member-registration-form__column {
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--size-20);
}

.member-support-form__row,
.member-registration-form__row {
	display: grid;
	grid-template-columns: minmax(150px, 1fr) 2fr;
	column-gap: var(--wp--preset--spacing--size-20);
}

.member-support-form__field,
.member-registration-form__field {
	border: 1px solid var(--wp--preset--color--neutral-slate);
	padding: calc(var(--wp--preset--spacing--size-20) / 2);
}

.member-support-form__field > input,
.member-support-form__field > textarea,
.member-support-form__field > select,
.member-registration-form__field > input,
.member-registration-form__field > select {
	border: none;
	padding: 0;
	color: var(--wp--preset--color--neutral-slate);
	font-size: var(--wp--preset--font-size--size-1-75);
}

.member-support-form__field > ::placeholder,
.member-registration-form__field > ::placeholder {
	color: var(--wp--preset--color--neutral-slate);
}

.member-support-form__label,
.member-registration-form__label,
.member-registration-form__field--checkbox > label,
.member-support-form__mandatory-note > strong,
.member-registration-form__mandatory-note > strong {
	font-size: var(--wp--preset--font-size--size-1);
	font-weight: 300;
}

.member-registration-form__field--checkbox {
	border: none;
}

.member-registration-form__label {
	display: inline-flex;
	align-items: center;
}

.member-registration-form__field input[type="checkbox"] {
	margin-inline-end: calc(var(--wp--preset--spacing--size-40) / 2);
	aspect-ratio: 1 / 1;
	width: var(--wp--preset--font-size--size-1);
}

.member-support-form__actions,
.member-registration-form__actions {
	display: flex;
	justify-content: space-between;
	column-gap: var(--wp--preset--spacing--size-40);
}

@layer base, design-system;

@layer base {

	/* AKKO ROUNDED PRO - DESIGN SYSTEM FONT */
	@font-face {
		font-family: "Akko Rounded Pro";
		src: url(../fonts/AkkoRoundedPro-Light.woff2) format("woff2");
		font-weight: 300;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Akko Rounded Pro";
		src: url(../fonts/AkkoRoundedPro-Regular.woff2) format("woff2");
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Akko Rounded Pro";
		src: url(../fonts/AkkoRoundedPro-Medium.woff2) format("woff2");
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Akko Rounded Pro";
		src: url(../fonts/AkkoRoundedPro-Bold.woff2) format("woff2");
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}

	/*
	 * SITE LOGO - THEME LEVEL
	 * Using 'body' to win specificity over WP Core (.wp-block-site-logo img)
	 * naturally.
	 * Using a set width of 206px to prevent collapse.
	 */
	body :is(.site-logo, .wp-block-site-logo) img {
		width: 206px;
		height: auto;
		display: block;
	}
}

/* stylelint-disable scss/at-rule-no-unknown */
@layer design-system {

	/*
	 * SCOPE: Target everything in the site wrapper
	 * LIMIT: Stop at the GenerateBlocks Site Header and custom UI islands
	 */
	@scope (.site, .is-root-container) to (.gb-site-header, .is-custom-ui) {

		/* ALIGNMENT SYSTEM */
		.alignleft {
			float: left;
			margin-right: var(--wp--preset--spacing--size-20);
			margin-bottom: var(--wp--preset--spacing--size-20);
			max-width: 100%;
		}

		.alignright {
			float: right;
			margin-left: var(--wp--preset--spacing--size-20);
			margin-bottom: var(--wp--preset--spacing--size-20);
			max-width: 100%;
		}

		.aligncenter {
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: var(--wp--preset--spacing--size-20);
			max-width: 100%;
			clear: both;
		}

		/* TEXTUAL CONTENT CAP (80ch) - Frontend Only */
		:is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6):not([class*="align"]) {
			max-width: 80ch;
			margin-inline: auto;
		}
	}
}