/*
Theme Name: Minas Slöjdbyrå
Theme URI: https://wordpress.org/
Author: Minas Slöjdbyrå
Author URI: https://wordpress.org/
Description: Ett modernt och hemtrevligt tema för slöjdbyrå med varma, naturliga färger. Perfekt för att visa slöjderier, vävning, virkning och halmslöjd. För den kräsne slöjdaren.
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minnas-slojdbyra
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news

Minas Slöjdbyrå WordPress Theme, (C) 2024
Minas Slöjdbyrå is distributed under the terms of the GNU GPL.
*/

/*
 * Custom styles for a cozy, handmade feel
 */

/* Soft rounded corners for images and cards */
.wp-block-image img,
.wp-block-gallery img,
.wp-block-post-featured-image img {
	border-radius: 12px;
	transition: transform 0.3s ease;
}

.wp-block-image img:hover,
.wp-block-gallery img:hover,
.wp-block-post-featured-image img:hover {
	transform: scale(1.02);
}

/* Generous spacing and warm shadows */
.wp-block-group.has-background,
.wp-block-columns.has-background {
	box-shadow: 0 2px 12px rgba(184, 149, 106, 0.1);
}

/* Cozy button styles */
.wp-block-button__link {
	border-radius: 8px;
	transition: all 0.3s ease;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(184, 149, 106, 0.25);
}

/* Natural, warm typography */
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

/* Cozy spacing for content */
.wp-block-post-content {
	line-height: 1.8;
}

.wp-block-post-content p {
	margin-bottom: 1.5em;
}

/* Soft focus states */
*:focus-visible {
	outline: 2px solid #B8956A;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================================
   MODERN NAVIGATION - Visuellt Intressant & Elegant
   ============================================ */

/* Navigation container */
.wp-block-navigation.vibrant-nav,
.wp-block-navigation.vibrant-nav .wp-block-navigation__container {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
}

/* Navigation list */
.wp-block-navigation.vibrant-nav ul,
.wp-block-navigation.vibrant-nav .wp-block-navigation__responsive-container-content,
.wp-block-navigation.vibrant-nav .wp-block-navigation__responsive-container-content > ul {
	display: flex !important;
	flex-direction: row !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 1rem !important;
	align-items: center !important;
}

.wp-block-navigation.vibrant-nav li {
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}

/* Navigation links - Floating pill design med gradient */
.wp-block-navigation.vibrant-nav a,
.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content,
.wp-block-navigation.vibrant-nav .wp-block-navigation-link {
	display: inline-block !important;
	padding: 0.75rem 1.75rem !important;
	text-decoration: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.02em !important;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	position: relative !important;
	white-space: nowrap !important;
	text-transform: none !important;
	background: linear-gradient(135deg, rgba(184, 149, 106, 0.9) 0%, rgba(139, 111, 71, 0.85) 100%) !important;
	border-radius: 50px !important;
	box-shadow: 0 4px 15px rgba(184, 149, 106, 0.25), 
	            0 2px 6px rgba(139, 111, 71, 0.15),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	backdrop-filter: blur(10px) !important;
	overflow: hidden !important;
}

/* Shimmer effect på bakgrund */
.wp-block-navigation.vibrant-nav a::before,
.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: -100% !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(255, 255, 255, 0.3) 50%, 
		transparent 100%) !important;
	transition: left 0.6s ease !important;
	z-index: 1 !important;
}

/* Hover-effekt - Lift och glow */
.wp-block-navigation.vibrant-nav a:hover,
.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content:hover {
	color: #FFFFFF !important;
	transform: translateY(-4px) scale(1.05) !important;
	background: linear-gradient(135deg, rgba(184, 149, 106, 1) 0%, rgba(139, 111, 71, 0.95) 100%) !important;
	box-shadow: 0 8px 25px rgba(184, 149, 106, 0.4), 
	            0 4px 12px rgba(139, 111, 71, 0.3),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

.wp-block-navigation.vibrant-nav a:hover::before,
.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content:hover::before {
	left: 100% !important;
}

/* Active state - Extra färgstark */
.wp-block-navigation.vibrant-nav a:active,
.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content:active {
	transform: translateY(-2px) scale(1.02) !important;
	box-shadow: 0 4px 15px rgba(184, 149, 106, 0.3), 
	            0 2px 6px rgba(139, 111, 71, 0.2),
	            inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Aktiv sida - Extra visuell indikator */
.wp-block-navigation.vibrant-nav .current-menu-item > a,
.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content[aria-current="page"],
.wp-block-navigation.vibrant-nav .wp-block-navigation-link[aria-current="page"] .wp-block-navigation-link__content {
	color: #FFFFFF !important;
	font-weight: 700 !important;
	background: linear-gradient(135deg, rgba(139, 111, 71, 1) 0%, rgba(107, 91, 79, 0.95) 100%) !important;
	box-shadow: 0 6px 20px rgba(139, 111, 71, 0.5), 
	            0 3px 10px rgba(107, 91, 79, 0.3),
	            inset 0 2px 4px rgba(0, 0, 0, 0.15),
	            inset 0 -2px 4px rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	transform: translateY(-2px) !important;
}

/* Focus state - Tillgänglighet */
.wp-block-navigation.vibrant-nav a:focus,
.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content:focus {
	outline: 3px solid rgba(184, 149, 106, 0.6) !important;
	outline-offset: 3px !important;
	border-radius: 50px !important;
}

/* Hamburger menu - Färgstark och modern */
.wp-block-navigation.vibrant-nav .wp-block-navigation__responsive-container-open,
.wp-block-navigation.vibrant-nav .wp-block-navigation__responsive-container-close {
	color: #FFFFFF !important;
	font-size: 1.5rem !important;
	padding: 0.875rem 1rem !important;
	border-radius: 50px !important;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	background: linear-gradient(135deg, rgba(184, 149, 106, 0.9) 0%, rgba(139, 111, 71, 0.85) 100%) !important;
	box-shadow: 0 4px 15px rgba(184, 149, 106, 0.25) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.wp-block-navigation.vibrant-nav .wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation.vibrant-nav .wp-block-navigation__responsive-container-close:hover {
	background: linear-gradient(135deg, rgba(184, 149, 106, 1) 0%, rgba(139, 111, 71, 0.95) 100%) !important;
	transform: scale(1.1) rotate(90deg) !important;
	box-shadow: 0 6px 20px rgba(184, 149, 106, 0.4) !important;
}

/* Mobil meny - Färgstark fullscreen overlay */
@media (max-width: 782px) {
	.wp-block-navigation.vibrant-nav .wp-block-navigation__responsive-container {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background: linear-gradient(135deg, rgba(249, 240, 227, 0.98) 0%, rgba(232, 213, 183, 0.95) 100%) !important;
		backdrop-filter: blur(20px) saturate(180%) !important;
		z-index: 1000 !important;
		padding: 5rem 2rem 2rem !important;
		box-shadow: none !important;
	}
	
	.wp-block-navigation.vibrant-nav ul,
	.wp-block-navigation.vibrant-nav .wp-block-navigation__responsive-container-content > ul {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 1rem !important;
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	
	.wp-block-navigation.vibrant-nav li {
		margin: 0 !important;
	}
	
	.wp-block-navigation.vibrant-nav a,
	.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content {
		padding: 1.25rem 2rem !important;
		text-align: center !important;
		font-size: 1.1rem !important;
		font-weight: 600 !important;
		color: #FFFFFF !important;
		background: linear-gradient(135deg, rgba(184, 149, 106, 0.9) 0%, rgba(139, 111, 71, 0.85) 100%) !important;
		box-shadow: 0 4px 15px rgba(184, 149, 106, 0.25) !important;
		border: 1px solid rgba(255, 255, 255, 0.15) !important;
		display: block !important;
		width: 100% !important;
		border-radius: 50px !important;
	}
	
	.wp-block-navigation.vibrant-nav a::before,
	.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content::before {
		display: block !important;
	}
	
	.wp-block-navigation.vibrant-nav a:hover,
	.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content:hover {
		color: #FFFFFF !important;
		transform: translateX(8px) scale(1.02) !important;
		background: linear-gradient(135deg, rgba(184, 149, 106, 1) 0%, rgba(139, 111, 71, 0.95) 100%) !important;
		box-shadow: 0 6px 20px rgba(184, 149, 106, 0.4) !important;
	}
	
	.wp-block-navigation.vibrant-nav .current-menu-item > a,
	.wp-block-navigation.vibrant-nav .wp-block-navigation-link__content[aria-current="page"] {
		background: linear-gradient(135deg, rgba(139, 111, 71, 1) 0%, rgba(107, 91, 79, 0.95) 100%) !important;
		box-shadow: 0 6px 20px rgba(139, 111, 71, 0.5) !important;
		font-weight: 700 !important;
	}
}

/* Modern header-styling - Minimalistisk och elegant */
.wp-block-group.has-white-background-color {
	backdrop-filter: blur(10px) saturate(180%) !important;
	position: relative !important;
	z-index: 100 !important;
	transition: all 0.3s ease !important;
}

/* Modern site title styling */
.wp-block-site-title {
	font-family: Georgia, 'Times New Roman', serif !important;
}

.wp-block-site-title a {
	text-decoration: none !important;
	color: #2C2419 !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: inline-block !important;
	position: relative !important;
}

.wp-block-site-title a:hover {
	color: #8B6F47 !important;
	transform: translateX(2px) !important;
}

/* Site logo styling */
.wp-block-site-logo img {
	transition: transform 0.3s ease !important;
	border-radius: 8px !important;
}

.wp-block-site-logo:hover img {
	transform: scale(1.05) rotate(2deg) !important;
}

/* Ta bort dubbel navigation om den finns */
.wp-block-navigation + .wp-block-navigation {
	display: none !important;
}

/* Card styling for posts */
.wp-block-query .wp-block-post {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-query .wp-block-post:hover {
	transform: translateY(-4px);
}

/* Gallery styling */
.wp-block-gallery {
	gap: 1rem;
}

.wp-block-gallery .wp-block-image {
	margin: 0;
}

/* Quote styling for a cozy feel */
.wp-block-quote {
	border-left-color: var(--wp--preset--color--straw-button);
	padding-left: 2rem;
	font-style: italic;
}

/* Separator styling */
.wp-block-separator {
	border-color: var(--wp--preset--color--dark-straw);
	opacity: 0.6;
}

/* Responsive adjustments */
@media (max-width: 782px) {
	.wp-block-group {
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Cozy link styling */
a {
	transition: color 0.2s ease;
}

/* Site title styling */
.wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--dark-text);
}

.wp-block-site-title a:hover {
	color: var(--wp--preset--color--straw-button);
}