/* ========================================
   Header Builder — Component Styles

   All values reference CSS custom properties.
   ======================================== */


/* -------------------------------------------------------
   STRUCTURE
   ------------------------------------------------------- */

.site-header {
	background: var(--starter-color-background, #fff);
	border-bottom: 1px solid var(--starter-color-border, #e5e5e5);
}

.site-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}


/* -------------------------------------------------------
   ZONES
   ------------------------------------------------------- */

.header-zone {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.header-zone--left { justify-content: flex-start; }
.header-zone--center { justify-content: center; }
.header-zone--right { justify-content: flex-end; }

.header-zone:empty { display: none; }


/* -------------------------------------------------------
   LOGO
   ------------------------------------------------------- */

.header-component--logo .custom-logo-link { display: flex; align-items: center; }
.header-component--logo .custom-logo { height: 40px; width: auto; }

.header-component--logo .site-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--starter-color-heading, #1a1a1a);
	text-decoration: none;
	white-space: nowrap;
}

.header-component--logo .site-title:hover { opacity: 0.8; }


/* -------------------------------------------------------
   MENU
   ------------------------------------------------------- */

.header-component--menu ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
}

.header-component--menu a {
	color: var(--starter-color-text, #333);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 0.25rem 0;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s;
}

.header-component--menu a:hover,
.header-component--menu .current-menu-item a {
	color: var(--starter-color-accent, #0073aa);
}

/* Sub-menu */
.header-component--menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--starter-color-surface, #fff);
	border: 1px solid var(--starter-color-border, #eee);
	border-radius: var(--starter-border-radius, 6px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	min-width: 200px;
	padding: 0.5rem 0;
	z-index: 100;
}

.header-component--menu .menu-item-has-children { position: relative; }

.header-component--menu .menu-item-has-children:hover > .sub-menu,
.header-component--menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.header-component--menu .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	font-weight: 400;
}

.header-component--menu .sub-menu a:hover { background: #f5f9fc; }

/* Hamburger */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}

.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--starter-color-text, #1a1a1a);
	border-radius: 2px;
	transition: transform 0.25s;
}

.hamburger { position: relative; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; }
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }


/* -------------------------------------------------------
   CART
   ------------------------------------------------------- */

.header-component--cart .cart-link {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--starter-color-text, #1a1a1a);
	text-decoration: none;
	padding: 0.35rem;
	border-radius: 6px;
	transition: background 0.2s;
}

.header-component--cart .cart-link:hover { background: #f5f5f5; }
.header-component--cart svg { flex-shrink: 0; }


/* -------------------------------------------------------
   ACCOUNT
   ------------------------------------------------------- */

.header-component--account .account-link {
	display: flex;
	align-items: center;
	color: var(--starter-color-text, #1a1a1a);
	text-decoration: none;
	padding: 0.35rem;
	border-radius: 6px;
	transition: background 0.2s;
}

.header-component--account .account-link:hover { background: #f5f5f5; }


/* -------------------------------------------------------
   CTA BUTTON
   ------------------------------------------------------- */

.header-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.25rem;
	border-radius: var(--starter-border-radius, 6px);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, transform 0.15s;
}

.header-cta:hover { transform: translateY(-1px); }

.header-cta--primary {
	background: var(--starter-color-accent, #0073aa);
	color: #fff;
}
.header-cta--primary:hover {
	background: var(--starter-color-accent-hover, #005a87);
	color: #fff;
}

.header-cta--outline {
	background: transparent;
	color: var(--starter-color-accent, #0073aa);
	border: 2px solid var(--starter-color-accent, #0073aa);
}
.header-cta--outline:hover {
	background: var(--starter-color-accent, #0073aa);
	color: #fff;
}

.header-cta--dark {
	background: var(--starter-color-text, #1a1a1a);
	color: #fff;
}
.header-cta--dark:hover {
	background: #333;
	color: #fff;
}


/* -------------------------------------------------------
   SPACER / SOCIAL
   ------------------------------------------------------- */

.header-component--spacer { flex-shrink: 0; }

.header-component--social { display: flex; gap: 0.5rem; }

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--starter-color-text-light, #666);
	transition: color 0.2s, background 0.2s;
}

.social-link:hover {
	color: var(--starter-color-accent, #0073aa);
	background: #f0f5fa;
}


/* -------------------------------------------------------
   HTML / WIDGET (minimal reset)
   ------------------------------------------------------- */

.header-component--html,
.header-component--widget { font-size: 0.9rem; }


/* -------------------------------------------------------
   STYLE: TRANSPARENT
   ------------------------------------------------------- */

.header-style--transparent {
	background: transparent;
	border-bottom-color: transparent;
}

.header-style--transparent.is-scrolled {
	background: var(--starter-color-background, #fff);
	border-bottom-color: var(--starter-color-border, #e5e5e5);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}


/* -------------------------------------------------------
   STYLE: DARK
   ------------------------------------------------------- */

.header-style--dark {
	background: var(--starter-color-text, #1a1a1a);
	border-bottom-color: #333;
}

.header-style--dark .site-title,
.header-style--dark .header-component--menu a,
.header-style--dark .header-component--cart .cart-link,
.header-style--dark .header-component--account .account-link {
	color: #eee;
}

.header-style--dark .header-component--menu a:hover,
.header-style--dark .header-component--menu .current-menu-item a {
	color: #fff;
}

.header-style--dark .hamburger,
.header-style--dark .hamburger::before,
.header-style--dark .hamburger::after {
	background: #eee;
}

.header-style--dark .cart-count {
	background: #fff;
	color: var(--starter-color-text, #1a1a1a);
}


/* -------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------- */

@media (max-width: 1023px) {
	.header-inner { grid-template-columns: 1fr auto; }
	.header-zone--center { display: none; }

	.menu-toggle { display: block; }

	.header-component--menu ul {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--starter-color-background, #fff);
		border-bottom: 1px solid var(--starter-color-border, #e5e5e5);
		padding: 1rem;
		gap: 0.25rem;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	}

	.header-component--menu.is-open ul,
	.header-component--menu.toggled ul { display: flex; }

	.header-component--menu .sub-menu {
		position: static;
		box-shadow: none;
		border: none;
		padding-left: 1rem;
		min-width: auto;
	}

	.header-component--menu .menu-item-has-children:hover > .sub-menu { display: none; }
	.header-component--menu .menu-item-has-children.is-open > .sub-menu { display: block; }

	.header-component--search { display: none; }
}

@media (max-width: 639px) {
	.header-inner { gap: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
	.header-zone { gap: 0.5rem; }
	.header-component--logo .custom-logo { height: 32px; }
	.header-component--logo .site-title { font-size: 1.15rem; }
	.header-component--account { display: none; }
}