/**
 * Tasslyckan — front end styles.
 *
 * theme.json supplies every colour, size and spacing value as a CSS custom
 * property. This sheet only describes shapes theme.json has no vocabulary
 * for: the page frame, the grids, hover behaviour and the shop cards.
 *
 * Everything reads from --wp--preset--* / --wp--custom--*, so retuning the
 * design means editing theme.json, not this file.
 */

/* --------------------------------------------------------------------------
   1. Page frame
   The design presents the site as a sheet of paper floating on a warmer
   backdrop. There is only room for that once the viewport is wider than the
   sheet plus a margin, so below that the sheet goes edge to edge.
   -------------------------------------------------------------------------- */

body {
	background-color: var(--wp--preset--color--page);
}

.wp-site-blocks {
	max-width: 1280px;
	margin-inline: auto;
	background-color: var(--wp--preset--color--base);
}

@media (min-width: 1368px) {
	.wp-site-blocks {
		margin-block: 40px;
		border: var(--wp--custom--line--soft);
		border-radius: var(--wp--custom--radius--page);
		box-shadow: var(--wp--preset--shadow--page);
		/* `clip` rather than `hidden`: it rounds the corners of full bleed
		   sections without creating a scroll container, so sticky still works. */
		overflow: clip;
	}
}

/* --------------------------------------------------------------------------
   2. Typographic helpers
   -------------------------------------------------------------------------- */

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	margin-block: 0;
}

/* An eyebrow rendered as a chip, as in the hero. */
.is-style-eyebrow.has-background {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: var(--wp--custom--radius--pill);
}

.is-style-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-muted);
}

/* The hero's lede is held narrower, as the design has it. Elsewhere it takes
   the normal measure: a constrained layout centres every child, so a narrower
   paragraph would sit indented from the heading above it. */
.tasslyckan-hero__lede {
	max-width: 30rem;
}

.is-style-checks {
	list-style: none;
	padding-left: 0;
}

.is-style-checks li {
	position: relative;
	padding-left: 1.75em;
	margin-bottom: 0.5em;
}

.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.7em;
	height: 0.35em;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   3. Surfaces
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--line--faint);
	border-radius: var(--wp--custom--radius--card);
	padding: 28px;
}

.wp-block-group.is-style-panel {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--panel);
	padding: 32px;
}

.wp-block-group.is-style-float-card {
	background-color: var(--wp--preset--color--surface);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: var(--wp--preset--shadow--float);
}

/* --------------------------------------------------------------------------
   4. Buttons
   The base button (dark, 14px radius) comes from theme.json. These are the
   variants the design uses alongside it.
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill);
	padding: 12px 20px;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-button.is-style-green .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.wp-block-button.is-style-green .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-strong);
}

.wp-block-button.is-style-sand .wp-block-button__link {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--surface);
}

.wp-block-button.is-style-sand .wp-block-button__link:hover {
	background-color: #a9743f;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: var(--wp--custom--line--strong);
	padding: 16px 27px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* Buttons sitting on the dark section invert. */
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: rgba(247, 242, 232, 0.35);
}

.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
   5. Dark sections
   theme.json cannot express "everything inside this group flips to light", so
   the cascade handles it wherever a contrast background is applied.
   -------------------------------------------------------------------------- */

.has-contrast-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

.has-contrast-background-color :where(p) {
	color: var(--wp--preset--color--on-dark);
}

.has-contrast-background-color :where(a:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--primary-pastel);
}

.has-contrast-background-color :where(a:not(.wp-element-button):not(.wp-block-button__link)):hover {
	color: var(--wp--preset--color--base);
}

/* A card placed on the dark section returns to light type. */
.has-contrast-background-color .is-style-panel :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--contrast);
}

.has-contrast-background-color .is-style-panel :where(p) {
	color: var(--wp--preset--color--contrast-muted);
}

/* --------------------------------------------------------------------------
   6. Images
   -------------------------------------------------------------------------- */

.wp-block-image.is-style-multiply img,
.wp-block-site-logo.is-style-multiply img {
	mix-blend-mode: multiply;
}

.wp-block-image img {
	height: auto;
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.tasslyckan-header {
	border-bottom: var(--wp--custom--line--soft);
}

/* The two line wordmark: "djurskyddet" over "TASSLYCKAN HEBY". */
.tasslyckan-lockup p {
	margin-block: 0;
	line-height: 1;
}

.tasslyckan-lockup__name {
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

.tasslyckan-lockup__unit {
	font-weight: 600;
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--plum);
	margin-top: 5px !important;
}

.tasslyckan-header .wp-block-navigation {
	gap: 32px;
}

@media (max-width: 781px) {
	.tasslyckan-header .wp-block-navigation {
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.tasslyckan-hero__media {
	position: relative;
	background-color: #e7ecd6;
	border-radius: var(--wp--custom--radius--panel);
	padding: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}

.tasslyckan-hero__media img {
	width: 100%;
	max-width: 420px;
	height: auto;
}

/* The two statistics that overhang the image panel. */
.tasslyckan-hero__stat {
	position: absolute;
	z-index: 1;
}

.tasslyckan-hero__stat--start {
	left: -18px;
	bottom: 34px;
}

.tasslyckan-hero__stat--end {
	right: -14px;
	top: 30px;
}

.tasslyckan-hero__stat p {
	margin-block: 0;
}

.tasslyckan-hero__stat-value {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.625rem;
	line-height: 1;
}

.tasslyckan-hero__stat-label {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast-soft);
	margin-top: 4px !important;
}

/* On small screens the overhang has nowhere to go. The panel is a flex row,
   so leaving the statistics in it squeezed them alongside the image: about
   60px each, which broke "omplacerade" across four lines and stacked the
   digits of "30+" vertically. Letting the row wrap, with the image taking a
   full row of its own, puts them side by side underneath at a usable width. */
@media (max-width: 781px) {
	.tasslyckan-hero__media {
		flex-wrap: wrap;
		gap: 12px;
		min-height: 0;
		padding: 20px;
	}

	.tasslyckan-hero__media > figure {
		flex: 0 0 100%;
		margin: 0;
	}

	.tasslyckan-hero__stat {
		position: static;
		flex: 1 1 0;
		min-width: 0;
		text-align: center;
	}
}

/* A statistic is a short token and should never be broken up, whatever the
   box does. */
.tasslyckan-hero__stat-value {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Numbered step cards ("Vår sak")
   -------------------------------------------------------------------------- */

.tasslyckan-step__number {
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--chip);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   10. Touch targets
   -------------------------------------------------------------------------- */

/* The overlay menu button is the only way into the menu on a phone, and core
   renders it at 24px, right on the accessibility floor. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

@media (max-width: 781px) {
	.wp-block-button__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   11. Accessibility
   -------------------------------------------------------------------------- */

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

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100000;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
	padding: 12px 20px;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--chip);
	text-decoration: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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