/**
 * Sælkerabúðin - Custom Styles
 * Global overrides, card styles, hover effects, product grid
 */

/* ─── GLOBAL ────────────────────────────────────── */

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	padding-top: var(--wp--custom--spacing--header-height, 80px);
}

/* Pages with transparent header: no padding — content starts at top */
body.home,
body.page-template-front-page,
body.post-type-archive-product,
body.page-template-page-hafa-samband,
body.page-template-page-um-okkur,
body.page-template-page-eldunarleidbeiningar,
body.page-template-page-skilmalar,
body.page-template-page-personuvernd,
body.page-template-page-opnunartimi,
body.single-product,
body.woocommerce-account {
	padding-top: 0;
}

/* Opnunartími: no hero — push content below fixed header (desktop only) */
@media (min-width: 769px) {
	body.page-template-page-opnunartimi main.wp-block-group {
		padding-top: 80px;
	}
}

/* ─── BLOCK STYLE: DARK CARD ───────────────────── */

.is-style-dark-card {
	background-color: var(--wp--preset--color--card-bg);
	border-radius: var(--wp--custom--border--radius);
	overflow: hidden;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.is-style-dark-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* ─── BLOCK STYLE: CREAM SECTION ───────────────── */

.is-style-cream-section {
	background-color: var(--wp--preset--color--cream-bg);
	color: var(--wp--preset--color--black);
}

.is-style-cream-section h1,
.is-style-cream-section h2,
.is-style-cream-section h3,
.is-style-cream-section h4 {
	color: var(--wp--preset--color--black);
}

.is-style-cream-section p {
	color: #555555;
}

/* ─── BUTTON STYLES ────────────────────────────── */

.is-style-caramel .wp-block-button__link {
	background-color: var(--wp--preset--color--caramel);
	color: var(--wp--preset--color--white);
	border: none;
	padding: 16px 40px;
	font-family: var(--wp--preset--font-family--oswald);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 500;
	font-size: 0.8125rem;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}

.is-style-caramel .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--dark-caramel);
	box-shadow: 0 0 30px rgba(198, 134, 66, 0.3);
	transform: translateY(-1px) scale(1.03);
}

.is-style-caramel .wp-block-button__link:active {
	transform: scale(0.97);
	transition-duration: 0.1s;
}

.is-style-caramel-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 16px 40px;
	font-family: var(--wp--preset--font-family--oswald);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 400;
	font-size: 0.8125rem;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}

.is-style-caramel-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--caramel);
	color: var(--wp--preset--color--caramel);
	background-color: rgba(255, 255, 255, 0.05);
	transform: scale(1.03);
}

.is-style-caramel-outline .wp-block-button__link:active {
	transform: scale(0.97);
	transition-duration: 0.1s;
}

/* ─── PRODUCT CARDS (white cards with image + content) ── */

.saelk-product-card {
	background: #ffffff;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transition: all 0.5s ease;
}

.saelk-product-card:hover {
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	transform: translateY(-4px);
}

.saelk-product-card-image {
	position: relative;
	overflow: hidden;
	height: 280px;
	background-color: #f0f0f0;
}

.saelk-product-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Focal-point shift: add the `saelk-focus-lower` class to the card,
   the image block, or any wrapper — the rule catches all three.
   Default 70% pushes the visible crop down by 20%; override with
   `saelk-focus-65` / `saelk-focus-75` if you need finer control. */
.saelk-focus-lower .saelk-product-card-image img,
.saelk-product-card.saelk-focus-lower img,
img.saelk-focus-lower,
figure.saelk-focus-lower img {
	object-position: center 70% !important;
}

.saelk-focus-65 .saelk-product-card-image img,
img.saelk-focus-65,
figure.saelk-focus-65 img {
	object-position: center 65% !important;
}

.saelk-focus-75 .saelk-product-card-image img,
img.saelk-focus-75,
figure.saelk-focus-75 img {
	object-position: center 75% !important;
}

.saelk-product-card:hover .saelk-product-card-image img {
	transform: scale(1.15);
}

.saelk-premium-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	background-color: #C68642;
	color: white;
	padding: 6px 16px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	z-index: 2;
}

.saelk-product-card-content {
	padding: 24px 32px 32px;
}

.saelk-product-card-content h3 {
	font-family: var(--wp--preset--font-family--antonio);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	color: #111;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	transition: color 0.3s ease;
}

.saelk-product-card:hover .saelk-product-card-content h3 {
	color: #C68642;
}

/* Make "Skoða" link stretch over entire card */
.saelk-product-card {
	position: relative;
}

.saelk-product-card .saelk-product-card-content .has-caramel-color a {
	position: static;
}

.saelk-product-card .saelk-product-card-content .has-caramel-color a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.saelk-product-card {
	cursor: pointer;
}

.saelk-product-card-content .saelk-card-desc {
	color: #666;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 24px;
}

.saelk-product-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid #e5e5e5;
}

.saelk-card-price {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.875rem;
	font-weight: 500;
	color: #111;
	letter-spacing: 0.05em;
}

.saelk-card-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #C68642;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: gap 0.3s ease;
}

.saelk-product-card:hover .saelk-card-link {
	gap: 12px;
}

/* Product grid 3-column layout */
.saelk-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

@media (max-width: 960px) {
	.saelk-product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.saelk-product-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.saelk-product-card-image {
		height: 200px;
	}
	.saelk-product-card-content {
		padding: 16px 20px 20px;
	}
}

/* ─── TEXTURE BACKGROUND ──────────────────────── */

.saelk-texture-bg {
	position: relative;
	background-color: #f3f1ed;
}

.saelk-texture-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1732657617698-4a7f7c11762e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080');
	background-size: cover;
	background-position: center;
	opacity: 0.15;
	pointer-events: none;
}

.saelk-texture-bg > * {
	position: relative;
	z-index: 1;
}

/* ─── CONTACT CARDS (cream bg, white cards) ───── */

.saelk-contact-card {
	background: white;
	border-radius: 1rem;
	padding: 40px 24px;
	text-align: center;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.saelk-contact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.saelk-contact-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #C68642;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.saelk-contact-card h4 {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-style: normal;
	font-weight: 700;
	font-size: 1.25rem;
	color: #111;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.saelk-contact-card p {
	color: #666;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	margin: 0;
}

.saelk-contact-card .saelk-contact-note {
	color: #999;
	font-size: 0.8125rem;
	margin-top: 4px;
}

/* ─── FEATURE CARDS (dark on cream) ────────────── */

.saelk-feature-card {
	background-color: var(--wp--preset--color--dark-bg);
	border-radius: 1rem;
	padding: 32px 24px;
	transition: all 0.5s ease;
	height: 100%;
}

.saelk-feature-card:hover {
	background-color: #C68642;
}

.saelk-feature-card h4 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.0625rem;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 16px 0 8px;
}

.saelk-feature-card p {
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.8125rem;
	line-height: 1.6;
	margin: 0;
}

.saelk-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 960px) {
	.saelk-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.saelk-feature-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── IMAGE HOVER ZOOM ─────────────────────────── */

.saelk-zoom-image {
	overflow: hidden;
	border-radius: var(--wp--custom--border--radius);
}

.saelk-zoom-image img {
	transition: transform 0.7s ease;
}

.saelk-zoom-image:hover img {
	transform: scale(1.1);
}

/* ─── BENTO GRID ───────────────────────────────── */

.saelk-bento-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.saelk-bento-grid .saelk-bento-large {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 768px) {
	.saelk-bento-grid {
		grid-template-columns: 1fr;
	}
	.saelk-bento-grid .saelk-bento-large {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* ─── CATEGORY CARDS (dark cover with hover) ──── */

.saelk-category-card {
	border-radius: var(--wp--custom--border--radius);
	overflow: hidden;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.saelk-category-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.saelk-category-card .wp-block-cover__image-background {
	transition: transform 0.7s ease;
}

.saelk-category-card:hover .wp-block-cover__image-background {
	transform: scale(1.1);
}

/* Make category cards fully clickable */
.saelk-category-card {
	position: relative;
	cursor: pointer;
}

.saelk-category-card a {
	position: static;
}

.saelk-category-card a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ─── DYNAMIC CATEGORY CARDS ───────────────────── */

.saelk-dynamic-cat-grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

.saelk-dyn-card {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
	cursor: pointer;
}

.saelk-dyn-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.saelk-dyn-card:hover img {
	transform: scale(1.1);
}

.saelk-dyn-card-link {
	text-decoration: none;
}

@media (max-width: 768px) {
	.saelk-dynamic-cat-grid > div {
		grid-template-columns: 1fr !important;
	}
	.saelk-dyn-card {
		min-height: 250px !important;
	}
}

/* ─── NEWSLETTER FOOTER FORM ──────────────────── */

.saelk-footer-newsletter input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 2px solid rgba(255, 255, 255, 0.3);
	color: white;
	padding: 12px 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	outline: none;
	transition: border-color 0.3s ease;
	margin-bottom: 16px;
}

.saelk-footer-newsletter input:focus {
	border-bottom-color: white;
}

.saelk-footer-newsletter input::placeholder {
	color: #666;
}

.saelk-footer-newsletter button {
	width: 100%;
	background: white;
	color: #1A1A1A;
	border: none;
	padding: 14px 24px;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top: 8px;
}

.saelk-footer-newsletter button:hover {
	background: rgba(255, 255, 255, 0.9);
}

/* ─── KLAVIYO FOOTER FORM OVERRIDES ────────────────
   Klaviyo inlines all styles at runtime, so overrides need !important
   to win. Scope to the form's wrapper class so we don't bleed into
   other Klaviyo elements (popups, etc.) if added later. */

[class*="klaviyo-form-Wpr4wv"] h1,
[class*="klaviyo-form-Wpr4wv"] h2,
[class*="klaviyo-form-Wpr4wv"] h3,
[class*="klaviyo-form-Wpr4wv"] h4,
[class*="klaviyo-form-Wpr4wv"] h5,
[class*="klaviyo-form-Wpr4wv"] h6,
[class*="klaviyo-form-Wpr4wv"] p,
[class*="klaviyo-form-Wpr4wv"] span,
[class*="klaviyo-form-Wpr4wv"] label,
[class*="klaviyo-form-Wpr4wv"] a {
	color: #ffffff !important;
}

/* Reset the wrapper padding so the form's first block lines up with the
   top of neighbouring footer column titles. Klaviyo applies inline
   padding: 10px 5px on the <form>, plus the first form-row has its own
   top padding — strip both. */
[class*="klaviyo-form-Wpr4wv"] {
	margin-top: -10px !important;
}
[class*="klaviyo-form-Wpr4wv"] form,
form[data-testid*="klaviyo-form-Wpr4wv"] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
[class*="klaviyo-form-Wpr4wv"] div[data-testid="form-row"]:first-of-type {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
[class*="klaviyo-form-Wpr4wv"] div[data-testid="form-row"]:first-of-type .klaviyo-form-richtext p {
	margin-top: 0 !important;
}

/* Description / body copy — gray Inter to match the rest of the footer. */
[class*="klaviyo-form-Wpr4wv"] p,
[class*="klaviyo-form-Wpr4wv"] p span {
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 0.875rem !important;
	line-height: 1.7 !important;
	color: #9CA3AF !important;
	font-weight: 400 !important;
}

/* Heading lives in the first form-row. Override both the outer <p> and
   the inner <span> since Klaviyo sets inline font-family/color/font-size
   on the span. */
[class*="klaviyo-form-Wpr4wv"] div[data-testid="form-row"]:first-of-type .klaviyo-form-richtext,
[class*="klaviyo-form-Wpr4wv"] div[data-testid="form-row"]:first-of-type .klaviyo-form-richtext p,
[class*="klaviyo-form-Wpr4wv"] div[data-testid="form-row"]:first-of-type .klaviyo-form-richtext span {
	font-family: var(--wp--preset--font-family--oswald) !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.2em !important;
	line-height: 1.3 !important;
	color: #ffffff !important;
}

[class*="klaviyo-form-Wpr4wv"] button[type="button"],
[class*="klaviyo-form-Wpr4wv"] button[type="submit"],
[class*="klaviyo-form-Wpr4wv"] button.needsclick {
	background-color: #C68642 !important;
	border-color: #C68642 !important;
	color: #FAF7F2 !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

[class*="klaviyo-form-Wpr4wv"] button[type="button"]:hover,
[class*="klaviyo-form-Wpr4wv"] button[type="submit"]:hover,
[class*="klaviyo-form-Wpr4wv"] button.needsclick:hover {
	background-color: #A56B2E !important;
	border-color: #A56B2E !important;
}

/* Inputs: dark background with white text + light placeholder to match footer */
[class*="klaviyo-form-Wpr4wv"] input[type="text"],
[class*="klaviyo-form-Wpr4wv"] input[type="email"],
[class*="klaviyo-form-Wpr4wv"] input[type="tel"] {
	background-color: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	color: #ffffff !important;
}

[class*="klaviyo-form-Wpr4wv"] input::placeholder {
	color: rgba(255, 255, 255, 0.45) !important;
	opacity: 1 !important;
}

[class*="klaviyo-form-Wpr4wv"] input:focus {
	border-color: #C68642 !important;
	outline: none !important;
}

/* ─── COVER BLOCK VIDEO FIXES ──────────────────── */

.wp-block-cover video {
	object-fit: cover;
}

/* ─── CLOUDFLARE STREAM HERO BACKGROUND ──────────
   The Stream iframe player letterboxes by default. Wrap it in a
   container that crops overflow, then oversize the iframe to a
   16:9 box that always covers the viewport (using vw/vh maxima)
   and center it. The iframe itself is non-interactive — the dim
   overlay sits above it, and the inner content above that. */
.wp-block-cover .saelk-hero-stream-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.wp-block-cover .saelk-hero-stream-bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9 by width */
	min-height: 100vh;
	min-width: 177.78vh; /* 16:9 by height — covers when viewport is taller than 16:9 */
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* ─── CARAMEL DIVIDER ──────────────────────────── */

.saelk-caramel-divider {
	width: 60px;
	height: 2px;
	background-color: var(--wp--preset--color--caramel);
}

/* ─── DECORATIVE LINE ──────────────────────────── */

.saelk-line {
	height: 1px;
	width: 64px;
	background-color: #bbb;
	display: inline-block;
	vertical-align: middle;
}

/* ─── ICON BUTTONS (header) ────────────────────── */

.saelk-search-toggle,
.saelk-cart-toggle {
	background: none;
	border: none;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	padding: 8px;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.saelk-search-toggle:hover,
.saelk-cart-toggle:hover {
	color: var(--wp--preset--color--caramel);
}

/* ─── HEADER ICONS (WooCommerce + custom) ──────── */

.saelk-header-icons {
	align-items: center;
}

.saelk-header-icons .wp-block-woocommerce-customer-account {
	color: white;
	transition: color 0.3s ease;
}

.saelk-header-icons .wp-block-woocommerce-customer-account:hover {
	color: var(--wp--preset--color--caramel);
}

.saelk-header-icons .wp-block-woocommerce-customer-account a {
	color: inherit !important;
	display: flex;
	align-items: center;
	padding: 8px;
}

.saelk-header-icons .wp-block-woocommerce-customer-account svg {
	width: 20px;
	height: 20px;
	color: inherit;
}

.saelk-header-icons .wc-block-mini-cart__button {
	background: none !important;
	border: none !important;
	padding: 8px !important;
	color: white !important;
	cursor: pointer;
	transition: color 0.3s ease;
}

.saelk-header-icons .wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--caramel) !important;
}

.saelk-header-icons .wc-block-mini-cart__button .wc-block-mini-cart__icon {
	width: 22px;
	height: 22px;
}

.saelk-header-icons .wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--caramel) !important;
	color: white !important;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.625rem;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
}

/* Hide WooCommerce price display in mini-cart button */
.saelk-header-icons .wc-block-mini-cart__amount {
	display: none;
}

/* ─── OPENING HOURS PLUGIN STYLING ─────────────── */

.opening-hours-container {
	display: block;
	width: 100%;
}

.opening-hours-today {
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.125rem;
	color: var(--wp--preset--color--caramel);
	margin-bottom: 32px;
	cursor: pointer;
}

.opening-hours-today a {
	color: var(--wp--preset--color--caramel);
	text-decoration: none;
}

.opening-hours-container .opening-hours-dropdown,
.opening-hours-container.with-dropdown .opening-hours-dropdown,
.opening-hours-container.dropdown-open .opening-hours-dropdown {
	width: 100% !important;
	display: block !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	max-height: none !important;
	overflow: visible !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	user-select: auto !important;
	-webkit-user-select: auto !important;
	z-index: auto !important;
}

.opening-hours-dropdown h4 {
	display: none !important;
}

.opening-hours-schedule-item {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 16px 0 !important;
	border-bottom: 1px solid #333 !important;
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 1rem !important;
	color: white !important;
	background: transparent !important;
}

.opening-hours-schedule-item:last-child {
	border-bottom: none !important;
}

.opening-hours-schedule-item span {
	color: white !important;
}

.opening-hours-schedule-item span:last-child {
	color: var(--wp--preset--color--gray-300) !important;
}

.dropdown-icon {
	display: none;
}

/* ─── CONTACT PAGE INFO CARDS ──────────────────── */

.saelk-info-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #222;
	border-radius: 0.75rem;
	padding: 20px 24px;
}

.saelk-info-card-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--caramel);
	flex-shrink: 0;
}

.saelk-info-card-label {
	display: block;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #9CA3AF;
	margin-bottom: 2px;
}

.saelk-info-card-value {
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	color: white;
}

.saelk-info-card-value a {
	color: white;
	text-decoration: none;
}

.saelk-info-card-value a:hover {
	color: var(--wp--preset--color--caramel);
}

/* ─── GRAVITY FORMS DARK STYLING ───────────────── */

.gform_wrapper,
.gform_wrapper * {
	color: white;
}

.gform_wrapper .gfield_label,
.gform_wrapper label {
	font-family: var(--wp--preset--font-family--oswald) !important;
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: #9CA3AF !important;
	margin-bottom: 8px !important;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	background-color: #1A1A1A !important;
	border: 1px solid #444 !important;
	border-radius: 0.5rem !important;
	color: white !important;
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 0.9375rem !important;
	padding: 14px 16px !important;
	transition: border-color 0.3s ease;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--wp--preset--color--caramel) !important;
	outline: none !important;
	box-shadow: none !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: #666 !important;
}

.gform_wrapper select {
	appearance: auto;
	color: #999 !important;
	background-color: #1A1A1A !important;
}

.gform_wrapper textarea {
	min-height: 140px !important;
	resize: vertical;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	background-color: var(--wp--preset--color--caramel) !important;
	color: white !important;
	border: none !important;
	border-radius: 2rem !important;
	font-family: var(--wp--preset--font-family--oswald) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	padding: 14px 36px !important;
	cursor: pointer;
	transition: background-color 0.3s ease;
	float: right;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	background-color: var(--wp--preset--color--dark-caramel) !important;
}

.gform_wrapper .gfield_description,
.gform_wrapper .gform_required_legend {
	color: #666 !important;
	font-size: 0.75rem !important;
}

.gform_wrapper .gfield_required {
	color: var(--wp--preset--color--caramel) !important;
}

.gform_wrapper .ginput_container_consent label {
	color: #9CA3AF !important;
	font-size: 0.8125rem !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.gform_wrapper .ginput_container_consent a {
	color: var(--wp--preset--color--caramel) !important;
}

.gform_wrapper .gform_footer {
	text-align: right;
}

/* Hide validation container border */
.gform_wrapper .gform_validation_errors {
	background: #222 !important;
	border-color: #C68642 !important;
}

/* Orbital theme overrides — catch all input types */
.gform_wrapper .gform-theme--framework input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper .gform-theme--framework select,
.gform_wrapper .gform-theme--framework textarea,
.gform_wrapper[data-form-index] input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper[data-form-index] select,
.gform_wrapper[data-form-index] textarea {
	background-color: #1A1A1A !important;
	border: 1px solid #444 !important;
	border-radius: 0.5rem !important;
	color: white !important;
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 0.9375rem !important;
	padding: 14px 16px !important;
}

.gform_wrapper[data-form-index] .gfield_label,
.gform_wrapper[data-form-index] label {
	font-family: var(--wp--preset--font-family--oswald) !important;
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: #9CA3AF !important;
}

.gform_wrapper[data-form-index] .gform_button,
.gform_wrapper[data-form-index] input[type="submit"],
.gform_wrapper[data-form-index] button[type="submit"] {
	background-color: var(--wp--preset--color--caramel) !important;
	color: white !important;
	border: none !important;
	border-radius: 2rem !important;
	font-family: var(--wp--preset--font-family--oswald) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	padding: 14px 36px !important;
	cursor: pointer;
	transition: background-color 0.3s ease;
	float: right;
}

.gform_wrapper[data-form-index] .gform_button:hover,
.gform_wrapper[data-form-index] input[type="submit"]:hover,
.gform_wrapper[data-form-index] button[type="submit"]:hover {
	background-color: var(--wp--preset--color--dark-caramel) !important;
}

/* ─── HERO IMAGE DIMMING (contact + subpages) ──── */

.page-template-page-hafa-samband .wp-block-cover img,
.page-template-page-hafa-samband .wp-block-cover video,
.page-template-page-um-okkur .wp-block-cover img,
.page-template-page-eldunarleidbeiningar .wp-block-cover img {
	opacity: 0.15 !important;
}

/* ─── HERO BOTTOM FADE (contact page) ──────────── */

.page-template-page-hafa-samband .wp-block-cover::after,
.page-template-page-eldunarleidbeiningar .wp-block-cover::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(to bottom, transparent, #1A1A1A);
	z-index: 1;
	pointer-events: none;
}

/* ─── DARK TABLE STYLING ───────────────────────── */

.wp-block-table.is-style-stripes table {
	border-color: #333 !important;
}

.wp-block-table.is-style-stripes table th {
	background-color: #333 !important;
	color: white !important;
	border-color: #444 !important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #222 !important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background-color: #1A1A1A !important;
}

.wp-block-table.is-style-stripes tbody td {
	color: #D1D5DB !important;
	border-color: #333 !important;
}

/* ─── SCROLL-BASED ANIMATIONS ──────────────────── */

.saelk-fade-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.saelk-fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.saelk-stagger > * {
	opacity: 0;
	transform: translateY(25px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.saelk-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.saelk-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.saelk-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.saelk-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.saelk-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.saelk-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }

.saelk-stagger.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

/* ─── RESPONSIVE: GIFT CARD SECTION ────────────── */

@media (max-width: 768px) {
	section [style*="grid-template-columns: 1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
	.saelk-contact-card {
		padding: 32px 20px;
	}
}

/* ─── RESPONSIVE: FOOTER ──────────────────────── */

@media (max-width: 960px) {
	.saelk-footer [style*="grid-template-columns:repeat(4"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.saelk-footer [style*="grid-template-columns:repeat(4"] {
		grid-template-columns: 1fr !important;
	}
}

/* ─── RESPONSIVE: CONTACT CARDS ───────────────── */

@media (max-width: 768px) {
	[style*="grid-template-columns:repeat(3,1fr)"] {
		grid-template-columns: 1fr !important;
	}
}

/* ─── MOBILE: BUTTONS & SPACING ──────────────────── */

@media (max-width: 600px) {
	.is-style-caramel .wp-block-button__link,
	.is-style-caramel-outline .wp-block-button__link {
		padding: 14px 28px;
		font-size: 0.75rem;
	}

	.saelk-contact-card {
		padding: 24px 16px;
	}

	.saelk-feature-card {
		padding: 24px 20px;
	}

	.saelk-info-card {
		padding: 16px;
	}
}

/* ─── SKILMÁLAR / LEGAL PAGES ─────────────────── */

/* Headings — left dash accent with divider above */
.page-template-page-skilmalar .has-cream-bg-background-color .wp-block-heading,
.page-template-page-personuvernd .has-cream-bg-background-color .wp-block-heading {
	color: #111 !important;
	font-size: 1.125rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em;
	padding-left: 20px;
	position: relative;
	margin-top: 40px !important;
	margin-bottom: 12px !important;
	padding-top: 40px;
	border-top: 1px solid #D1D5DB;
}

/* Left dash accent — use inline-block so it sits alongside the text */
.page-template-page-skilmalar .has-cream-bg-background-color .wp-block-heading::before,
.page-template-page-personuvernd .has-cream-bg-background-color .wp-block-heading::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 14px;
	height: 2px;
	background: var(--wp--preset--color--caramel);
	margin-right: 12px;
	margin-left: -20px;
}

/* First heading — no divider line above */
.page-template-page-skilmalar .has-cream-bg-background-color .wp-block-heading:first-child,
.page-template-page-personuvernd .has-cream-bg-background-color .wp-block-heading:first-child {
	margin-top: 0 !important;
	padding-top: 0;
	border-top: none;
}

/* Paragraphs */
.page-template-page-skilmalar .has-cream-bg-background-color p,
.page-template-page-personuvernd .has-cream-bg-background-color p {
	color: #374151 !important;
	font-size: 0.9375rem !important;
	line-height: 1.85 !important;
}

/* Smaller info text */
.page-template-page-skilmalar .has-cream-bg-background-color .has-gray-400-color,
.page-template-page-personuvernd .has-cream-bg-background-color .has-gray-400-color {
	color: #6B7280 !important;
}

/* Constrain content width for readability */
.page-template-page-skilmalar .has-cream-bg-background-color > .wp-block-heading,
.page-template-page-skilmalar .has-cream-bg-background-color > p,
.page-template-page-personuvernd .has-cream-bg-background-color > .wp-block-heading,
.page-template-page-personuvernd .has-cream-bg-background-color > p {
	max-width: 780px;
}

/* ─── HOMEPAGE HERO SAFE AREA ──────────────────── */

/* The hero centers content over a 100vh video.
   Push the centered group down so the "Velkomin..." line never slides
   under the fixed header + opening-hours banner (~117px combined). */
body.home .wp-block-cover:first-of-type .wp-block-cover__inner-container,
body.page-template-front-page .wp-block-cover:first-of-type .wp-block-cover__inner-container {
	padding-top: 140px;
	padding-bottom: 60px;
	box-sizing: border-box;
}

/* Hero logo — cap width regardless of class or inline style, since the
   block editor can strip both when an image is replaced or resized.
   Sized to match Figma design (~h-56 / 224px tall on desktop). */
body.home .wp-block-cover:first-of-type .wp-block-image,
body.page-template-front-page .wp-block-cover:first-of-type .wp-block-image {
	width: 440px !important;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.home .wp-block-cover:first-of-type .wp-block-image img,
body.page-template-front-page .wp-block-cover:first-of-type .wp-block-image img {
	width: 100% !important;
	height: auto !important;
}

/* Intro paragraph below the logo — constrain to a readable column
   instead of stretching the full viewport on wide screens.
   Bumped to match Figma design (text-xl ~ 1.25rem, max-w-2xl ~ 672px). */
body.home .wp-block-cover:first-of-type .wp-block-cover__inner-container p.has-large-font-size,
body.page-template-front-page .wp-block-cover:first-of-type .wp-block-cover__inner-container p.has-large-font-size {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.25rem !important;
	line-height: 1.6 !important;
}

@media (max-width: 781px) {
	body.home .wp-block-cover:first-of-type .wp-block-cover__inner-container,
	body.page-template-front-page .wp-block-cover:first-of-type .wp-block-cover__inner-container {
		padding-top: 130px;
		padding-bottom: 50px;
	}

	/* Smaller hero logo on mobile so content fits without overflow */
	body.home .wp-block-cover:first-of-type .wp-block-image,
	body.page-template-front-page .wp-block-cover:first-of-type .wp-block-image {
		width: 280px !important;
	}

	/* Tighten intro paragraph on mobile (matches design's sm:text-lg = 1.125rem) */
	body.home .wp-block-cover:first-of-type .wp-block-cover__inner-container p.has-large-font-size,
	body.page-template-front-page .wp-block-cover:first-of-type .wp-block-cover__inner-container p.has-large-font-size {
		font-size: 1.125rem !important;
	}

	/* Stack hero CTAs vertically on mobile.
	   Use block-level layout with margin: auto for centering — this is the
	   one centering technique that works identically across every browser
	   and every parent context (flex, grid, block, whatever). */
	body.home .wp-block-cover:first-of-type .wp-block-buttons,
	body.page-template-front-page .wp-block-cover:first-of-type .wp-block-buttons {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: center;
	}
	body.home .wp-block-cover:first-of-type .wp-block-buttons .wp-block-button,
	body.page-template-front-page .wp-block-cover:first-of-type .wp-block-buttons .wp-block-button {
		display: block !important;
		width: 280px !important;
		max-width: calc(100% - 32px) !important;
		margin: 0 auto 12px !important;
		float: none !important;
	}
	body.home .wp-block-cover:first-of-type .wp-block-buttons .wp-block-button:last-child,
	body.page-template-front-page .wp-block-cover:first-of-type .wp-block-buttons .wp-block-button:last-child {
		margin-bottom: 0 !important;
	}
	body.home .wp-block-cover:first-of-type .wp-block-buttons .wp-block-button__link,
	body.page-template-front-page .wp-block-cover:first-of-type .wp-block-buttons .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* ─── ACHIEVEMENT CARDS (About / Chef bio) ────── */

.saelk-achievements-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 16px 0 32px;
}

.saelk-achievement-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--wp--preset--color--card-bg);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.saelk-achievement-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--caramel);
}

.saelk-achievement-label {
	color: #fff;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	line-height: 1.4;
}

@media (max-width: 600px) {
	.saelk-achievements-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── KRÓNAN CTA (homepage) ───────────────────── */

.saelk-kronan-tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 420px;
	margin: 0 auto;
}

.saelk-kronan-tagline-line {
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--caramel);
	opacity: 0.7;
}

.saelk-kronan-tagline-text {
	color: var(--wp--preset--color--caramel);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	white-space: nowrap;
}

.saelk-kronan-cta-wrap {
	display: flex;
	justify-content: center;
}

.saelk-kronan-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 36px;
	background-color: var(--wp--preset--color--caramel);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.saelk-kronan-cta:hover,
.saelk-kronan-cta:focus {
	background-color: var(--wp--preset--color--caramel-hover, #A56B2E);
	color: #fff;
	transform: translateY(-1px);
}

.saelk-kronan-cta-icon {
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.saelk-kronan-cta {
		padding: 14px 28px;
		font-size: 0.85rem;
		letter-spacing: 0.12em;
	}
	.saelk-kronan-tagline {
		gap: 12px;
	}
	.saelk-kronan-tagline-text {
		font-size: 0.7rem;
		letter-spacing: 0.25em;
	}
}

/* ─── MAP EMBED ─────────────────────────────── */

.saelk-map-embed {
	position: relative;
	overflow: hidden;
	border-radius: 0.75rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	background: #e5e3df;
	line-height: 0;
}

.saelk-map-embed iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

@media (max-width: 781px) {
	.saelk-map-embed iframe {
		height: 320px;
	}
}


/* ─── SUBPAGE HERO HEADINGS — MOBILE SAFE ──────────
   Hero headings on individual pages were authored with fixed
   large font-sizes (has-hero-font-size preset) in the block
   editor. WP core CSS also sets `word-break: break-word` on
   `.wp-block-post-title`, which slices long Icelandic words
   like "VEISLUÞJÓNUSTA" mid-character on narrow phones.

   On <= 540px viewports, scale fluidly with vw AND switch the
   word-break back to normal so the word stays whole. Covers
   both wp:post-title and wp:heading blocks. */
@media (max-width: 540px) {
	body.page h1.wp-block-post-title,
	body.page h2.wp-block-post-title,
	body.page h1.wp-block-heading,
	body.page h2.wp-block-heading {
		font-size: clamp(2.5rem, 12vw, 4rem) !important;
		line-height: 1.05;
		overflow-wrap: normal !important;
		word-break: normal !important;
		hyphens: manual;
	}
}