/*
Theme Name: Sandvikengården
Theme URI: https://sandvikengarden.se
Author: Sandvikengården
Author URI: https://sandvikengarden.se
Description: Blockbaserat WordPress-tema för Sandvikengården – kurs- och lägergård, vandrarhem och kanotcentral vid Värmelns strand i västra Värmland. Byggt med Full Site Editing.
Version: 2.35.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sandvikengarden
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-fonts, one-column, wide-blocks
*/

/* ==========================================================================
   Google Fonts via @import (fungerar bättre än theme.json fontFace)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   WordPress Block Theme Grid Fix
   WordPress may wrap grid children in inner-container divs.
   display:contents makes those wrappers invisible to CSS grid/flex.
   ========================================================================== */
.featured-camp-stats > .wp-block-group__inner-container,
.feature-boxes > .wp-block-group__inner-container,
.info-grid > .wp-block-group__inner-container,
.camps-grid > .wp-block-group__inner-container,
.konf-info-cards > .wp-block-group__inner-container,
.two-column-grid > .wp-block-group__inner-container,
.three-column-grid > .wp-block-group__inner-container,
.schedule-grid > .wp-block-group__inner-container,
.group-chips > .wp-block-group__inner-container,
.registration-banner > .wp-block-group__inner-container,
.price-table > .wp-block-group__inner-container,
.accommodation-grid > .wp-block-group__inner-container,
.tours-grid > .wp-block-group__inner-container,
.equipment-list > .wp-block-group__inner-container,
.kanot-nav-grid > .wp-block-group__inner-container {
	display: contents !important;
}

/* Also handle is-layout-flow if WP adds it to our grid containers */
.featured-camp-stats.is-layout-flow,
.feature-boxes.is-layout-flow,
.info-grid.is-layout-flow,
.camps-grid.is-layout-flow,
.konf-info-cards.is-layout-flow,
.two-column-grid.is-layout-flow,
.three-column-grid.is-layout-flow,
.schedule-grid.is-layout-flow,
.group-chips.is-layout-flow,
.registration-banner.is-layout-flow,
.price-table.is-layout-flow,
.accommodation-grid.is-layout-flow,
.tours-grid.is-layout-flow,
.equipment-list.is-layout-flow,
.kanot-nav-grid.is-layout-flow {
	display: grid !important;
}

.group-chips.is-layout-flow {
	display: flex !important;
}

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
	--sandviken-blue: #1B75BB;
	--gard-green: #4CAF50;
	--warm-orange: #FFA726;
	--light-blue: #E3F2FD;
	--light-green: #E8F5E9;
	--dark-gray: #424242;
	--white: #FFFFFF;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 1.7;
	color: var(--dark-gray);
	overflow-x: hidden;
}

/* ==========================================================================
   Navigation / Header
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.98) !important;
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08);
	-webkit-transition: box-shadow 0.3s ease, background 0.3s ease;
	transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Push content down below the fixed header */
.wp-site-blocks {
	padding-top: 60px;
}

.site-header.scrolled {
	box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 1) !important;
}

/* Original logo placeholder — hidden by JS, keeps layout space.
   Kept SMALL so the header stays thin and the floating logo hangs below it. */
.site-logo-container {
	transition: all 0.3s ease;
}

.site-logo-container img,
.wp-block-site-logo img,
.custom-logo {
	height: 30px;
	width: auto;
	transition: all 0.3s ease;
}

/* ==========================================================================
   Floating Logo — "Hängande" effekt
   Cloned via JS and appended to <body> so it escapes all WP overflow clips
   ========================================================================== */
.site-logo-floating {
	position: fixed;
	top: 0;
	z-index: 10001;
	background: rgba(255, 255, 255, 0.98);
	padding: 10px 18px 18px 18px;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1),
	            0 2px 10px rgba(0, 0, 0, 0.05);
	transition: opacity 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	align-items: center;
	pointer-events: auto;
}

.site-logo-floating a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.site-logo-floating img {
	height: 120px;
	width: auto;
	transition: all 0.3s ease;
	display: block;
}

.site-logo-floating:hover img {
	transform: scale(1.05);
}

.site-logo-floating.scrolled {
	padding: 6px 15px 14px 15px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.site-logo-floating.scrolled img {
	height: 85px;
}

/* Navigation link hover underline */
.wp-block-navigation-item a {
	position: relative;
	color: var(--dark-gray) !important;
	text-decoration: none !important;
	transition: color 0.3s ease;
}

.wp-block-navigation-item a::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--sandviken-blue);
	transition: width 0.3s ease;
}

.wp-block-navigation-item a:hover {
	color: var(--sandviken-blue) !important;
}

.wp-block-navigation-item a:hover::after {
	width: 100%;
}

/* ==========================================================================
   GTranslate — Force floating widget to bottom-right
   ========================================================================== */

.gt_float_switcher,
.gtranslate_wrapper[style*="position"],
div[id*="gt_float"],
div[id*="gt-nvbar"],
.gt_float_switcher_wrapper {
	top: auto !important;
	bottom: 20px !important;
	right: 20px !important;
	left: auto !important;
	z-index: 999 !important;
}

/* ==========================================================================
   Custom Mobile Navigation — Hamburger & Overlay (built via JS)
   WordPress's overlayMenu doesn't work reliably with inline nav links
   in block themes, so we use our own JS-powered mobile menu.
   ========================================================================== */

/* Hamburger button — hidden on desktop, shown on mobile */
.sandviken-hamburger {
	display: none; /* hidden on desktop */
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	z-index: 1001;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	/* Use margin on children instead of gap for Safari < 14.1 */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.sandviken-hamburger span {
	display: block;
	width: 26px;
	height: 3px;
	background: #1B75BB; /* hardcoded for safety */
	background: var(--sandviken-blue);
	border-radius: 2px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	margin: 2px 0; /* replaces gap for Safari compatibility */
}
.sandviken-hamburger span:first-child {
	margin-top: 0;
}
.sandviken-hamburger span:last-child {
	margin-bottom: 0;
}

/* Mobile overlay */
.sandviken-mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.98);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	z-index: 99999;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.sandviken-mobile-menu.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Close button */
.sandviken-mobile-menu-close {
	position: absolute;
	top: 20px;
	right: 25px;
	background: none;
	border: none;
	font-size: 2.5em;
	color: #1B75BB;
	color: var(--sandviken-blue);
	cursor: pointer;
	line-height: 1;
	padding: 5px 10px;
	z-index: 100000;
	-webkit-transition: color 0.3s ease;
	transition: color 0.3s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.sandviken-mobile-menu-close:hover {
	color: var(--warm-orange);
}

/* Menu list */
.sandviken-mobile-menu-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.sandviken-mobile-menu-nav li {
	margin: 12px 0;
}

.sandviken-mobile-menu-nav a {
	font-family: 'Cormorant Infant', serif;
	font-size: 2em;
	font-weight: 700;
	color: #1B75BB;
	color: var(--sandviken-blue);
	text-decoration: none;
	-webkit-transition: color 0.3s ease;
	transition: color 0.3s ease;
	display: inline-block;
	padding: 5px 0;
	-webkit-tap-highlight-color: transparent;
}

.sandviken-mobile-menu-nav a:hover,
.sandviken-mobile-menu-nav a:active {
	color: var(--warm-orange);
}

/* Show hamburger + hide desktop nav on mobile */
@media (max-width: 768px) {
	.sandviken-hamburger {
		display: -webkit-box !important;
		display: -webkit-flex !important;
		display: flex !important;
	}

	/* Hide the WordPress navigation on mobile */
	.site-header .wp-block-navigation {
		display: none !important;
	}
}

/* ==========================================================================
   Hero Section — Glassmorphism Style
   ========================================================================== */
.hero-section {
	position: relative;
	min-height: 56vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.hero-section .wp-block-cover__background {
	opacity: 0.4 !important;
}

/* Glassmorphism hero container */
.hero-glass {
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 28px !important;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08),
				0 0 0 1px rgba(255, 255, 255, 0.4) inset,
				0 0 80px 40px rgba(255, 255, 255, 0.15) !important;
	padding: 30px 45px !important;
	text-align: center;
	animation: heroFadeIn 1.5s ease-out;
	max-width: 540px;
	margin: 0 auto;
}

.hero-glass h1 {
	color: var(--sandviken-blue) !important;
	font-family: 'Cormorant Infant', serif !important;
	font-size: 3em !important;
	font-weight: 700 !important;
	margin-bottom: 10px !important;
	line-height: 1.15 !important;
}

.hero-glass .hero-subtitle {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1em;
	font-weight: 500;
	color: var(--dark-gray);
	margin-bottom: 6px;
}

.hero-glass .hero-tagline {
	font-size: 1em;
	color: var(--dark-gray);
	font-style: italic;
	margin-bottom: 22px;
}

@keyframes heroFadeIn {
	from { opacity: 0; transform: translateY(-30px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Hero CTA buttons container */
.hero-cta {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Subpage hero (without glassmorphism) */
.subpage-hero {
	position: relative;
	min-height: 40vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.subpage-hero h1 {
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.subpage-hero p {
	text-shadow: none;
}

/* Full-width banner image (e.g. konfirmation) */
.konfirmation-banner img {
	width: 100%;
	height: 350px;
	object-fit: cover;
	display: block;
}
@media (max-width: 768px) {
	.konfirmation-banner img,
	img.konfirmation-banner-img {
		height: auto !important;
		object-fit: contain !important;
	}
}

.subpage-hero .hero-badge {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	padding: 15px 30px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1.1em;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Buttons — Primary ORANGE, Secondary BLUE, Outline
   ========================================================================== */
.wp-block-button__link,
.wp-element-button {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600 !important;
	border-radius: 50px !important;
	padding: 18px 40px !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease !important;
	border: none;
	cursor: pointer;
	text-decoration: none !important;
}

/* Primary button = ORANGE */
.wp-block-button:not(.is-style-btn-secondary):not(.is-style-btn-outline):not(.is-style-btn-blue) .wp-block-button__link {
	background: var(--warm-orange) !important;
	color: var(--white) !important;
	box-shadow: 0 10px 30px rgba(255, 167, 38, 0.4);
}

.wp-block-button:not(.is-style-btn-secondary):not(.is-style-btn-outline):not(.is-style-btn-blue) .wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(255, 167, 38, 0.5);
}

/* Secondary button = BLUE */
.is-style-btn-secondary .wp-block-button__link,
.is-style-btn-blue .wp-block-button__link {
	background: var(--sandviken-blue) !important;
	color: var(--white) !important;
	box-shadow: 0 10px 30px rgba(27, 117, 187, 0.4);
}

.is-style-btn-secondary .wp-block-button__link:hover,
.is-style-btn-blue .wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(27, 117, 187, 0.5);
}

/* Outline button */
.is-style-btn-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--sandviken-blue) !important;
	border: 2px solid var(--sandviken-blue) !important;
	box-shadow: none;
}

.is-style-btn-outline .wp-block-button__link:hover {
	background: var(--sandviken-blue) !important;
	color: var(--white) !important;
	transform: translateY(-3px);
}

/* Outline button on dark/blue backgrounds */
[style*="background-color:#1B75BB"] .is-style-btn-outline .wp-block-button__link,
[style*="background:linear-gradient"] .is-style-btn-outline .wp-block-button__link {
	color: var(--white) !important;
	border-color: var(--white) !important;
}

[style*="background-color:#1B75BB"] .is-style-btn-outline .wp-block-button__link:hover,
[style*="background:linear-gradient"] .is-style-btn-outline .wp-block-button__link:hover {
	background: var(--white) !important;
	color: var(--sandviken-blue) !important;
}

/* Green button variant */
.is-style-btn-green .wp-block-button__link {
	background: linear-gradient(135deg, var(--gard-green), #66BB6A) !important;
	color: var(--white) !important;
	box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
}

.is-style-btn-green .wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(76, 175, 80, 0.5);
}

/* ==========================================================================
   Section Headers
   ========================================================================== */
.section-header {
	text-align: center;
	margin-bottom: 80px;
	position: relative;
}

.section-subtitle {
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--gard-green);
	margin-bottom: 10px;
}

.section-title {
	font-family: 'Cormorant Infant', serif;
	font-size: 3em;
	color: var(--sandviken-blue);
	font-weight: 700;
	margin-bottom: 15px;
}

/* Section divider — gradient line */
.section-divider,
.wp-block-separator.section-divider {
	width: 80px !important;
	height: 4px !important;
	background: linear-gradient(90deg, var(--sandviken-blue), var(--gard-green)) !important;
	margin: 20px auto 0 !important;
	border-radius: 2px;
	border: none !important;
	opacity: 1 !important;
}

/* ==========================================================================
   Service Cards (Vad vi erbjuder)
   ========================================================================== */
.service-card {
	background: var(--white);
	border-radius: 20px !important;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: all 0.4s ease;
	position: relative;
}

.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--sandviken-blue), var(--gard-green));
	transform: scaleX(0);
	transition: transform 0.4s ease;
	z-index: 1;
}

.service-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.service-card:hover::before {
	transform: scaleX(1);
}

/* Service card image — full-bleed cover photo */
.service-icon-container {
	width: 100%;
	height: 280px;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: var(--light-blue);
}

.service-icon-container img {
	width: 100% !important;
	height: 280px !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block;
	transition: transform 0.5s ease;
}

.service-card:hover .service-icon-container img {
	transform: scale(1.08);
}

.service-content {
	padding: 35px;
}

.service-icon-container a { display: block; }
.service-content h3 a { text-decoration: none; color: inherit; }
.service-content h3 a:hover { color: #1B75BB; }

.service-content h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.8em;
	color: var(--sandviken-blue);
	margin-bottom: 15px;
}

.service-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sandviken-blue);
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.3s ease;
}

.service-link:hover {
	gap: 15px;
	color: var(--warm-orange);
}

/* ==========================================================================
   Feature Items (ikoner med text)
   ========================================================================== */
.feature-grid,
.about-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	margin-top: 50px;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px;
	background: var(--white);
	border-radius: 15px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.feature-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
	font-size: 2em;
}

.feature-text {
	font-weight: 600;
	color: var(--dark-gray);
}

/* ==========================================================================
   Accommodation Cards (Boende-sidan)
   ========================================================================== */
.accommodation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 40px;
	margin-bottom: 60px;
}

.accommodation-grid > .wp-block-group__inner-container {
	display: contents !important;
}

/* Accommodation prices — always visible */
.accommodation-price {
	display: block !important;
	visibility: visible !important;
	color: #1B75BB !important;
	font-weight: 700 !important;
}

.accommodation-card {
	background: var(--white);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: all 0.4s ease;
}

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

/* Accommodation card image — full-bleed cover */
.accommodation-image-wrap {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

.accommodation-card img,
.accommodation-image-wrap img {
	width: 100% !important;
	height: 250px !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block;
	transition: transform 0.5s ease;
}

.accommodation-card:hover img {
	transform: scale(1.05);
}

.accommodation-content {
	padding: 30px;
}

.accommodation-meta-text {
	color: #666;
	margin-bottom: 10px !important;
}

.accommodation-content h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.8em;
	color: var(--sandviken-blue);
	margin-bottom: 15px;
}

.accommodation-meta {
	display: flex;
	gap: 20px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
}

.features-list {
	list-style: none;
	padding: 0;
	margin-bottom: 20px;
}

.features-list li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
	font-size: 0.9em;
}

.features-list li:last-child {
	border-bottom: none;
}

.features-list li::before {
	content: '✓';
	color: var(--gard-green);
	font-weight: bold;
	margin-right: 10px;
}

/* ==========================================================================
   Tour Cards (Kanot-sidan)
   ========================================================================== */
.tours-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-bottom: 60px;
}

.tour-card {
	background: var(--white);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: all 0.4s ease;
	border: 3px solid transparent;
}

.tour-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	border-color: var(--sandviken-blue);
}

.tour-header {
	background: linear-gradient(135deg, var(--sandviken-blue), #1565C0);
	color: var(--white);
	padding: 30px;
	text-align: center;
}

.tour-header h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2em;
	color: var(--white);
	margin-bottom: 10px;
}

.tour-content {
	padding: 30px;
}

.tour-highlights {
	list-style: none;
	padding: 0;
}

.tour-highlights li {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	font-size: 0.9em;
}

.tour-highlights li:last-child {
	border-bottom: none;
}

.tour-highlights li::before {
	content: '🛶';
	margin-right: 10px;
}

.difficulty {
	display: inline-block;
	padding: 8px 15px;
	border-radius: 20px;
	font-size: 0.85em;
	font-weight: 600;
	margin-top: 15px;
}

.difficulty.easy {
	background: var(--light-green);
	color: var(--gard-green);
}

.difficulty.medium {
	background: #FFF3E0;
	color: var(--warm-orange);
}

/* Pricing boxes inside tour cards */
.pricing-box {
	border: 2px solid;
	transition: all 0.3s ease;
}

.pricing-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.pricing-orange {
	background: #FFF8E1;
	border-color: var(--warm-orange);
}

.pricing-green {
	background: #E8F5E9;
	border-color: var(--gard-green);
}

.pricing-blue {
	background: var(--light-blue);
	border-color: var(--sandviken-blue);
}

/* ==========================================================================
   Info Boxes & Highlight Boxes
   ========================================================================== */
.info-box {
	background: linear-gradient(135deg, var(--light-blue), var(--light-green));
	padding: 40px;
	border-radius: 15px;
}

.info-box h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2em;
	color: var(--sandviken-blue);
	margin-bottom: 20px;
}

.info-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 30px !important;
	align-items: stretch !important;
}

.info-grid .faq-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.info-card {
	background: var(--white);
	padding: 40px;
	border-radius: 15px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	text-align: center;
	transition: all 0.3s ease;
}

.info-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.info-icon {
	font-size: 3em;
	margin-bottom: 20px;
}

.highlight-box {
	background: linear-gradient(135deg, var(--sandviken-blue), #1565C0);
	color: var(--white);
	padding: 60px;
	border-radius: 20px;
	text-align: center;
}

.highlight-box h2 {
	color: var(--white) !important;
	font-family: 'Cormorant Infant', serif;
	font-size: 2.5em;
	margin-bottom: 20px;
}

.highlight-box p {
	font-size: 1.1em;
	line-height: 1.8;
	max-width: 800px;
	margin: 0 auto 30px;
}

/* Group type chips — compact tag-style items */
.group-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 15px !important;
	justify-content: center;
}

.group-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--white);
	padding: 14px 24px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
	font-weight: 600;
	font-size: 0.95em;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.group-chip:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	border-color: var(--sandviken-blue);
}

.group-chip-icon {
	font-size: 1.4em;
}

/* Feature boxes — service cards for grupper page */
.feature-boxes {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 35px !important;
	align-items: stretch !important;
}

.feature-box {
	background: var(--white);
	padding: 40px;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

.feature-box ul {
	flex-grow: 1;
}

.feature-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.feature-box-icon {
	font-size: 3em;
	margin-bottom: 20px;
}

.feature-box h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.8em;
	color: var(--sandviken-blue);
	margin-bottom: 15px;
}

.feature-box ul {
	list-style: none;
	padding: 0;
}

.feature-box ul li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
	font-size: 0.95em;
}

.feature-box ul li:last-child {
	border-bottom: none;
}

.feature-box ul li::before {
	content: '✓';
	color: var(--gard-green);
	font-weight: bold;
	margin-right: 10px;
}

/* Equipment list */
.equipment-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.equipment-item {
	background: linear-gradient(135deg, var(--light-blue), var(--light-green));
	padding: 25px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 15px;
	transition: all 0.3s ease;
}

.equipment-item:hover {
	transform: translateX(5px);
}

/* ==========================================================================
   Camp Cards (Läger & Kurser)
   ========================================================================== */
.camps-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 40px !important;
	margin-bottom: 60px;
	align-items: start;
}

.camp-card {
	background: var(--white);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: all 0.4s ease;
}

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

.camp-header {
	color: var(--white);
	padding: 40px 30px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.camp-header h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2.2em;
	color: var(--white);
	margin-bottom: 10px;
}

.camp-icon {
	font-size: 3.5em;
	margin-bottom: 15px;
}

/* Support image instead of icon in camp header */
.camp-header-image {
	width: 100%;
	height: 200px;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

.camp-header-image img {
	width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	display: block;
	transition: transform 0.5s ease;
}

.camp-card:hover .camp-header-image img {
	transform: scale(1.08);
}

.camp-dates {
	font-size: 0.95em;
	opacity: 0.95;
	font-weight: 500;
	letter-spacing: 1px;
	font-style: italic;
}

.camp-content {
	padding: 35px;
}

.camp-highlights li {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	font-size: 0.95em;
	list-style: none;
}

.camp-highlights li:last-child {
	border-bottom: none;
}

.camp-highlights li::before {
	content: '\2728';
	margin-right: 10px;
}

.camp-highlights {
	list-style: none;
	padding: 0;
	margin: 25px 0;
}

.camp-badge {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 25px;
	font-size: 0.85em;
	font-weight: 600;
	margin-top: 10px;
}

.badge-tradition {
	background: var(--light-green);
	color: var(--gard-green);
}

.badge-popular {
	background: #FFF3E0;
	color: var(--warm-orange);
}

.badge-family {
	background: var(--light-blue);
	color: var(--sandviken-blue);
}

/* Featured Camp (Konfirmation highlight) */
.featured-camp {
	background: linear-gradient(135deg, var(--light-blue), var(--light-green));
	border-radius: 25px;
	padding: 50px;
	text-align: center;
}

.featured-camp h2 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2.8em;
	color: var(--sandviken-blue);
	margin-bottom: 20px;
}

.featured-camp-stats {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px !important;
	align-items: stretch !important;
}

/* Reset WP flow-layout margins on ALL grid children */
.featured-camp-stats > *,
.feature-boxes > *,
.info-grid > *,
.camps-grid > *,
.konf-info-cards > *,
.two-column-grid > *,
.three-column-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.featured-camp-stats.stats-4col {
	grid-template-columns: repeat(4, 1fr) !important;
}

.stat-box {
	background: var(--white);
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	text-align: center;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
}

.stat-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stat-number {
	font-family: 'Cormorant Infant', serif;
	font-size: 3em;
	font-weight: 700;
	color: var(--sandviken-blue);
	display: block;
	margin-bottom: 10px;
}

.stat-label {
	font-size: 0.95em;
	color: var(--dark-gray);
}

/* Registration banner */
.registration-banner {
	background: linear-gradient(135deg, var(--warm-orange), #FF9800);
	padding: 40px 50px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	box-shadow: 0 10px 40px rgba(255, 167, 38, 0.3);
}

.registration-banner h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2em;
	color: var(--white);
	margin: 0;
}

.registration-banner p {
	color: rgba(255, 255, 255, 0.95);
	font-size: 1.05em;
	margin: 5px 0 0;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-item {
	background: var(--white);
	padding: 30px;
	border-radius: 12px;
	margin-bottom: 20px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.faq-item h4 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.4em;
	color: var(--sandviken-blue);
	margin-bottom: 15px;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section {
	text-align: center;
}

.cta-section h2 {
	font-family: 'Cormorant Infant', serif;
	font-size: 3em;
	color: var(--sandviken-blue);
	margin-bottom: 25px;
}

.cta-section p {
	font-size: 1.3em;
	line-height: 1.8;
}

/* ==========================================================================
   Highlight Text
   ========================================================================== */
.highlight {
	color: var(--sandviken-blue);
	font-weight: 600;
}

/* ==========================================================================
   About Text
   ========================================================================== */
.about-text h2 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2.8em;
	color: var(--sandviken-blue);
	font-weight: 700;
	margin-bottom: 25px;
}

.about-text p {
	font-size: 1.2em;
	line-height: 1.9;
	margin-bottom: 20px;
}

/* ==========================================================================
   Testimonial Section
   ========================================================================== */
.testimonial-section {
	position: relative;
}

.testimonial-section::before {
	content: '\201C';
	font-family: 'Cormorant Infant', serif;
	font-size: 8em;
	color: rgba(255, 255, 255, 0.15);
	position: absolute;
	top: -20px;
	left: 30px;
	line-height: 1;
	z-index: 0;
}

/* ==========================================================================
   Scroll Indicator
   ========================================================================== */
.scroll-indicator {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 50px;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	z-index: 3;
}

.scroll-indicator::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	background: white;
	border-radius: 50%;
	animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
	0%, 100% { top: 8px; opacity: 1; }
	50% { top: 24px; opacity: 0.3; }
}

/* ==========================================================================
   Reveal Animation (scroll-based)
   ========================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--dark-gray) !important;
	color: var(--white);
}

.site-footer h3 {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 1.1em !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 25px;
	color: var(--white) !important;
}

.site-footer p,
.site-footer li {
	font-size: 0.95em;
	line-height: 1.8;
	opacity: 0.9;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: none !important;
	transition: color 0.3s ease;
}

.site-footer a:hover {
	color: var(--warm-orange) !important;
}

.site-footer ul {
	list-style: none;
	padding: 0;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
	font-size: 0.9em;
	opacity: 0.7;
}

.footer-logo {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--white);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 15px;
}

/* ==========================================================================
   Konfirmation Page — Content Boxes
   ========================================================================== */
.content-box {
	background: var(--white);
	padding: 45px;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	margin: 30px 0;
}

.content-box h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2em;
	color: var(--sandviken-blue);
	margin-bottom: 20px;
}

.content-box p {
	font-size: 1.05em;
	line-height: 1.9;
	margin-bottom: 15px;
}

.content-box ul {
	list-style: none;
	padding: 0;
}

.content-box ul li {
	padding: 10px 0 10px 30px;
	position: relative;
	font-size: 1.05em;
	line-height: 1.7;
}

.content-box ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--gard-green);
	font-weight: bold;
}

/* Konfirmation — Info Cards (auto-fit: 4 cols for 4 items, 3 cols for 3 items) */
.konf-info-cards {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: 25px !important;
	margin-top: 50px;
	align-items: stretch !important;
}

.konf-info-card {
	background: var(--white);
	padding: 35px 25px;
	border-radius: 15px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
	text-align: center;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
}

.konf-info-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.konf-info-card-icon {
	font-size: 2.5em;
	margin-bottom: 15px;
}

.konf-info-card h4 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.4em;
	color: var(--sandviken-blue);
	margin-bottom: 10px;
}

/* Konfirmation — Schedule Grid */
.schedule-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: 12px !important;
	margin: 30px 0;
}

.schedule-item {
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 0.95em;
}

.schedule-item-blue {
	background: var(--light-blue);
}

.schedule-item-green {
	background: var(--light-green);
}

.schedule-time {
	font-weight: 700;
	margin-right: 8px;
}

.schedule-time-blue {
	color: var(--sandviken-blue);
}

.schedule-time-green {
	color: var(--gard-green);
}

/* Konfirmation — Two Column Layout */
.two-column-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 30px !important;
	align-items: stretch;
}

/* Three Column Layout (e.g. Praktiska detaljer with 3 boxes) */
.three-column-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px !important;
	align-items: stretch;
}

.three-column-grid .content-box {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.two-column-grid .content-box {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

/* Konfirmation — Price Table */
.price-table {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	margin-bottom: 40px;
}

.price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 35px;
	font-size: 1.05em;
	border-bottom: 1px solid #eee;
}

.price-row:last-child {
	border-bottom: none;
}

.price-row.price-total {
	background: linear-gradient(135deg, var(--sandviken-blue), #1565C0);
	color: var(--white);
	font-weight: 700;
	font-size: 1.15em;
}

.price-row:not(.price-total) {
	background: var(--white);
}

.price-amount {
	font-weight: 700;
	font-size: 1.1em;
	white-space: nowrap;
}

/* Konfirmation — Testimonials */
.testimonial-card {
	background: var(--white);
	padding: 35px 40px;
	border-radius: 20px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
	margin-bottom: 25px;
	border-left: 4px solid var(--sandviken-blue);
	position: relative;
}

.testimonial-card p {
	font-size: 1.05em;
	line-height: 1.8;
	font-style: italic;
}

.testimonial-author {
	font-weight: 600;
	color: var(--sandviken-blue);
	font-style: normal !important;
	margin-top: 15px;
}

/* Konfirmation — Step Boxes (Anmälningsprocess) */
.step-box {
	background: linear-gradient(135deg, var(--light-blue), var(--light-green));
	padding: 30px 35px;
	border-radius: 15px;
	margin-bottom: 20px;
}

.step-box h4 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.5em;
	color: var(--sandviken-blue);
	margin-bottom: 10px;
}

.step-box p {
	font-size: 1em;
	line-height: 1.8;
}

/* ==========================================================================
   Collapsible FAQ (details/summary accordion)
   ========================================================================== */
.wp-block-details {
	background: var(--white);
	border-radius: 12px;
	margin-bottom: 15px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.wp-block-details:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.wp-block-details summary {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.3em;
	font-weight: 700;
	color: var(--sandviken-blue);
	padding: 22px 30px;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.3s ease;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: '+';
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4em;
	font-weight: 300;
	color: var(--sandviken-blue);
	transition: transform 0.3s ease;
	flex-shrink: 0;
	margin-left: 15px;
}

.wp-block-details[open] summary::after {
	content: '−';
}

.wp-block-details summary:hover {
	background: var(--light-blue);
}

.wp-block-details[open] summary {
	border-bottom: 1px solid #eee;
}

.wp-block-details > :not(summary) {
	padding: 0 30px 20px;
}

.wp-block-details p {
	font-size: 0.95em;
	line-height: 1.8;
	padding-top: 15px;
}

/* Toggle all details button */
.toggle-all-wrapper {
	text-align: right;
	margin-bottom: 20px;
}

.toggle-all-details-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 2px solid var(--sandviken-blue);
	color: var(--sandviken-blue);
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.5px;
}

.toggle-all-details-btn:hover {
	background: var(--sandviken-blue);
	color: #fff;
}

.toggle-all-icon {
	font-size: 0.75em;
	transition: transform 0.3s ease;
}

/* ==========================================================================
   Aktuellt section — auto-hide when empty, dark blue background
   ========================================================================== */

/* Hide the entire Aktuellt section only when WP renders no-results block */
.aktuellt-section:has(.wp-block-query-no-results) {
	display: none !important;
}

/* Aktuellt card styling — white cards on dark blue bg */
.aktuellt-card {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.aktuellt-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
}

/* Featured image container */
.aktuellt-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.aktuellt-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	display: block;
}

.aktuellt-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Text colors inside cards (override parent white text) */
.aktuellt-card .wp-block-post-excerpt,
.aktuellt-card .wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
	color: #555 !important;
}

.aktuellt-card .wp-block-post-date {
	color: #888 !important;
}

/* Aktuellt grid — equal-height items, override WP inline 1fr */
.aktuellt-grid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 380px)) !important;
	justify-content: center !important;
	gap: 30px;
	align-items: stretch !important;
}

/*
 * Equal-height card chain:
 * <ul.aktuellt-grid> → <li> → (optional WP wrappers) → .aktuellt-card
 * Every element in the chain must stretch via flex.
 */
.aktuellt-grid > li {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
}

/* Any WP-injected wrapper inside li */
.aktuellt-grid > li > * {
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* The card itself */
.aktuellt-card {
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Inner content group (text area below image) */
.aktuellt-card > .wp-block-group {
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* The excerpt area pushes "Läs mer" to the bottom */
.aktuellt-card .wp-block-post-excerpt {
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

.aktuellt-card .wp-block-post-excerpt__excerpt {
	flex-grow: 1 !important;
}

/* Aktuellt "Läs mer" link */
.aktuellt-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	color: #1B75BB !important;
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none !important;
	margin-top: 12px;
	transition: color 0.2s ease;
}

.aktuellt-card .wp-block-post-excerpt__more-link:hover {
	color: #FFA726 !important;
}

/* ==========================================================================
   Blog Archive Cards (Nyheter & Aktuellt archive page)
   ========================================================================== */
.blog-card {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
}

.blog-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.blog-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	display: block;
}

.blog-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Inner content area fills remaining space */
.blog-card > .wp-block-group {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.blog-card .wp-block-post-excerpt {
	flex-grow: 1;
}

/* "Läs mer" link styling */
.blog-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	color: #1B75BB !important;
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none !important;
	margin-top: 10px;
	transition: color 0.2s ease;
}

.blog-card .wp-block-post-excerpt__more-link:hover {
	color: #FFA726 !important;
}

/* Equal-height for blog grid li items */
.blog-archive-grid > li {
	display: flex !important;
	flex-direction: column !important;
}

.blog-archive-grid > li > * {
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Pagination styling */
.blog-archive-query .wp-block-query-pagination {
	gap: 8px;
}

.blog-archive-query .wp-block-query-pagination-numbers .page-numbers,
.blog-archive-query .wp-block-query-pagination-previous,
.blog-archive-query .wp-block-query-pagination-next {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.95em;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.25s ease;
	color: #1B75BB;
	background: #E3F2FD;
}

.blog-archive-query .wp-block-query-pagination-numbers .page-numbers:hover,
.blog-archive-query .wp-block-query-pagination-previous:hover,
.blog-archive-query .wp-block-query-pagination-next:hover {
	background: #1B75BB;
	color: #fff;
}

.blog-archive-query .wp-block-query-pagination-numbers .page-numbers.current {
	background: #1B75BB;
	color: #fff;
}

/* ==========================================================================
   Single Post — Individual blog post page
   ========================================================================== */

/* Hero uses featured image as background */
.single-post-hero {
	text-align: center;
}

/* Article content styling */
.single-post-content {
	font-size: 1.05em;
	line-height: 1.9;
	color: #333;
}

.single-post-content p {
	margin-bottom: 1.4em;
}

.single-post-content h2 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2em;
	color: var(--sandviken-blue);
	margin-top: 2em;
	margin-bottom: 0.6em;
}

.single-post-content h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.5em;
	color: var(--sandviken-blue);
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.single-post-content img {
	border-radius: 12px;
	margin: 1.5em 0;
}

.single-post-content blockquote {
	border-left: 4px solid var(--sandviken-blue);
	padding: 20px 30px;
	margin: 2em 0;
	background: var(--light-blue);
	border-radius: 0 12px 12px 0;
	font-style: italic;
	color: #555;
}

.single-post-content ul,
.single-post-content ol {
	padding-left: 25px;
	margin: 1em 0;
}

.single-post-content li {
	margin-bottom: 0.5em;
	line-height: 1.8;
}

/* Post navigation — button style */
.single-post-nav {
	gap: 12px !important;
}

.single-post-nav a,
.single-post-nav .wp-block-post-navigation-link a {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
	font-weight: 600;
	padding: 12px 28px;
	border-radius: 50px;
	text-decoration: none !important;
	transition: all 0.25s ease;
	color: #1B75BB !important;
	background: #E3F2FD;
	white-space: nowrap;
}

.single-post-nav a:hover,
.single-post-nav .wp-block-post-navigation-link a:hover {
	background: #1B75BB;
	color: #fff !important;
	transform: translateY(-2px);
}

/* "Startsidan" button — green accent */
.single-post-nav-back a {
	background: rgba(76, 175, 80, 0.12) !important;
	color: #4CAF50 !important;
}

.single-post-nav-back a:hover {
	background: #4CAF50 !important;
	color: #fff !important;
}

/* Mobile: stack nav buttons vertically */
@media (max-width: 600px) {
	.single-post-nav {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.single-post-nav a,
	.single-post-nav .wp-block-post-navigation-link a {
		text-align: center;
		padding: 12px 20px;
	}
}

/* Extras price box */
.extras-price-box {
	transition: all 0.3s ease;
}

.extras-price-box:hover {
	box-shadow: 0 5px 20px rgba(27, 117, 187, 0.15);
}

/* Kanot subpage navigation buttons */
.kanot-nav-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
}

.kanot-nav-grid > .wp-block-group__inner-container {
	display: contents !important;
}

.kanot-nav-card {
	background: var(--white);
	border-radius: 15px;
	padding: 30px 25px;
	text-align: center;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	border: 2px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.kanot-nav-card .wp-block-buttons {
	margin-top: auto;
}

.kanot-nav-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	border-color: var(--sandviken-blue);
}

.kanot-nav-card h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.5em;
	color: var(--sandviken-blue);
	margin-bottom: 10px;
}

/* Tillval price table */
.tillval-price-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--white);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tillval-price-table thead {
	background: var(--sandviken-blue);
	color: var(--white);
}

.tillval-price-table thead th {
	padding: 12px 16px;
	font-weight: 600;
	font-size: 0.9em;
	text-align: center;
	border: none;
}

.tillval-price-table thead th:first-child {
	text-align: left;
}

.tillval-price-table tbody td {
	padding: 10px 16px;
	border-bottom: 1px solid #eee;
	text-align: center;
	font-size: 0.9em;
}

.tillval-price-table tbody td:first-child {
	text-align: left;
}

.tillval-price-table tbody tr:last-child td {
	border-bottom: none;
}

.tillval-price-table tbody tr:hover {
	background: #f8f9fa;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1024px) {
	.feature-grid,
	.about-features {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-glass {
		padding: 30px 40px !important;
	}

	.hero-glass h1 {
		font-size: 2.5em !important;
	}
}

@media (max-width: 768px) {
	/* Prevent long words from overflowing on mobile (no hyphens — only break when needed) */
	h1, h2, h3, h4,
	.section-title,
	.subpage-hero h1,
	.hero-glass h1 {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* Subpage hero — stronger overlay + text readability on mobile */
	.subpage-hero .wp-block-cover__background {
		opacity: 0.5 !important;
	}

	.subpage-hero h1 {
		font-size: 1.8em !important;
		padding: 0 15px;
		text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
	}

	.subpage-hero p {
		font-size: 1em !important;
		padding: 0 10px;
		text-shadow: none !important;
	}

	/* All section h2 headings smaller on mobile (overrides inline 3em) */
	.wp-block-heading[style*="font-size:3em"],
	.wp-block-heading[style*="font-size:2.8em"] {
		font-size: 1.6em !important;
	}

	/* Mobile: smaller floating logo, fades out on scroll via JS */
	.site-logo-floating {
		padding: 8px 12px 12px 12px;
		border-radius: 0 0 10px 10px;
	}

	.site-logo-floating img {
		height: 70px;
	}

	.hero-section {
		min-height: 45vh;
	}

	.hero-glass {
		padding: 20px 22px 25px !important;
		width: 85%;
		max-width: 340px;
		border-radius: 20px !important;
	}

	.hero-glass h1 {
		font-size: 1.6em !important;
		margin-bottom: 8px !important;
	}

	.hero-glass .hero-subtitle {
		font-size: 0.85em;
		margin-bottom: 5px;
	}

	.hero-glass .hero-tagline {
		display: none;
	}

	.hero-glass .hero-logo-img img {
		max-height: 50px !important;
	}

	.hero-cta {
		flex-direction: column;
		align-items: center;
		gap: 10px !important;
	}

	.hero-cta .wp-block-button__link {
		padding: 12px 25px !important;
		font-size: 0.85em !important;
		white-space: nowrap;
	}

	.feature-grid,
	.about-features {
		grid-template-columns: repeat(2, 1fr);
	}

	.tours-grid {
		grid-template-columns: 1fr;
	}

	.accommodation-grid {
		grid-template-columns: 1fr;
	}

	/* Ensure prices & PDF links show on mobile */
	.accommodation-card {
		overflow: visible;
	}

	.accommodation-price {
		font-size: 1em !important;
		margin-top: 12px !important;
		margin-bottom: 4px !important;
	}

	.accommodation-content p[style*="font-size:0.85em"] {
		font-size: 0.85em !important;
	}

	.info-grid {
		grid-template-columns: 1fr;
	}

	.equipment-list {
		grid-template-columns: 1fr;
	}

	.feature-boxes {
		grid-template-columns: 1fr !important;
	}

	.group-chip {
		padding: 10px 18px;
		font-size: 0.85em;
	}

	.camps-grid {
		grid-template-columns: 1fr;
	}

	.featured-camp {
		padding: 20px 10px !important;
	}

	.featured-camp-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Center the lone 3rd box when there are 3 items in a 2-col grid */
	.featured-camp-stats:not(.stats-4col) > .stat-box:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 50%;
		justify-self: center;
	}

	.featured-camp-stats.stats-4col {
		grid-template-columns: repeat(2, 1fr);
	}

	.registration-banner {
		padding: 30px 20px;
	}

	section,
	.wp-block-group[class*="section"],
	.wp-block-group[style*="padding-left:40px"] {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.section-title,
	.cta-section h2 {
		font-size: 2em;
	}

	.highlight-box {
		padding: 40px 30px;
	}

	/* Konfirmation mobile */
	.konf-info-cards {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 15px !important;
	}

	.konf-info-card {
		padding: 25px 15px;
	}

	.two-column-grid {
		grid-template-columns: 1fr !important;
	}

	.three-column-grid {
		grid-template-columns: 1fr !important;
	}

	.content-box {
		padding: 30px 22px;
	}

	.price-row {
		padding: 15px 20px;
		font-size: 0.95em;
	}

	.schedule-grid {
		grid-template-columns: 1fr 1fr;
	}

	.testimonial-card {
		padding: 25px 30px;
	}

	/* Collapsible FAQ mobile */
	.wp-block-details summary {
		font-size: 1.1em;
		padding: 18px 20px;
	}

	.wp-block-details > :not(summary) {
		padding: 0 20px 15px;
	}

	/* Toggle all button mobile */
	.toggle-all-details-btn {
		font-size: 0.8em;
		padding: 8px 16px;
	}

	/* Aktuellt cards mobile */
	.aktuellt-card .wp-block-post-title {
		font-size: 1.2em !important;
	}

	/* Kanot nav grid mobile */
	.kanot-nav-grid {
		grid-template-columns: 1fr !important;
	}

	/* Tillval price table mobile */
	.tillval-price-table table {
		font-size: 0.85em;
	}
	.tillval-price-table thead th,
	.tillval-price-table tbody td {
		padding: 8px 10px;
	}
}

@media (max-width: 480px) {
	.feature-grid,
	.about-features {
		grid-template-columns: 1fr;
	}

	.hero-cta .wp-block-button__link {
		padding: 11px 20px !important;
		font-size: 0.8em !important;
	}
}

/* ==========================================================================
   GDPR Cookie Consent Banner
   ========================================================================== */
.cookie-consent-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: rgba(66, 66, 66, 0.97);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25);
	transform: translateY(100%);
	-webkit-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-consent-banner.is-visible {
	transform: translateY(0);
}

.cookie-consent-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 25px 35px;
}

.cookie-consent-text strong {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.4em;
	font-weight: 700;
	display: block;
	margin-bottom: 8px;
	color: #fff;
}

.cookie-consent-text p {
	font-size: 0.92em;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 8px;
}

.cookie-consent-policy-link {
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 0.85em;
	text-decoration: underline !important;
	transition: color 0.2s;
}

.cookie-consent-policy-link:hover {
	color: #FFA726 !important;
}

/* Buttons row */
.cookie-consent-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.cookie-btn {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.88em;
	font-weight: 600;
	border: none;
	border-radius: 50px;
	padding: 12px 28px;
	cursor: pointer;
	transition: all 0.25s ease;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.cookie-btn-accept {
	background: #4CAF50;
	color: #fff;
}

.cookie-btn-accept:hover {
	background: #388E3C;
	transform: translateY(-2px);
}

.cookie-btn-reject {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.cookie-btn-reject:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-2px);
}

.cookie-btn-settings {
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-btn-settings:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

/* Settings panel */
.cookie-consent-settings {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cookie-setting-row {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-setting-row:last-of-type {
	border-bottom: none;
}

.cookie-setting-label label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	white-space: nowrap;
}

/* Custom toggle switch */
.cookie-setting-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.cookie-toggle {
	display: inline-block;
	width: 42px;
	height: 24px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	position: relative;
	transition: background 0.3s;
	flex-shrink: 0;
}

.cookie-toggle::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.3s;
}

input[type="checkbox"]:checked + .cookie-toggle {
	background: #4CAF50;
}

input[type="checkbox"]:checked + .cookie-toggle::after {
	transform: translateX(18px);
}

input[type="checkbox"]:disabled + .cookie-toggle {
	background: #4CAF50;
	opacity: 0.6;
	cursor: not-allowed;
}

.cookie-cat-name {
	font-weight: 600;
	font-size: 0.95em;
}

.cookie-cat-desc {
	font-size: 0.82em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	line-height: 1.5;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.cookie-consent-inner {
		padding: 20px 18px;
	}

	.cookie-consent-text strong {
		font-size: 1.2em;
	}

	.cookie-consent-text p {
		font-size: 0.85em;
	}

	.cookie-consent-buttons {
		flex-direction: column;
	}

	.cookie-btn {
		text-align: center;
		padding: 12px 20px;
		font-size: 0.85em;
	}

	.cookie-setting-row {
		flex-direction: column;
		gap: 5px;
	}
}

/* ==========================================================================
   TRAIL INFO MODAL
   ========================================================================== */
.trail-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 10000;
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.trail-modal-overlay.active {
	opacity: 1;
}

.trail-modal {
	background: #fff;
	border-radius: 20px;
	max-width: 700px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	transform: translateY(30px);
	transition: transform 0.3s ease;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.trail-modal-overlay.active .trail-modal {
	transform: translateY(0);
}

.trail-modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: rgba(255, 255, 255, 0.3);
	border: none;
	color: #fff;
	font-size: 2em;
	cursor: pointer;
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background 0.2s;
}

.trail-modal-close:hover {
	background: rgba(255, 255, 255, 0.5);
}

.trail-modal-header {
	padding: 35px 30px 25px;
	border-radius: 20px 20px 0 0;
	color: #fff;
	text-align: center;
}

.trail-modal-header h2 {
	font-family: 'Cormorant Infant', serif;
	font-size: 2.2em;
	font-weight: 700;
	margin: 0 0 8px;
	color: #fff;
}

.trail-modal-header p {
	font-size: 1.05em;
	margin: 0;
	opacity: 0.9;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
}

.trail-modal-body {
	padding: 30px;
}

.trail-modal-body h3 {
	font-family: 'Cormorant Infant', serif;
	font-size: 1.5em;
	color: #1B3A4B;
	margin: 25px 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f0f0f0;
}

.trail-modal-body h3:first-child {
	margin-top: 0;
}

.trail-modal-body p {
	font-size: 0.95em;
	line-height: 1.7;
	color: #444;
	margin: 0 0 12px;
}

.trail-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-bottom: 25px;
}

.trail-fact {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 15px;
	text-align: center;
}

.trail-fact strong {
	display: block;
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #888;
	margin-bottom: 5px;
}

.trail-fact span {
	display: block;
	font-size: 0.95em;
	font-weight: 600;
	color: #1B3A4B;
}

/* Trail map toggle button & embedded map */
.trail-map-section {
	margin-top: 25px;
	border-top: 2px solid #f0f0f0;
	padding-top: 20px;
}

.trail-map-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, #1B75BB, #2E86C1);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 1.05em;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 3px 12px rgba(27, 117, 187, 0.3);
}

.trail-map-toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 18px rgba(27, 117, 187, 0.4);
}

.trail-map-toggle-icon {
	font-size: 1.3em;
}

.trail-map-section.open .trail-map-toggle {
	border-radius: 12px 12px 0 0;
	background: linear-gradient(135deg, #155d96, #1B75BB);
}

.trail-map-container {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	border-radius: 0 0 12px 12px;
	background: #f0f4f8;
}

.trail-map-section.open .trail-map-container {
	max-height: 500px;
}

.trail-map-container iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
	border-radius: 0 0 12px 12px;
}

/* Trail modal mobile */
@media (max-width: 600px) {
	.trail-modal {
		max-height: 90vh;
		max-width: 100%;
		border-radius: 15px;
		margin: 0;
		box-sizing: border-box;
	}

	.trail-modal-header {
		padding: 25px 20px 20px;
		border-radius: 15px 15px 0 0;
	}

	.trail-modal-header h2 {
		font-size: 1.7em;
	}

	.trail-modal-body {
		padding: 20px;
	}

	.trail-facts {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.trail-modal-close {
		top: 8px;
		right: 10px;
		font-size: 1.8em;
	}

	.trail-map-container iframe {
		height: 320px;
	}

	.trail-map-section.open .trail-map-container {
		max-height: 370px;
	}

	.trail-map-toggle {
		font-size: 0.95em;
		padding: 12px 16px;
	}
}