/*
Theme Name: SaMa Obrt
Theme URI: https://sama-obrt.zumesite.com
Author: SaMa Obrt
Description: Čist i minimalistički tema s jadranskim ugođajem za SaMa Obrt — obiteljsku radionicu hrvatskih suvenira i plišanih igračaka.
Version: 1.0.5
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sama-obrt
*/

/* =====================================================
   Mobile navigation overlay — complete restyle
   Core problem: items-justified-right sets
   --navigation-layout-justification-setting: flex-end
   and the overlay uses it via align-items: var(...)
   Solution: directly override align-items with !important
   ===================================================== */

/* Overlay backdrop */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--foreground) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	padding: 1.5rem !important;
}

/* Dialog wrapper */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	flex: 1 !important;
}

/* Close + content wrapper */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-close {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
}

/* Content area */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	align-items: center !important;
	justify-content: flex-start !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	padding-top: 1rem !important;
}

/* Nav items list */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation__container {
	align-items: center !important;
	justify-content: flex-start !important;
	flex-direction: column !important;
	width: 100% !important;
}

/* Individual nav items */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item {
	align-items: center !important;
	justify-content: center !important;
	flex-direction: column !important;
	width: 100% !important;
	text-align: center !important;
}

/* Nav links */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item__content {
	text-align: center !important;
	width: 100% !important;
	padding: 0.6rem 1rem !important;
	font-size: 1.2rem !important;
}

/* =====================================================
   Home page — "Naši proizvodi" product cards
   WP core applies padding via the low-specificity rule
   :where(.wp-block-group.has-background). We zero it out
   scoped to these cards only, then re-apply padding to
   the text elements so images sit flush at the top.
   Selector is intentionally narrow so it doesn't bleed
   into any other section that also uses white cards.
   ===================================================== */

/* Section heading */
.has-light-background-color > h2.wp-block-heading {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--foreground);
}

/* Equal-height columns */
.has-light-background-color .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Card base: equal height, shadow, rounded corners, zero padding */
.has-light-background-color .wp-block-columns .wp-block-column > .wp-block-group.has-background {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: 20px !important;
	box-shadow: 0 4px 24px rgba(43, 96, 148, 0.09);
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	padding: 0 !important;  /* override WP core :where(.wp-block-group.has-background) */
}

/* Card hover lift */
.has-light-background-color .wp-block-columns .wp-block-column > .wp-block-group.has-background:hover {
	box-shadow: 0 12px 40px rgba(43, 96, 148, 0.18);
	transform: translateY(-5px);
}

/* Image fills edge-to-edge — no negative margins needed with padding:0 on card */
.has-light-background-color .wp-block-columns .wp-block-column .wp-block-image {
	margin: 0 !important;
	width: 100%;
	max-width: none !important;
	flex-shrink: 0;
}
.has-light-background-color .wp-block-columns .wp-block-column .wp-block-image img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0 !important;
	margin: 0;
}

/* Card h3 — padding restores breathing room; min-height aligns
   descriptions when one title wraps to two lines */
.has-light-background-color .wp-block-columns h3.wp-block-heading {
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	line-height: 1.25;
	min-height: 3.5rem;  /* 2 × line-height at 1.4rem — prevents desc misalignment */
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0;
	margin: 0 !important;
	color: var(--wp--preset--color--foreground) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Card description */
.has-light-background-color .wp-block-columns .wp-block-column p.has-muted-color {
	font-size: 0.95rem !important;
	line-height: 1.75;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	margin: 0 !important;
}

/* =====================================================
   About Us page — value cards (glassmorphism effect)
   Block recovery strips "background" and "backdropFilter"
   from the rendered HTML because wp:group does not
   support arbitrary CSS props as inline styles.
   "padding.all" with a preset var also doesn't render.
   Solution: use the custom .sama-value-card className.
   ===================================================== */
.sama-value-card {
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	padding: var(--wp--preset--spacing--50);
}

/* =====================================================
   About Us page — "Naš asortiman" product section
   Image height: block layout.aspectRatio/objectFit do
   not render as inline styles — apply via CSS.
   Card content padding: padding.all with preset var
   does not render inline — apply via CSS.
   ===================================================== */
.sama-about-products .wp-block-image img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}

.sama-about-products .wp-block-column .wp-block-group.has-white-background-color > .wp-block-group {
	padding: var(--wp--preset--spacing--50);
}

/* =====================================================
   Contact page — form card padding
   padding.all with a preset var does not render inline.
   ===================================================== */
.sama-contact-form {
	padding: var(--wp--preset--spacing--70);
}