/* Base: element defaults, typography, buttons and form fields. Colors, fonts and sizes come
   from theme.json (--wp--preset--*); the few extra values the theme needs are defined here. */

:root {
	--utomhus-radius: 8px;
	--utomhus-radius-small: 6px;
	--utomhus-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 16px rgb(0 0 0 / 0.06);
	--utomhus-header-height: 76px;
	--utomhus-gutter: clamp(1rem, 4vw, 2rem);
	--utomhus-max: 1500px;
	--utomhus-sidebar: 250px;
	--utomhus-focus: 0 0 0 3px rgb(88 176 49 / 0.45);
	--utomhus-radius-pill: 999px;
	--utomhus-error: #b3261e;
	/* Small print below the "small" preset: notes and counts, and uppercase labels. */
	--utomhus-text-xs: 0.8125rem;
	--utomhus-text-2xs: 0.75rem;
	/* Rows that scroll sideways fade out at the right. */
	--utomhus-fade-right: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

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

/* Anchor links (such as the article's table of contents) stop below the sticky header: the
   logo bar, the category bar, and the admin bar when logged in. */
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--utomhus-header-height) + 4.5rem);
}

/* Colors, font and line height of the body, links and headings come from theme.json. */
body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1,
h2 {
	letter-spacing: -0.015em;
}

p,
ul,
ol,
table,
figure {
	margin: 0 0 1.25rem;
}

a {
	text-underline-offset: 0.15em;
}

:focus-visible {
	outline: none;
	box-shadow: var(--utomhus-focus);
	border-radius: 2px;
}

.icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	vertical-align: -0.2em;
}

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

.skip-link:focus {
	z-index: 1000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
}

/* Buttons: WordPress, WooCommerce and theme buttons share one look (theme.json's button
   matches it). WooCommerce's selectors are listed so they outrank its own stylesheet, which
   loads before this one on the handleliste, checkout and account. */
.button,
button.button,
input[type="submit"],
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.75em 1.4em;
	border: 0;
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.button:hover,
button.button:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
}

.button--small,
.woocommerce a.button.button--small {
	padding: 0.55em 1em;
}

.is-style-secondary > .wp-block-button__link,
.button--secondary {
	background: transparent;
	color: currentColor;
	box-shadow: inset 0 0 0 2px currentColor;
}

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

/* Form fields. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
textarea,
select {
	width: 100%;
	min-height: 2.9rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: 1rem;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--brand);
	outline: none;
	box-shadow: var(--utomhus-focus);
}

input[type="checkbox"],
input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--wp--preset--color--primary);
	vertical-align: -0.2em;
}

label {
	font-weight: 600;
}

::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: 600;
}

/* Chevron: one shape for menus and links. It points right; each use turns it as needed. */
.site-nav__menu .menu-item-has-children > a::after,
.side-nav__link::after,
.side-nav__toggle::after,
.category-tile__name::after {
	content: "";
	flex: none;
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}