/* ============================================================
   BEHARDOO.BA - CUSTOM GLOBAL STYLES
   Premium Scandinavian Eco-Tech Brand
   Apple-inspired | Swiss Typography | Restrained Luxury
   Theme: Twenty Twenty-Five
   ============================================================ */

/* --- Design Tokens --- */
:root {
	/* Background System - Warm Neutrals */
	--bh-bg-primary: #F7F8F4;
	--bh-bg-secondary: #FFFFFF;
	--bh-bg-tertiary: #EEF3EA;
	--bh-bg-elevated: #FFFFFF;
	--bh-bg-glass: rgba(255, 255, 255, 0.78);
	--bh-bg-glass-light: rgba(46, 94, 78, 0.03);

	/* Green Accent - Minimal & Intentional */
	--bh-green-400: #4D8B70;
	--bh-green-500: #2E5E4E;
	--bh-green-600: #1F2A24;
	--bh-green-light: #DDE9E2;

	/* Text System */
	--bh-text-primary: #1F2A24;
	--bh-text-secondary: #5C6B63;
	--bh-text-tertiary: rgba(92, 107, 99, 0.5);
	--bh-text-inverse: #FFFFFF;

	/* Border System - Barely Visible */
	--bh-border-subtle: rgba(46, 94, 78, 0.05);
	--bh-border-default: rgba(46, 94, 78, 0.07);
	--bh-border-strong: rgba(46, 94, 78, 0.12);

	/* Shadow System - Atmospheric */
	--bh-shadow-sm: 0 1px 2px rgba(31, 42, 36, 0.03);
	--bh-shadow-md: 0 2px 8px rgba(31, 42, 36, 0.04);
	--bh-shadow-lg: 0 4px 16px rgba(31, 42, 36, 0.05);
	--bh-shadow-xl: 0 8px 24px rgba(31, 42, 36, 0.06);
	--bh-shadow-card: 0 1px 4px rgba(31, 42, 36, 0.03);
	--bh-shadow-card-hover: 0 4px 16px rgba(31, 42, 36, 0.05);

	/* Radius System */
	--bh-radius-sm: 6px;
	--bh-radius-md: 10px;
	--bh-radius-lg: 14px;
	--bh-radius-xl: 18px;
	--bh-radius-full: 9999px;

	/* Spacing */
	--bh-space-xs: 4px;
	--bh-space-sm: 8px;
	--bh-space-md: 16px;
	--bh-space-lg: 24px;
	--bh-space-xl: 32px;
	--bh-space-2xl: 48px;
	--bh-space-3xl: 64px;
	--bh-space-4xl: 96px;
	--bh-space-5xl: 128px;
	--bh-space-6xl: 160px;

	/* Typography */
	--bh-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--bh-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Transitions */
	--bh-transition-fast: 0.2s ease;
	--bh-transition-base: 0.3s ease;
	--bh-transition-slow: 0.5s ease;
}

/* ============================================================
   BASE
   ============================================================ */

body {
	background-color: var(--bh-bg-primary);
	color: var(--bh-text-primary);
	font-family: var(--bh-font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--bh-green-500);
	color: var(--bh-text-inverse);
}

:focus-visible {
	outline: 2px solid var(--bh-green-500);
	outline-offset: 2px;
}

/* ============================================================
   TYPOGRAPHY - Swiss Editorial
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bh-font-display);
	font-weight: 600;
	line-height: 1.15;
	color: var(--bh-text-primary);
	letter-spacing: -0.025em;
}

h1 {
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

h2 {
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	font-weight: 600;
	letter-spacing: -0.025em;
}

h3 {
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
	font-weight: 600;
}

h4 {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-weight: 600;
}

p {
	color: var(--bh-text-secondary);
	line-height: 1.7;
	margin-bottom: 1.2em;
	max-width: 65ch;
}

a {
	color: var(--bh-green-500);
	text-decoration: none;
	transition: color var(--bh-transition-fast);
}

a:hover {
	color: var(--bh-green-400);
}

/* ============================================================
   HEADER - Almost Invisible
   ============================================================ */

.wp-site-blocks > .wp-block-template-part:first-child {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent;
	transition: all var(--bh-transition-base);
	padding: 24px 0;
}

.wp-site-blocks > .wp-block-template-part:first-child.header-scrolled {
	background: var(--bh-bg-glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 var(--bh-border-subtle);
	padding: 12px 0;
}

.wp-site-blocks > .wp-block-template-part:first-child > .wp-block-group {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

.wp-site-blocks > .wp-block-template-part:first-child .wp-block-site-title {
	font-family: var(--bh-font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--bh-text-primary);
	letter-spacing: -0.02em;
}

.wp-site-blocks > .wp-block-template-part:first-child .wp-block-site-title a {
	color: var(--bh-text-primary);
}

.wp-site-blocks > .wp-block-template-part:first-child .wp-block-navigation-item__content {
	color: var(--bh-text-secondary);
	font-size: 0.9rem;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: var(--bh-radius-full);
	transition: all var(--bh-transition-fast);
}

.wp-site-blocks > .wp-block-template-part:first-child .wp-block-navigation-item__content:hover {
	color: var(--bh-green-500);
}

/* ============================================================
   HERO - Editorial & Spacious
   ============================================================ */

.wp-block-cover.alignfull {
	min-height: 85vh !important;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.wp-block-cover.alignfull .wp-block-cover__inner-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 140px 32px 80px;
}

.wp-block-cover.alignfull h1,
.wp-block-cover.alignfull h2 {
	color: var(--bh-text-inverse);
	max-width: 800px;
}

.wp-block-cover.alignfull p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.1rem;
	max-width: 540px;
	line-height: 1.6;
}

/* ============================================================
   SECTIONS - Alternating Rhythm
   ============================================================ */

.wp-block-group.has-background {
	padding: var(--bh-space-6xl) 32px;
}

.wp-block-group.has-background:nth-child(even) {
	background-color: var(--bh-bg-tertiary) !important;
}

.wp-block-group.has-background:nth-child(odd) {
	background-color: var(--bh-bg-secondary) !important;
}

.wp-block-group > .wp-block-group,
.wp-block-columns {
	max-width: 1280px;
	margin: 0 auto;
}

/* ============================================================
   BUTTONS - Refined & Tactile
   ============================================================ */

.wp-block-button .wp-block-button__link {
	font-family: var(--bh-font-sans);
	font-size: 0.9rem;
	font-weight: 500;
	padding: 12px 26px;
	border-radius: var(--bh-radius-full);
	border: none;
	cursor: pointer;
	transition: all var(--bh-transition-base);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	line-height: 1.2;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--bh-green-500);
	color: var(--bh-text-inverse);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--bh-green-400);
	transform: translateY(-1px);
	color: var(--bh-text-inverse);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--bh-green-500);
	border: 1.5px solid var(--bh-green-500);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--bh-green-500);
	color: var(--bh-text-inverse);
	transform: translateY(-1px);
}

/* ============================================================
   SEARCH
   ============================================================ */

.wp-block-search .wp-block-search__input {
	border: 1.5px solid var(--bh-border-default);
	border-radius: var(--bh-radius-full);
	padding: 10px 18px;
	font-family: var(--bh-font-sans);
	font-size: 0.9rem;
	color: var(--bh-text-primary);
	background: var(--bh-bg-secondary);
	transition: all var(--bh-transition-fast);
}

.wp-block-search .wp-block-search__input:focus {
	border-color: var(--bh-green-500);
	box-shadow: 0 0 0 3px rgba(46, 94, 78, 0.08);
	outline: none;
}

.wp-block-search .wp-block-search__button {
	background: var(--bh-green-500);
	color: var(--bh-text-inverse);
	border: none;
	border-radius: var(--bh-radius-full);
	padding: 10px 22px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--bh-transition-fast);
}

.wp-block-search .wp-block-search__button:hover {
	background: var(--bh-green-400);
}

/* ============================================================
   POSTS - Minimal Cards
   ============================================================ */

.wp-block-post {
	background: var(--bh-bg-secondary);
	border-radius: var(--bh-radius-lg);
	overflow: hidden;
	box-shadow: var(--bh-shadow-card);
	transition: all var(--bh-transition-base);
}

.wp-block-post:hover {
	box-shadow: var(--bh-shadow-card-hover);
	transform: translateY(-2px);
}

.wp-block-post .wp-block-post-title {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	padding: 0 20px;
}

.wp-block-post .wp-block-post-title a {
	color: var(--bh-text-primary);
}

.wp-block-post .wp-block-post-title a:hover {
	color: var(--bh-green-500);
}

.wp-block-post .wp-block-post-excerpt {
	padding: 0 20px;
	color: var(--bh-text-secondary);
	font-size: 0.9rem;
}

.wp-block-post .wp-block-post-date {
	padding: 0 20px;
	font-size: 0.8rem;
	color: var(--bh-text-tertiary);
}

.wp-block-post .wp-block-post-featured-image {
	margin: 0;
	border-radius: var(--bh-radius-lg) var(--bh-radius-lg) 0 0;
	overflow: hidden;
}

.wp-block-post .wp-block-post-featured-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform var(--bh-transition-slow);
}

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

/* ============================================================
   PAGINATION
   ============================================================ */

.wp-block-query-pagination {
	margin-top: var(--bh-space-3xl);
	gap: 4px;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--bh-radius-sm);
	color: var(--bh-text-secondary);
	font-weight: 500;
	font-size: 0.9rem;
	transition: all var(--bh-transition-fast);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--bh-green-500);
	color: var(--bh-text-inverse);
}

.wp-block-query-pagination .page-numbers:hover:not(.current) {
	background: var(--bh-bg-tertiary);
	color: var(--bh-green-500);
}

/* ============================================================
   COMMENTS
   ============================================================ */

.comment-list {
	list-style: none;
	padding: 0;
}

.comment {
	background: var(--bh-bg-secondary);
	border-radius: var(--bh-radius-lg);
	padding: 24px;
	margin-bottom: 16px;
}

.comment-author {
	font-weight: 600;
	color: var(--bh-text-primary);
}

.comment-metadata {
	font-size: 0.85rem;
	color: var(--bh-text-tertiary);
}

.reply a {
	color: var(--bh-green-500);
	font-weight: 500;
	font-size: 0.9rem;
}

.comment-respond {
	background: var(--bh-bg-secondary);
	border-radius: var(--bh-radius-lg);
	padding: 28px;
	margin-top: 32px;
}

.comment-form input,
.comment-form textarea {
	border: 1.5px solid var(--bh-border-default);
	border-radius: var(--bh-radius-md);
	padding: 10px 14px;
	font-family: var(--bh-font-sans);
	font-size: 0.95rem;
	color: var(--bh-text-primary);
	background: var(--bh-bg-primary);
	transition: all var(--bh-transition-fast);
	width: 100%;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--bh-green-500);
	box-shadow: 0 0 0 3px rgba(46, 94, 78, 0.08);
	outline: none;
}

.comment-form .submit {
	background: var(--bh-green-500);
	color: var(--bh-text-inverse);
	border: none;
	border-radius: var(--bh-radius-full);
	padding: 10px 26px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--bh-transition-fast);
}

.comment-form .submit:hover {
	background: var(--bh-green-400);
	transform: translateY(-1px);
}

/* ============================================================
   TABLES
   ============================================================ */

.wp-block-table {
	border-collapse: collapse;
	width: 100%;
	border-radius: var(--bh-radius-lg);
	overflow: hidden;
}

.wp-block-table thead {
	background: var(--bh-green-500);
	color: var(--bh-text-inverse);
}

.wp-block-table th {
	padding: 12px 18px;
	font-weight: 600;
	font-size: 0.9rem;
	text-align: left;
}

.wp-block-table td {
	padding: 10px 18px;
	border-bottom: 1px solid var(--bh-border-subtle);
	color: var(--bh-text-secondary);
	font-size: 0.9rem;
}

.wp-block-table tbody tr:hover {
	background: var(--bh-bg-tertiary);
}

/* ============================================================
   BLOCKQUOTES
   ============================================================ */

.wp-block-quote {
	border-left: 3px solid var(--bh-green-500);
	padding: 16px 24px;
	margin: 24px 0;
	background: var(--bh-bg-tertiary);
	border-radius: 0 var(--bh-radius-md) var(--bh-radius-md) 0;
}

.wp-block-quote p {
	font-size: 1.1rem;
	font-style: italic;
	color: var(--bh-text-primary);
}

.wp-block-quote cite {
	font-size: 0.85rem;
	color: var(--bh-text-secondary);
	font-style: normal;
}

/* ============================================================
   SEPARATORS
   ============================================================ */

.wp-block-separator {
	border: none;
	height: 1px;
	background: var(--bh-border-default);
	margin: var(--bh-space-3xl) 0;
}

.wp-block-separator.is-style-wide {
	max-width: 100%;
}

/* ============================================================
   FOOTER
   ============================================================ */

.wp-site-blocks > .wp-block-template-part:last-child {
	background: var(--bh-green-600);
	color: rgba(255, 255, 255, 0.8);
	padding: 64px 32px 32px;
}

.wp-site-blocks > .wp-block-template-part:last-child .wp-block-site-title {
	color: var(--bh-text-inverse);
	font-size: 1.15rem;
	font-weight: 700;
}

.wp-site-blocks > .wp-block-template-part:last-child p {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.9rem;
}

.wp-site-blocks > .wp-block-template-part:last-child a {
	color: rgba(255, 255, 255, 0.75);
}

.wp-site-blocks > .wp-block-template-part:last-child a:hover {
	color: var(--bh-text-inverse);
}

.wp-site-blocks > .wp-block-template-part:last-child .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
	padding: 4px 0;
}

.wp-site-blocks > .wp-block-template-part:last-child .wp-block-navigation-item__content:hover {
	color: var(--bh-text-inverse);
	background: transparent;
}

/* ============================================================
   FORMS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	border: 1.5px solid var(--bh-border-default);
	border-radius: var(--bh-radius-md);
	padding: 10px 14px;
	font-family: var(--bh-font-sans);
	font-size: 0.95rem;
	color: var(--bh-text-primary);
	background: var(--bh-bg-secondary);
	transition: all var(--bh-transition-fast);
	width: 100%;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--bh-green-500);
	box-shadow: 0 0 0 3px rgba(46, 94, 78, 0.08);
	outline: none;
}

label {
	font-weight: 500;
	color: var(--bh-text-primary);
	font-size: 0.9rem;
	margin-bottom: 6px;
	display: block;
}

/* ============================================================
   SCROLL ANIMATIONS - Subconscious
   ============================================================ */

.bh-animate {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease,
	            transform 0.6s ease;
}

.bh-animate.bh-visible {
	opacity: 1;
	transform: translateY(0);
}

.bh-animate-left {
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity 0.6s ease,
	            transform 0.6s ease;
}

.bh-animate-left.bh-visible {
	opacity: 1;
	transform: translateX(0);
}

.bh-animate-right {
	opacity: 0;
	transform: translateX(16px);
	transition: opacity 0.6s ease,
	            transform 0.6s ease;
}

.bh-animate-right.bh-visible {
	opacity: 1;
	transform: translateX(0);
}

.bh-stagger > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease,
	            transform 0.5s ease;
}

.bh-stagger.bh-visible > *:nth-child(1) { transition-delay: 0.05s; }
.bh-stagger.bh-visible > *:nth-child(2) { transition-delay: 0.1s; }
.bh-stagger.bh-visible > *:nth-child(3) { transition-delay: 0.15s; }
.bh-stagger.bh-visible > *:nth-child(4) { transition-delay: 0.2s; }
.bh-stagger.bh-visible > *:nth-child(5) { transition-delay: 0.25s; }
.bh-stagger.bh-visible > *:nth-child(6) { transition-delay: 0.3s; }

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

/* ============================================================
   BACK TO TOP
   ============================================================ */

.bh-back-to-top {
	position: fixed;
	bottom: 28px;
	right: 28px;
	width: 40px;
	height: 40px;
	border-radius: var(--bh-radius-full);
	background: var(--bh-green-500);
	color: var(--bh-text-inverse);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--bh-transition-base);
	z-index: 999;
	font-size: 1rem;
}

.bh-back-to-top.bh-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bh-back-to-top:hover {
	background: var(--bh-green-400);
	transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
	.wp-block-cover.alignfull {
		min-height: 70vh !important;
	}

	.wp-block-cover.alignfull .wp-block-cover__inner-container {
		padding: 120px 24px 60px;
	}

	.wp-block-group.has-background {
		padding: var(--bh-space-5xl) 24px;
	}
}

@media (max-width: 768px) {
	.wp-block-cover.alignfull {
		min-height: 60vh !important;
	}

	.wp-block-cover.alignfull .wp-block-cover__inner-container {
		padding: 100px 20px 40px;
	}

	.wp-block-cover.alignfull p {
		font-size: 1rem;
	}

	.wp-block-group.has-background {
		padding: var(--bh-space-4xl) 20px;
	}

	.wp-block-post .wp-block-post-featured-image img {
		height: 180px;
	}

	.wp-block-button .wp-block-button__link {
		padding: 10px 22px;
		font-size: 0.85rem;
	}

	.bh-back-to-top {
		bottom: 20px;
		right: 20px;
		width: 38px;
		height: 38px;
	}

	.wp-site-blocks > .wp-block-template-part:first-child {
		padding: 18px 0;
	}

	.wp-site-blocks > .wp-block-template-part:first-child.header-scrolled {
		padding: 10px 0;
	}

	.wp-site-blocks > .wp-block-template-part:first-child > .wp-block-group {
		padding: 0 20px;
	}

	.wp-site-blocks > .wp-block-template-part:last-child {
		padding: 48px 20px 24px;
	}
}

@media (max-width: 480px) {
	.wp-block-cover.alignfull {
		min-height: 50vh !important;
	}

	.wp-block-cover.alignfull .wp-block-cover__inner-container {
		padding: 80px 16px 32px;
	}

	h1 {
		font-size: clamp(1.5rem, 7vw, 1.9rem);
	}

	h2 {
		font-size: clamp(1.25rem, 6vw, 1.5rem);
	}

	.wp-block-group.has-background {
		padding: var(--bh-space-3xl) 16px;
	}
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.bh-animate,
	.bh-animate-left,
	.bh-animate-right,
	.bh-stagger > * {
		opacity: 1;
		transform: none;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ============================================================
   UTILITY
   ============================================================ */

.bh-card {
	background: var(--bh-bg-secondary);
	border-radius: var(--bh-radius-lg);
	padding: 28px;
	box-shadow: var(--bh-shadow-card);
	transition: all var(--bh-transition-base);
}

.bh-card:hover {
	box-shadow: var(--bh-shadow-card-hover);
	transform: translateY(-2px);
}

.bh-section-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--bh-green-500);
	margin-bottom: 12px;
}