/*
 * =====================================================
 * Aranyae Leaf – Custom Header Styles
 * File: aranyae-header.css
 *
 * Add to: wp-content/themes/hello-elementor-child/css/aranyae-header.css
 * Then enqueue in functions.php (see aranyae-functions.php)
 *
 * Font used: 'Cormorant Garamond' (display) + system sans (nav)
 * Load in functions.php via Google Fonts or wp_enqueue_style
 * =====================================================
 */

/* ── Reset / Base ─────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

/* ── Header Container ─────────────────────────────── */
.aranyae-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	background: linear-gradient(
		to right,
		rgba(210, 200, 175, 0.97) 0%,
		rgba(195, 188, 155, 0.96) 40%,
		rgba(180, 175, 140, 0.96) 70%,
		rgba(165, 158, 120, 0.97) 100%
	);
	backdrop-filter: blur(4px);
	box-shadow: 0 1px 12px rgba(60, 50, 20, 0.12);
	font-family: 'Cormorant Garamond', Georgia, serif;
}

.aranyae-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
	height: 68px;
	gap: 20px;
}

/* ── Logo ─────────────────────────────────────────── */
.aranyae-header__logo a {
	text-decoration: none;
	display: flex;
	align-items: center;
}

/* Transparent PNG logo image */
.aranyae-header__logo .custom-logo-link {
	display: flex;
	align-items: center;
}

.aranyae-header__logo .custom-logo {
	height: 48px;
	width: auto;
	display: block;
}

/* ── Primary Navigation ───────────────────────────── */
.aranyae-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.aranyae-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: nowrap;
}

.aranyae-nav__list li {
	position: relative;
}

.aranyae-nav__list > li > a {
	display: block;
	padding: 8px 12px;
	font-family: 'Montserrat', 'Trebuchet MS', sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	color: #2c3320;
	text-decoration: none;
	letter-spacing: 0.06em;
	text-transform: capitalize;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.aranyae-nav__list > li > a:hover,
.aranyae-nav__list > li > a:focus {
	color: #6b5c2e;
	outline: none;
}

/* Active/current page */
.aranyae-nav__list > li.current-menu-item > a,
.aranyae-nav__list > li.current_page_item > a {
	color: #6b5c2e;
	font-weight: 600;
}

/* ── Dropdown Menus ──────────────────────────────── */
.aranyae-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 180px;
	background: rgba(240, 233, 210, 0.98);
	border: 1px solid rgba(180, 165, 120, 0.35);
	border-radius: 4px;
	box-shadow: 0 6px 24px rgba(50, 40, 10, 0.14);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	transform-origin: top center;
	z-index: 100;
}

.aranyae-nav__list li:hover > .sub-menu,
.aranyae-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.aranyae-nav__list .sub-menu li a {
	display: block;
	padding: 8px 20px;
	font-family: 'Montserrat', 'Trebuchet MS', sans-serif;
	font-size: 0.72rem;
	color: #2c3320;
	text-decoration: none;
	letter-spacing: 0.04em;
	transition: background 0.15s ease, color 0.15s ease;
}

.aranyae-nav__list .sub-menu li a:hover {
	background: rgba(160, 145, 90, 0.15);
	color: #6b5c2e;
}

/* Dropdown arrow indicator */
.aranyae-nav__list li.menu-item-has-children > a::after {
	content: ' ▾';
	font-size: 0.65rem;
	opacity: 0.7;
}

/* ── Header Actions ───────────────────────────────── */
.aranyae-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* ── Social Icons ─────────────────────────────────── */
/* ──────────────────────────────────────────────
   Social Icons – Luxury Circular Style
────────────────────────────────────────────── */

.aranyae-social{
	display:flex;
	align-items:center;
	gap:14px;
}

.aranyae-social__link{
	display:flex;
	align-items:center;
	justify-content:center;

	width:35px;
	height:35px;

	border:1px solid rgba(22,45,15,.28);
	border-radius:50%;

	background:transparent;
	color:#62644c !important;
	text-decoration:none;

	transition:all .3s ease;
}

.aranyae-social__link svg{
	width:18px;
	height:18px;

	stroke:currentColor !important;
	fill:none !important;
	color:inherit !important;
}

.aranyae-social__link:hover,
.aranyae-social__link:focus{
	background:#162D0F;
	color:#ffffff !important;
	border-color:#162D0F;
	transform:translateY(-2px);
	box-shadow:0 6px 18px rgba(22,45,15,.18);
	outline:none;
}

/* Mobile Drawer Icons */
.aranyae-social--mobile{
	margin-top:28px;
	align-self:flex-start;
}
/* ── Hamburger (mobile only) ─────────────────────── */
.aranyae-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	padding: 4px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 3px;
}

/* Specific ID overrides to force transparent background when closed, and brand color when open */
button#aranyae-hamburger {
	background: transparent !important;
	background-color: transparent !important;
}
button#aranyae-hamburger[aria-expanded="true"] {
	background: #212918 !important;
	background-color: #212918 !important;
}

.aranyae-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #29451E;
  	background-color : #C2BB9B !important;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X when open */
.aranyae-hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.aranyae-hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.aranyae-hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Navigation Drawer ────────────────────── */
.aranyae-mobile-nav {
	display: none; /* shown via JS on mobile */
	flex-direction: column;
	background: rgba(230, 220, 190, 0.99);
	padding: 16px 24px 24px;
	border-top: 1px solid rgba(160, 145, 90, 0.2);
}

.aranyae-mobile-nav.is-open {
	display: flex;
}

.aranyae-mobile-nav__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
}

.aranyae-mobile-nav__list li {
	display: block !important;
	width: 100% !important;
}

.aranyae-mobile-nav__list li a {
	display: block;
	padding: 12px 0;
	font-family: 'Montserrat', 'Trebuchet MS', sans-serif;
	font-size: 0.85rem;
	color: #2c3320;
	text-decoration: none;
	letter-spacing: 0.06em;
	border-bottom: 1px solid rgba(160, 145, 90, 0.2);
	transition: color 0.2s ease;
}

.aranyae-mobile-nav__list li:last-child a {
	border-bottom: none;
}

.aranyae-mobile-nav__list li a:hover {
	color: #6b5c2e;
}

/* Mobile sub-menu */
.aranyae-mobile-nav__list .sub-menu {
	list-style: none;
	padding: 0 0 0 16px;
	margin: 0;
}

.aranyae-mobile-nav__list .sub-menu li a {
	font-size: 0.8rem;
	padding: 8px 0;
}

/* Shop Now on mobile */
.aranyae-btn-shop--mobile {
	display: inline-block;
	margin-top: 20px;
	align-self: flex-start;
	padding: 10px 24px;
}

/* ── Responsive Breakpoints ──────────────────────── */

/* Large screens: slightly reduce nav gap */
@media (max-width: 1200px) {
	.aranyae-nav__list > li > a {
		padding: 8px 9px;
		font-size: 0.68rem;
	}
}

/* Tablet: switch to mobile layout */
@media (max-width: 960px) {
	.aranyae-header__nav {
		display: none; /* Hidden; mobile drawer used instead */
	}

	.aranyae-header__actions .aranyae-social:not(.aranyae-social--mobile) {
		display: none !important; /* Desktop social icons hidden; mobile version shown in drawer */
	}

	.aranyae-hamburger {
		display: flex;
	}

	.aranyae-header__inner {
		padding: 0 20px;
		height: 60px;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.aranyae-header__inner {
		padding: 0 16px;
		height: 56px;
	}

	.aranyae-logo-brand {
		font-size: 1.1rem;
	}

	.aranyae-logo-tagline {
		font-size: 0.55rem;
	}
}

/* ── Accessibility: skip link & focus styles ─────── */
.aranyae-header a:focus-visible {
	outline: 2px solid #6b5c2e;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.aranyae-nav__list .sub-menu,
	.aranyae-hamburger span,
	.aranyae-social__link {
		transition: none;
	}
}

.aranyae-social__link,
.aranyae-social__link:link,
.aranyae-social__link:visited{
    color:#62644c !important;
}

.aranyae-social__link:hover,
.aranyae-social__link:focus{
    color:#ffffff !important;
}

.aranyae-social__link svg,
.aranyae-social__link svg *{
    stroke:currentColor !important;
    color:currentColor !important;
    fill:none !important;
}