/*
Theme Name: Breganja
Theme URI: https://breganja.com/
Author: Breganja
Description: Native WordPress block theme for the shared Breganja, Speleologija and Sportsko penjanje web experience.
Version: 0.4.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: breganja
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
	--breganja-radius-control: 4px;
	--breganja-radius-button: 6px;
	--breganja-radius-card: 8px;
	--breganja-motion-fast: 180ms;
	--breganja-motion-base: 220ms;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--breganja-red);
	outline-offset: 3px;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

.skip-link {
	background: var(--wp--preset--color--ink);
	border-radius: var(--breganja-radius-control);
	color: var(--wp--preset--color--off-white);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 600;
	left: var(--wp--preset--spacing--16);
	padding: 0.75rem 1rem;
	position: fixed;
	top: var(--wp--preset--spacing--16);
	transform: translateY(-200%);
	transition: transform var(--breganja-motion-fast) ease;
	z-index: 100000;
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	background: color-mix(in srgb, var(--wp--preset--color--off-white) 96%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--mist);
	position: sticky;
	top: 0;
	z-index: 1000;
	backdrop-filter: blur(12px);
}

body.home .site-header {
	left: 0;
	position: fixed;
	right: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	transition: background-color var(--breganja-motion-base) ease,
		border-color var(--breganja-motion-base) ease,
		box-shadow var(--breganja-motion-base) ease;
}

body.home:not(.breganja-header-compact) .site-header {
	background: linear-gradient(to bottom, rgb(23 25 24 / 82%) 0%, rgb(23 25 24 / 38%) 58%, transparent 100%);
	border-color: rgb(255 255 255 / 18%);
	box-shadow: none;
	color: var(--wp--preset--color--white);
	backdrop-filter: none;
}

body.home:not(.breganja-header-compact) .site-header a,
body.home:not(.breganja-header-compact) .site-header button {
	color: var(--wp--preset--color--white);
}

body.home.breganja-header-compact .site-header {
	background: color-mix(in srgb, var(--wp--preset--color--off-white) 98%, transparent);
	border-color: var(--wp--preset--color--mist);
	box-shadow: 0 8px 24px rgb(23 25 24 / 8%);
	color: var(--wp--preset--color--ink);
	backdrop-filter: blur(14px);
}

body.home.breganja-header-compact .site-header__inner {
	min-height: 4.25rem;
}

body.home:not(.breganja-header-compact) .site-header__inner {
	min-height: 5.5rem;
}

body.home:not(.breganja-header-compact) .site-header .wp-block-site-title {
	text-shadow: 0 1px 16px rgb(23 25 24 / 45%);
}

body.home:not(.breganja-header-compact) .site-header .wp-block-navigation-item__content {
	text-shadow: 0 1px 14px rgb(23 25 24 / 48%);
}

body.home:not(.breganja-header-compact) .site-header .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--ink);
	text-shadow: none;
}

.site-header__inner {
	min-height: 5rem;
	transition: min-height var(--breganja-motion-base) ease;
}

.site-header .wp-block-site-logo img {
	display: block;
	max-height: 2.5rem;
	width: auto;
}

.site-header .wp-block-site-title,
.site-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--montserrat);
}

.site-header .wp-block-site-title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-header .wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.site-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--mist) !important;
	border-radius: var(--breganja-radius-card);
	box-shadow: 0 12px 32px rgb(23 25 24 / 12%);
	padding: 0.5rem;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--breganja-radius-control);
	padding-inline: 0.75rem;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--mist);
}

.wp-block-button__link,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	min-height: 48px;
	transition: background-color var(--breganja-motion-fast) ease,
		color var(--breganja-motion-fast) ease,
		border-color var(--breganja-motion-fast) ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea {
	border: 1px solid var(--wp--preset--color--mist);
	border-radius: var(--breganja-radius-control);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: max(1rem, 16px);
	min-height: 48px;
	padding: 0.75rem 1rem;
	width: 100%;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

.site-footer a {
	color: inherit;
}

.site-footer .wp-block-navigation {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.8125rem;
	font-weight: 500;
}

/* Homepage v0.2 ---------------------------------------------------------- */
.breganja-home section {
	position: relative;
}

.home-section {
	padding-block: clamp(4.5rem, 9vw, 8rem);
}

.home-section__eyebrow,
.home-card__meta,
.home-hero__world {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.home-section__intro {
	max-width: 46rem;
}

.home-hero {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	min-height: 100svh;
}

.home-hero__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-height: 100svh;
}

.home-hero__panel {
	align-items: flex-end;
	display: flex;
	isolation: isolate;
	min-height: 100svh;
	overflow: hidden;
	position: relative;
	transition: filter var(--breganja-motion-slow, 250ms) ease;
}

.home-hero__panel::after {
	background:
		linear-gradient(to top, rgb(23 25 24 / 94%) 0%, rgb(23 25 24 / 58%) 34%, rgb(23 25 24 / 22%) 66%, rgb(23 25 24 / 46%) 100%),
		linear-gradient(to right, rgb(23 25 24 / 32%), transparent 58%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.home-hero__panel::before {
	background: linear-gradient(to bottom, rgb(23 25 24 / 18%), transparent 40%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.home-hero__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform var(--breganja-motion-slow, 250ms) ease;
	width: 100%;
	z-index: -2;
}

.home-hero__panel--speleo .home-hero__image {
	object-position: 52% 48%;
}

.home-hero__panel--spk .home-hero__image {
	object-position: 58% 48%;
}

.home-hero__panel:where(:hover, :focus-within) .home-hero__image {
	transform: scale(1.018);
}

.home-hero__content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	max-width: 46rem;
	padding: clamp(8rem, 14vw, 12rem) clamp(1.5rem, 5vw, 5rem) clamp(5.5rem, 12vh, 8rem);
	width: 100%;
}

.home-hero__title {
	color: var(--wp--preset--color--white) !important;
	font-size: clamp(3rem, 5.4vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.98;
	margin-block: 0.65rem 1.4rem;
	max-width: 9ch;
	text-wrap: balance;
}

.home-hero__world {
	align-items: center;
	display: inline-flex;
	gap: 0.65rem;
	margin: 0;
	text-shadow: 0 1px 16px rgb(23 25 24 / 65%);
}

.home-hero__world,
.home-hero__link {
	color: var(--wp--preset--color--white) !important;
}

.home-hero__world::before {
	background: var(--wp--preset--color--breganja-red);
	content: "";
	height: 2px;
	width: 2rem;
}

.home-hero__link {
	border-bottom: 1px solid rgb(255 255 255 / 72%);
	color: inherit;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	min-height: 48px;
	align-items: center;
	text-decoration: none;
	text-shadow: 0 1px 14px rgb(23 25 24 / 70%);
	transition: border-color var(--breganja-motion-fast) ease,
		transform var(--breganja-motion-fast) ease;
}

.home-hero__link:hover {
	border-color: var(--wp--preset--color--breganja-red);
	color: inherit;
	text-decoration: none;
	transform: translateX(3px);
}

.home-hero__statement {
	background: rgb(23 25 24 / 90%);
	bottom: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 600;
	left: 50%;
	letter-spacing: 0.12em;
	padding: 0.8rem 1.15rem;
	position: absolute;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 3;
}

.home-hero__panel:focus-within {
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--white);
}

.home-current__grid {
	display: grid;
	gap: var(--wp--preset--spacing--32);
	grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 1fr);
}

.home-current__secondary .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--24);
}

.home-story-card {
	border-bottom: 1px solid var(--wp--preset--color--mist);
	height: 100%;
	padding-bottom: var(--wp--preset--spacing--24);
}

.home-story-card .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	margin-bottom: var(--wp--preset--spacing--24);
	overflow: hidden;
}

.home-story-card .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
	transition: transform var(--breganja-motion-base) ease;
	width: 100%;
}

.home-story-card:focus-within .wp-block-post-featured-image img,
.home-story-card:hover .wp-block-post-featured-image img {
	transform: scale(1.015);
}

.home-story-card .wp-block-post-title a {
	text-decoration: none;
}

.home-story-card .wp-block-post-terms,
.home-story-card .wp-block-post-date {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.home-story-card--featured .wp-block-post-title {
	font-size: clamp(2rem, 3.7vw, 3.5rem) !important;
}

.home-signature {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	overflow: hidden;
}

.home-signature__layout {
	display: grid;
	gap: clamp(2rem, 6vw, 6rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(17rem, 0.75fr) minmax(0, 0.9fr);
	min-height: 48rem;
	align-items: center;
}

.home-signature__figure {
	margin: 0;
	position: relative;
}

.home-signature__figure img {
	display: block;
	height: clamp(22rem, 44vw, 37rem);
	object-fit: cover;
	width: 100%;
}

.home-signature__figure--depth {
	align-self: end;
}

.home-signature__figure--height {
	align-self: start;
}

.home-signature__figure figcaption {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-top: 0.75rem;
	text-transform: uppercase;
}

.home-signature__copy {
	text-align: center;
}

.home-intents__grid {
	display: grid;
	gap: var(--wp--preset--spacing--16);
	grid-template-columns: repeat(12, 1fr);
}

.home-intent {
	background: var(--wp--preset--color--mist);
	border: 1px solid transparent;
	border-radius: var(--breganja-radius-card);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 19rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	text-decoration: none;
	transition: background-color var(--breganja-motion-base) ease,
		border-color var(--breganja-motion-base) ease,
		transform var(--breganja-motion-base) ease;
}

.home-intent:nth-child(1),
.home-intent:nth-child(4) {
	grid-column: span 7;
}

.home-intent:nth-child(2),
.home-intent:nth-child(3) {
	grid-column: span 5;
}

.home-intent--spk {
	background: var(--wp--preset--color--off-white);
	border-color: var(--wp--preset--color--mist);
}

.home-intent--speleo {
	background: var(--wp--preset--color--deep-cave);
	color: var(--wp--preset--color--white);
}

.home-intent:hover {
	border-color: var(--wp--preset--color--breganja-red);
	color: inherit;
	transform: translateY(-3px);
}

.home-intent__title {
	font-size: clamp(1.75rem, 3vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
}

.home-people {
	background: var(--wp--preset--color--mist);
}

.home-people__mosaic {
	display: grid;
	gap: var(--wp--preset--spacing--24);
	grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
}

.home-people__visual {
	min-height: clamp(25rem, 50vw, 42rem);
	overflow: hidden;
	position: relative;
}

.home-people__visual img {
	height: 100%;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.home-people__proofs {
	display: grid;
	gap: var(--wp--preset--spacing--24);
}

.home-proof {
	background: var(--wp--preset--color--off-white);
	border-radius: var(--breganja-radius-card);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 12rem;
	padding: var(--wp--preset--spacing--24);
}

.home-proof--dark {
	background: var(--wp--preset--color--forest-dark);
	color: var(--wp--preset--color--white);
}

.home-development-note {
	border-left: 3px solid var(--wp--preset--color--breganja-red);
	font-size: 0.875rem;
	margin-top: var(--wp--preset--spacing--24);
	padding-left: var(--wp--preset--spacing--16);
}

.home-final {
	background: var(--wp--preset--color--deep-cave);
	color: var(--wp--preset--color--white);
	text-align: center;
}

.home-final__paths {
	display: grid;
	gap: var(--wp--preset--spacing--16);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--wp--preset--spacing--48);
}

.home-final__path {
	border: 1px solid rgb(255 255 255 / 38%);
	border-radius: var(--breganja-radius-card);
	color: inherit;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 14rem;
	padding: var(--wp--preset--spacing--32);
	text-decoration: none;
	transition: background-color var(--breganja-motion-base) ease,
		border-color var(--breganja-motion-base) ease;
}

.home-final__path:hover {
	background: rgb(255 255 255 / 8%);
	border-color: var(--wp--preset--color--white);
	color: inherit;
}

.home-final__path strong {
	font-size: clamp(1.75rem, 4vw, 3.5rem);
	line-height: 1.1;
}

.home-final__contact {
	margin-top: var(--wp--preset--spacing--32);
}

.home-final__contact a {
	color: inherit;
}

@media (max-width: 781px) {
	.site-header__inner {
		min-height: 4.5rem;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--off-white);
		color: var(--wp--preset--color--ink);
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--20);
	}

	.site-header .wp-block-navigation__responsive-container-content {
		min-height: calc(100dvh - 3rem);
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		font-size: 1rem;
		min-height: 48px;
	}

	body.home:not(.breganja-header-compact) .site-header .wp-block-navigation__responsive-container.is-menu-open,
	body.home:not(.breganja-header-compact) .site-header .wp-block-navigation__responsive-container.is-menu-open a,
	body.home:not(.breganja-header-compact) .site-header .wp-block-navigation__responsive-container.is-menu-open button {
		color: var(--wp--preset--color--ink);
	}

	.home-hero__split,
	.home-current__grid,
	.home-signature__layout,
	.home-people__mosaic,
	.home-final__paths {
		grid-template-columns: 1fr;
	}

	.home-hero__panel {
		min-height: max(50svh, 28rem);
	}

	.home-hero__content {
		padding: 7.5rem var(--wp--preset--spacing--20) 4.25rem;
	}

	.home-hero__panel--speleo .home-hero__image {
		object-position: 51% 50%;
	}

	.home-hero__panel--spk .home-hero__image {
		object-position: 58% 50%;
	}

	.home-hero__title {
		font-size: clamp(2.75rem, 12vw, 4rem);
	}

	.home-hero__statement {
		display: none;
	}

	.home-signature__layout {
		min-height: 0;
	}

	.home-signature__copy {
		grid-row: 1;
	}

	.home-signature__figure--depth {
		grid-row: 2;
	}

	.home-signature__figure--height {
		grid-row: 3;
	}

	.home-signature__figure img {
		height: min(120vw, 34rem);
	}

	.home-intents__grid {
		grid-template-columns: 1fr;
	}

	.home-intent,
	.home-intent:nth-child(n) {
		grid-column: auto;
		min-height: 15rem;
	}

	.home-intent:nth-child(1) { order: 1; }
	.home-intent:nth-child(2) { order: 2; }
	.home-intent:nth-child(3) { order: 3; }
	.home-intent:nth-child(4) { order: 4; }
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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