/**
 * HOYALAN theme styles.
 *
 * Colours, type and spacing come from theme.json. This file holds only what
 * theme.json cannot express: layout of the custom sections and decoration.
 *
 * Contents: base, header, navigation, hero, pillars, waves, mission, action,
 * call to action, page layout, footer, forms, motion.
 */

/* Base
---------------------------------------------------------------------------- */

:root {
	--hoyalan-header-height: 84px;
	--hoyalan-focus: 3px solid var(--wp--preset--color--gold);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: var(--hoyalan-focus);
	outline-offset: 2px;
}

img {
	height: auto;
	max-width: 100%;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.hoyalan-main {
	flex: 1;
}

.hoyalan-gold {
	color: var(--wp--preset--color--gold);
}

/* Gold is too low in contrast on white, so light sections use the darker shade. */
.hoyalan-gold-text {
	color: var(--wp--preset--color--gold-dark);
}

.hoyalan-eyebrow {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.is-style-hoyalan-ruled {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	justify-content: center;
}

.is-style-hoyalan-ruled::before,
.is-style-hoyalan-ruled::after {
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold));
	content: "";
	flex: 0 1 8rem;
	height: 2px;
}

.is-style-hoyalan-ruled::after {
	transform: scaleX(-1);
}

/* Donate button: heart icon drawn with a mask so it follows the text colour. */
.is-style-hoyalan-donate .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
}

.is-style-hoyalan-donate .wp-block-button__link::before {
	background: currentcolor;
	content: "";
	height: 1.15em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-8.5-5.2-8.5-11.2A4.8 4.8 0 0 1 12 7a4.8 4.8 0 0 1 8.5 2.8C20.5 15.8 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 1.15em;
}

/* Header
---------------------------------------------------------------------------- */

.hoyalan-site-header {
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 rgb(11 37 66 / 0.08);
	position: relative;
	z-index: 100;
}

.hoyalan-header-bar {
	align-items: center;
	gap: 1rem;
	margin-inline: auto;
	max-width: 1304px;
	min-height: var(--hoyalan-header-height);
	padding: 0.5rem clamp(1rem, 3vw, 2rem);
}

.hoyalan-header-actions {
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

.hoyalan-header-bar .wp-block-button__link {
	white-space: nowrap;
}

.hoyalan-brand {
	align-items: center;
	flex: none;
	color: var(--wp--preset--color--navy);
	display: inline-flex;
	gap: 0.75rem;
	text-decoration: none;
}

.hoyalan-brand img {
	flex: none;
	height: 60px;
	width: 60px;
}

.hoyalan-brand__text {
	border-inline-start: 2px solid var(--wp--preset--color--gold);
	display: grid;
	line-height: 1.15;
	padding-inline-start: 0.75rem;
}

.hoyalan-brand__name {
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.hoyalan-brand__tagline {
	font-size: 0.875rem;
	font-weight: 500;
}

.hoyalan-brand--light {
	color: var(--wp--preset--color--white);
}

/* Navigation
---------------------------------------------------------------------------- */

.hoyalan-primary-nav {
	font-weight: 500;
}

/* :where() keeps these low in specificity, so the hover and current rules can win. */
.hoyalan-primary-nav :where(.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content) {
	padding-block: 0.5rem;
	position: relative;
	text-decoration: none;
}

.hoyalan-primary-nav :where(.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content)::after {
	background: var(--wp--preset--color--gold);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
	width: 100%;
}

.hoyalan-primary-nav .wp-block-navigation-item__content:hover::after,
.hoyalan-primary-nav .wp-block-navigation-item__content:focus-visible::after,
.hoyalan-primary-nav .current-menu-item > .wp-block-navigation-item__content::after,
.hoyalan-primary-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.hoyalan-primary-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold-dark);
}

/* Dropdown icons. Each menu item sets its icon through a class added in the menu editor. */
.hoyalan-nav-icon--book {
	--hoyalan-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3Z'/%3E%3C/svg%3E");
}

.hoyalan-nav-icon--target {
	--hoyalan-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12ZM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}

.hoyalan-nav-icon--users {
	--hoyalan-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
}

.hoyalan-primary-nav [class*="hoyalan-nav-icon--"] > .wp-block-navigation-item__content::before {
	background: var(--wp--preset--color--gold-dark);
	content: "";
	display: inline-block;
	height: 1.15em;
	margin-inline-end: 0.6rem;
	mask: var(--hoyalan-nav-icon) center / contain no-repeat;
	vertical-align: -0.2em;
	width: 1.15em;
}

.hoyalan-primary-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--light-gray);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow);
	min-width: 230px;
}

.hoyalan-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1rem;
	text-decoration: none;
}

.hoyalan-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--light-gray);
}

/* Phone menu: flat and left-aligned, rather than floating dropdown cards. */
.hoyalan-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.hoyalan-primary-nav .is-menu-open .wp-block-navigation__container {
	gap: 0.75rem;
}

.hoyalan-primary-nav .is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	min-width: 0;
	padding: 0.25rem 0 0 1rem !important;
}

.hoyalan-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.35rem 0;
}

/* Hero
---------------------------------------------------------------------------- */

.hoyalan-hero.wp-block-cover,
.hoyalan-cta.wp-block-cover {
	padding-inline: max(clamp(1rem, 3vw, 2rem), calc((100% - 1240px) / 2));
}

.hoyalan-hero.wp-block-cover {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.hoyalan-hero.wp-block-cover .wp-block-cover__background.has-background-dim {
	background-color: transparent;
	background-image: linear-gradient(0deg, var(--wp--preset--color--navy) 0%, transparent 30%), linear-gradient(90deg, rgb(11 37 66 / 0.94) 0%, rgb(16 52 91 / 0.8) 48%, rgb(16 52 91 / 0.1) 80%);
}

@media (max-width: 780px) {

	.hoyalan-hero.wp-block-cover .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient(0deg, var(--wp--preset--color--navy) 0%, rgb(16 52 91 / 0.72) 45%, rgb(11 37 66 / 0.72) 100%);
	}
}

.hoyalan-hero .wp-block-cover__image-background {
	object-position: 70% 12%;
}

.hoyalan-hero__copy {
	max-width: 1240px;
}

.hoyalan-hero__title.wp-block-heading {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--display);
	font-style: italic;
	font-weight: 800;
	line-height: 1.12;
	max-width: 15em;
	text-shadow: 0 2px 16px rgb(11 37 66 / 0.5);
	text-transform: uppercase;
}

.hoyalan-hero__title::after {
	background: var(--wp--preset--color--gold);
	content: "";
	display: block;
	height: 4px;
	margin-block-start: 1.25rem;
	width: 5.5rem;
}

/* Pillars
---------------------------------------------------------------------------- */

.hoyalan-pillars.wp-block-group {
	margin-block-start: 0;
	padding-block: 1.25rem 2.5rem;
}

.hoyalan-pillars__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hoyalan-pillars__row > * {
	margin-block: 0;
}

@media (min-width: 720px) {

	.hoyalan-pillars__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {

	.hoyalan-pillars__row {
		grid-template-columns: repeat(6, auto);
		justify-content: space-between;
	}

	.hoyalan-pillars__row > * + * {
		border-inline-start: 1px solid rgb(255 255 255 / 0.25);
		padding-inline-start: 1.25rem;
	}
}

/* Waves: a gold curve that overlaps the section above.
---------------------------------------------------------------------------- */

.hoyalan-wave {
	position: relative;
}

.hoyalan-wave::before {
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	height: clamp(28px, 4.5vw, 64px);
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateY(-60%);
	z-index: 2;
}

.hoyalan-wave--white::before {
	background-image: url(../images/wave-white.svg);
}

.hoyalan-wave--navy::before {
	background-image: url(../images/wave-navy.svg);
}

.hoyalan-wave--line::before {
	background-image: url(../images/wave-line.svg);
}

/* Mission
---------------------------------------------------------------------------- */

.hoyalan-mission.wp-block-group {
	background: var(--wp--preset--color--white);
	display: grid;
	gap: 1.5rem;
	margin-block-start: 0;
	padding-block: 2.5rem 3rem;
}

.hoyalan-mission > * {
	margin-block: 0;
}

.hoyalan-mission__copy {
	margin-inline: auto;
	max-width: 620px;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.hoyalan-mission__copy > .wp-block-heading {
	margin-block: 0.5rem 1.25rem;
}

.hoyalan-mission__photo img {
	aspect-ratio: 3 / 2;
	display: block;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 1080px) {

	.hoyalan-mission.wp-block-group {
		align-items: stretch;
		gap: 0;
		grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr);
		padding-block: 0;
	}

	.hoyalan-mission__copy {
		align-self: center;
		padding-block: 4rem 3.5rem;
	}

	.hoyalan-mission__photo {
		background: var(--wp--preset--color--gold);
		height: 100%;
		margin: 0;
	}

	.hoyalan-mission__photo img {
		aspect-ratio: auto;
		height: 100%;
	}

	.hoyalan-mission__photo--left {
		clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
	}

	.hoyalan-mission__photo--left img {
		clip-path: polygon(0 0, calc(100% - 8px) 0, calc(80% - 8px) 100%, 0 100%);
	}

	.hoyalan-mission__photo--right {
		clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
	}

	.hoyalan-mission__photo--right img {
		clip-path: polygon(calc(20% + 8px) 0, 100% 0, 100% 100%, 8px 100%);
	}
}

/* HRFF in action
---------------------------------------------------------------------------- */

.hoyalan-action.wp-block-group {
	margin-block-start: 0;
	padding-block: clamp(3.5rem, 6vw, 5rem);
}

.hoyalan-action__title.wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hoyalan-action .wp-block-hoyalan-activities {
	margin-block-start: 2rem;
}

/* Call to action
---------------------------------------------------------------------------- */

.hoyalan-cta.wp-block-cover {
	margin-block-start: 0;
	overflow: visible;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.hoyalan-cta.wp-block-cover .wp-block-cover__background.has-background-dim {
	background-color: transparent;
	background-image: linear-gradient(90deg, rgb(11 37 66 / 0.15) 0%, rgb(11 37 66 / 0.55) 45%, rgb(11 37 66 / 0.88) 100%);
}

.hoyalan-cta .wp-block-cover__inner-container {
	max-width: 560px;
}

.hoyalan-cta__title.wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xx-large);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
}

/* Page layout
---------------------------------------------------------------------------- */

.hoyalan-page-hero.wp-block-cover {
	margin-block-start: 0;
}

.hoyalan-page-hero .wp-block-post-title {
	margin-block: 0;
}

.hoyalan-page-hero .wp-block-post-title::after {
	background: var(--wp--preset--color--gold);
	content: "";
	display: block;
	height: 4px;
	margin-block-start: 1rem;
	width: 5rem;
}

.hoyalan-page-content {
	padding-block: var(--wp--preset--spacing--60);
}

.hoyalan-post-meta {
	padding-block-start: var(--wp--preset--spacing--40);
}

/* Leave room for the wave, which overlaps upward. */
.hoyalan-page-content > .hoyalan-cta.wp-block-cover {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Remove the gap when a full-width band ends the page, such as a call to action. */
.hoyalan-page-content:has(> .alignfull:last-child) {
	padding-block-end: 0;
}

.hoyalan-page-content > .alignfull:last-child {
	margin-block-end: 0;
}

.is-style-hoyalan-panel {
	background: var(--wp--preset--color--light-gray);
	border-inline-start: 4px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-image img {
	border-radius: var(--wp--custom--radius);
}

.hoyalan-mission__photo.wp-block-image img {
	border-radius: 0;
}

/* Footer
---------------------------------------------------------------------------- */

.hoyalan-footer.wp-block-group {
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: 0;
	padding-block: clamp(3rem, 5vw, 4rem) 1.5rem;
}

.hoyalan-footer a {
	color: var(--wp--preset--color--white);
}

.hoyalan-footer-nav a {
	text-decoration: none;
}

.hoyalan-footer-nav a:hover {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}

.hoyalan-footer .hoyalan-brand__name {
	font-size: 1.375rem;
}

.hoyalan-footer__grid {
	display: grid;
	gap: 2.5rem;
}

.hoyalan-footer__grid > * {
	margin-block: 0;
}

.hoyalan-footer__about p {
	margin-block-start: 1rem;
	max-width: 36ch;
}

.hoyalan-footer__heading.wp-block-heading {
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-block-end: 1rem;
	text-transform: uppercase;
}

.hoyalan-footer-nav {
	gap: 0.5rem;
}

.hoyalan-footer__legal.wp-block-group {
	border-block-start: 1px solid rgb(255 255 255 / 0.2);
	gap: 0.5rem 2rem;
	margin-block-start: 2.5rem;
	padding-block-start: 1.25rem;
}

.hoyalan-footer__legal p {
	font-size: 0.875rem;
	margin: 0;
}

@media (min-width: 780px) {

	.hoyalan-footer__grid {
		grid-template-columns: 2fr 1fr 1.25fr;
	}
}

/* Forms (Fluent Forms)
---------------------------------------------------------------------------- */

.fluentform .ff-btn-submit {
	background: var(--wp--preset--color--gold) !important;
	border-radius: var(--wp--custom--radius) !important;
	color: var(--wp--preset--color--navy-deep) !important;
	font-weight: 700;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus {
	background: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--white) !important;
	opacity: 1;
}

/* Medium screens: core only collapses the menu below 600px, but it needs about 1200px. */
@media (min-width: 600px) and (max-width: 1199px) {

	.hoyalan-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.hoyalan-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none;
	}
}

/* Small screens: mobile header
---------------------------------------------------------------------------- */

@media (max-width: 599px) {

	.hoyalan-brand img {
		height: 44px;
		width: 44px;
	}

	.hoyalan-header-bar .hoyalan-brand__name {
		font-size: 1.125rem;
	}

	.hoyalan-header-bar .hoyalan-brand__tagline {
		display: none;
	}

	.hoyalan-header-bar .wp-block-button__link {
		font-size: var(--wp--preset--font-size--small);
		padding: 0.5rem 0.75rem;
	}
}

/* Motion
---------------------------------------------------------------------------- */

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

	* {
		animation: none !important;
		transition: none !important;
	}
}