/* ================================================
   Saunaseura — Block Styles v3
   Nordic lakeside redesign
   ================================================

   TABLE OF CONTENTS
   1. CSS Variables
   2. Base & Typography
   3. Header (transparent → solid on scroll)
   4. Hero
   5. Page Sections
   6. About Section
   7. Gallery
   8. Info Columns
   9. Subpage Title Banner
   10. Featured Image
   11. Content Area
   12. Buttons
   13. Footer
   14. Quote
   15. Tables
   16. Separator & Misc
   17. Contact Form 7
   18. Mobile Navigation
   19. Responsive
   ================================================ */

/* ================================================
   1. CSS VARIABLES
   ================================================ */
:root {
	/* Colors */
	--c-bg:       #F6F3EE;
	--c-card:     #FCFBF8;
	--c-text:     #2C2C2A;
	--c-muted:    #6B6560;
	--c-accent:   #8A6748;
	--c-accent-d: #6B5039;
	--c-dark:     #3B352F;
	--c-border:   #E2DDD7;
	--c-white:    #FFFFFF;

	/* Typography */
	--font-body:    Lato, 'Helvetica Neue', Arial, sans-serif;
	--font-display: 'Cormorant Garamond', Georgia, serif;

	/* Spacing */
	--space-xs:  0.5rem;
	--space-sm:  1rem;
	--space-md:  1.5rem;
	--space-lg:  3rem;
	--space-xl:  5rem;
	--space-2xl: 7rem;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;

	/* Transitions */
	--transition-fast:   0.2s ease;
	--transition-medium: 0.35s ease;
	--transition-slow:   0.5s ease;

	/* Shadows */
	--shadow-sm: 0 1px 4px rgba(44,44,42,0.08);
	--shadow-md: 0 4px 16px rgba(44,44,42,0.10);
	--shadow-lg: 0 8px 32px rgba(44,44,42,0.14);
}

/* ================================================
   2. BASE & TYPOGRAPHY
   ================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	margin: 0;
}

/* Display font for headings */
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--c-text);
	line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

h4, h5, h6 {
	font-family: var(--font-body);
	font-weight: 700;
}

p { line-height: 1.8; }

a {
	color: var(--c-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}
a:hover { color: var(--c-accent-d); }

/* Eliminate default block gaps between top-level blocks */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ================================================
   3. HEADER
   Transparent over hero, solid on scroll.
   JS adds .is-scrolled class via functions.php.
   ================================================ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: transparent;
	transition:
		background var(--transition-slow),
		backdrop-filter var(--transition-slow),
		box-shadow var(--transition-slow);
}

/* Always-visible top gradient to ensure nav readability */
.site-header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: linear-gradient(to bottom, rgba(20,16,12,0.65) 0%, transparent 100%);
	pointer-events: none;
	z-index: -1;
	transition: opacity var(--transition-slow);
}

/* Hide the pseudo-element once scrolled — solid bg takes over */
.site-header.is-scrolled::after {
	opacity: 0;
}

/* Scrolled state — added by JavaScript */
.site-header.is-scrolled {
	background: rgba(59,53,47,0.96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

/* Always show background when mobile menu is open */
.site-header:has(.is-menu-open) {
	background: var(--c-dark);
}

.site-header .wp-block-group {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-md);
}

/* Logo */
.site-header .wp-block-site-logo {
	line-height: 0;
	flex-shrink: 0;
}
.site-header .wp-block-site-logo a { display: inline-block; line-height: 0; }
.site-header .wp-block-site-logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Navigation links */
.site-header .wp-block-navigation,
.site-header .wp-block-navigation__container {
	gap: 0 !important;
}
.site-header .wp-block-navigation a {
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.9) !important;
	text-decoration: none;
	padding: 1.25rem 0.9rem !important;
	display: block;
	transition: color var(--transition-fast), background var(--transition-fast);
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a {
	color: var(--c-white) !important;
	background: rgba(255,255,255,0.08);
}

/* Hamburger button */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: rgba(255,255,255,0.9) !important;
}

/* Mobile overlay */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--c-dark);
}

/* ================================================
   4. HERO
   ================================================ */
.hero-cover.wp-block-cover {
	min-height: 50vh;
	/* Push content down so it clears the fixed header */
	padding-top: 80px;
}
.hero-cover .wp-block-cover__inner-container {
	padding: var(--space-lg) 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: inherit;
}

/* Warm gradient overlay — applied via Cover block dim + this CSS */
.hero-cover .wp-block-cover__background {
	background: linear-gradient(
		to top,
		rgba(44,38,32,0.72) 0%,
		rgba(44,38,32,0.35) 50%,
		rgba(44,38,32,0.10) 100%
	) !important;
	opacity: 1 !important;
}

.hero-cover h2 {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 600;
	color: var(--c-white);
	line-height: 1.1;
	margin: 0 0 var(--space-sm);
	text-shadow: 0 2px 8px rgba(0,0,0,0.3);
	letter-spacing: -0.01em;
}
.hero-cover p {
	color: rgba(255,255,255,0.88);
	font-size: 1.05rem;
	margin: 0 0 var(--space-md);
	max-width: 520px;
	line-height: 1.7;
}
.hero-cover .wp-block-buttons { gap: var(--space-sm); }

/* Hero buttons */
.hero-cover .wp-block-button__link {
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius-md);
	padding: 0.8em 2em;
	text-decoration: none;
	transition:
		background var(--transition-medium),
		color var(--transition-medium),
		transform var(--transition-fast),
		box-shadow var(--transition-medium);
}
.hero-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--c-accent) !important;
	color: var(--c-white) !important;
	border: 2px solid var(--c-accent) !important;
}
.hero-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--c-accent-d) !important;
	border-color: var(--c-accent-d) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.hero-cover .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--c-white) !important;
	border: 1.5px solid rgba(255,255,255,0.7) !important;
}
.hero-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255,255,255,0.12) !important;
	transform: translateY(-1px);
}

/* ================================================
   5. PAGE SECTIONS
   ================================================ */
.section-white { background: var(--c-white); }
.section-light { background: var(--c-bg); }
.section-card  { background: var(--c-card); }
.section-dark  { background: var(--c-dark); }

.section-padded {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
	padding-left: var(--space-sm);
	padding-right: var(--space-sm);
}

/* Eyebrow label above section headings */
.section-eyebrow,
.about-section h6 {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin: 0 0 var(--space-sm);
	display: block;
}

/* Thin accent line under eyebrow */
.section-eyebrow::after,
.about-section h6::after {
	content: '';
	display: block;
	width: 32px;
	height: 1px;
	background: var(--c-accent);
	margin-top: 6px;
}

/* ================================================
   6. ABOUT SECTION
   ================================================ */
.about-section h2 { margin-top: var(--space-xs); }
.about-section img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-md);
}

/* ================================================
   7. GALLERY
   ================================================ */
.gallery-section h2 {
	text-align: center;
	margin-bottom: var(--space-xs);
}
.gallery-section .gallery-intro {
	text-align: center;
	margin-bottom: var(--space-lg);
	color: var(--c-muted);
	font-size: 0.95rem;
}

.wp-block-gallery.gallery-grid {
	gap: 10px !important;
}
.wp-block-gallery.gallery-grid .wp-block-image {
	overflow: hidden;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}
.wp-block-gallery.gallery-grid .wp-block-image img {
	object-fit: cover;
	width: 100%;
	height: 160px;
	transition: transform var(--transition-medium), opacity var(--transition-fast);
	border-radius: var(--radius-md);
}
.wp-block-gallery.gallery-grid .wp-block-image:hover img {
	transform: scale(1.04);
	opacity: 0.92;
}

.gallery-more-link {
	display: inline-block;
	margin-top: var(--space-md);
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--c-accent);
	padding-bottom: 2px;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.gallery-more-link:hover {
	color: var(--c-accent-d);
	border-color: var(--c-accent-d);
}

/* ================================================
   8. INFO COLUMNS
   ================================================ */
.info-section h3 {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--c-border);
}
.info-section p,
.info-section li {
	font-size: 0.92rem;
	line-height: 1.75;
	color: var(--c-muted);
}

/* ================================================
   9. SUBPAGE TITLE BANNER
   ================================================ */
.page-title-banner {
	background: var(--c-dark);
	padding: var(--space-md);
}
.page-title-banner h1 {
	font-family: var(--font-display);
	color: var(--c-white);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0;
	font-weight: 500;
}

/* ================================================
   10. FEATURED IMAGE
   ================================================ */
.wp-block-post-featured-image {
	margin: 0;
	line-height: 0;
}
.wp-block-post-featured-image img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	display: block;
}

/* Title banner with no featured image above it needs header clearance */
.site-header + * .page-title-banner,
.page-title-banner {
	padding-top: 70px;
}

/* Reset when featured image is present above */
.wp-block-post-featured-image + .page-title-banner {
	padding: var(--space-md)
}


/* ================================================
   11. CONTENT AREA
   ================================================ */
.page-content-area {
	padding: var(--space-lg) 0 var(--space-xl);
	background: var(--c-white);
}
.page-content-area .wp-block-post-content { max-width: 860px; }
.page-content-area h1,
.page-content-area h2 {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-sm);
}
.page-content-area h3 {
	margin-top: var(--space-md);
	margin-bottom: var(--space-xs);
	color: var(--c-text);
}
.page-content-area strong { font-weight: 700; }
.page-content-area a { color: var(--c-accent); }
.page-content-area a:hover { color: var(--c-accent-d); }

/* Single post title — smaller and lower */
.wp-singular .page-title-banner h1,
.single .page-title-banner h1 {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 500;
	margin-top: var(--space-md);
	margin-bottom: var(--space-sm);
}

/* ================================================
   12. BUTTONS
   ================================================ */
.wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius-md);
	padding: 0.8em 2em;
	transition:
		background var(--transition-medium),
		color var(--transition-medium),
		transform var(--transition-fast),
		box-shadow var(--transition-medium);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--c-accent);
	color: var(--c-white);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--c-accent-d);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-accent);
	border: 1.5px solid var(--c-accent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--c-accent);
	color: var(--c-white);
	transform: translateY(-1px);
}

/* ================================================
   13. FOOTER
   ================================================ */
.site-footer {
	background: var(--c-dark);
	color: #b8b2ac;
	padding: var(--space-xl) var(--space-md) var(--space-md);
	font-size: 0.88rem;
}
.site-footer .wp-block-group > .wp-block-columns {
	max-width: 1200px;
	margin: 0 auto;
}
.site-footer h3 {
	font-family: var(--font-body);
	color: var(--c-white);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--space-md);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer p,
.site-footer li {
	color: #b8b2ac;
	font-size: 0.87rem;
	line-height: 1.75;
	margin: 0 0 0.3rem;
}

.site-footer a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #b8b2ac;
	transition: color var(--transition-fast);

}

.site-footer a {
}
.site-footer a:hover { color: var(--c-white); }
.site-footer strong { color: #e8e4e0; }

.site-footer .footer-bottom {
	max-width: 1200px;
	margin: var(--space-lg) auto 0;
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-xs);
	font-size: 0.8rem;
	color: #777169;
}
.site-footer .footer-bottom a { color: #777169; }
.site-footer .footer-bottom a:hover { color: var(--c-white); }

/* ================================================
   14. QUOTE
   ================================================ */
.wp-block-quote {
	border-left: 2px solid var(--c-accent);
	padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
	margin: var(--space-md) 0;
}
.wp-block-quote p {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--c-text);
	font-size: 1.1rem;
	line-height: 1.7;
}
.wp-block-quote cite {
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-accent);
}

/* ================================================
   15. TABLES
   ================================================ */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.92rem;
}
.wp-block-table th {
	background: var(--c-dark);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
	text-align: left;
}
.wp-block-table td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--c-border);
	color: var(--c-text);
}
.wp-block-table.is-style-stripes tbody tr:nth-child(even) td {
	background: var(--c-card);
}

/* ================================================
   16. SEPARATOR & MISC
   ================================================ */
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--c-border);
	margin: 0;
}

.wp-block-columns { gap: 3rem; }

.error-404-section {
	background: var(--c-white);
	padding: var(--space-2xl) var(--space-md);
	text-align: center;
}

/* Fix WordPress native gallery lightbox black screen on mobile */
.wp-lightbox-overlay { height: 100dvh !important; }
.wp-lightbox-overlay .wp-lightbox-container {
	height: 100dvh !important;
	max-height: 100dvh !important;
}
.wp-lightbox-overlay img {
	max-height: 90dvh !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}
.wp-lightbox-overlay figure {
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ================================================
   17. CONTACT FORM 7
   ================================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.7em 1em;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--c-text);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	box-sizing: border-box;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(138,103,72,0.12);
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 label {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--c-text);
	margin-bottom: 0.3rem;
}
.wpcf7 p { margin-bottom: var(--space-md) !important; }
.wpcf7 input[type="submit"] {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--c-accent);
	color: var(--c-white);
	border: none;
	border-radius: var(--radius-md);
	padding: 0.8em 2em;
	cursor: pointer;
	transition: background var(--transition-medium), transform var(--transition-fast);
}
.wpcf7 input[type="submit"]:hover {
	background: var(--c-accent-d);
	transform: translateY(-1px);
}
.wpcf7-response-output {
	margin-top: var(--space-sm) !important;
	padding: 0.75rem 1rem !important;
	border-radius: var(--radius-sm) !important;
	font-size: 0.9rem;
	border: none !important;
}
.wpcf7 .wpcf7-not-valid-tip {
	color: #b91c1c;
	font-size: 0.82rem;
	margin-top: 0.25rem;
}

/* ================================================
   18. MOBILE NAVIGATION CONTACT INFO
   ================================================ */
.nav-contact-info { display: none; }
.is-menu-open .nav-contact-info {
	display: block;
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255,255,255,0.12);
}
.is-menu-open .nav-contact-info p {
	color: #b8b2ac;
	font-size: 0.88rem;
	margin-bottom: var(--space-xs);
	text-align: right;
}
.is-menu-open .nav-contact-info a {
	color: #b8b2ac;
	text-decoration: none;
}

/* ================================================
   19. RESPONSIVE
   ================================================ */
@media (max-width: 781px) {
	.hero-cover.wp-block-cover {
		min-height: 75vh;
		padding-top: 70px;
	}
	.section-padded {
		padding-top: var(--space-lg);
		padding-bottom: var(--space-lg);
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
	.page-content-area {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
	.page-title-banner {
		padding-top: calc(var(--space-lg) + 60px);
	}
	.wp-block-columns { gap: var(--space-md); }
	.wp-block-gallery.gallery-grid .wp-block-image img { height: 110px; }

	/* Images last in columns on mobile */
	.wp-block-column:has(img) { order: 2; }
	.wp-block-column:not(:has(img)) { order: 1; }

/* Mobile nav overlay — cross-browser fix */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-dialog {
	background-color: #3B352F !important;
	background-image: none !important;
}

/* Target the actual overlay backdrop */
.has-modal-open,
.wp-block-navigation__responsive-container.is-menu-open::before,
.wp-block-navigation__responsive-container.is-menu-open::after {
	background-color: #3B352F !important;
	background-image: none !important;
}

	.wp-block-post-featured-image img { height: 260px; }
	
	.wp-block-gallery.gallery-grid .wp-block-image {
	width: calc(50% - 5px) !important;
	flex-basis: calc(50% - 5px) !important;
}
.wp-block-gallery.gallery-grid {
	flex-wrap: wrap !important;
	display: flex !important;
}
}