/*
 * Hjelseth Base – komponenter.
 * Alle farger, fonter og avstander kommer fra theme.json (WordPress-presets),
 * så kundeoppsettet endrer utseendet uten å røre denne filen.
 */

:root {
	--hb-surface: var(--wp--preset--color--surface);
	--hb-surface-alt: var(--wp--preset--color--surface-alt);
	--hb-surface-warm: var(--wp--preset--color--surface-warm);
	--hb-line: var(--wp--preset--color--line);
	--hb-ink: var(--wp--preset--color--ink);
	--hb-ink-muted: var(--wp--preset--color--ink-muted);
	--hb-accent: var(--wp--preset--color--accent);
	--hb-accent-deep: var(--wp--preset--color--accent-deep);
	--hb-accent-tint: var(--wp--preset--color--accent-tint);
	--hb-dark: var(--wp--preset--color--dark);
	--hb-dark-raised: var(--wp--preset--color--dark-raised);
	--hb-highlight: var(--wp--preset--color--highlight);
	--hb-on-accent: var(--wp--preset--color--on-accent);
	--hb-radius-sm: var(--wp--custom--radius--sm, 6px);
	--hb-radius-md: var(--wp--custom--radius--md, 10px);
	--hb-radius-lg: var(--wp--custom--radius--lg, 16px);
	--hb-radius-pill: var(--wp--custom--radius--pill, 999px);
	--hb-shadow-card: var(--wp--custom--shadow--card);
}

:where(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--hb-accent-deep);
	outline-offset: 2px;
}

/* Etikett over seksjonstitler, med en liten gulvflis foran */
.hb-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hb-accent);
}
.hb-eyebrow::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: currentColor;
}

/* Toppfelt */
.hb-header {
	border-bottom: 1px solid var(--hb-line);
	background: var(--hb-surface);
}
.hb-header .wp-block-site-logo img { height: auto; }
@media (max-width: 600px) {
	.hb-header .wp-block-site-logo img { width: min(160px, 45vw) !important; }
}
.hb-header .wp-block-navigation a { color: var(--hb-ink); text-decoration: none; }
.hb-header .wp-block-navigation a:hover { color: var(--hb-accent); }

/* Toppseksjon på mørk grunn */
.hb-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--hb-radius-lg);
}
.hb-hero > .hb-hero-inner {
	position: relative;
	z-index: 1;
	max-width: min(680px, calc(70% - 32px));
}
@media (max-width: 781px) {
	.hb-hero > .hb-hero-inner { max-width: none; }
	.hb-hero .hjelseth-floor { display: none; }
}

/* Kategoriflis */
.hb-tile {
	border-radius: var(--hb-radius-lg);
	background: var(--hb-surface-alt);
	transition: background 0.18s ease;
}
.hb-tile:nth-child(3n + 2) { background: var(--hb-accent-tint); }
.hb-tile img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hb-radius-lg);
	background: var(--hb-surface-warm);
}
.hb-tile h3 a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--hb-ink);
	text-decoration: none;
}
.hb-tile h3 a::after {
	content: "→";
	color: var(--hb-accent);
	transition: transform 0.18s ease;
}
.hb-tile:hover h3 a::after { transform: translateX(4px); }
.hb-tile:hover h3 a { color: var(--hb-accent); }

/* Steg: nummer i en flis, koblet med en stiplet linje */
.hb-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	counter-reset: step;
}
.hb-steps > * { position: relative; counter-increment: step; }
.hb-steps > *::before {
	content: counter(step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
	border-radius: var(--hb-radius-md);
	background: var(--hb-accent);
	color: var(--hb-on-accent);
	font-weight: 800;
	font-size: 20px;
}
.hb-steps > *:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 24px;
	left: 60px;
	right: -12px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--hb-accent) 0 8px, transparent 8px 14px);
}
.hb-steps h3 { margin: 0 0 4px; }
.hb-steps p { margin: 0; color: var(--hb-ink-muted); }

/* Kontorer som runde merker */
.hb-chip {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--hb-radius-pill);
	background: var(--hb-accent-tint);
	color: var(--hb-accent-deep);
	font-weight: 700;
}


/* Skjemaer: felter og nedtrekkslister i samme stil overalt */
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], select, textarea) {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-radius-md);
	background: var(--hb-surface);
	color: var(--hb-ink);
	font: inherit;
}
:where(input, select, textarea):focus { border-color: var(--hb-accent); }
:where(button, input, select, textarea) { font-family: inherit; }

/* Produktkort i produktlister (WooCommerce produktsamling) */
.hb-products .wc-block-product-template {
	gap: var(--wp--preset--spacing--40);
}
.hb-products .wc-block-product {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-radius-lg);
	background: var(--hb-surface);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hb-products .wc-block-product:hover {
	transform: translateY(-3px);
	box-shadow: var(--hb-shadow-card);
}
.hb-products .wc-block-components-product-image { margin: 0 !important; background: var(--hb-surface-warm); }
.hb-products .wc-block-components-product-image img { aspect-ratio: 1 / 1; object-fit: cover; }
.hb-products .hb-card-body { flex: 1; padding: 16px; align-items: stretch; }
.hb-products .hb-card-body .wp-block-post-title { margin: 0; text-align: left; }
.hb-products .hb-card-body .wp-block-post-title a { color: var(--hb-ink); text-decoration: none; }
.hb-products .hb-card-body .wp-block-post-title a:hover { color: var(--hb-accent); }
.hb-products .wc-block-components-product-price { text-align: left; font-weight: 800; color: var(--hb-ink); }
.hb-products .wp-block-woocommerce-product-button { margin-top: auto; }
.hb-products .wp-block-button__link,
.hb-products .wc-block-components-product-button__button { width: 100%; }
.wc-block-components-product-sale-badge {
	border: 0 !important;
	border-radius: var(--hb-radius-sm) !important;
	background: var(--hb-highlight) !important;
	color: var(--hb-on-accent) !important;
}

/* Produktlisten: antall og sortering på én linje */
.hb-list-bar { margin-block: var(--wp--preset--spacing--30); color: var(--hb-ink-muted); }
.hb-list-bar p, .hb-list-bar form { margin: 0; }

/* Sidevisning */
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--60); gap: 6px; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--hb-radius-md);
	text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current { background: var(--hb-accent); color: var(--hb-on-accent); }

/* Brødsmuler */
.wp-block-woocommerce-breadcrumbs { color: var(--hb-ink-muted); }
.wp-block-woocommerce-breadcrumbs a { color: var(--hb-ink-muted); }

/* Produktside */
.hb-product .wp-block-woocommerce-product-image-gallery img { border-radius: var(--hb-radius-lg); background: var(--hb-surface-warm); }
.hb-product-summary .wp-block-post-title { margin-top: 0; }
.hb-product-summary .hb-eyebrow a { color: inherit; text-decoration: none; }
.hb-product-summary .wc-block-components-product-price { font-weight: 800; }
.hb-product-summary .quantity input { width: 72px; text-align: center; }
.hb-product-summary form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wp-block-woocommerce-product-details .wc-tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 1px solid var(--hb-line);
	list-style: none;
}
.wp-block-woocommerce-product-details .wc-tabs li a {
	display: block;
	padding: 12px 16px;
	color: var(--hb-ink-muted);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.wp-block-woocommerce-product-details .wc-tabs li.active a { color: var(--hb-accent); border-bottom-color: var(--hb-accent); }

/* Min konto (WooCommerce sin klassiske visning) */
.woocommerce-account .woocommerce { display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: 220px 1fr; align-items: start; }
.woocommerce-account .woocommerce > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 8px; list-style: none; border-radius: var(--hb-radius-lg); background: var(--hb-surface-alt); }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--hb-radius-md);
	color: var(--hb-ink);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--hb-surface); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--hb-accent); color: var(--hb-on-accent); }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
@media (max-width: 781px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

/* Knapper og meldinger fra WooCommerce sine klassiske maler */
.woocommerce :where(a.button, button.button, input.button, #respond input#submit) {
	padding: 14px 22px;
	border: 0;
	border-radius: var(--hb-radius-md);
	background: var(--hb-accent);
	color: var(--hb-on-accent);
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
}
.woocommerce :where(a.button, button.button, input.button):hover { background: var(--hb-accent-deep); }
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--hb-radius-md) !important;
}
.woocommerce form .form-row { margin: 0 0 16px; }
.woocommerce form .form-row label { display: block; margin-bottom: 4px; font-weight: 600; }
.woocommerce form .form-row :where(input, select, textarea) { width: 100%; }

/* Handlekurv og kasse (blokkene) */
.wc-block-cart, .wc-block-checkout { margin-top: var(--wp--preset--spacing--40); }
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	padding: var(--wp--preset--spacing--40) !important;
	border-radius: var(--hb-radius-lg);
	background: var(--hb-surface-alt);
}
.wc-block-components-button:not(.is-link) { border-radius: var(--hb-radius-md); }

@media (prefers-reduced-motion: reduce) {
	.hb-tile, .hb-tile h3 a::after, .hb-products .wc-block-product { transition: none; }
	.hb-products .wc-block-product:hover { transform: none; }
}