/**
 * Cohen Insurance shared visual foundation.
 *
 * Layout rules are RTL-first and use logical properties so the same primitives
 * remain predictable in the editor and on the front end.
 */

@layer reset, base, components, utilities;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	body {
		margin: 0;
	}

	img,
	picture,
	svg,
	video {
		display: block;
		max-inline-size: 100%;
	}

	img,
	video {
		block-size: auto;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
	}
}

@layer base {
	:root {
		--cohen-page-gutter: clamp(1rem, 4vw, 4.75rem);
		--cohen-section-space: clamp(4rem, 8vw, 8rem);
		--cohen-card-radius: clamp(1.25rem, 2vw, 2rem);
		--cohen-control-height: 3.25rem;
		--cohen-transition: 180ms ease;
		color-scheme: light;
	}

	body {
		overflow-wrap: break-word;
		text-align: start;
		text-rendering: optimizeLegibility;
	}

	::selection {
		background: var(--wp--preset--color--periwinkle);
		color: var(--wp--preset--color--navy);
	}

	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		border-radius: 0.25rem;
		outline: 3px solid var(--wp--preset--color--red);
		outline-offset: 4px;
	}

	a {
		text-underline-offset: 0.18em;
		text-decoration-thickness: 0.08em;
		transition:
			color var(--cohen-transition),
			text-decoration-color var(--cohen-transition);
	}

	a:hover {
		color: var(--wp--preset--color--red);
	}

	:where(h1, h2, h3, h4, h5, h6) {
		margin-block: 0;
		text-wrap: balance;
	}

	p {
		margin-block: 0;
	}

	:is(ul, ol) {
		padding-inline-start: 1.35em;
	}

	hr {
		border: 0;
		border-block-start: 1px solid var(--wp--preset--color--periwinkle);
	}

	.wp-site-blocks {
		display: flex;
		min-block-size: 100dvh;
		flex-direction: column;
		overflow: clip;
	}

	.wp-site-blocks > :where(footer) {
		margin-block-start: auto;
	}

	:where(main) {
		inline-size: 100%;
	}
}

@layer components {
	:where(.wp-element-button, .wp-block-button__link, .cohen-button) {
		align-items: center;
		border: 2px solid var(--wp--preset--color--red);
		cursor: pointer;
		display: inline-flex;
		justify-content: center;
		min-block-size: var(--cohen-control-height);
		min-inline-size: 10rem;
		text-align: center;
		text-decoration: none;
		transition:
			background-color var(--cohen-transition),
			border-color var(--cohen-transition),
			box-shadow var(--cohen-transition),
			color var(--cohen-transition),
			transform var(--cohen-transition);
	}

	:where(.wp-element-button, .wp-block-button__link, .cohen-button):hover {
		background: var(--wp--preset--color--red-dark);
		border-color: var(--wp--preset--color--red-dark);
		color: var(--wp--preset--color--white);
		transform: translateY(-2px);
	}

	.wp-block-button.is-style-cohen-secondary > .wp-block-button__link {
		background: transparent;
		border-color: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--navy);
	}

	.wp-block-button.is-style-cohen-secondary > .wp-block-button__link:hover {
		background: var(--wp--preset--color--navy);
		border-color: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);
	}

	.wp-block-button.is-style-cohen-text > .wp-block-button__link {
		background: transparent;
		border-color: transparent;
		border-radius: 0;
		color: var(--wp--preset--color--navy);
		min-block-size: auto;
		min-inline-size: auto;
		padding: 0;
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--red);
		text-decoration-thickness: 0.15em;
		text-underline-offset: 0.35em;
	}

	.wp-block-button.is-style-cohen-text > .wp-block-button__link:hover {
		background: transparent;
		border-color: transparent;
		color: var(--wp--preset--color--red);
		transform: none;
	}

	.wp-block-group.is-style-cohen-card {
		background: var(--wp--preset--color--white);
		border-radius: var(--cohen-card-radius);
		box-shadow: var(--wp--preset--shadow--card);
		padding: clamp(1.25rem, 3vw, 2.5rem);
	}

	.wp-block-group.is-style-cohen-callout {
		background: var(--wp--preset--color--white);
		border-radius: var(--cohen-card-radius);
		box-shadow: var(--wp--preset--shadow--card);
		padding: clamp(1.5rem, 4vw, 3.5rem);
		rotate: -1deg;
	}

	[dir="rtl"] .wp-block-group.is-style-cohen-callout {
		rotate: 1deg;
	}

	.wp-block-image.is-style-cohen-rounded img {
		border-radius: var(--cohen-card-radius);
	}

	.cohen-section {
		padding-block: var(--cohen-section-space);
	}

	.cohen-section--navy {
		background: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);
	}

	.cohen-section--navy :where(h1, h2, h3, h4, h5, h6, a) {
		color: inherit;
	}

	.cohen-section--periwinkle {
		background: var(--wp--preset--color--periwinkle-pale);
	}

	.cohen-container {
		inline-size: min(calc(100% - (2 * var(--cohen-page-gutter))), var(--wp--style--global--content-size));
		margin-inline: auto;
	}

	.cohen-container--wide {
		inline-size: min(calc(100% - (2 * var(--cohen-page-gutter))), var(--wp--style--global--wide-size));
		margin-inline: auto;
	}

	.cohen-eyebrow {
		color: var(--wp--preset--color--red);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 800;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.cohen-lead {
		font-size: var(--wp--preset--font-size--large);
		line-height: 1.55;
	}
}

@layer utilities {
	.cohen-flow > * + * {
		margin-block-start: var(--cohen-flow-space, var(--wp--preset--spacing--md));
	}

	.cohen-stack {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		gap: var(--cohen-stack-space, var(--wp--preset--spacing--md));
	}

	.cohen-cluster {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--cohen-cluster-space, var(--wp--preset--spacing--sm));
	}

	.cohen-grid {
		display: grid;
		gap: var(--cohen-grid-space, var(--wp--preset--spacing--lg));
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(100%, var(--cohen-grid-min, 16rem)), 1fr)
		);
	}

	.cohen-text-start {
		text-align: start;
	}

	.cohen-text-center {
		text-align: center;
	}

	.cohen-visually-hidden {
		block-size: 1px !important;
		border: 0 !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		inline-size: 1px !important;
		margin: -1px !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 47.999rem) {
	:root {
		--cohen-page-gutter: 1rem;
		--cohen-section-space: clamp(3.5rem, 16vw, 5rem);
	}

	.wp-block-group.is-style-cohen-callout {
		rotate: 0deg;
	}

	[dir="rtl"] .wp-block-group.is-style-cohen-callout {
		rotate: 0deg;
	}

	.wp-block-buttons:not(.is-content-justification-center) {
		align-items: stretch;
	}

	.wp-block-buttons:not(.is-content-justification-center) > .wp-block-button {
		inline-size: 100%;
	}

	.wp-block-buttons:not(.is-content-justification-center) .wp-block-button__link {
		inline-size: 100%;
	}
}

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

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