/**
 * mobile.css — phone and tablet only (v2.5.5)
 *
 * WHY THIS FILE EXISTS
 *
 * Earlier attempts put the filled-header rules in custom.css and scoped
 * modern.css with :not() selectors to stop it overriding them. That was
 * fragile in both directions: modern.css loads after custom.css and uses
 * !important, so the header stayed white; and once modern.css was scoped,
 * the desktop header had to be re-created by hand rather than simply left
 * alone. Two rounds of desktop regressions came out of that.
 *
 * This file removes the problem structurally rather than tuning it:
 *
 *   1. It is enqueued LAST, after modern.css, so it never has to fight for
 *      the cascade.
 *   2. EVERY rule sits inside @media (max-width: 1023px). Nothing here can
 *      reach the desktop, whatever else changes.
 *
 * The rule for anyone editing this file later is simply: do not add a
 * declaration outside the media query. If a change needs to apply on
 * desktop, it belongs in custom.css, not here.
 */

@media (max-width: 1023px) {

	/* ---------- Filled header ----------
	 * !important is needed because modern.css sets the header background
	 * with !important too. This is the one place it is justified: the two
	 * rules genuinely conflict, and this file is deliberately the last
	 * word within its media query.
	 */
	.anubc-header--filled .anubc-header-top {
		background: var(--anubc-blue, #1d4ed8) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom: 0;
		box-shadow: none;
	}

	/* Header row and category bar become one continuous block.
	 * v2.8.0: selector strength raised (see note above the Browse bar
	 * rules) so the Brand-blue gradient and the glass frost can never
	 * repaint this strip on mobile again. */
	.anubc-header--filled.anubc-header--filled.anubc-header--filled .bg-blue-700 {
		background: var(--anubc-blue-dark, #1e3a8a) !important;
		background-image: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		border-bottom: 0;
		box-shadow: none !important;
	}

	/* The nav row's container padding let the strip behind the button
	 * show at both edges. Zeroed, so the Browse bar truly bleeds
	 * edge to edge. */
	.anubc-header--filled .bg-blue-700 > .container {
		padding-left: 0;
		padding-right: 0;
	}

	.anubc-header--filled .anubc-allcat-btn {
		background-color: rgba(255, 255, 255, 0.14);
		margin: 6px;
		border-radius: 8px;
	}

	.anubc-header--filled .anubc-allcat-btn:hover {
		background-color: rgba(255, 255, 255, 0.24);
		box-shadow: none;
	}

	.anubc-header--filled .anubc-mobile-toggle {
		color: #fff;
	}

	/* The search field is the only white element in the header, which is
	   what draws the eye to it. */
	.anubc-header--filled .anubc-search-input {
		background: #fff;
		border-color: transparent;
	}

	.anubc-header--filled .anubc-search-form button[type="submit"] {
		background-color: var(--anubc-blue-dark, #1e3a8a);
	}

	/* ---------- Wordmark ----------
	 * Set here rather than through the Customizer variables on purpose.
	 * Those variables carry whatever was saved in the Customizer, and the
	 * saved values (#1e293b for the name, #038dce for the accent) are both
	 * near-invisible on a blue bar — which is exactly how "Anu" and then
	 * "Book Centre" disappeared in earlier versions. Forcing them here
	 * guarantees legibility regardless of what is stored, while the
	 * variables continue to drive the desktop header untouched.
	 */
	.anubc-header--filled .anubc-logo-name,
	.anubc-header--filled .anubc-logo-name-accent {
		color: #fff !important;
	}

	.anubc-header--filled .anubc-logo-tagline {
		color: rgba(255, 255, 255, 0.72) !important;
	}

	/* ---------- Logo on a white chip ----------
	 * The mark is drawn in red, blue and green for a white page, and its
	 * blue block all but vanished against the blue header. A white rounded
	 * square keeps the original artwork legible and removes the need for a
	 * separate light-version PNG.
	 *
	 * border-box keeps the padding inside the existing --anubc-logo-h cap,
	 * so the chip cannot make the header taller than it already was.
	 */
	.anubc-header--filled:not(.anubc-header--haslight) .anubc-logo-img--dark {
		background: #fff;
		border-radius: 8px;
		padding: 5px;
		box-sizing: border-box;
	}

	/* If a dark-background logo has been uploaded, it replaces the standard
	   one and skips the chip entirely. */
	.anubc-header--haslight .anubc-logo-img--dark {
		display: none;
	}

	/* ---------- Centred brand block (v2.5.6) ----------
	 * Logo above, name below, both centred; the language switch sits to
	 * the right. It is positioned absolutely rather than placed in the
	 * flex row because a third item in the row would pull the logo off
	 * centre — centring has to be against the header, not against the
	 * remaining space.
	 */
	.anubc-header--filled .anubc-header-top .container > .flex {
		position: relative;
		flex-direction: column;
		gap: 0.6rem;
	}

	.anubc-header--filled .anubc-logo {
		width: 100%;
	}

	.anubc-header--filled .anubc-logo-link {
		flex-direction: column;
		align-items: center;
		gap: 0.4rem;
		text-align: center;
	}

	.anubc-header--filled .anubc-logo-text {
		align-items: center;
		text-align: center;
	}

	.anubc-header--filled .anubc-search-wrap {
		width: 100%;
		flex-basis: auto;
		max-width: none;
	}

	.anubc-header--filled .anubc-langswitch {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 0.75rem;
	}

	.anubc-header--filled .anubc-langswitch-cur {
		color: #fff;
	}

	.anubc-header--filled .anubc-langswitch-alt {
		color: rgba(255, 255, 255, 0.75);
		border-left-color: rgba(255, 255, 255, 0.4);
	}

	.anubc-header--filled .anubc-langswitch-alt:hover {
		color: #fff;
	}

	/* ---------- Design 10 header controls (v2.6.0) ----------
	 * The mockup keeps a hamburger and a cart in the header alongside the
	 * Browse Categories bar and the bottom nav's own cart. That is
	 * duplication, and it was removed in v2.5.6 — it is back here because
	 * matching the design was the explicit ask. The theme's own
	 * .anubc-mobile-toggle stays hidden so there are not three.
	 */
	.anubc-mobile-toggle {
		display: none !important;
	}

	.anubc-d10-menu,
	.anubc-d10-cart {
		position: absolute;
		top: 0;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		background: none;
		color: #fff;
		font-size: 22px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		text-decoration: none;
	}

	.anubc-d10-menu {
		left: 0;
	}

	.anubc-d10-cart {
		right: 0;
	}

	/* The language switch and the cart would otherwise stack in the same
	   corner, so the switch drops below it. */
	.anubc-header--filled .anubc-langswitch {
		top: 38px;
	}

	/* ---------- Browse Categories bar ----------
	 * Full width, centred label, sitting directly under the search field
	 * as one continuous block with the header above it.
	 */
	/*
	 * v2.7.1: modern.css rounds every .anubc-allcat-btn with !important
	 * (its generic button polish), and the Brand-blue nav style adds a
	 * translucent border plus a hover lift/shadow. All three leaked into
	 * this bar, turning it into a floating rounded pill instead of the
	 * flat full-width Design 10 block. The !important flags below are
	 * deliberate: this file loads last and this is the one place the
	 * polish layer must stand down.
	 */
	.anubc-header--filled .anubc-allcat-btn {
		width: 100%;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		justify-content: center;
		background-color: var(--anubc-blue-dark, #C81233);
		font-weight: 600;
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
	}

	.anubc-header--filled .anubc-allcat-btn:hover {
		background-color: var(--anubc-allcat-dark, #172554);
		box-shadow: none !important;
		transform: none !important;
	}

	/* ---------- Swipeable category pages ---------- */
	.anubc-mgrid {
		display: flex;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-bottom: 0.5rem;
	}

	.anubc-mgrid::-webkit-scrollbar {
		display: none;
	}

	.anubc-mgrid-page {
		flex: 0 0 100%;
		scroll-snap-align: start;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75rem 0.25rem;
	}

	/* Tiles are rounded squares rather than circles, and carry the tint set
	   inline per position from the palette in inc/mobile-nav.php. */
	.anubc-mgrid-icon {
		border-radius: 14px;
		width: clamp(44px, 13.5vw, 56px);
		height: clamp(44px, 13.5vw, 56px);
	}

	.anubc-mgrid-item:hover .anubc-mgrid-icon {
		filter: brightness(0.97);
		background-image: none;
	}

	.anubc-mgrid-label {
		color: #334155;
		font-weight: 500;
	}

	/* Trust strip becomes a tinted band.
	 * v2.8.0 (Design A): one line, always. Four badges share the width
	 * evenly, each showing its icon over the short mobile title. No
	 * wrapping, no scrolling — the short titles are what make one line
	 * possible on a phone. */
	.anubc-badges-row {
		background: var(--anubc-tint, #eff6ff);
		border-top: 0;
		border-bottom: 0;
		padding: 0.55rem clamp(0.5rem, 2.4vw, 1.5rem) 0.5rem;
		margin-left: calc(-1 * clamp(0.75rem, 3.2vw, 2rem));
		margin-right: calc(-1 * clamp(0.75rem, 3.2vw, 2rem));
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: visible;
		justify-content: space-around;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.anubc-badges-row .anubc-badge {
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
		text-align: center;
	}

	/* Swap titles: the band shows the short one; a badge with no short
	 * title saved keeps its full title as the fallback. The supporting
	 * text line never shows in the band. */
	.anubc-badges-row .anubc-badge-text {
		display: none;
	}

	.anubc-badges-row .anubc-badge-title--short {
		display: block;
	}

	.anubc-badges-row .anubc-badge:has(.anubc-badge-title--short) .anubc-badge-title--full {
		display: none;
	}

	.anubc-badges-row .anubc-badge-title {
		font-size: 0.7rem;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.anubc-badges-row .anubc-badge-icon {
		color: var(--anubc-tint-text, #1d4ed8);
	}

	.anubc-badges-row .anubc-badge-title {
		color: #475569;
	}

	/* Logo chip, rounder per request. Design 10's own mark sits straight on
	   the red because it is single-colour white line art; the ABC blocks
	   need the white behind them to stay readable. */
	.anubc-header--filled:not(.anubc-header--haslight) .anubc-logo-img--dark {
		border-radius: 16px;
		/* Scales with the larger mark so the white border stays in
		   proportion rather than tightening as the logo grows. */
		padding: clamp(6px, 1.8vw, 9px);
	}

	.anubc-mgrid-dots {
		display: flex;
		justify-content: center;
		gap: 5px;
		margin-bottom: 1rem;
	}

	.anubc-mgrid-dot {
		width: 5px;
		height: 5px;
		border-radius: 999px;
		background: #cbd5e1;
		transition: width 0.2s ease, background 0.2s ease;
	}

	.anubc-mgrid-dot.is-active {
		width: 16px;
		background: var(--anubc-blue, #1d4ed8);
	}

	/* ---------- Hero banner ----------
	 * Hidden on phones and tablets. It was the single largest block above
	 * the fold — around 200px even after the v2.5.0 slim-down — and with
	 * the category grid sitting directly beneath the search field, products
	 * now start almost immediately. The banner still runs on desktop.
	 */
	.anubc-hero,
	.anubc-hero-slider,
	.anubc-hero-pagination {
		display: none !important;
	}

}

/* The light logo variant is markup that did not exist before v2.5.4, so
   hiding it outside the media query changes nothing on desktop — it simply
   never renders there. */
.anubc-logo-img--light {
	display: none;
}

@media (max-width: 1023px) {
	.anubc-header--haslight .anubc-logo-img--light {
		display: block;
	}
}

/* ── Cart badge on the filled header (v2.8.0, Design A) ──────────
 * The badge takes the scheme accent everywhere else — which on the
 * filled mobile header made it the same colour as the bar behind it,
 * i.e. invisible. Here it inverts: white chip, scheme-coloured number.
 * !important so it also beats stale WooCommerce fragment markup.
 */
@media (max-width: 1023px) {
	.anubc-header--filled .anubc-cart-badge,
	.anubc-header--filled #anubc-cart-count {
		background-color: #ffffff !important;
		color: var(--anubc-blue, #1d4ed8) !important;
	}
}