/* One Web Nerd additions to Ollie's native design system.
 * Every component uses Ollie's existing palette roles so switching an
 * Ollie palette recolors the complete system.
 */

/* Sections --------------------------------------------------------------- */
.own-section-sm,
.own-section-compact {
	padding-block: var(--wp--custom--spacing--section-small);
}

.own-section,
.own-section-standard {
	padding-block: var(--wp--custom--spacing--section);
}

.own-section-lg,
.own-section-spacious {
	padding-block: var(--wp--custom--spacing--section-large);
}

.own-section-default {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
}

.own-section-soft {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--main);
}

.own-section-contrast {
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

.own-section-accent {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.own-section-accent-alt {
	background: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--primary-alt-accent);
}

.own-section-contrast :is(h1, h2, h3, h4, h5, h6),
.own-section-accent :is(h1, h2, h3, h4, h5, h6),
.own-section-accent-alt :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Links and navigation --------------------------------------------------- */
a:not(.wp-block-button__link) {
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--primary-alt-accent);
	text-decoration: none;
}

body .wp-block-navigation a.wp-block-navigation-item__content {
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

body .wp-block-navigation a.wp-block-navigation-item__content:hover,
body .wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content,
body .wp-block-navigation .current-menu-ancestor > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-alt-accent);
	text-decoration: none;
}

.has-main-background-color a:not(.wp-block-button__link):hover,
.has-primary-alt-accent-background-color a:not(.wp-block-button__link):hover,
.own-section-contrast a:not(.wp-block-button__link):hover,
.wp-block-group.is-style-own-card-brand a:not(.wp-block-button__link):hover,
.wp-block-group.is-style-own-card-brand-alt-accent a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--main-accent) !important;
}

a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Text treatments -------------------------------------------------------- */
p.is-style-own-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

p.is-style-own-chip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--primary-alt-accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
}

.wp-block-group.is-layout-flex > p.is-style-own-chip {
	margin-inline: 0 !important;
}

/* Core block defaults ---------------------------------------------------- */
.wp-block-buttons {
	gap: var(--wp--preset--spacing--s);
}

.wp-block-columns {
	column-gap: var(--wp--preset--spacing--xl);
	row-gap: var(--wp--preset--spacing--l);
}

.wp-block-image img {
	display: block;
}

:where(p, li, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

/* Width exceptions ------------------------------------------------------- */
.own-width-narrow {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
}

.own-width-max {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

/* Buttons ---------------------------------------------------------------- */
.wp-block-button {
	--own-button-bg: var(--wp--preset--color--main);
	--own-button-text: var(--wp--preset--color--base);
	--own-button-border: var(--wp--preset--color--main);
	--own-button-hover-bg: color-mix(in srgb, var(--own-button-bg) 84%, black);
	--own-button-hover-text: var(--own-button-text);
	--own-button-hover-border: var(--own-button-hover-bg);
}

.wp-block-button .wp-block-button__link {
	background: var(--own-button-bg);
	border: 1px solid var(--own-button-border);
	border-radius: var(--wp--preset--border-radius--sm);
	color: var(--own-button-text);
	transition:
		transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.wp-block-button .wp-block-button__link:hover {
	background: var(--own-button-hover-bg);
	border-color: var(--own-button-hover-border);
	color: var(--own-button-hover-text);
	transform: translateY(-1px);
}

.wp-block-button.is-style-fill,
.wp-block-button:not([class*="is-style-"]) {
	--own-button-bg: var(--wp--preset--color--main);
	--own-button-text: var(--wp--preset--color--base);
	--own-button-border: var(--wp--preset--color--main);
}

.wp-block-button.is-style-outline {
	--own-button-bg: transparent;
	--own-button-text: var(--wp--preset--color--main);
	--own-button-border: var(--wp--preset--color--main);
	--own-button-hover-bg: var(--wp--preset--color--main);
	--own-button-hover-text: var(--wp--preset--color--base);
	--own-button-hover-border: var(--wp--preset--color--main);
}

.wp-block-button.is-style-own-accent,
.wp-block-button.is-style-button-brand {
	--own-button-bg: var(--wp--preset--color--primary);
	--own-button-text: var(--wp--preset--color--base);
	--own-button-border: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-own-accent-alt,
.wp-block-button.is-style-button-brand-alt {
	--own-button-bg: var(--wp--preset--color--primary-alt);
	--own-button-text: var(--wp--preset--color--primary-alt-accent);
	--own-button-border: var(--wp--preset--color--primary-alt);
}

.wp-block-button.is-style-button-dark {
	--own-button-bg: var(--wp--preset--color--main);
	--own-button-text: var(--wp--preset--color--base);
	--own-button-border: var(--wp--preset--color--main);
}

.wp-block-button.is-style-button-light {
	--own-button-bg: var(--wp--preset--color--base);
	--own-button-text: var(--wp--preset--color--main);
	--own-button-border: var(--wp--preset--color--border-light);
}

.wp-block-button.is-style-secondary-button {
	--own-button-bg: var(--wp--preset--color--tertiary);
	--own-button-text: var(--wp--preset--color--main);
	--own-button-border: var(--wp--preset--color--border-light);
}

.wp-block-button.is-style-own-text {
	--own-button-bg: transparent;
	--own-button-text: var(--wp--preset--color--primary);
	--own-button-border: transparent;
	--own-button-hover-bg: transparent;
	--own-button-hover-text: var(--wp--preset--color--primary-alt-accent);
	--own-button-hover-border: transparent;
}

.wp-block-button.is-style-own-text .wp-block-button__link {
	border: 0;
	border-radius: 0;
	padding: 0;
}

.own-section-contrast .wp-block-button:is(.is-style-fill, :not([class*="is-style-"])),
.own-section-accent .wp-block-button:is(.is-style-fill, :not([class*="is-style-"])),
.wp-block-group.is-style-own-card-brand .wp-block-button:is(.is-style-fill, :not([class*="is-style-"])),
.wp-block-group.is-style-own-card-brand-alt-accent .wp-block-button:is(.is-style-fill, :not([class*="is-style-"])) {
	--own-button-bg: var(--wp--preset--color--base);
	--own-button-text: var(--wp--preset--color--main);
	--own-button-border: var(--wp--preset--color--base);
}

.own-section-contrast .wp-block-button.is-style-outline,
.own-section-accent .wp-block-button.is-style-outline,
.wp-block-group.is-style-own-card-brand .wp-block-button.is-style-outline,
.wp-block-group.is-style-own-card-brand-alt-accent .wp-block-button.is-style-outline {
	--own-button-bg: transparent;
	--own-button-text: var(--wp--preset--color--base);
	--own-button-border: var(--wp--preset--color--base);
	--own-button-hover-bg: var(--wp--preset--color--base);
	--own-button-hover-text: var(--wp--preset--color--main);
	--own-button-hover-border: var(--wp--preset--color--base);
}

.own-section-contrast .wp-block-button.is-style-own-text,
.own-section-accent .wp-block-button.is-style-own-text,
.wp-block-group.is-style-own-card-brand .wp-block-button.is-style-own-text,
.wp-block-group.is-style-own-card-brand-alt-accent .wp-block-button.is-style-own-text {
	--own-button-text: var(--wp--preset--color--base);
	--own-button-hover-text: var(--wp--preset--color--main-accent);
}

.wp-block-button.own-button-sm .wp-block-button__link {
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
}

.wp-block-button.own-button-lg .wp-block-button__link {
	font-size: var(--wp--preset--font-size--lg);
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--xl);
}

.wp-block-button.is-style-own-text:is(.own-button-sm, .own-button-lg) .wp-block-button__link {
	padding: 0;
}

/* Cards ------------------------------------------------------------------ */
.wp-block-group:is(.is-style-own-card, .is-style-own-card-soft, .is-style-own-card-brand, .is-style-own-card-accent, .is-style-own-card-brand-alt-accent) {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--md);
	padding: var(--wp--custom--spacing--card);
}

.wp-block-group.is-style-own-card {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
}

.wp-block-group.is-style-own-card-soft {
	background: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--main);
}

.wp-block-group.is-style-own-card-brand {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-group.is-style-own-card-accent {
	background: var(--wp--preset--color--primary-alt);
	border-color: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--primary-alt-accent);
}

.wp-block-group.is-style-own-card-brand-alt-accent {
	background: var(--wp--preset--color--primary-alt-accent);
	border-color: var(--wp--preset--color--primary-alt-accent);
	color: var(--wp--preset--color--primary-alt);
}

.wp-block-group:is(.is-style-own-card-brand, .is-style-own-card-accent, .is-style-own-card-brand-alt-accent) :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Large service-page label: vertical on desktop, horizontal on mobile. */
.own-vertical-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-size: clamp(3rem, 7vw, 5rem);
	font-weight: 800;
	line-height: 1;
}

.own-service-label {
	border-right: 1px solid currentColor;
}

/* Combinable padding utilities. These can sit alongside any Card style. */
.wp-block-group.own-pad-compact {
	padding: var(--wp--custom--spacing--card-compact);
}

.wp-block-group.own-pad-standard {
	padding: var(--wp--custom--spacing--card);
}

.wp-block-group.own-pad-spacious {
	padding: var(--wp--custom--spacing--card-spacious);
}

/* Opt-in behavior for CTAs that should become full-width on phones. */
@media (max-width: 781px) {
	.own-vertical-label {
		writing-mode: horizontal-tb;
		transform: none;
	}

	.own-service-label {
		border-right: 0;
		border-bottom: 1px solid currentColor;
		padding-bottom: 1rem;
	}

	.wp-block-buttons.own-buttons-mobile-full {
		align-items: stretch;
		flex-direction: column;
	}

	.wp-block-buttons.own-buttons-mobile-full,
	.wp-block-buttons.own-buttons-mobile-full > .wp-block-button,
	.wp-block-buttons.own-buttons-mobile-full .wp-block-button__link,
	.wp-block-button.own-button-mobile-full,
	.wp-block-button.own-button-mobile-full .wp-block-button__link,
	.wp-block-button.own-buttons-mobile-full,
	.wp-block-button.own-buttons-mobile-full .wp-block-button__link {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	.wp-block-buttons.own-buttons-mobile-full .wp-block-button__link,
	.wp-block-button.own-button-mobile-full .wp-block-button__link,
	.wp-block-button.own-buttons-mobile-full .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	a:not(.wp-block-button__link),
	.wp-block-button .wp-block-button__link { transition: none; }
	.wp-block-button .wp-block-button__link:hover { transform: none; }
}