/*
Theme Name: Skiltelageret
Theme URI: https://skiltelageret.dk
Author: Skiltelageret
Description: Bloktema til Skiltelageret – webshop med vejskilte og vejudstyr. Bygget til WooCommerce.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skiltelageret
*/

/* ---------- Grundlæggende ---------- */
.wp-site-blocks > * + *,
.sl-main > * + * {
	margin-block-start: 0;
}
.sl-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* ---------- Header ---------- */
.sl-topbar {
	background: var(--wp--preset--color--mork);
	color: var(--wp--preset--color--hvid);
	font-size: 0.8125rem;
	padding-block: 0.6rem;
}
.sl-topbar p { margin: 0; }
.sl-header {
	border-bottom: 1px solid var(--wp--preset--color--kant);
	padding-block: 1rem;
	background: var(--wp--preset--color--hvid);
}
.sl-header-row { gap: 1rem 2rem; }
.sl-logo { margin: 0; }
.sl-logo img { height: 52px; width: auto; display: block; }
.sl-header .wp-block-search { flex: 1 1 260px; max-width: 520px; }
.sl-header .wp-block-search__inside-wrapper {
	border: 2px solid var(--wp--preset--color--mork);
	border-radius: 8px;
	padding: 0;
	overflow: hidden;
}
.sl-header .wp-block-search__input {
	border: 0;
	min-height: 44px;
	padding: 0 1rem;
	font-size: 0.95rem;
}
.sl-header .wp-block-search__button {
	margin: 0;
	border-radius: 0;
	padding: 0 1.25rem;
}
.sl-header .wp-block-navigation { font-weight: 600; font-size: 0.95rem; }
.sl-header .wp-block-navigation a { color: var(--wp--preset--color--mork); }
.sl-header .wp-block-navigation a:hover { color: var(--wp--preset--color--primaer); }
.sl-header .wc-block-mini-cart__button {
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--mork);
	border-radius: 8px;
	min-height: 44px;
	padding: 0 0.9rem;
	font-weight: 700;
}

/* ---------- Hero ---------- */
.sl-hero {
	background: var(--wp--preset--color--lys);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.sl-hero-kicker {
	display: inline-block;
	background: var(--wp--preset--color--mork);
	color: var(--wp--preset--color--gul);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem;
	border-radius: 4px;
}
.sl-hero-title { margin-block: 1.25rem; }
.sl-hero-text { font-size: 1.125rem; color: var(--wp--preset--color--graa); max-width: 560px; }
.sl-hero-image img { width: 100%; max-width: 460px; height: auto; display: block; margin-inline: auto; }
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--mork);
	color: var(--wp--preset--color--mork);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--mork);
	color: var(--wp--preset--color--hvid);
}

/* ---------- Sektioner ---------- */
.sl-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.sl-section-head { margin-bottom: 1.75rem; }
.sl-section-head h2 { margin: 0; }
.sl-grid { gap: 1rem; }

/* Kategorikort */
.sl-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--kant);
	border-radius: 12px;
	background: var(--wp--preset--color--hvid);
	transition: border-color 0.15s, transform 0.15s;
}
.sl-card:hover { border-color: var(--wp--preset--color--primaer); transform: translateY(-2px); }
.sl-card > * { margin: 0 !important; }
.sl-card-icon {
	flex: 0 0 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--lys);
	border-radius: 10px;
}
.sl-card-icon img { width: 36px; height: 36px; object-fit: contain; }
.sl-card-text h3 { margin: 0 0 0.2rem; font-size: 1.0625rem; }
.sl-card-text p { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--graa); }
.sl-card h3 a { color: var(--wp--preset--color--mork); text-decoration: none; }
.sl-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }

/* Produkter (WooCommerce) */
.sl-products ul.products li.product {
	border: 1px solid var(--wp--preset--color--kant);
	border-radius: 12px;
	padding: 0 0 1rem;
	overflow: hidden;
	background: var(--wp--preset--color--hvid);
}
.sl-products ul.products li.product img { margin: 0 0 0.75rem; background: var(--wp--preset--color--lys); }
.sl-products ul.products li.product .woocommerce-loop-product__title,
.sl-products ul.products li.product .price { padding-inline: 1rem; }
.sl-products ul.products li.product .price { color: var(--wp--preset--color--mork); font-weight: 800; font-size: 1.125rem; }
.sl-products ul.products li.product .button { margin-inline: 1rem; }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--wp--preset--color--mork);
	color: var(--wp--preset--color--hvid);
	border-radius: 8px;
	font-weight: 600;
	padding: 0.75rem 1.1rem;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--wp--preset--color--primaer);
	color: var(--wp--preset--color--hvid);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--primaer);
}

/* Mørk sektion – andre produkter */
.sl-dark { background: var(--wp--preset--color--mork); color: var(--wp--preset--color--hvid); }
.sl-dark h2 { color: var(--wp--preset--color--gul); }
.sl-dark .sl-section-head p { color: #D5D9DE; max-width: 640px; font-size: 1.0625rem; }
.sl-dark-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border-radius: 12px;
	background: #2A3038;
	min-height: 150px;
	transition: background 0.15s;
}
.sl-dark-card:hover { background: #343B45; }
.sl-dark-card > * { margin: 0 !important; }
.sl-dark-card h3 { color: var(--wp--preset--color--hvid); font-size: 1.1875rem; }
.sl-dark-card h3 a { color: inherit; text-decoration: none; }
.sl-dark-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.sl-dark-card p { color: #C3C9D0; font-size: 0.875rem; margin-top: 0.5rem !important; }
.sl-dark-card .sl-more { margin-top: auto !important; padding-top: 1rem; color: var(--wp--preset--color--gul); font-weight: 600; }

/* Fordele */
.sl-benefit { display: flex; gap: 1rem; align-items: flex-start; }
.sl-benefit > * { margin: 0 !important; }
.sl-benefit img { width: 32px; height: 32px; flex: 0 0 32px; }
.sl-benefit h3 { margin: 0 0 0.35rem !important; font-size: 1.0625rem; }
.sl-benefit p { margin: 0; font-size: 0.95rem; color: var(--wp--preset--color--graa); }

/* ---------- Footer ---------- */
.sl-footer {
	background: var(--wp--preset--color--lys);
	border-top: 1px solid var(--wp--preset--color--kant);
	padding-block: 3rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--graa);
}
.sl-footer h3 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.sl-footer p { margin: 0 0 0.4rem; }
.sl-footer a { color: var(--wp--preset--color--graa); }
.sl-footer a:hover { color: var(--wp--preset--color--primaer); }
.sl-footer .sl-logo img { height: 40px; }
.sl-copyright { border-top: 1px solid var(--wp--preset--color--kant); margin-top: 2rem; padding-top: 1.25rem; font-size: 0.8125rem; }

/* ---------- Almindelige sider ---------- */
.sl-page { padding-block: 3rem; }

@media (max-width: 781px) {
	.sl-header-row { justify-content: space-between; }
	.sl-header .wp-block-search { order: 5; flex-basis: 100%; max-width: none; }
	.sl-hero-image { margin-top: 1rem; }
}