/* ==========================================================================
   Header area — announcement bar, Storefront masthead tweaks, category bar.

   Storefront's markup we style here:
     .site-header        the masthead
     .site-branding      logo / site title
     .main-navigation    primary menu
     .site-header-cart   cart link  <- appearance only, behaviour untouched
   ========================================================================== */

/* --- Announcement bar ---------------------------------------------------- */

.tds-announce {
	background: var(--tds-ink);
	color: var(--tds-white);
	font-family: var(--tds-font);
	font-size: var(--tds-fs-sm);
	line-height: 1.4;
}

.tds-announce__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tds-space-2) var(--tds-space-5);
	padding-block: var(--tds-space-2);
	text-align: center;
}

.tds-announce__item {
	position: relative;
	white-space: nowrap;
}

/* Separator dot between items on wide screens. */
.tds-announce__item + .tds-announce__item::before {
	content: "";
	position: absolute;
	left: calc(var(--tds-space-5) / -2);
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
	/* Keep only the first two claims on phones — the bar must stay one line high. */
	.tds-announce__item:nth-child(n + 3) { display: none; }
	.tds-announce__inner { gap: var(--tds-space-2) var(--tds-space-4); }
	.tds-announce__item + .tds-announce__item::before { left: calc(var(--tds-space-4) / -2); }
}

/* --- Masthead ------------------------------------------------------------ */

body.tds-theme .site-header {
	background: var(--tds-white);
	border-bottom: 1px solid var(--tds-line);
	padding-top: var(--tds-space-3);
	padding-bottom: 0;
}

body.tds-theme .site-header .site-branding .site-title,
body.tds-theme .site-header .site-branding .site-title a {
	font-family: var(--tds-font);
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--tds-ink);
	text-transform: uppercase;
}

body.tds-theme .site-header .site-branding .site-description {
	color: var(--tds-muted);
	font-size: var(--tds-fs-sm);
}

body.tds-theme .site-header .custom-logo-link img {
	max-height: 56px;
	width: auto;
}

/* Primary navigation */
body.tds-theme .main-navigation ul.menu > li > a,
body.tds-theme .main-navigation ul.nav-menu > li > a {
	font-family: var(--tds-font);
	font-size: var(--tds-fs-base);
	font-weight: 700;
	color: var(--tds-ink);
	padding-block: var(--tds-space-3);
}

body.tds-theme .main-navigation ul.menu > li > a:hover,
body.tds-theme .main-navigation ul.nav-menu > li > a:hover {
	color: var(--tds-primary);
}

/* Cart link: colour only. The link target and its AJAX behaviour are
   Storefront/WooCommerce defaults and are not modified anywhere in this theme. */
body.tds-theme .site-header-cart .cart-contents {
	color: var(--tds-ink);
	font-weight: 700;
}

body.tds-theme .site-header-cart .cart-contents:hover {
	color: var(--tds-primary);
}

/* --- Header search -------------------------------------------------------
   Storefront draws the magnifier as a ::before glyph on the product-search
   form and leaves room for it with padding-left on the input. Our old rule
   used the `padding` SHORTHAND, which reset that padding-left to 18px — the
   glyph and the "Search products…" placeholder then sat on top of each other.
   Fixed by writing the four sides explicitly and pinning the glyph into the
   gutter we reserve for it.
   ------------------------------------------------------------------------ */

body.tds-theme .site-search .widget_product_search,
body.tds-theme .site-search .woocommerce-product-search,
body.tds-theme .site-search .widget_product_search form {
	position: relative;
}

/* Plain (non-product) search boxes have no glyph, so no left gutter. */
body.tds-theme .site-header .search-field {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--tds-line);
	border-radius: var(--tds-radius-pill);
	padding: 10px 18px;
	font-family: var(--tds-font);
	font-size: var(--tds-fs-md);
	line-height: 1.4;
}

body.tds-theme .site-search .widget_product_search input[type="search"],
body.tds-theme .site-search .woocommerce-product-search input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--tds-line);
	border-radius: var(--tds-radius-pill);
	padding-block: 10px;
	padding-inline-start: var(--tds-search-gutter);
	padding-inline-end: 18px;
	font-family: var(--tds-font);
	/* 16px: anything smaller makes iOS Safari zoom the page on focus. */
	font-size: var(--tds-fs-md);
	line-height: 1.4;
	text-overflow: ellipsis;
}

body.tds-theme .site-search .widget_product_search form::before,
body.tds-theme .site-search .woocommerce-product-search::before {
	position: absolute;
	inset-inline-start: 16px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	line-height: 1;
	color: var(--tds-muted);
	pointer-events: none;
	z-index: 1;
}

@media (max-width: 767px) {
	body.tds-theme .site-search {
		width: 100%;
	}
}

/* --- Category bar under the header --------------------------------------- */

.tds-catbar {
	background: var(--tds-white);
	border-bottom: 1px solid var(--tds-line);
	font-family: var(--tds-font);
}

.tds-catbar__inner {
	position: relative;
}

.tds-catbar .tds-rail {
	padding-block: var(--tds-space-2);
	padding-bottom: var(--tds-space-2);
	gap: var(--tds-space-2);
	scrollbar-width: none;
}

.tds-catbar .tds-rail::-webkit-scrollbar {
	display: none;
}

.tds-catbar__link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 14px;
	border-radius: var(--tds-radius-pill);
	background: var(--tds-surface);
	color: var(--tds-body);
	font-size: var(--tds-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tds-catbar__link:hover,
.tds-catbar__link:focus-visible {
	background: var(--tds-surface-alt);
	color: var(--tds-primary);
}

.tds-catbar__link--all {
	background: var(--tds-primary);
	color: var(--tds-white);
}

.tds-catbar__link--all:hover,
.tds-catbar__link--all:focus-visible {
	background: var(--tds-primary-ink);
	color: var(--tds-white);
}