/*
 * Aavrit Packaging — supporting styles
 * ------------------------------------
 * theme.json owns colour, type and spacing. This file only covers the things
 * theme.json cannot express: the sticky header behaviour, the custom block
 * styles registered in functions.php, and a handful of responsive corrections.
 */

/* ---------------------------------------------------------------
   1. Sticky header
   --------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 200ms ease;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin-bar-height, 32px);
}

.aavrit-header-scrolled .wp-site-blocks > header.wp-block-template-part {
	box-shadow: 0 1px 0 rgba(20, 52, 43, 0.06), 0 18px 40px -32px rgba(20, 52, 43, 0.5);
}

/* The utility strip folds away once you start reading, leaving a slim bar. */
.aavrit-utility-bar {
	overflow: hidden;
	max-height: 4rem;
	transition: max-height 220ms ease, padding 220ms ease, opacity 160ms ease;
}

.aavrit-header-scrolled .aavrit-utility-bar {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

.aavrit-utility-bar a {
	color: inherit;
	text-decoration: none;
}

.aavrit-utility-bar a:hover {
	text-decoration: underline;
}

.aavrit-wordmark-sub {
	text-transform: uppercase;
}

/* Navigation */
.aavrit-navbar .wp-block-navigation .wp-block-navigation-item__content {
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.aavrit-navbar .wp-block-navigation .wp-block-navigation-item__content:hover,
.aavrit-navbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--kraft);
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------
   2. Custom block styles
   --------------------------------------------------------------- */

/* Section label: a short kraft rule and a sentence-case line. */
.is-style-aavrit-label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.is-style-aavrit-label::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--kraft);
}

.aavrit-dark .is-style-aavrit-label {
	color: var(--wp--preset--color--sage);
}

/* Lead paragraph */
.is-style-aavrit-lead {
	max-width: 62ch;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	line-height: 1.68;
	color: var(--wp--preset--color--muted);
}

/* Spec line: label on the left, value on the right, hairline above. */
.is-style-aavrit-spec {
	margin-top: 0.6rem;
	margin-bottom: 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.is-style-aavrit-spec:has(> strong) {
	display: grid;
	grid-template-columns: 5.25rem 1fr;
	gap: 0.85rem;
	align-items: baseline;
}

.is-style-aavrit-spec strong {
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

/* Spec card */
.is-style-aavrit-card {
	height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.is-style-aavrit-card:has(a):hover {
	border-color: var(--wp--preset--color--sage);
}

/* Kraft panel */
.is-style-aavrit-panel {
	border-radius: 8px;
	border-left: 3px solid var(--wp--preset--color--kraft);
}

/* Ruled block */
.is-style-aavrit-bordered {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Tick list */
.is-style-aavrit-ticks {
	list-style: none;
	padding-left: 0;
}

.is-style-aavrit-ticks li {
	position: relative;
	margin-bottom: 0.6rem;
	padding-left: 1.65rem;
}

.is-style-aavrit-ticks li::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 0.55em;
	width: 0.5rem;
	height: 0.28rem;
	border-left: 2px solid var(--wp--preset--color--kraft);
	border-bottom: 2px solid var(--wp--preset--color--kraft);
	transform: rotate(-45deg);
}

/* Illustration */
.is-style-aavrit-illustration img {
	display: block;
	height: auto;
}

.aavrit-hero-art img {
	width: 100%;
	max-width: 520px;
}

/* Ruled grid: hairlines between columns instead of boxed cards. */
.is-style-aavrit-grid-rules > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: var(--wp--preset--spacing--50);
}

.aavrit-dark .is-style-aavrit-grid-rules > .wp-block-column + .wp-block-column {
	border-left-color: rgba(232, 238, 231, 0.16);
}

/* ---------------------------------------------------------------
   3. Sections
   --------------------------------------------------------------- */

.aavrit-step-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--kraft);
}

.aavrit-process .aavrit-step:first-of-type {
	border-top: 0 !important;
	padding-top: 0 !important;
}

/* FAQ */
.aavrit-faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
}

.aavrit-faq-item summary::-webkit-details-marker {
	display: none;
}

.aavrit-faq-item summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--text);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--kraft);
}

.aavrit-faq-item[open] summary::after {
	content: "\2013";
}

.aavrit-faq-item:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Dark panels */
.aavrit-dark a {
	color: var(--wp--preset--color--sage);
}

.aavrit-dark a:hover {
	color: var(--wp--preset--color--kraft);
}

.aavrit-btn-light .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: rgba(252, 249, 244, 0.45);
	background-color: transparent;
}

.aavrit-btn-light .wp-block-button__link:hover,
.aavrit-btn-light .wp-block-button__link:focus {
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

/* Footer */
.aavrit-footer a {
	color: var(--wp--preset--color--sage-light);
	text-decoration: none;
	border-bottom: 1px solid rgba(232, 238, 231, 0.22);
}

.aavrit-footer a:hover {
	color: var(--wp--preset--color--kraft);
	border-bottom-color: var(--wp--preset--color--kraft);
}

.aavrit-footer .aavrit-footer-list {
	list-style: none;
	padding-left: 0;
}

.aavrit-footer .wp-block-button__link {
	border-bottom: 0;
}

/* Blog cards */
.aavrit-post-grid .wp-block-post-title a:hover {
	color: var(--wp--preset--color--kraft);
}

/* ---------------------------------------------------------------
   4. Forms, focus and accessibility
   --------------------------------------------------------------- */

:where(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], textarea, select) {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 0.75rem 0.9rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--kraft);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------
   5. Responsive corrections
   --------------------------------------------------------------- */

@media (max-width: 781px) {
	.wp-block-columns.is-style-aavrit-grid-rules > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--40);
	}

	.aavrit-dark .wp-block-columns.is-style-aavrit-grid-rules > .wp-block-column + .wp-block-column {
		border-top-color: rgba(232, 238, 231, 0.16);
	}

	/* Keep the step number beside its title rather than stacking three deep. */
	.wp-block-columns.aavrit-step > .wp-block-column:first-child {
		flex-basis: 3rem !important;
		flex-grow: 0;
	}

	.wp-block-columns.aavrit-step > .wp-block-column:nth-child(2) {
		flex-basis: calc(100% - 4rem) !important;
	}

	.wp-block-columns.aavrit-step > .wp-block-column:nth-child(3) {
		flex-basis: 100% !important;
		margin-top: var(--wp--preset--spacing--20);
	}

	.aavrit-hero-art img {
		max-width: 340px;
		margin-inline: auto;
	}

	.aavrit-faq-item summary {
		font-size: 1.0625rem;
	}
}

@media (max-width: 600px) {
	.aavrit-navbar .wp-block-buttons.aavrit-nav-cta {
		display: none;
	}
}