/*
 * Vatan Foods visual foundation.
 * Global, update-safe presentation layer for the Avada child theme.
 */

/* ==========================================================================
   CSS variables and design tokens
   ========================================================================== */

:root {
	--vatan-primary: #152625;
	--vatan-primary-deep: #0b1717;
	--vatan-primary-soft: #223838;
	--vatan-secondary: #c99a47;
	--vatan-secondary-deep: #9b7130;
	--vatan-accent-leaf: #8fae48;
	--vatan-accent-leaf-deep: #5f7832;
	--vatan-cream-100: #f6f1e8;
	--vatan-cream-200: #e7ddca;
	--vatan-white: #ffffff;
	--vatan-silver: #ececea;
	--vatan-charcoal: #1f2726;
	--vatan-muted: #64726f;
	--vatan-border: #d9d5ca;
	--vatan-focus: #d9b45c;
	--vatan-focus-ring: rgba(201, 154, 71, 0.26);
	--vatan-footer-border: rgba(236, 236, 234, 0.18);
	--vatan-header-shadow: 0 6px 20px rgba(21, 38, 37, 0.08);

	--vatan-font-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vatan-font-heading: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vatan-logo-mark: url("../images/vatan-foods-logo.png");
	--vatan-logo-size-desktop: clamp(5.125rem, 6vw, 6rem);
	--vatan-logo-size-mobile: clamp(3.5rem, 15vw, 4.25rem);
	--vatan-container: 1180px;
	--vatan-radius-sm: 4px;
	--vatan-radius-md: 6px;
	--vatan-shadow-soft: 0 10px 28px rgba(21, 38, 37, 0.08);
	--vatan-transition: 180ms ease;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

html body.fusion-body {
	background: var(--vatan-cream-100);
	color: var(--vatan-charcoal);
	font-family: var(--vatan-font-body);
	font-size: 16px;
	line-height: 1.7;
	text-rendering: optimizeLegibility;
}

html body.fusion-body #boxed-wrapper,
html body.fusion-body #wrapper {
	background: var(--vatan-cream-100);
}

/* ==========================================================================
   Headings
   ========================================================================== */

.fusion-body h1,
.fusion-body h2,
.fusion-body h3,
.fusion-body h4,
.fusion-body h5,
.fusion-body h6,
.fusion-body .entry-title,
.fusion-body .fusion-post-title {
	color: var(--vatan-primary);
	font-family: var(--vatan-font-heading);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.18;
	margin-bottom: 0.65em;
}

.fusion-body h1 {
	font-size: clamp(2rem, 4vw, 3.6rem);
}

.fusion-body h2,
.fusion-body .entry-title,
.fusion-body .fusion-post-title {
	font-size: clamp(1.65rem, 3vw, 2.55rem);
}

.fusion-body h3 {
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

html body.fusion-body #main h1 {
	font-size: clamp(2rem, 4vw, 3.6rem);
}

html body.fusion-body #main h2,
html body.fusion-body #main .entry-title,
html body.fusion-body #main .fusion-post-title {
	font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
}

html body.fusion-body #main h3 {
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

/* ==========================================================================
   Body text
   ========================================================================== */

.fusion-body p,
.fusion-body li,
.fusion-body .post-content {
	color: var(--vatan-charcoal);
}

.fusion-body .post-content p,
.fusion-body .fusion-text p,
.fusion-body .comment-content p {
	margin-bottom: 1.15em;
}

.fusion-body small,
.fusion-body .meta,
.fusion-body .fusion-meta-info,
.fusion-body .fusion-post-content-container,
.fusion-body .fusion-single-line-meta {
	color: var(--vatan-muted);
}

/* ==========================================================================
   Links
   ========================================================================== */

.fusion-body a {
	color: var(--vatan-accent-leaf-deep);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--vatan-transition), border-color var(--vatan-transition), background-color var(--vatan-transition);
}

.fusion-body a:hover,
.fusion-body a:focus {
	color: var(--vatan-secondary-deep);
}

.fusion-body .post-content a {
	font-weight: 700;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.fusion-body .fusion-button,
.fusion-body .button,
.fusion-body button,
.fusion-body input[type="button"],
.fusion-body input[type="submit"],
.fusion-body input[type="reset"],
.fusion-body .woocommerce a.button,
.fusion-body .woocommerce button.button {
	align-items: center;
	background: var(--vatan-primary);
	border: 1px solid var(--vatan-primary);
	border-radius: var(--vatan-radius-sm);
	color: var(--vatan-white);
	display: inline-flex;
	font-family: var(--vatan-font-body);
	font-weight: 700;
	justify-content: center;
	line-height: 1.2;
	min-height: 2.75rem;
	padding: 0.82rem 1.2rem;
	text-decoration: none;
	transition: background-color var(--vatan-transition), border-color var(--vatan-transition), color var(--vatan-transition), transform var(--vatan-transition);
}

.fusion-body .fusion-button:hover,
.fusion-body .fusion-button:focus,
.fusion-body .button:hover,
.fusion-body .button:focus,
.fusion-body button:hover,
.fusion-body button:focus,
.fusion-body input[type="button"]:hover,
.fusion-body input[type="button"]:focus,
.fusion-body input[type="submit"]:hover,
.fusion-body input[type="submit"]:focus,
.fusion-body input[type="reset"]:hover,
.fusion-body input[type="reset"]:focus,
.fusion-body .woocommerce a.button:hover,
.fusion-body .woocommerce a.button:focus,
.fusion-body .woocommerce button.button:hover,
.fusion-body .woocommerce button.button:focus {
	background: var(--vatan-secondary);
	border-color: var(--vatan-secondary);
	color: var(--vatan-primary-deep);
	transform: translateY(-1px);
}

.fusion-body .fusion-button.button-default,
.fusion-body .fusion-button-default {
	background: var(--vatan-primary);
	border-color: var(--vatan-primary);
	color: var(--vatan-white);
}

.fusion-body .fusion-button.button-small {
	min-height: 2.35rem;
	padding: 0.62rem 0.95rem;
}

/* ==========================================================================
   Form inputs
   ========================================================================== */

.fusion-body label {
	color: var(--vatan-primary);
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.fusion-body input[type="text"],
.fusion-body input[type="email"],
.fusion-body input[type="url"],
.fusion-body input[type="tel"],
.fusion-body input[type="search"],
.fusion-body input[type="password"],
.fusion-body input[type="number"],
.fusion-body textarea,
.fusion-body select {
	background: var(--vatan-white);
	border: 1px solid var(--vatan-border);
	border-radius: var(--vatan-radius-sm);
	color: var(--vatan-charcoal);
	font-family: var(--vatan-font-body);
	line-height: 1.45;
	min-height: 2.75rem;
	padding: 0.72rem 0.85rem;
	transition: border-color var(--vatan-transition), box-shadow var(--vatan-transition);
	width: 100%;
}

.fusion-body textarea {
	min-height: 8rem;
	resize: vertical;
}

.fusion-body input::placeholder,
.fusion-body textarea::placeholder {
	color: var(--vatan-muted);
	opacity: 0.82;
}

.fusion-body .fusion-search-form {
	max-width: 28rem;
}

.fusion-body .fusion-search-form .searchsubmit {
	width: auto;
}

/* ==========================================================================
   Spacing utilities
   ========================================================================== */

.vatan-container {
	margin-inline: auto;
	max-width: var(--vatan-container);
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.vatan-section {
	padding-block: clamp(2.25rem, 5vw, 4.75rem);
}

.vatan-section--compact {
	padding-block: clamp(1.5rem, 3vw, 2.75rem);
}

/* ==========================================================================
   Content sections
   ========================================================================== */

html body.fusion-body #main {
	background: var(--vatan-cream-100);
	padding-top: clamp(2rem, 4vw, 3.25rem);
	padding-bottom: clamp(2rem, 4vw, 3.25rem);
}

.fusion-body #main .fusion-row {
	max-width: var(--vatan-container);
}

.fusion-body .post-content > * + * {
	margin-top: 1rem;
}

.fusion-body .fusion-page-title-bar {
	background-color: var(--vatan-primary);
	border-bottom: 3px solid var(--vatan-secondary);
	color: var(--vatan-white);
}

.fusion-body .fusion-page-title-bar h1,
.fusion-body .fusion-page-title-bar h3 {
	color: var(--vatan-white);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.fusion-body .post,
.fusion-body .fusion-blog-layout-grid .post,
.fusion-body .fusion-recent-posts article,
.fusion-body .fusion-footer-widget-area .widget {
	background: var(--vatan-white);
	border: 1px solid var(--vatan-border);
	border-radius: var(--vatan-radius-md);
	box-shadow: none;
}

.fusion-body .fusion-blog-layout-large .post,
.fusion-body .fusion-post-content,
.fusion-body .fusion-post-content-container {
	padding: clamp(1rem, 2.5vw, 1.7rem);
}

.fusion-body .post {
	overflow: hidden;
}

.fusion-body .fusion-meta-info {
	border-color: var(--vatan-border);
}

/* ==========================================================================
   Header and primary navigation
   ========================================================================== */

.fusion-body .fusion-header-wrapper {
	background: var(--vatan-white);
	border-bottom: 1px solid var(--vatan-border);
	box-shadow: var(--vatan-header-shadow);
}

.fusion-body .fusion-secondary-header {
	background: var(--vatan-primary);
	border-bottom: 0;
	color: var(--vatan-cream-100);
	min-height: 2rem;
}

.fusion-body .fusion-secondary-header a,
.fusion-body .fusion-secondary-menu > ul > li > a {
	color: var(--vatan-cream-100);
}

.fusion-body .fusion-secondary-header a:hover,
.fusion-body .fusion-secondary-header a:focus,
.fusion-body .fusion-secondary-menu > ul > li > a:hover,
.fusion-body .fusion-secondary-menu > ul > li > a:focus {
	color: var(--vatan-secondary);
}

.fusion-body .fusion-header {
	background: var(--vatan-white);
	min-height: 0;
	padding-block: 0.2rem;
}

.fusion-body .fusion-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--vatan-logo-size-desktop) + 0.5rem);
}

.fusion-body .fusion-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	min-height: calc(var(--vatan-logo-size-desktop) + 0.5rem);
}

.fusion-body .fusion-logo-link .fusion-standard-logo {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fusion-body .fusion-logo-link::before {
	content: "";
	display: block;
	width: var(--vatan-logo-size-desktop);
	aspect-ratio: 1012 / 1011;
	background-image: var(--vatan-logo-mark);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.fusion-body .fusion-logo::before {
	content: "";
	display: block;
	width: var(--vatan-logo-size-desktop);
	aspect-ratio: 1012 / 1011;
	background-image: var(--vatan-logo-mark);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.fusion-body .fusion-logo:has(.fusion-logo-link)::before {
	content: none;
	display: none;
}

.fusion-body .fusion-main-menu > ul > li > a {
	color: var(--vatan-primary);
	font-family: var(--vatan-font-body);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.fusion-body .fusion-main-menu > ul > li > a:hover,
.fusion-body .fusion-main-menu > ul > li > a:focus,
.fusion-body .fusion-main-menu > ul > li.current-menu-item > a,
.fusion-body .fusion-main-menu > ul > li.current_page_item > a,
.fusion-body .fusion-main-menu > ul > li.current-menu-ancestor > a {
	color: var(--vatan-secondary-deep);
}

.fusion-body .fusion-main-menu > ul > li > a::before,
.fusion-body .fusion-main-menu > ul > li > a::after {
	border-color: var(--vatan-secondary);
}

.fusion-body .fusion-main-menu .sub-menu {
	background: var(--vatan-white);
	border: 1px solid var(--vatan-border);
	border-radius: var(--vatan-radius-sm);
	box-shadow: var(--vatan-shadow-soft);
}

.fusion-body .fusion-main-menu .sub-menu a {
	color: var(--vatan-primary);
}

.fusion-body .fusion-main-menu .sub-menu a:hover,
.fusion-body .fusion-main-menu .sub-menu a:focus {
	background: var(--vatan-cream-100);
	color: var(--vatan-secondary-deep);
}

/* ==========================================================================
   Mobile navigation
   ========================================================================== */

.fusion-body .fusion-mobile-menu-icons a {
	color: var(--vatan-primary);
}

.fusion-body .fusion-mobile-menu-icons a:hover,
.fusion-body .fusion-mobile-menu-icons a:focus {
	color: var(--vatan-secondary-deep);
}

.fusion-body .fusion-mobile-nav-holder {
	background: var(--vatan-white);
	border-top: 1px solid var(--vatan-border);
}

.fusion-body .fusion-mobile-nav-item a {
	color: var(--vatan-primary);
	font-weight: 700;
}

.fusion-body .fusion-mobile-nav-item a:hover,
.fusion-body .fusion-mobile-nav-item a:focus,
.fusion-body .fusion-mobile-current-nav-item > a {
	background: var(--vatan-cream-100);
	color: var(--vatan-secondary-deep);
}

.fusion-body .fusion-mobile-selector {
	background: var(--vatan-primary);
	border-color: var(--vatan-primary);
	color: var(--vatan-white);
	width: 100%;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fusion-body .fusion-footer {
	background: var(--vatan-primary);
	color: var(--vatan-cream-100);
}

.fusion-body .fusion-footer-widget-area {
	background: var(--vatan-primary);
	border-top: 3px solid var(--vatan-secondary);
	color: var(--vatan-cream-100);
	padding-top: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fusion-body .fusion-footer-widget-area .widget {
	background: transparent;
	border-color: var(--vatan-footer-border);
	color: var(--vatan-cream-100);
	padding: 1rem;
}

.fusion-body .fusion-footer h1,
.fusion-body .fusion-footer h2,
.fusion-body .fusion-footer h3,
.fusion-body .fusion-footer h4,
.fusion-body .fusion-footer .widget-title {
	color: var(--vatan-white);
}

.fusion-body .fusion-footer a {
	color: var(--vatan-cream-100);
}

.fusion-body .fusion-footer a:hover,
.fusion-body .fusion-footer a:focus {
	color: var(--vatan-secondary);
}

.fusion-body .fusion-footer-copyright-area {
	background: var(--vatan-primary-deep);
	border-top: 1px solid var(--vatan-footer-border);
	color: var(--vatan-cream-100);
}

.fusion-body .fusion-footer-copyright-area a {
	color: var(--vatan-cream-100);
}

/* ==========================================================================
   Accessibility focus states
   ========================================================================== */

.fusion-body a:focus-visible,
.fusion-body button:focus-visible,
.fusion-body input:focus-visible,
.fusion-body textarea:focus-visible,
.fusion-body select:focus-visible,
.fusion-body .fusion-button:focus-visible {
	outline: 3px solid var(--vatan-focus);
	outline-offset: 3px;
}

.fusion-body input:focus,
.fusion-body textarea:focus,
.fusion-body select:focus {
	border-color: var(--vatan-accent-leaf-deep);
	box-shadow: 0 0 0 3px var(--vatan-focus-ring);
}

/* ==========================================================================
   Responsive rules
   ========================================================================== */

@media (max-width: 1024px) {
	.fusion-body #main {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.fusion-body .fusion-main-menu > ul > li > a {
		font-size: 0.95rem;
	}
}

@media (max-width: 800px) {
	html body.fusion-body {
		font-size: 15.5px;
	}

	html body.fusion-body #main h1 {
		font-size: clamp(1.75rem, 8vw, 2.45rem);
	}

	html body.fusion-body #main h2,
	html body.fusion-body #main .entry-title,
	html body.fusion-body #main .fusion-post-title {
		font-size: clamp(1.45rem, 6vw, 2rem) !important;
	}

	.fusion-body .fusion-header-wrapper,
	.fusion-body .fusion-header,
	.fusion-body .fusion-secondary-header {
		max-width: 100%;
	}

	.fusion-body .fusion-logo-link {
		min-height: calc(var(--vatan-logo-size-mobile) + 0.5rem);
		padding: 0.25rem;
	}

	.fusion-body .fusion-logo {
		min-height: calc(var(--vatan-logo-size-mobile) + 0.5rem);
	}

	.fusion-body .fusion-logo-link::before {
		width: var(--vatan-logo-size-mobile);
	}

	.fusion-body .fusion-logo::before {
		width: var(--vatan-logo-size-mobile);
	}

	.fusion-body .fusion-blog-layout-large .post,
	.fusion-body .fusion-post-content,
	.fusion-body .fusion-post-content-container {
		padding: 1rem;
	}
}

@media (max-width: 520px) {
	.fusion-body #wrapper,
	.fusion-body #main,
	.fusion-body .fusion-row,
	.fusion-body .post-content,
	.fusion-body .fusion-footer {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.fusion-body .fusion-button,
	.fusion-body .button,
	.fusion-body button,
	.fusion-body input[type="button"],
	.fusion-body input[type="submit"],
	.fusion-body input[type="reset"] {
		min-height: 2.6rem;
		padding: 0.72rem 1rem;
	}

	.fusion-body .fusion-footer-widget-area .widget {
		padding: 0.85rem 0;
	}
}