/*
 * Phase 3 — header, navigation, mobile drawer, search panel, mini-cart
 * panel, and the (disabled-by-default) announcement bar.
 *
 * Breakpoint convention: mobile styles are the base rules; the desktop
 * nav/actions layout switches on at --urban-bp-lg (1024px), matching the
 * primary-nav / mobile-nav split already built into the markup. All
 * transitions here are automatically neutralized under
 * prefers-reduced-motion by the global rule in base.css — no per-rule
 * duplication needed.
 */

/* ---------- Announcement bar (disabled by default; only renders with a real message) ---------- */

.urban-announcement-bar {
	background-color: var(--urban-black);
	color: var(--urban-white);
}

.urban-announcement-bar__inner {
	padding-top: var(--urban-space-2);
	padding-bottom: var(--urban-space-2);
	text-align: center;
	font-size: var(--urban-text-small-size);
	letter-spacing: 0.02em;
}

.urban-announcement-bar a {
	color: var(--urban-gold);
}

/* ---------- Header shell ---------- */

.urban-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--urban-white);
	border-bottom: 1px solid var(--urban-border);
	transition: box-shadow 0.2s ease;
}

.urban-header.is-scrolled {
	box-shadow: var(--urban-shadow-header);
}

/* Logged in users see WordPress's admin bar (body.admin-bar). It is fixed to
   the top of the screen, so a header that sticks at top: 0 slid underneath it
   and was half hidden, with its buttons out of reach. The header now sticks
   just below the bar. WordPress publishes the bar's height as
   --wp-admin--admin-bar--height (32px, and 46px at 782px and below), so the
   offset follows WordPress instead of being hard coded here. Visitors have no
   admin bar and no body.admin-bar, so nothing changes for them. */
.admin-bar .urban-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* At 600px and below WordPress lets the bar scroll away with the page
   (position: absolute), so the header goes back to the top of the screen. */
@media screen and (max-width: 600px) {
	.admin-bar .urban-header {
		top: 0;
	}
}

/* The mobile menu and mini cart panels are fixed to the top of the screen too,
   so with the bar fixed above them their close buttons were partly covered.
   Same offset, only while the bar is fixed (above 600px). */
@media screen and (min-width: 601px) {
	.admin-bar .urban-nav-mobile__panel,
	.admin-bar .urban-mini-cart {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

.urban-header__inner {
	display: flex;
	align-items: center;
	gap: var(--urban-space-4);
	height: var(--urban-header-height-mobile);
}

@media (min-width: 940px) {
	.urban-header__inner {
		height: var(--urban-header-height);
	}
}

/* ---------- Branding / logo ---------- */

.urban-header__branding {
	flex: 0 0 auto;
	margin-right: auto;
}

.urban-header__logo-link,
.urban-header__site-name,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/*
 * Two logo code paths exist (inc/header.php: urban_swimwear_logo()) — WordPress's
 * own the_custom_logo() when a Site Identity logo is set (outputs .custom-logo-link /
 * img.custom-logo, WP core class names we don't control), and our own
 * .urban-header__logo-image fallback otherwise. WordPress's flex-width/flex-height
 * theme support only affects the customizer's crop UI, not frontend display size, so
 * both paths need this constraint or an uncropped original-resolution upload renders
 * at full native pixel size.
 */
.urban-header__logo-image,
.custom-logo-link img {
	/* Screen 1 review: logo read too small next to the header's other
	   elements. Modest increase, same calc-against-header-height pattern,
	   just a smaller amount subtracted (more of the header's own height
	   budget goes to the logo). */
	max-height: calc(var(--urban-header-height-mobile) - var(--urban-space-3));
	width: auto;
}

@media (min-width: 940px) {
	.urban-header__logo-image,
	.custom-logo-link img {
		max-height: calc(var(--urban-header-height) - var(--urban-space-4));
	}
}

.urban-header__site-name {
	font-size: var(--urban-text-h3-size);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--urban-black);
}

.urban-header__site-name:hover {
	color: var(--urban-gold);
}

/* ---------- Desktop primary navigation ---------- */

.urban-nav-primary {
	display: none;
}

@media (min-width: 940px) {
	/* Centre the nav in the free space between the logo and the action
	   icons: equal auto margins on both sides, and the logo block's own
	   margin-right: auto (which pushed everything to the right edge) is
	   cancelled here. Item spacing (the list gap) is untouched. */
	.urban-header__branding {
		margin-right: 0;
	}

	.urban-nav-primary {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

.urban-nav-primary__list {
	display: flex;
	align-items: center;
	gap: var(--urban-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.urban-nav-primary__list > li {
	position: relative;
}

.urban-nav-primary__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: var(--urban-space-1);
	padding: var(--urban-space-2) 0;
	font-size: var(--urban-text-nav-size);
	font-weight: var(--urban-text-nav-weight);
	letter-spacing: var(--urban-text-nav-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--urban-text);
}

/* Underline-on-hover/focus/current, reimplemented from scratch as a
   ::after that grows from 0 to full width — the legacy CSS used a similar
   idea fighting Elementor's specificity with !important; this needs none. */
.urban-nav-primary__link-text {
	position: relative;
}

.urban-nav-primary__link-text::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background-color: var(--urban-gold);
	transition: right 0.25s ease;
}

.urban-nav-primary__list > li > a:hover .urban-nav-primary__link-text::after,
.urban-nav-primary__list > li > a:focus-visible .urban-nav-primary__link-text::after,
.urban-nav-primary__list > li.current-menu-item > a .urban-nav-primary__link-text::after,
.urban-nav-primary__list > li.current-menu-ancestor > a .urban-nav-primary__link-text::after {
	right: 0;
}

/* Decorative dropdown chevron — CSS-only triangle, never exposed to
   assistive tech (no content text, so nothing for a screen reader to
   announce). */
.urban-has-dropdown > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.6;
}

/* Submenu: CSS-only open state via :hover/:focus-within, so Tab alone
   (zero JS) already makes it keyboard-operable. navigation.js only keeps
   aria-expanded in sync and adds Escape-to-close. */
.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: var(--urban-space-2) 0;
	list-style: none;
	background-color: var(--urban-white);
	border: 1px solid var(--urban-border);
	box-shadow: var(--urban-shadow-header);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.urban-has-dropdown:hover > .sub-menu,
.urban-has-dropdown:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sub-menu > li > a {
	display: block;
	padding: var(--urban-space-2) var(--urban-space-4);
	font-size: var(--urban-text-small-size);
	text-decoration: none;
	color: var(--urban-text);
	white-space: nowrap;
}

.sub-menu > li > a:hover,
.sub-menu > li > a:focus-visible {
	color: var(--urban-gold);
	background-color: var(--urban-surface-alt);
}

/* ---------- Header actions (search / account / cart) ---------- */

.urban-header__actions {
	display: flex;
	align-items: center;
	gap: var(--urban-space-2);
	flex: 0 0 auto;
}

.urban-header__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: var(--urban-space-2);
	color: var(--urban-black);
	cursor: pointer;
	text-decoration: none;
}

.urban-header__action:hover {
	color: var(--urban-gold);
}

.urban-header__cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--urban-radius-pill);
	background-color: var(--urban-gold);
	color: var(--urban-black);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.urban-header__cart-count[data-count='0'] {
	display: none;
}

/* ---------- Mobile nav toggle ---------- */

.urban-nav-mobile {
	flex: 0 0 auto;
}

.urban-nav-mobile__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: var(--urban-space-2);
	color: var(--urban-black);
	cursor: pointer;
}

@media (min-width: 940px) {
	.urban-nav-mobile__toggle {
		display: none;
	}
}

/*
 * Below 375px, four 44px tap targets (search/account/cart/menu — a hard
 * accessibility floor, never shrunk) plus the logo plus default spacing
 * overflow the viewport (measured: 52px over at 320px). Reclaim room from
 * spacing and the logo's max-height instead, scoped to the header only so
 * it doesn't touch the shared .urban-container padding other components rely on.
 */
@media (max-width: 374px) {
	.urban-header .urban-container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.urban-header__inner {
		gap: var(--urban-space-2);
	}

	.urban-header__actions {
		gap: 0.25rem;
	}

	.urban-header__logo-image,
	.custom-logo-link img {
		max-height: 2.125rem;
	}
}

/* ---------- Mobile drawer ---------- */

.urban-nav-mobile__scrim {
	position: fixed;
	inset: 0;
	z-index: 50;
	background-color: rgba(17, 17, 17, 0.5);
}

.urban-nav-mobile__panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 51;
	width: min(88vw, 360px);
	overflow-y: auto;
	background-color: var(--urban-white);
	box-shadow: var(--urban-shadow-panel);
	padding: var(--urban-space-5);
	transform: translateX(0);
}

.urban-nav-mobile__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--urban-space-5);
}

.urban-nav-mobile__panel-title {
	font-size: var(--urban-text-label-size);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.urban-nav-mobile__close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--urban-black);
}

.urban-nav-mobile__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.urban-nav-mobile__list a {
	display: block;
	padding: var(--urban-space-3) 0;
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--urban-text);
	border-bottom: 1px solid var(--urban-border);
}

/* Children of a mobile menu item: always visible, indented — no
   accordion/expand step (see template-parts/navigation/mobile-nav.php). */
.urban-nav-mobile__list .sub-menu {
	margin: 0 0 var(--urban-space-2) var(--urban-space-4);
	padding: 0;
	list-style: none;
}

.urban-nav-mobile__list .sub-menu a {
	font-size: var(--urban-text-body-size);
	font-weight: 400;
	color: var(--urban-text-muted);
	border-bottom: none;
	padding: var(--urban-space-2) 0;
}

.urban-nav-mobile__panel-footer {
	margin-top: var(--urban-space-5);
	padding-top: var(--urban-space-5);
	border-top: 1px solid var(--urban-border);
}

.urban-nav-mobile__account-link {
	display: inline-flex;
	align-items: center;
	gap: var(--urban-space-2);
	text-decoration: none;
	color: var(--urban-text);
	font-weight: 600;
}

.urban-nav-mobile__empty {
	color: var(--urban-text-muted);
	font-size: var(--urban-text-small-size);
}

/* Scroll lock while the drawer/search/cart panel is open. */
html.urban-scroll-lock {
	overflow: hidden;
}

/* No-JS fallback: without JS, .js never replaces .no-js on <html> (see
   main.js), so the toggle button can't open anything — show the mobile
   menu inline instead of hiding it behind an unusable control. */
.no-js .urban-nav-mobile__toggle {
	display: none;
}

.no-js .urban-nav-mobile__panel {
	position: static;
	width: auto;
	box-shadow: none;
	padding: var(--urban-space-4) 0 0;
}

.no-js .urban-nav-mobile__panel-header,
.no-js .urban-nav-mobile__scrim {
	display: none;
}

/* ---------- Search panel ---------- */

.urban-search-panel {
	position: fixed;
	inset: 0;
	z-index: 52;
	background-color: rgba(17, 17, 17, 0.92);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: var(--urban-space-9);
}

/* An author style always wins over the browser's default [hidden]{display:none},
   so the unconditional `display: flex` above has to be overridden explicitly
   here or the panel renders open on every page load regardless of the
   `hidden` attribute JS toggles. */
.urban-search-panel[hidden] {
	display: none;
}

.urban-search-panel__inner {
	display: flex;
	align-items: center;
	gap: var(--urban-space-4);
	width: 100%;
	max-width: 640px;
}

.urban-search-form {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	background-color: var(--urban-white);
}

.urban-search-form__input {
	flex: 1 1 auto;
	min-height: var(--urban-input-height);
	padding: 0 var(--urban-space-4);
	border: none;
	background: transparent;
	font-family: var(--urban-font-family);
	font-size: 1.125rem;
	color: var(--urban-text);
}

.urban-search-form__input:focus {
	outline: none;
}

.urban-search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--urban-input-height);
	min-height: var(--urban-input-height);
	background-color: var(--urban-black);
	color: var(--urban-white);
	border: none;
	cursor: pointer;
}

.urban-search-panel__close {
	flex: 0 0 auto;
	background: none;
	border: none;
	color: var(--urban-white);
	cursor: pointer;
}

.no-js .urban-search-panel {
	display: none !important; /* No open trigger exists without JS; avoid an unreachable full-screen overlay blocking the page. */
}

/* ---------- Mini-cart panel ---------- */

.urban-mini-cart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 51;
	width: min(92vw, 400px);
	overflow-y: auto;
	background-color: var(--urban-white);
	box-shadow: var(--urban-shadow-panel);
	padding: var(--urban-space-5);
}

.urban-mini-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--urban-space-4);
	padding-bottom: var(--urban-space-4);
	border-bottom: 1px solid var(--urban-border);
}

.urban-mini-cart__title {
	margin: 0;
	font-size: var(--urban-text-label-size);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.urban-mini-cart__close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--urban-black);
}

/* Native WooCommerce mini-cart markup, styled minimally — content itself
   (thumbnail/name/qty/price/subtotal/buttons/remove links) is entirely
   WooCommerce's own template output (see urban_swimwear_mini_cart() in
   inc/woocommerce.php), not authored here. */
.urban-mini-cart .woocommerce-mini-cart {
	margin: 0 0 var(--urban-space-4);
	padding: 0;
	list-style: none;
}

.urban-mini-cart .woocommerce-mini-cart-item {
	display: flex;
	align-items: center;
	gap: var(--urban-space-3);
	padding: var(--urban-space-3) 0;
	border-bottom: 1px solid var(--urban-border);
	position: relative;
}

.urban-mini-cart .woocommerce-mini-cart-item img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	flex: 0 0 auto;
}

.urban-mini-cart .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: var(--urban-space-3);
	right: 0;
	color: var(--urban-error);
	text-decoration: none;
}

.urban-mini-cart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	padding-top: var(--urban-space-3);
	border-top: 1px solid var(--urban-border);
}

.urban-mini-cart .woocommerce-mini-cart__buttons {
	display: flex;
	gap: var(--urban-space-3);
	margin-top: var(--urban-space-4);
}

.urban-mini-cart .woocommerce-mini-cart__buttons a {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--urban-btn-height);
	padding: 0 var(--urban-space-4);
	text-align: center;
	text-decoration: none;
	font-size: var(--urban-text-button-size);
	font-weight: 700;
	letter-spacing: var(--urban-text-button-tracking);
	text-transform: uppercase;
	border: 1px solid var(--urban-black);
	color: var(--urban-black);
}

.urban-mini-cart .woocommerce-mini-cart__buttons a.checkout {
	background-color: var(--urban-black);
	color: var(--urban-white);
}

.urban-mini-cart .woocommerce-mini-cart__empty-message {
	color: var(--urban-text-muted);
}