/* ==========================================================================
   RED MILLS Horse - 2026 header, OPTION A (WHITE). Chloe Scally, 25 Sep 2026.
   Switched from the dark Option B on her request; the dark sheet is kept
   untouched as ui/stylesheet/rmh26-header.css (rollback = point the enqueue
   in functions.php back at it and swap the logo in rmh26-header.php).
   Port of the RED MILLS Pet header (redmills-pet/assets/css/mega-menu.css),
   white bar with horse red #e1002c and UniversLTStd.
   Markup template-parts/rmh26-header.php, JS ui/javascript/rmh26-header.js.
   Below 1280px the nav folds into the slide-in drawer (horse has 7 top items).
   ========================================================================== */

/* ---------- retire the legacy header (kept in markup for rollback) ---------- */
header.rmh26-on > .top-new-header,
header.rmh26-on nav.navbar,
header.rmh26-on .search-results,
header.rmh26-on #rmh-search { display: none !important; }
.page-wrapper header.rmh26-on:not(#rmhn-x),
.page-wrapper header.rmh26-on.header-home:not(#rmhn-x),
.page-wrapper header.rmh26-on.inner-header:not(#rmhn-x) {
	position: sticky !important; top: 0 !important; left: auto !important; right: auto !important;
	width: 100% !important; padding: 0 !important; margin: 0 !important;
	background: #fff !important; z-index: 1000 !important; transform: none !important;
}
header.rmh26-on > .container:empty { display: none; }

.rmhn {
	--rmhn-red: #e1002c;
	--rmhn-red-dark: #b30023;
	--rmhn-ink: #1b1c20;
	--rmhn-ink-2: #f4f4f5;
	--rmhn-bg: #fff;
	--rmhn-line: #e3e4e6;
	--rmhn-muted: #5a5f66;
	--rmhn-shell: 1320px;
	--rmhn-bar-h: 88px;
	--rmhn-bold: 'UniversLTStd-Bold', 'UniversLTStd', 'Helvetica Neue', Arial, sans-serif;
	--rmhn-reg: 'UniversLTStd', 'Helvetica Neue', Arial, sans-serif;
	--rmhn-shadow: 0 18px 40px -18px rgba(0, 0, 0, .18);
	position: relative;
	font-family: var(--rmhn-reg);
	color: var(--rmhn-ink);
	text-align: left;
}
.rmhn *, .rmhn *::before, .rmhn *::after { box-sizing: border-box; }
.rmhn ul { list-style: none; margin: 0; padding: 0; }
.rmhn p { margin: 0; }
.rmhn a { text-decoration: none; }
.rmhn a:focus-visible, .rmhn button:focus-visible, .rmhn input:focus-visible { outline: 2px solid var(--rmhn-red); outline-offset: 2px; }
.rmhn-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rmhn-icon { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.rmhn-icon--chevron { width: 14px; height: 14px; opacity: .6; transition: transform .22s ease; }
.rmhn-icon--arrow { width: 18px; height: 18px; transition: transform .2s ease; }

/* ---------- bar ---------- */
.rmhn-bar { position: relative; z-index: 2; background: var(--rmhn-bg); border-bottom: 1px solid var(--rmhn-line); }
header.sticky-nav .rmhn-bar { box-shadow: 0 6px 22px -12px rgba(0, 0, 0, .25); }
.rmhn-bar__inner { max-width: var(--rmhn-shell); margin: 0 auto; padding: 0 24px; height: var(--rmhn-bar-h); display: flex; align-items: center; gap: 24px; }
.rmhn-logo { display: flex; align-items: center; flex: 0 0 auto; }
.rmhn-logo img { display: block; height: 46px; width: auto; max-width: none; }

/* ---------- nav ---------- */
.rmhn-nav { flex: 1 1 auto; min-width: 0; }
.rmhn-nav__list { display: flex; align-items: center; justify-content: center; gap: 0; }
.rmhn-nav__item { position: static; margin: 0; padding: 0; }
.rmhn-nav__link { display: inline-flex; align-items: center; gap: 5px; height: var(--rmhn-bar-h); padding: 0 11px; position: relative;
	color: var(--rmhn-ink) !important; font: 400 13px/1 var(--rmhn-bold); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.rmhn-nav__link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 4px; background: var(--rmhn-red);
	transform: scaleX(0); transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
.rmhn-nav__link:hover, .rmhn-nav__item.is-open > .rmhn-nav__link, .rmhn-nav__item.is-current > .rmhn-nav__link { color: var(--rmhn-red) !important; }
.rmhn-nav__link:hover::after, .rmhn-nav__item.is-open > .rmhn-nav__link::after, .rmhn-nav__item.is-current > .rmhn-nav__link::after { transform: scaleX(1); }
.rmhn-nav__item.is-open .rmhn-icon--chevron { transform: rotate(180deg); opacity: 1; }

/* ---------- utilities ---------- */
.rmhn-utils { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.rmhn-utils__buy { position: static; }
.rmhn-util { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
	border: 1.5px solid var(--rmhn-line); background: transparent; color: var(--rmhn-ink) !important; font: 400 13px/1 var(--rmhn-bold);
	letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: background .18s ease, border-color .18s ease; }
.rmhn-util:hover { border-color: var(--rmhn-ink); }
.rmhn-util--locator { background: var(--rmhn-red); border-color: var(--rmhn-red); color: #fff !important; }
.rmhn-util--locator:hover, .rmhn-utils__buy.is-open .rmhn-util--locator { background: var(--rmhn-red-dark); border-color: var(--rmhn-red-dark); }
.rmhn-util--search { width: 44px; padding: 0; justify-content: center; }
.rmhn-util--search[aria-expanded="true"] { background: var(--rmhn-ink); border-color: var(--rmhn-ink); color: #fff !important; }
.rmhn-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1.5px solid var(--rmhn-line);
	background: transparent; border-radius: 999px; cursor: pointer; padding: 0; }
.rmhn-burger__bars { display: block; width: 19px; }
.rmhn-burger__bars i { display: block; height: 2px; background: var(--rmhn-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.rmhn-burger__bars i + i { margin-top: 4px; }
.rmhn-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rmhn-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.rmhn-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- search bar ---------- */
.rmhn-search { position: relative; z-index: 2; background: var(--rmhn-ink-2); border-bottom: 1px solid var(--rmhn-line); }
.rmhn-search[hidden] { display: none; }
.rmhn-search__form { max-width: var(--rmhn-shell); margin: 0 auto; padding: 18px 24px; display: flex; gap: 12px; }
.rmhn .rmhn-search__field { flex: 1 1 auto; min-width: 0; height: 52px; margin: 0; border: 1.5px solid #d4d6d9; border-radius: 4px; padding: 0 18px;
	font: 400 16px/1 var(--rmhn-reg); background: #fff; color: var(--rmhn-ink); box-shadow: none; }
.rmhn .rmhn-search__field:focus { outline: none; border-color: var(--rmhn-red); }

/* ---------- buttons ---------- */
.rmhn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border: 0; border-radius: 4px;
	font: 400 14px/1 var(--rmhn-bold); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .18s ease, color .18s ease; }
.rmhn-btn--red { background: var(--rmhn-red); color: #fff !important; }
.rmhn-btn--red:hover { background: var(--rmhn-red-dark); }
.rmhn-btn--light { background: #fff; color: var(--rmhn-red) !important; }
.rmhn-btn--light:hover { background: var(--rmhn-ink); color: #fff !important; }
.rmhn-btn:hover .rmhn-icon--arrow { transform: translateX(3px); }

/* ---------- mega panel ---------- */
.rmhn-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--rmhn-bg); border-top: 1px solid var(--rmhn-line);
	border-bottom: 1px solid var(--rmhn-line); box-shadow: var(--rmhn-shadow); opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .2s ease, transform .22s ease, visibility .22s; }
.rmhn-mega[hidden] { display: block; }
.is-open > .rmhn-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.rmhn-mega__inner { max-width: var(--rmhn-shell); margin: 0 auto; padding: 44px 24px 48px; display: grid;
	grid-template-columns: minmax(230px, 1fr) minmax(0, 1.5fr) minmax(280px, .95fr); gap: 48px; align-items: start; }
.rmhn-mega__title { margin: 0 0 12px !important; font: 400 30px/1.15 var(--rmhn-bold); color: var(--rmhn-ink); }
.rmhn-mega__strap { font: 400 15.5px/1.6 var(--rmhn-reg); color: var(--rmhn-muted); max-width: 30ch; }
.rmhn-mega__intro::after { content: ""; display: block; width: 100%; max-width: 280px; height: 3px; margin-top: 22px; border-radius: 3px; background: var(--rmhn-red); }
.rmhn-mega__links { columns: 2; column-gap: 40px; }
.rmhn-mega__links li { break-inside: avoid; margin: 0 0 4px; }
.rmhn-mega__links a { display: block; padding: 11px 14px 11px 16px; border-radius: 6px; border-left: 3px solid transparent;
	transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.rmhn-mega__links a:hover, .rmhn-mega__links a:focus-visible { background: var(--rmhn-ink-2); border-left-color: var(--rmhn-red); transform: translateX(2px); }
.rmhn-mega__link-label { display: block; font: 400 16px/1.35 var(--rmhn-bold); color: var(--rmhn-ink); }
.rmhn-mega__links a:hover .rmhn-mega__link-label { color: var(--rmhn-red); }
.rmhn-mega__link-desc { display: block; margin-top: 3px; font: 400 13.5px/1.5 var(--rmhn-reg); color: var(--rmhn-muted); }
.rmhn-mega__promo { background: var(--rmhn-red); color: #fff; border-radius: 8px; padding: 30px 28px 32px;
	background-image: radial-gradient(circle at 118% -20%, rgba(255, 255, 255, .22), transparent 58%); }
.rmhn-mega__promo-eyebrow { display: inline-block; margin-bottom: 14px; font: 400 11.5px/1 var(--rmhn-bold); letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.rmhn-mega__promo-title { margin: 0 0 10px !important; font: 400 22px/1.25 var(--rmhn-bold); color: #fff; }
.rmhn-mega__promo-text { margin: 0 0 22px !important; font: 400 15px/1.6 var(--rmhn-reg); opacity: .92; }

/* ---------- scrim ---------- */
.rmhn-scrim { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: -1; background: rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.rmhn-scrim[hidden] { display: block; }
.rmhn.is-open .rmhn-scrim { opacity: 1; pointer-events: auto; }

/* ---------- drawer ---------- */
.rmhn-drawer { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 1100; overflow-y: auto;
	background: var(--rmhn-bg); padding: calc(var(--rmhn-bar-h) + 12px) 20px 40px; transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1); box-shadow: -20px 0 40px -24px rgba(0, 0, 0, .35); }
.rmhn.is-drawer .rmhn-drawer { display: block; }
.rmhn.is-drawer .rmhn-drawer.is-in { transform: translateX(0); }
.rmhn-drawer__item { border-bottom: 1px solid var(--rmhn-line); }
.rmhn-drawer__row { display: flex; align-items: center; justify-content: space-between; }
.rmhn-drawer__link { flex: 1 1 auto; display: block; padding: 17px 4px; color: var(--rmhn-ink) !important; font: 400 15px/1 var(--rmhn-bold); letter-spacing: .04em; text-transform: uppercase; }
.rmhn-drawer__toggle { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--rmhn-muted); cursor: pointer; padding: 0; }
.rmhn-drawer__toggle[aria-expanded="true"] { color: var(--rmhn-red); }
.rmhn-drawer__toggle[aria-expanded="true"] .rmhn-icon--chevron { transform: rotate(180deg); opacity: 1; }
.rmhn-drawer__sub { padding: 0 0 12px !important; }
.rmhn-drawer__sub[hidden] { display: none; }
.rmhn-drawer__sub a { display: block; padding: 11px 4px 11px 16px; border-left: 2px solid var(--rmhn-line); color: var(--rmhn-muted) !important; font: 400 15px/1.4 var(--rmhn-reg); }
.rmhn-drawer__sub a:hover { color: var(--rmhn-ink) !important; border-left-color: var(--rmhn-red); }
.rmhn-drawer__cta { width: 100%; margin-top: 26px; }
/* the drawer sits under the bar: lift the bar above it */
.rmhn.is-drawer .rmhn-bar { z-index: 1200; }

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
	.rmhn-util--locator span { display: none; }
	.rmhn-util--locator { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 1279px) {
	.rmhn { --rmhn-bar-h: 72px; }
	.rmhn-nav, .rmhn-utils__buy .rmhn-mega { display: none !important; }
	.rmhn-burger { display: inline-flex; }
	.rmhn-util--locator span { display: inline; }
	.rmhn-util--locator { width: auto; padding: 0 16px; }
	.rmhn-bar__inner { padding: 0 20px; gap: 12px; }
	.rmhn-search__form { padding: 14px 20px; }
}
@media (max-width: 560px) {
	.rmhn-logo img { height: 38px; }
	.rmhn-util--locator span { display: none; }
	.rmhn-util--locator { width: 44px; padding: 0; justify-content: center; }
	.rmhn-btn { height: 46px; padding: 0 20px; }
	.rmhn-search__form { padding: 12px 16px; gap: 8px; }
	.rmhn-search__form .rmhn-btn { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.rmhn *, .rmhn *::before, .rmhn *::after { transition: none !important; }
}

/* ==========================================================================
   TWO-TIER LAYOUT (desktop >= 1280px) - Chloe Scally, 28 Sep 2026.
   Matches the Foran Equine header: white top row (logo left, Where to Buy +
   search right) and the menu in a full-width DARK strip underneath.
   Mega panels, Where to Buy panel, search bar and the <1280 drawer are unchanged
   (panels still open from the bottom of .rmhn-bar, i.e. under the dark strip).
   Rollback: delete from this comment to the end of the file
   (backup rmh26-header-white.css.bak-20260928-twotier).
   ========================================================================== */
@media (min-width: 1280px) {
	.rmhn { --rmhn-strip: #333333; --rmhn-strip-on: #000000; --rmhn-strip-h: 50px; }
	.rmhn-bar__inner { flex-wrap: wrap; height: auto; row-gap: 0; }
	.rmhn-logo { order: 1; height: var(--rmhn-bar-h); }
	.rmhn-utils { order: 2; height: var(--rmhn-bar-h); }
	/* dark strip: painted full-width by the bar itself (behind the in-flow nav; no 100vw, no clipping of the panels) */
	.rmhn-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rmhn-strip-h);
		background: var(--rmhn-strip); z-index: -1; pointer-events: none; }
	.rmhn-nav { order: 3; flex: 0 0 100%; }
	.rmhn-nav__list { justify-content: flex-start; }
	.rmhn-nav__link { height: var(--rmhn-strip-h); padding: 0 16px; color: #fff !important; }
	.rmhn-nav__link::after { left: 0; right: 0; height: 3px; }
	.rmhn-nav__link .rmhn-icon--chevron { opacity: .8; }
	.rmhn-nav__link:hover, .rmhn-nav__item.is-open > .rmhn-nav__link, .rmhn-nav__item.is-current > .rmhn-nav__link {
		background: var(--rmhn-strip-on); color: #fff !important; }
	.rmhn-bar { border-bottom: 0; }
	/* plenty of room on the top row now: keep the "Where to Buy" label */
	.rmhn-util--locator span { display: inline; }
	.rmhn-util--locator { width: auto; padding: 0 18px; }
	.rmhn-mega { border-top: 0; }
}

/* ==========================================================================
   FORAN-STYLE UTILITY CLUSTER - Chloe Scally, 28 Sep 2026.
   Top row: slanted red tabs (International Markets, Careers) + UK / IE region
   picker (CSS-only dropdown, opens on hover / keyboard focus).
   Second row: underlined inline search, dark slanted E-Store, red slanted
   Where to Buy (still opens its panel). Desktop >= 1280 only; below that the
   search toggle + burger stay and the links sit at the foot of the drawer.
   Rollback: delete from this comment to the end of the file
   (backup rmh26-header-white.css.bak-20260928-utils) + restore
   template-parts/rmh26-header.php.bak-20260928-utils.
   ========================================================================== */
.rmhn-utils__top, .rmhn-qsearch, .rmhn-util--estore, .rmhn-util__horse { display: none; }
.rmhn-utils__main { display: flex; align-items: center; gap: 8px; }
.rmhn-drawer__extra { margin-top: 22px !important; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rmhn-drawer__extra a { color: var(--rmhn-ink) !important; font: 400 14px/1.4 var(--rmhn-bold); text-decoration: underline !important; text-underline-offset: 3px; }

@media (min-width: 1280px) {
	.rmhn { --rmhn-top-h: 124px; --rmhn-slant: 12px; }
	.rmhn-logo, .rmhn-utils { height: var(--rmhn-top-h); }
	.rmhn-logo img { height: 56px; }
	.rmhn-utils { flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0; padding-bottom: 20px; }
	.rmhn-utils__top { display: flex; align-items: stretch; gap: 6px; height: 34px; }
	.rmhn-utils__main { gap: 10px; }
	.rmhn-util--search { display: none; }

	/* slanted shapes */
	.rmhn-tab, .rmhn-util--estore, .rmhn-util--locator {
		clip-path: polygon(var(--rmhn-slant) 0, 100% 0, calc(100% - var(--rmhn-slant)) 100%, 0 100%); border-radius: 0 !important; border: 0 !important; }
	.rmhn-tab { display: inline-flex; align-items: center; padding: 0 26px; background: var(--rmhn-red); color: #fff !important;
		font: 400 14px/1 var(--rmhn-bold); letter-spacing: .01em; transition: background .18s ease; }
	.rmhn-tab:hover, .rmhn-tab:focus-visible { background: var(--rmhn-red-dark); }

	/* region picker */
	.rmhn-region { position: relative; display: flex; align-items: center; margin-left: 6px; }
	.rmhn-region__btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px; border: 0; background: none; cursor: pointer;
		color: var(--rmhn-ink); font: 400 14px/1 var(--rmhn-reg); }
	.rmhn-region__btn .rmhn-icon { width: 20px; height: 20px; }
	.rmhn-region__list { position: absolute; right: 0; top: 100%; z-index: 5; min-width: 290px; padding: 8px 0 !important; background: #fff;
		border: 1px solid var(--rmhn-line); border-top: 3px solid var(--rmhn-red); box-shadow: var(--rmhn-shadow);
		opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
	.rmhn-region:hover .rmhn-region__list, .rmhn-region:focus-within .rmhn-region__list { opacity: 1; visibility: visible; transform: none; }
	.rmhn-region:hover .rmhn-icon--chevron, .rmhn-region:focus-within .rmhn-icon--chevron { transform: rotate(180deg); }
	.rmhn-region__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 18px; }
	.rmhn-region__row:hover { background: var(--rmhn-ink-2); }
	.rmhn-region__name { font: 400 14px/1.3 var(--rmhn-bold); color: var(--rmhn-ink); }
	.rmhn-region__langs { display: flex; gap: 12px; }
	.rmhn-region__langs a { font: 400 13.5px/1.3 var(--rmhn-reg); color: var(--rmhn-muted) !important; }
	.rmhn-region__langs a:hover, .rmhn-region__langs a:focus-visible { color: var(--rmhn-red) !important; text-decoration: underline; }
	.rmhn-region__row.is-current .rmhn-region__name { color: var(--rmhn-red); }

	/* inline search */
	.rmhn-qsearch { display: flex; align-items: center; width: 190px; height: 44px; margin-right: 14px; border-bottom: 1.5px solid var(--rmhn-red); }
	.rmhn .rmhn-qsearch__field { flex: 1 1 auto; min-width: 0; height: 42px; margin: 0; padding: 0 4px; border: 0; background: transparent; box-shadow: none;
		font: 400 16px/1 var(--rmhn-reg); color: var(--rmhn-ink); }
	.rmhn .rmhn-qsearch__field:focus { outline: none; }
	.rmhn-qsearch:focus-within { border-bottom-width: 2.5px; }
	.rmhn-qsearch__btn { flex: 0 0 auto; width: 36px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
		background: none; color: var(--rmhn-ink); cursor: pointer; }
	.rmhn-qsearch__btn .rmhn-icon { width: 18px; height: 18px; }
	.rmhn-qsearch__btn:hover { color: var(--rmhn-red); }

	/* E-Store + Where to Buy */
	.rmhn-util--estore, .rmhn-util--locator { height: 40px; padding: 0 26px !important; width: auto !important; gap: 8px;
		font: 400 14px/1 var(--rmhn-bold) !important; letter-spacing: .01em !important; text-transform: none !important; color: #fff !important; }
	.rmhn-util--estore { display: inline-flex; background: #333333; }
	.rmhn-util--estore:hover, .rmhn-util--estore:focus-visible { background: #000; }
	.rmhn-util--locator > svg { display: none; }
	.rmhn-util__horse { display: block; width: 24px; height: auto; }
	.rmhn-utils__buy .rmhn-util--locator span { display: inline; }
}

/* ==========================================================================
   HEADER TYPE SCALE + ROUND BUTTONS - Chloe Scally, 28 Sep 2026.
   International Markets / Careers tabs removed (markup). E-Store and Where to
   Buy are now round pills. Type follows Chloe's 2026 scale (28 Sep):
   button label = Univers Bold 15/1, .04em, UPPERCASE; H3 = Univers Bold 19/1.08;
   eyebrow = Univers Bold 13/1.65 .14em UPPERCASE; body = Helvetica Light 17/1.75
   #5A5F66 (white 78% on colour); text link = Univers Bold 14 .05em UPPERCASE red.
   Menu-panel title uses the smaller H2 size (35.2px) as a 43.2px H2 is too big
   for a dropdown. Rollback: delete from this comment to the end of the file
   (backup rmh26-header-white.css.bak-20260928-type) + restore
   template-parts/rmh26-header.php.bak-20260928-type.
   ========================================================================== */
.rmhn { --rmhn-body: 'HelveticaLt', 'Helvetica Neue', Helvetica, Arial, sans-serif; --rmhn-grey: #5a5f66; }

/* button labels */
.rmhn .rmhn-util, .rmhn .rmhn-btn, .rmhn .rmhn-nav__link, .rmhn .rmhn-drawer__link {
	font: 400 15px/1 var(--rmhn-bold) !important; letter-spacing: .04em !important; text-transform: uppercase !important; }

/* menu panels */
.rmhn .rmhn-mega__title { font: 400 35.2px/1.08 var(--rmhn-bold); letter-spacing: 0; color: #16181a; }
.rmhn .rmhn-mega__link-label { font: 400 19px/1.08 var(--rmhn-bold); letter-spacing: 0; color: #16181a; }
.rmhn .rmhn-mega__links a:hover .rmhn-mega__link-label { color: var(--rmhn-red); }
.rmhn .rmhn-mega__strap, .rmhn .rmhn-mega__link-desc { font: 400 17px/1.75 var(--rmhn-body); letter-spacing: 0; color: var(--rmhn-grey); }
.rmhn .rmhn-mega__link-desc { margin-top: 4px; }
.rmhn .rmhn-mega__promo-eyebrow { font: 400 13px/1.65 var(--rmhn-bold); letter-spacing: .14em; text-transform: uppercase; opacity: 1; color: #fff; }
.rmhn .rmhn-mega__promo-title { font: 400 19px/1.08 var(--rmhn-bold); letter-spacing: 0; color: #fff; }
.rmhn .rmhn-mega__promo-text { font: 400 17px/1.75 var(--rmhn-body); color: rgba(255, 255, 255, .78); opacity: 1; }

/* search + drawer body text */
.rmhn .rmhn-search__field, .rmhn .rmhn-qsearch__field { font: 400 17px/1.2 var(--rmhn-body) !important; }
.rmhn .rmhn-drawer__sub a { font: 400 17px/1.75 var(--rmhn-body); color: var(--rmhn-grey) !important; padding-top: 6px; padding-bottom: 6px; }
.rmhn .rmhn-drawer__extra a { font: 400 14px/1.4 var(--rmhn-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--rmhn-red) !important; text-decoration: none !important; }
.rmhn .rmhn-region__langs a { font-family: var(--rmhn-body); }

@media (min-width: 1280px) {
	/* round E-Store + Where to Buy */
	.rmhn .rmhn-util--estore, .rmhn .rmhn-util--locator { clip-path: none; border-radius: 999px !important; height: 44px; padding: 0 22px !important; }
	.rmhn-utils__top { justify-content: flex-end; }
	.rmhn-region { margin-left: 0; }
}

/* STICKY FIX - Chloe, 28 Sep 2026: "can the menu move with the page when you scroll".
   The header already had position: sticky, but .page-wrapper { overflow: hidden } made the
   wrapper a scroll container, so sticky had nothing to stick to. overflow: clip still clips
   sideways overflow but is not a scroll container. Rollback: delete this block
   (backup rmh26-header-white.css.bak-20260928-sticky). */
.page-wrapper:has(> header.rmh26-on) { overflow: clip !important; }

/* ==========================================================================
   FORAN MENU TYPE + SHRINK ON SCROLL - Chloe Scally, 28 Sep 2026.
   1) "shrink completely": on desktop (>= 1280) the header sticks at
      top: -124px (= the white top row, --rmhn-top-h), so the logo / search /
      E-Store / Where to Buy row scrolls away and only the dark menu strip stays
      at the top. Pure CSS (no scroll JS, so no layout jump or jitter). On inner
      pages the old section sub-menu (43px, inside <header>) stays under the strip.
      Below 1280 the 73px phone/tablet bar is unchanged (it is already one row).
   2) Type now matches the staging.foranequine.com menu (measured 28 Sep):
      Montserrat, 14px, weight 500, line-height 21px, no tracking, Title Case;
      region picker 16px/400; mega headings 14px/700 in brand colour, links 14/500.
      Font files copied from the Foran staging theme to ui/fonts/rmh26/.
   Overrides the "HEADER TYPE SCALE" block above (which stays for rollback).
   Rollback: delete from this comment to the end of the file
   (backup rmh26-header-white.css.bak-20260928-foran).
   ========================================================================== */
@font-face { font-family: 'Montserrat'; src: url("../fonts/rmh26/Montserrat-Regular.woff2") format("woff2"), url("../fonts/rmh26/Montserrat-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url("../fonts/rmh26/Montserrat-Medium.woff2") format("woff2"), url("../fonts/rmh26/Montserrat-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url("../fonts/rmh26/Montserrat-Bold.woff2") format("woff2"), url("../fonts/rmh26/Montserrat-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

.rmhn { --rmhn-mont: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }

/* menu links, buttons, drawer links: Foran = Montserrat 500 14px/21px, Title Case */
.rmhn .rmhn-util, .rmhn .rmhn-btn, .rmhn .rmhn-nav__link, .rmhn .rmhn-drawer__link, .rmhn .rmhn-tab {
	font: 500 14px/21px var(--rmhn-mont) !important; letter-spacing: 0 !important; text-transform: none !important; }
.rmhn .rmhn-util, .rmhn .rmhn-btn { line-height: 1 !important; }

/* region picker (Foran "UK / IE" = 16px 400) */
.rmhn .rmhn-region__btn { font: 400 16px/24px var(--rmhn-mont); }
.rmhn .rmhn-region__name { font: 500 14px/21px var(--rmhn-mont); }
.rmhn .rmhn-region__langs a { font: 400 14px/21px var(--rmhn-mont); }

/* search fields */
.rmhn .rmhn-search__field, .rmhn .rmhn-qsearch__field { font: 400 14px/21px var(--rmhn-mont) !important; }

/* mega panels (Foran: heading 14px 700 brand colour, links 14px 500 black) */
.rmhn .rmhn-mega__title { font: 700 14px/21px var(--rmhn-mont); letter-spacing: 0; color: var(--rmhn-red); margin-bottom: 8px !important; }
.rmhn .rmhn-mega__strap { font: 400 14px/21px var(--rmhn-mont); color: var(--rmhn-grey); }
.rmhn .rmhn-mega__link-label { font: 500 14px/21px var(--rmhn-mont); letter-spacing: 0; color: #000; }
.rmhn .rmhn-mega__links a:hover .rmhn-mega__link-label { color: var(--rmhn-red); }
.rmhn .rmhn-mega__link-desc { font: 400 14px/21px var(--rmhn-mont); color: var(--rmhn-grey); margin-top: 2px; }
.rmhn .rmhn-mega__promo-eyebrow { font: 500 14px/21px var(--rmhn-mont); letter-spacing: 0; text-transform: none; }
.rmhn .rmhn-mega__promo-title { font: 700 14px/21px var(--rmhn-mont); }
.rmhn .rmhn-mega__promo-text { font: 400 14px/21px var(--rmhn-mont); }

/* drawer (< 1280) */
.rmhn .rmhn-drawer__sub a { font: 400 14px/21px var(--rmhn-mont); }
.rmhn .rmhn-drawer__extra a { font: 500 14px/21px var(--rmhn-mont); letter-spacing: 0; text-transform: none; }

/* shrink on scroll: only the dark strip stays pinned */
@media (min-width: 1280px) {
	.page-wrapper header.rmh26-on:not(#rmhn-x),
	.page-wrapper header.rmh26-on.header-home:not(#rmhn-x),
	.page-wrapper header.rmh26-on.inner-header:not(#rmhn-x) { top: -124px !important; }
}


/* ==========================================================================
   WHOLE HEADER STICKY - Chloe Scally, 30 Sep 2026: "when I scroll can the
   whole header move with me please". Replaces the 28 Sep "shrink" (top:-124px)
   on desktop (>= 1280): the full header (logo / region / search / E-Store /
   Where to Buy row + dark menu strip) now stays pinned at the top.
   Phone/tablet (< 1280) was already fully sticky and is unchanged.
   Rollback: delete this block (backup rmh26-header-white.css.bak-20260930-fullsticky).
   ========================================================================== */
@media (min-width: 1280px) {
	.page-wrapper header.rmh26-on:not(#rmhn-x),
	.page-wrapper header.rmh26-on.header-home:not(#rmhn-x),
	.page-wrapper header.rmh26-on.inner-header:not(#rmhn-x) { top: 0 !important; }
}

/* ==========================================================================
   PHONE/TABLET ONLINE STORE BUTTON (Chloe, as on Foran): below 1280 a red
   "Online Store" pill replaces the red Where to Buy pin button, which is hidden
   there; Where to Buy stays in the drawer. From 1280 the dark Online Store and
   red Where to Buy buttons show and this one is hidden.
   ========================================================================== */
.rmhn .rmhn-util--shop-m { background: var(--rmhn-red); border-color: var(--rmhn-red); color: #fff !important; padding: 0 20px; justify-content: center; }
.rmhn .rmhn-util--shop-m:hover, .rmhn .rmhn-util--shop-m:focus-visible { background: var(--rmhn-red-dark); border-color: var(--rmhn-red-dark); }
@media (max-width: 1279px) {
	.rmhn .rmhn-utils__buy { display: none !important; }
}
@media (max-width: 560px) {
	.rmhn .rmhn-util--shop-m { padding: 0 14px; font-size: 13px !important; letter-spacing: .03em !important; }
}
@media (min-width: 1280px) {
	.rmhn .rmhn-util--shop-m { display: none !important; }
}

/* ==========================================================================
   DRAWER REGION SELECTOR (Chloe): under the Where to Buy button, right-aligned,
   black text with the globe icon; tapping it opens the country list (same
   data-rmhn-acc accordion as the menu items). Replaces the drawer's Online Store link.
   ========================================================================== */
.rmhn .rmhn-dregion { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-end; }
.rmhn .rmhn-dregion__btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 2px; margin: 0; border: 0 !important; border-radius: 0 !important;
	background: none !important; color: #000 !important; cursor: pointer; font: 500 16px/24px var(--rmhn-mont) !important; letter-spacing: 0 !important; text-transform: none !important; }
.rmhn .rmhn-dregion__btn .rmhn-icon { width: 20px; height: 20px; color: #000; }
.rmhn .rmhn-dregion__btn .rmhn-icon--chevron { width: 14px; height: 14px; opacity: 1; }
.rmhn .rmhn-dregion__btn[aria-expanded="true"] .rmhn-icon--chevron { transform: rotate(180deg); }
.rmhn .rmhn-dregion__list { align-self: stretch; margin: 8px 0 0 !important; padding: 6px 0 !important; list-style: none; border-top: 2px solid var(--rmhn-red); background: #fff;
	box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .35); }
.rmhn .rmhn-dregion__list[hidden] { display: none; }
.rmhn .rmhn-dregion__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 16px; margin: 0; }
.rmhn .rmhn-dregion__name { font: 500 14px/21px var(--rmhn-mont); color: #000; }
.rmhn .rmhn-dregion__row.is-current .rmhn-dregion__name { color: var(--rmhn-red); }
.rmhn .rmhn-dregion__langs { display: flex; gap: 12px; }
.rmhn .rmhn-dregion__langs a { font: 400 14px/21px var(--rmhn-mont); color: var(--rmhn-grey) !important; text-decoration: none !important; }
.rmhn .rmhn-dregion__langs a:hover, .rmhn .rmhn-dregion__langs a:focus-visible { color: var(--rmhn-red) !important; text-decoration: underline !important; }

/* ---- Old homepage carousel under the 2026 header (same rules as rmh26-home.css section 17) ----
   The old header lay over the slider; the 2026 header sits above it. Kept here so the header works on
   its own where rmh26-home.css is not loaded (www.redmillshorse.com). */
@media (min-width: 1280px) {
	body.home .page-wrapper:has(> header.rmh26-on) .home-section:not(.rmh26-hero-host) .home-slider {
		height: calc(100vh - 174px);
	}
	body.home.admin-bar .page-wrapper:has(> header.rmh26-on) .home-section:not(.rmh26-hero-host) .home-slider {
		height: calc(100vh - 206px);
	}
}
@media (max-width: 767px) {
	body.home .page-wrapper:has(> header.rmh26-on) .home-section:not(.rmh26-hero-host) .home-slider .carousel-body {
		padding-top: 48px;
	}
}