/*
 * HJSH: skov, have og maskinhandel.
 *
 * Kundespecifikt finish-lag oven paa biblioteket. Holder sig til tokens fra
 * palette-systemet, men giver HJSH et mere praktisk butik/værksted-udtryk end
 * standardtemaet.
 */

:root {
	--font-head: "Manrope", Inter, system-ui, sans-serif;
	--font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--hjsh-green: var(--ink);
	--hjsh-green-2: var(--ink-3);
	--hjsh-accent: var(--accent);
	--hjsh-surface: var(--paper-2);
	--hjsh-line: var(--line);
}

.site-header {
	border-top: 4px solid var(--hjsh-green-2);
	border-bottom-color: color-mix(in srgb, var(--hjsh-green) 16%, var(--hjsh-line));
}

.site-header__brand {
	max-width: 260px;
	line-height: 1.05;
}

.site-header__cta.btn-primary,
.btn-primary {
	background: var(--hjsh-green);
	border-color: var(--hjsh-green);
	color: var(--paper);
}

.site-header__cta.btn-primary:hover,
.btn-primary:hover {
	background: var(--hjsh-green-2);
}

.hero {
	background-color: var(--hjsh-green);
}

.hero.hero--has-bg {
	background-image:
		linear-gradient(90deg, rgba(18,45,28,.94) 0%, rgba(18,45,28,.78) 38%, rgba(18,45,28,.30) 70%, rgba(18,45,28,.08) 100%),
		var(--hero-bg) !important;
	background-position: center, center;
	background-repeat: no-repeat;
	background-size: auto, cover;
}

.hero.hero--has-bg .hero__overlay {
	background:
		radial-gradient(circle at 74% 40%, rgba(216,99,63,.20), transparent 36%),
		linear-gradient(90deg, rgba(18,45,28,.88) 0%, rgba(18,45,28,.62) 48%, rgba(18,45,28,.12) 100%);
}

.hero.hero--full::before,
.hero.hero--compact::before,
.hero.hero--minimal::before {
	background-image:
		linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 28px 28px, 56px 56px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.hero.hero--full::after,
.hero.hero--compact::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 36%;
	height: 8px;
	background: repeating-linear-gradient(90deg, var(--hjsh-accent) 0 42px, transparent 42px 54px);
	opacity: .9;
}

.hero__h1 {
	font-weight: 800;
	max-width: 19ch;
	text-wrap: balance;
}

.hero__lead {
	max-width: 58ch;
}

.hero-h1__accent,
.hero .eyebrow,
.hero .eyebrow .dot {
	color: color-mix(in srgb, var(--hjsh-accent) 65%, #fff);
}

.hero .eyebrow .dot {
	background: color-mix(in srgb, var(--hjsh-accent) 65%, #fff);
}

.hero__chips .chip {
	border-radius: var(--r);
	background: rgba(255,255,255,.1);
}

.trustbar {
	border-top: 0;
	border-bottom: 1px solid var(--hjsh-line);
	background: #fff;
}

.trustbar__item {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: var(--hjsh-green);
}

.trustbar__icon {
	color: var(--hjsh-accent);
}

.cat-card,
.feature-card,
.segment-card,
.product-card,
.team-card,
.price-plan {
	border-radius: var(--r);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cat-card:hover,
.feature-card:hover,
.segment-card:hover,
.product-card:hover,
.team-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.cat-card {
	border-top: 3px solid var(--hjsh-green-2);
	min-height: 100%;
	overflow: hidden;
	position: relative;
	background: linear-gradient(180deg, #fff, var(--hjsh-surface));
}

.cat-card::after {
	background: var(--hjsh-accent);
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	right: auto;
	top: 0;
	transition: width .18s ease;
	width: 34px;
}

.cat-card:hover::after {
	width: 96px;
}

.cat-card__media {
	aspect-ratio: 5 / 3;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--hjsh-green) 88%, #000), var(--hjsh-green-2));
	position: relative;
}

.cat-card__media::after {
	background: linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(29,60,37,.18));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.cat-card__title {
	font-size: 1.02rem;
	font-weight: 800;
	text-wrap: balance;
}

.intro-visual,
.content-split__media {
	box-shadow: 0 22px 52px rgba(29,60,37,.14);
}

.content-split__img,
.intro-visual__img {
	filter: saturate(1.04) contrast(1.03);
}

.categories-grid__grid,
.features__grid,
.segments__grid {
	align-items: stretch;
}

.cat-card__cta,
.feature-card__more,
.series-card__more {
	color: var(--hjsh-green-2);
	font-weight: 700;
}

.feature-card__icon {
	background: var(--hjsh-green);
}

.feature-card::before,
.segment-card::before {
	background: var(--hjsh-accent);
}

.section--dealer,
.dealer-cta,
.section--leadform,
.final-cta {
	background:
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
		var(--hjsh-green);
	background-size: 44px 44px;
}

.final-cta .btn,
.dealer-cta .btn,
.section--leadform .btn {
	box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.dealer-cta__check,
.price-plan__check,
.steps__nr,
.faq-item__toggle,
.accordion__summary::after {
	color: var(--hjsh-accent);
}

.steps__nr {
	border-color: var(--hjsh-green);
	color: var(--hjsh-green);
}

.opening-hours__table tr {
	border-left: 3px solid var(--hjsh-green-2);
}

.opening-hours__table th {
	color: var(--hjsh-green);
}

.reviews-rating__num,
.product-card__price,
.room-card__price {
	color: var(--hjsh-green-2);
}

.woo-latest .product-card,
.latest-items .product-card {
	border-top: 3px solid var(--hjsh-accent);
}

.woo-latest .product-card__title,
.latest-items .product-card__title {
	line-height: 1.18;
}

.season__month {
	border-radius: var(--r);
}

.season__icon {
	background: var(--hjsh-green);
	color: var(--paper);
	border-radius: var(--r-sm);
}

.local-contact-item__icon,
.review-card__stars {
	color: var(--hjsh-accent);
}

.map-section__frame,
.local-contact-map iframe {
	border: 1px solid var(--hjsh-line);
}

.page-content {
	max-width: 76ch;
}

.page-content h2,
.page-content h3 {
	color: var(--hjsh-green);
}

@media (max-width: 768px) {
	.site-header__brand {
		max-width: 210px;
	}

	.hero.hero--full::after,
	.hero.hero--compact::after {
		width: 58%;
	}
}

/* =========================================================================
 * FORSIDE-REDESIGN v2.3
 * Robust reveal, ensartet kategori-grid (brandede ikon-tiles), rene
 * produktfotos paa sand-panel, og oprydning af haveklenderens raavare-rest.
 * ====================================================================== */

/* 1) Reveal: hurtigere og blidere. JS-sikkerhed (hjsh-finish.js) sikrer at
 *    intet staar usynligt ved hurtig scroll eller langsom indlaesning. */
.reveal { transform: translateY(14px); transition-duration: .5s; }

/* 2) Kategori-grid: ens, designede ikon-tiles giver roed traad uanset foto. */
.categories-grid__grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 18px; }
.categories-grid .cat-card { background: #fff; border: 1px solid var(--hjsh-line); }
.categories-grid .cat-card__media { aspect-ratio: 4 / 3; background: var(--hjsh-green-2); }
.categories-grid .cat-card__media::after { display: none; }
.categories-grid .cat-card__img { width: 100%; height: 100%; object-fit: cover; }
.categories-grid .cat-card__body { padding: 15px 18px 18px; gap: 4px; }
.categories-grid .cat-card__title { font-size: 1.04rem; color: var(--hjsh-green-2); }
.categories-grid .cat-card__cta { margin-top: 6px; font-size: .9rem; }

/* 3) Hvidbaggrunds-produktfotos vises rent (contain) paa sand-panel,
 *    saa de ligner et bevidst produktvindue og ikke et beskaaret tilfaeldigt foto. */
.intro-visual,
.content-split__media {
	background: var(--hjsh-surface);
	border: 1px solid var(--hjsh-line);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.intro-visual__img,
.content-split__img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	filter: none;
}
.intro-visual,
.content-split__media { aspect-ratio: 5 / 4; }

/* 4) Havekalender: fjern 'X raavarer' (rest fra foedevare-skabelonen). */
.season__count { display: none; }
.season__month { padding-top: 14px; padding-bottom: 14px; }
.season__panel-title { color: var(--hjsh-green-2); }

/* 5) Rytme og typografi. */
.section-h2 { font-size: 2.05rem; }
.intro__visual .intro-visual { box-shadow: 0 22px 52px rgba(29,60,37,.12); }

@media (max-width: 700px) {
	.categories-grid__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* =========================================================================
 * FORSIDE-REDESIGN v2.4
 * Ren forhandler-strip under hero, kompakt kontaktformular, én ren footer.
 * ====================================================================== */

/* 1) Forhandler-strip (trustbar): ens celler, tynde skillelinjer, ingen
 *    larmende ikoner. Ligner et bevidst maerke-baand frem for en ikon-rkke. */
.trustbar { background: #fff; }
.trustbar .container { padding-top: 4px; padding-bottom: 4px; }
.trustbar__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.trustbar__item {
	flex: 1 1 0;
	min-width: 140px;
	justify-content: center;
	gap: 0;
	padding: 18px 14px;
	border-left: 1px solid var(--hjsh-line);
	text-align: center;
}
.trustbar__item:first-child { border-left: 0; }
.trustbar__icon { display: none; }
.trustbar__label {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .82rem;
	font-weight: 700;
	color: var(--hjsh-green-2);
}
@media (max-width: 720px) {
	.trustbar__item { flex-basis: 33.333%; min-width: 0; }
	.trustbar__item:nth-child(3n+1) { border-left: 0; }
}

/* 2) Kompakt, overskuelig kontaktformular der kan ligge paa én skaerm. */
.section--local-contact { padding-top: calc(var(--pad) * .7); padding-bottom: calc(var(--pad) * .7); }
.section--local-contact .local-contact-grid { gap: 30px; align-items: start; }
.section--local-contact .contact-form {
	background: #fff;
	border: 1px solid var(--hjsh-line);
	border-radius: var(--r-lg);
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 14px 34px rgba(29,60,37,.07);
}
.section--local-contact .form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.section--local-contact .contact-form .form-field { margin: 0; }
.section--local-contact .form-label { font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
.section--local-contact .contact-form input,
.section--local-contact .contact-form select,
.section--local-contact .contact-form textarea {
	padding: 10px 12px;
	border-radius: 10px;
}
.section--local-contact .contact-form textarea { min-height: 96px; resize: vertical; }
.section--local-contact .form-hint { font-size: .78rem; }
.section--local-contact .local-contact-map iframe { min-height: 240px; height: 240px; border-radius: var(--r-lg); }
.section--local-contact .local-contact-item { margin: 10px 0; }

@media (max-width: 880px) {
	.section--local-contact .form-row--two { grid-template-columns: 1fr; }
}

/* 3) Footer: kun den rene, redaktionelle footer (sidedump er fjernet i footer.php). */
.site-footer__menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer__menu a { text-decoration: none; }