/*
Theme Name: Konfigurera
Theme URI: https://github.com/uppereight/uppereight-block-theme
Author: Uppereight
Author URI: https://uppereight.com
Description: Konfigurera - Built on the Uppereight block theme framework.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uppereight
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, editor-style

Uppereight Block Theme is a boilerplate WordPress Full Site Editing (FSE) theme
designed as a minimal, performance-optimized starting point for new projects.
*/

/**
 * Base Styles
 * ============================================
 * Minimal styles that cannot be expressed via theme.json.
 * Most styling is handled through theme.json configuration.
 */

/**
 * 1. Skip Link (minimal, no layout interference)
 * ============================================
 */
.skip-link {
	position: absolute;
	top: -100px;
	transform: translateX(-50%);
	z-index: 9999;
	padding: 8px 16px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.skip-link:focus {
	top: 8px;
}

/* ==========================================================================
   Utility Classes — Shadow, Aspect Ratio, Video
   ========================================================================== */

/* Shadow utilities (used on every card in the site) */
.has-shadow-sm { box-shadow: var(--wp--preset--shadow--sm); }
.has-shadow-md { box-shadow: var(--wp--preset--shadow--md); }
.has-shadow-lg { box-shadow: var(--wp--preset--shadow--lg); }

/* Aspect ratio helpers for video embeds */
.aspect-16-9 video,
.aspect-16-9 iframe {
	aspect-ratio: 16/9;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ==========================================================================
   Sticky Header
   ========================================================================== */
/* Sticky must be on the template-part wrapper, not the inner .site-header,
   because .site-header is the only child — sticky needs scrollable headroom. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* ==========================================================================
   Section Spacing — remove block gap between top-level full-width sections
   while keeping internal element spacing intact.
   Structure: .wp-site-blocks > main.wp-block-group > .alignfull
   ========================================================================== */
#main-content {
	margin-top: 0;
}
#main-content > .alignfull + .alignfull,
#main-content > .wp-block-separator + .alignfull,
#main-content > .alignfull + .wp-block-separator {
	margin-top: 0;
}

/* Remove default columns bottom margin from WP core */
.wp-block-columns {
	margin-bottom: 0;
}


/* ==========================================================================
   Card Hover Effects
   ========================================================================== */
.has-shadow-sm {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.has-shadow-sm:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* ==========================================================================
   Button Pill Shape — outer wrapper inherits border-radius so the
   has-*-background-color class background doesn't show squared corners.
   ========================================================================== */
.wp-block-button.has-background {
	border-radius: 999px;
}

/* ==========================================================================
   Button Hover Lift
   ========================================================================== */
.wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* ==========================================================================
   Separator Full Width
   ========================================================================== */
.wp-block-separator.is-style-wide {
	max-width: none;
	border-bottom: 0;
}

/* ==========================================================================
   Navigation Hover & Dropdown
   ========================================================================== */
.wp-block-navigation .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--primary);
}

/* Dropdown submenu styling — desktop only */
@media (min-width: 769px) {
	.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
		border-radius: 14px;
		box-shadow: var(--wp--preset--shadow--md);
		border: 1px solid var(--wp--preset--color--line);
		padding: 8px 0;
	}
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 10px 16px;
	}
}

/* ==========================================================================
   Mobile Menu Overlay — full-screen, large tap targets, branded
   ========================================================================== */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	padding-top: calc(var(--wp--preset--spacing--80) + 20px);
	background: var(--wp--preset--color--primary) !important;
}

/* Nav items — centered, generous spacing */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base) !important;
	font-size: 1.25rem;
	font-weight: 600;
	padding: 0.75rem 0;
	display: block;
	transition: color 0.15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* Layout — vertical stack, centered */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center !important;
	gap: 0.25rem !important;
}

/* Submenu items — smaller, muted */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0.25rem 0 1.5rem;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.25rem;
	font-weight: 600;
	padding: 0.5rem 0;
	color: var(--wp--preset--color--base) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* Parent submenu label — not clickable, section label */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
	outline: none;
	pointer-events: none;
	color: rgba(255, 255, 255, 0.5) !important;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding-bottom: 0.25rem;
}

/* Close button — larger, top-right */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--base) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Footer navigation spacing — tighten gap between heading and nav */
.site-footer .wp-block-navigation .wp-block-navigation-item {
	padding: 0;
}
.site-footer .wp-block-column > .wp-block-navigation {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Header min-height for consistent sizing */
.site-header > .wp-block-group {
	min-height: 56px;
}

/* Hide CTA button on mobile — nav hamburger is enough */
@media (max-width: 768px) {
	.site-header .wp-block-buttons {
		display: none;
	}
}

/* ==========================================================================
   Logo Bar — infinite marquee scroll
   ========================================================================== */
.logo-bar-query {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
	display: flex;
	width: max-content;
	animation: marquee-scroll 30s linear infinite;
}
.logo-bar-query:hover .marquee-track {
	animation-play-state: paused;
}
.marquee-list {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: var(--wp--preset--spacing--40);
}
.marquee-list + .marquee-list {
	margin-left: var(--wp--preset--spacing--40);
}
.marquee-item {
	flex: 0 0 auto;
}
.marquee-item a {
	display: block;
}
.logo-bar-query .wp-block-image {
	width: 140px;
	height: 52px;
	flex: 0 0 auto;
}
.logo-bar-query .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@keyframes marquee-scroll {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}
}
@media (max-width: 640px) {
	.logo-bar-query .wp-block-image {
		width: 110px;
		height: 44px;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.process-flow {
		flex-wrap: wrap;
	}
	.process-flow__arrow svg {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 782px) {
	.wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   Site Brand — SVG wordmarks: Konfigurera · Visualisera
   ========================================================================== */
.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.site-brand:hover {
	color: var(--wp--preset--color--primary);
}
.site-brand__logo {
	height: 26px;
	width: auto;
}
.site-brand__logo--sub {
	height: 0.85em;
	width: auto;
	margin-left: 0.15em;
}
.site-brand__sub {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	white-space: nowrap;
}

/* ==========================================================================
   Logo Bar — bordered boxes matching markup .logo-item
   ========================================================================== */
.logo-bar-query .wp-block-image {
	background: var(--wp--preset--color--base);
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
}
.logo-bar-query .wp-block-image img {
	border: none !important;
	border-radius: 0;
}

/* ==========================================================================
   Border Style Fix — WP block save() omits border-style, so borders need it via CSS.
   ========================================================================== */
.has-border-color {
	border-style: solid;
}
[style*="border-top-width"] {
	border-top-style: solid;
}
[style*="border-bottom-width"] {
	border-bottom-style: solid;
}

/* ==========================================================================
   Equal Height Cards — stretch cards inside equal-width columns and query grids.
   Excludes asymmetric layouts (e.g. prose + sidebar) via flex-basis check.
   ========================================================================== */
.wp-block-column:not([style*="flex-basis"]) > .has-shadow-sm:only-child {
	height: 100%;
}
.wp-block-post-template > li > .has-shadow-sm {
	height: 100%;
}

/* ==========================================================================
   Case Breadcrumb — navigation between hero and intro content.
   ========================================================================== */
.case-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}
.case-breadcrumb a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.case-breadcrumb a:hover {
	text-decoration: underline;
}
.case-breadcrumb svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

/* ==========================================================================
   Case Hero — responsive height overrides for the Cover block in post content.
   ========================================================================== */
@media (max-width: 980px) {
	.single-case .wp-block-cover[style*="min-height"] {
		min-height: 400px !important;
	}
}
@media (max-width: 640px) {
	.single-case .wp-block-cover[style*="min-height"] {
		min-height: 320px !important;
	}
}