/* =====================================================================
   HFT — HEADER · MEGA MENU · SEARCH · MOBILE DRAWER
   Brand Kit V2.1. Tokens come from hft-brand-2026.css — no hex below
   except where a token genuinely doesn't exist.
   =====================================================================

   NAMESPACE: every class is .hftn-* ("HFT nav").
   This is not cosmetic. The site already has .hft-card, .hft-btn,
   .hft-saf-* (the Search and Filter plugin) and a 111k Customizer
   stylesheet. A generic .bar or .search here would collide with one of
   them on some page nobody thought to check. The header owns .hftn-.

   ⚠️ THE BUG THAT COST TWO ROUNDS — DO NOT REINTRODUCE IT
   The header row is <div class="hftn-wrap hftn-bar"> — ONE element with
   BOTH classes. A `padding` declaration on .hftn-bar inside a media query
   OVERWRITES .hftn-wrap's side padding, and the logo and search field go
   flush against the screen edge. If you set padding on .hftn-bar, it must
   carry its own side gutters. See the mobile block at the bottom.

   THE THREE RULES
   1. White text on EVERY button. Sail colours are display only.
   2. Radius encodes function. Pill = tappable. 16px = a surface.
   3. Fredoka headings · Nunito Sans body+UI · Source Serif 4 long-form.
   ===================================================================== */

:root {
	--hftn-bar-h: 70px;
	--hftn-r-pill: 999px;
	--hftn-r-surface: 16px;
	--hftn-sh-lg: 0 30px 70px -28px rgba(18, 48, 90, .45);
	--hftn-sh-sm: 0 4px 14px -8px rgba(31, 42, 68, .35);
}

/* ---------- skip link: visible only when tabbed to ---------- */
.hftn-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--hft-navy);
	color: #fff;
	font-weight: 800;
	border-radius: 0 0 var(--hftn-r-surface) 0;
}
.hftn-skip:focus {
	left: 0;
	top: 0;
}

.hftn-wrap {
	/* Pin the box model so the header is the SAME outer width on EVERY page.
	   Without this, .hftn-wrap inherits whatever reset the page template loads:
	   pages with the global *{box-sizing:border-box} reset (e.g. home) capped at
	   1440 outer, while /resources/ (no reset → default content-box) rendered
	   1480 outer. border-box + max-width 1480 = 1480 outer / 1440 content
	   everywhere, matching the /resources/ look. */
	box-sizing: border-box;
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 20px;
}

/* =====================================================================
   PROMO BAR
   ===================================================================== */
.hftn-promo {
	background: var(--hft-navy-900);
	color: #fff;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 13.5px;
	font-weight: 700;
}
.hftn-promo-in {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 38px;
	text-align: center;
}
.hftn-promo .hftn-dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hft-sail-yellow);
}
.hftn-promo a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hftn-promo-x {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: none;
	border: 0;
	color: #9FB6D6;
	cursor: pointer;
}
.hftn-promo-x:hover { color: #fff; }

/* =====================================================================
   HEADER BAR
   ===================================================================== */
.hftn-hdr {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--hft-line);
	transition: box-shadow .2s;
}
.hftn-hdr.is-stuck {
	box-shadow: 0 10px 30px -22px rgba(18, 48, 90, .6);
}
/* the WP admin bar is position:fixed — don't let the header hide under it */
.admin-bar .hftn-hdr { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .hftn-hdr { top: 46px; }
}

.hftn-bar {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: var(--hftn-bar-h);
}

.hftn-logo { flex: none; display: flex; align-items: center; }
.hftn-logo img,
.hftn-logo .custom-logo {
	height: 38px;
	width: auto;
	max-width: none;
	display: block;
}
.hftn-logo-text {
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 20px;
	color: var(--hft-navy);
	text-decoration: none;
}

/* =====================================================================
   PRIMARY NAV
   ===================================================================== */
.hftn-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
}
.hftn-item { position: relative; }

.hftn-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	background: none;
	border: 0;
	border-radius: var(--hftn-r-pill);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 500;
	font-size: 15.5px;
	line-height: 1.2;
	color: var(--hft-navy);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.hftn-link:hover { background: var(--hft-cream); }
.hftn-item.is-open > .hftn-link {
	background: var(--hft-cream);
	color: var(--hft-navy-900);
}
.hftn-caret {
	width: 10px;
	height: 10px;
	opacity: .65;
	transition: transform .18s;
}
.hftn-item.is-open .hftn-caret { transform: rotate(180deg); }

/* Free is a nav item, not a footnote. It's the top of the funnel. */
.hftn-link--free {
	color: var(--hft-green-deep);
	font-weight: 600;
}
.hftn-link--free::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hft-sail-green);
}

/* =====================================================================
   MEGA MENU
   ===================================================================== */
.hftn-mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: min(1080px, calc(100vw - 40px));
	padding: 26px;
	background: #fff;
	border: 1px solid var(--hft-cream-200);
	border-radius: 20px;
	box-shadow: var(--hftn-sh-lg);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .16s, transform .16s;
	z-index: 70;
}
.hftn-mega[hidden] { display: none; }
.hftn-item.is-open .hftn-mega {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* don't let a right-hand panel run off the screen */
.hftn-item:nth-child(n+3) .hftn-mega { left: auto; right: 0; }

.hftn-mega-grid {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.hftn-mega[data-cols="2"] .hftn-mega-grid { grid-template-columns: 1fr 300px; }
.hftn-mega[data-cols="3"] .hftn-mega-grid { grid-template-columns: 1fr 1fr 300px; }
.hftn-mega[data-cols="4"] .hftn-mega-grid { grid-template-columns: 1fr 1fr 1fr 300px; }

.hftn-colhead {
	margin: 0 0 12px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hft-muted);
}
.hftn-colhead a { color: inherit; text-decoration: none; }
.hftn-colhead a:hover { color: var(--hft-navy); }

.hftn-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
/* a plain 2-level menu produces one long list — flow it into columns
   instead of a 40-item stack nobody will read */
.hftn-col--flow .hftn-list {
	display: block;
	columns: 2;
	column-gap: 18px;
}
.hftn-col--flow .hftn-list li { break-inside: avoid; }

.hftn-mlink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--hft-navy);
	text-decoration: none;
	transition: background .13s, color .13s;
}
.hftn-mlink:hover {
	background: var(--hft-cream);
	color: var(--hft-navy-900);
}
/* the format dot — same hue the product card paints with --fmt */
.hftn-sw {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

/* grade chips — big enough for a thumb, because they get used on mobile too */
.hftn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.hftn-chip {
	display: grid;
	place-items: center;
	min-width: 52px;
	height: 44px;
	padding: 0 12px;
	background: var(--hft-cream);
	border: 1.5px solid var(--hft-cream-200);
	border-radius: 12px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 15px;
	color: var(--hft-navy);
	text-decoration: none;
	transition: background .14s, border-color .14s, color .14s;
}
.hftn-chip:hover {
	background: var(--hft-navy);
	border-color: var(--hft-navy);
	color: #fff;
}

/* the selling column */
.hftn-feature {
	background: var(--hft-cream);
	border-radius: var(--hftn-r-surface);
	padding: 16px;
	display: flex;
}
.hftn-offer {
	background: var(--hft-navy);
	color: #fff;
	border-radius: 14px;
	padding: 16px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hftn-offer b {
	display: block;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 16.5px;
}
.hftn-offer p {
	margin: 4px 0 11px;
	font-size: 12.5px;
	color: #C9D6E8;
}
.hftn-offer .hftn-btn { width: 100%; }
.hftn-proof {
	display: block;
	margin-top: 8px;
	text-align: center;
	font-size: 11.5px;
	color: #9FB6D6;
}

/* =====================================================================
   SEARCH — the widest slot in the header, on purpose
   ===================================================================== */
.hftn-search {
	flex: 1;
	min-width: 300px;
	max-width: 620px;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 6px 0 16px;
	background: var(--hft-cream);
	border: 1.5px solid var(--hft-cream-200);
	border-radius: var(--hftn-r-pill);
	transition: border-color .16s, background .16s;
}
.hftn-search:focus-within {
	background: #fff;
	border-color: var(--hft-blue);
	box-shadow: 0 0 0 3px rgba(7, 88, 161, .12);
}
.hftn-search > svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--hft-navy);
}
.hftn-search-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	background: none;
	border: 0;
	outline: none;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--hft-ink);
	/* 16px on mobile below — anything smaller and iOS zooms the page on focus */
}
.hftn-search-input::placeholder {
	color: var(--hft-slate);
	font-weight: 600;
}
.hftn-search-go {
	flex: none;
	height: 36px;
	padding: 0 18px;
	background: var(--hft-navy);
	color: #fff;
	border: 0;
	border-radius: var(--hftn-r-pill);
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s;
}
.hftn-search-go:hover { background: var(--hft-navy-900); }

/* =====================================================================
   SAF SEARCH MODE — the plugin's own box, wearing the header's clothes
   =====================================================================

   When hft_search_mode() is 'saf', the header renders SAF's `[hft_search_bar]`
   shortcode instead of its own field. That box is the exact component that
   lives in the Elementor header today, so it brings SAF's live type-ahead
   (`.hft-saf-suggest`) with it — and the theme still writes zero search logic.

   SAF's markup, verified live:
       div.hft-saf-bar > form.hft-saf-search
           > input.hft-saf-input[name=q]
           > button.hft-saf-submit (svg)
           > div.hft-saf-suggest        ← the suggestions dropdown

   WE DO NOT TOUCH ITS BEHAVIOUR — and as of SAF v2.1 we no longer paint it
   either. The plugin now renders its OWN bar (cream pill, left navy magnifier,
   blue focus) and its own suggest dropdown. The theme only provides the header
   SLOT below (.hftn-search--saf position/width). If SAF changes its markup,
   the box degrades to "plain in its slot" — never to "search is broken".
   ===================================================================== */
.hftn-search--saf {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 260px;
	max-width: 620px;
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
}
.hftn-search--saf .hft-saf-bar { width: 100%; }

/* SAF v2.1 paints its own bar (cream pill, left navy magnifier, blue focus)
   and its own .hft-saf-suggest dropdown. The theme's former force-paint of
   .hft-saf-search / .hft-saf-input / .hft-saf-submit / .hft-saf-suggest was
   removed here so the plugin's native styling wins. Only the header SLOT
   (.hftn-search--saf wrapper, above) remains. */

/* in the drawer the slot spans the panel */
.hftn-search--saf.hftn-search--drawer {
	min-width: 0;
	max-width: none;
	width: 100%;
}

/* =====================================================================
   ACTIONS
   ===================================================================== */
.hftn-actions {
	flex: none;
	display: flex;
	align-items: center;
	/* 18px matches the header's logo/nav/search rhythm so the gap to the RIGHT
	   of the search bar (bar gap) equals the heart→cart gap — one even cadence. */
	gap: 18px;
}
.hftn-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--hftn-r-pill);
	color: var(--hft-navy);
	transition: background .15s;
}
.hftn-icon:hover { background: var(--hft-cream); }
.hftn-icon svg { width: 22px; height: 22px; }

.hftn-count {
	/* border-box so the 2px white ring + padding don't inflate it past a circle.
	   A single digit renders as a perfect 18px circle; 2+ digits grow to a neat
	   pill (2026-07-15: was 30x22 content-box = oval-ish and too big). */
	box-sizing: border-box;
	position: absolute;
	top: 2px;
	right: 1px;
	display: grid;
	place-items: center;
	min-width: 18px;
	width: auto;
	height: 18px;
	padding: 0 3px;
	background: var(--hft-cta);
	color: #fff;
	border: 2px solid #fff;
	border-radius: var(--hftn-r-pill);
	font-size: 10.5px;
	font-weight: 900;
	line-height: 1;
}
.hftn-count[hidden] { display: none; }

.hftn-signin {
	padding: 10px 12px;
	border-radius: var(--hftn-r-pill);
	font-weight: 800;
	font-size: 14.5px;
	color: var(--hft-navy);
	text-decoration: none;
}
.hftn-signin:hover { background: var(--hft-cream); }

/* ---------- buttons: white text, always ---------- */
.hftn-btn {
	/* box-sizing MUST be border-box: min-height:44px + padding:11px is meant to
	   TOTAL 44px. Without this the site's default content-box makes it
	   44 + 22 = 66px tall — the "huge My Library / Start free" bug (2026-07-15). */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 22px;
	border: 0;
	border-radius: var(--hftn-r-pill);
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 15px;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	color: #fff;
	-webkit-text-fill-color: #fff; /* a global rule elsewhere on the site fights this — see button-text-fix */
	transition: background .18s, box-shadow .18s, transform .14s cubic-bezier(.2, .8, .3, 1);
}
/* PINK IS THE SALE. One pink button, ever. */
.hftn-btn--cta {
	background: var(--hft-cta);
	box-shadow: 0 12px 26px -14px rgba(214, 51, 123, .75);
}
.hftn-btn--cta:hover,
.hftn-btn--cta:focus {
	background: var(--hft-cta-hover);
	color: #fff;
}
/* She already bought. Her button points at her library, not at the checkout. */
.hftn-btn--lib {
	background: var(--hft-navy);
	box-shadow: 0 12px 26px -16px rgba(27, 67, 125, .8);
}
.hftn-btn--lib:hover,
.hftn-btn--lib:focus {
	background: var(--hft-navy-900);
	color: #fff;
}
/* hover never moves a button — the CLICK does */
.hftn-btn:active,
.hftn-chip:active,
.hftn-icon:active,
.hftn-link:active {
	transform: scale(.97);
	transition-duration: .09s;
}

/* ---------- account menu ---------- */
.hftn-acct { position: relative; flex: none; }
.hftn-acct-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px 5px 5px;
	background: none;
	border: 0;
	border-radius: var(--hftn-r-pill);
	cursor: pointer;
	transition: background .15s;
}
.hftn-acct-btn:hover,
.hftn-acct.is-open .hftn-acct-btn { background: var(--hft-cream); }
.hftn-av {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hft-navy);
	color: #fff;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 15px;
}
.hftn-acct-name {
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 800;
	font-size: 14.5px;
	color: var(--hft-navy);
}
.hftn-acct .hftn-caret { color: var(--hft-navy); }
.hftn-acct.is-open .hftn-caret { transform: rotate(180deg); }

.hftn-acct-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 270px;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--hft-cream-200);
	border-radius: var(--hftn-r-surface);
	box-shadow: var(--hftn-sh-lg);
	z-index: 80;
}
.hftn-acct-menu[hidden] { display: none; }
.hftn-acct-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--hft-navy);
	text-decoration: none;
}
.hftn-acct-menu a:hover { background: var(--hft-cream); }
.hftn-acct-sep {
	display: block;
	height: 1px;
	margin: 6px 4px;
	background: var(--hft-cream-200);
}
.hftn-acct-out { color: var(--hft-slate) !important; }

/* ---------- burger ---------- */
.hftn-burger {
	display: none;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	border-radius: var(--hftn-r-pill);
	color: var(--hft-navy);
	cursor: pointer;
}
.hftn-burger:hover { background: var(--hft-cream); }
.hftn-burger i {
	display: block;
	width: 20px;
	height: 2px;
	margin: 4px auto;
	background: currentColor;
	border-radius: 2px;
}

/* =====================================================================
   MOBILE DRAWER
   ===================================================================== */
.hftn-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(18, 48, 90, .55);
	backdrop-filter: blur(3px);
}
.hftn-scrim[hidden] { display: none; }

.hftn-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 95;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: #fff;
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.hftn-drawer[hidden] { display: none; }
.hftn-drawer.is-open { transform: none; }

.hftn-dhead {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--hft-line);
}
.hftn-dclose {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	border-radius: var(--hftn-r-pill);
	color: var(--hft-navy);
	font-size: 20px;
	cursor: pointer;
}
.hftn-dclose:hover { background: var(--hft-cream); }

/* the drawer's search is the SAME component as the header's — one field, one
   set of rules. This is just the slot it sits in. */
.hftn-dsearch {
	flex: none;
	padding: 14px 16px;
	border-bottom: 1px solid var(--hft-line);
}
.hftn-search--drawer {
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 48px;
}
.hftn-search--drawer .hftn-search-input {
	font-size: 16px; /* never below 16 — iOS zooms the page on focus */
}

.hftn-dbody {
	flex: 1;
	overflow-y: auto;
	padding: 6px 0 20px;
	-webkit-overflow-scrolling: touch;
}

.hftn-acc { border-bottom: 1px solid var(--hft-line); }
.hftn-acc-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	background: none;
	border: 0;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 18px;
	color: var(--hft-navy);
	text-align: left;
	cursor: pointer;
}
.hftn-acc-btn .hftn-caret { width: 12px; height: 12px; }
.hftn-acc.is-open .hftn-caret { transform: rotate(180deg); }
.hftn-acc-panel { padding: 2px 18px 18px; }
.hftn-acc-panel[hidden] { display: none; }
.hftn-acc-head {
	margin: 12px 0 8px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hft-muted);
}
.hftn-acc-panel .hftn-mlink { min-height: 44px; }

.hftn-dlink {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 18px;
	border-bottom: 1px solid var(--hft-line);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 18px;
	color: var(--hft-navy);
	text-decoration: none;
}
.hftn-d-free { color: var(--hft-green-deep); }
.hftn-d-free::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hft-sail-green);
}

.hftn-dfoot {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--hft-line);
	background: var(--hft-cream-50);
}
.hftn-dfoot .hftn-btn { width: 100%; }
.hftn-dsec {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-weight: 800;
	font-size: 14.5px;
	color: var(--hft-navy);
	text-decoration: none;
}
.hftn-trust {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--hft-muted);
}

/* =====================================================================
   STICKY MOBILE CTA — the thumb zone
   ===================================================================== */
.hftn-mobar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 55;
	gap: 10px;
	align-items: center;
	padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--hft-line);
	box-shadow: 0 -12px 30px -24px rgba(18, 48, 90, .7);
}
.hftn-mobar .hftn-btn { flex: 1; }

/* =====================================================================
   FOCUS — visible, always. She may be on a keyboard; she may be on a
   screen reader; either way she must be able to see where she is.
   ===================================================================== */
.hftn-hdr :focus-visible,
.hftn-drawer :focus-visible,
.hftn-mobar :focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--hft-blue);
	border-radius: 8px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* narrow desktop: the search field must not be crushed to a stub.
   She came to search — the nav yields room, not the search box. */
@media (max-width: 1400px) {
	.hftn-bar { gap: 12px; }
	.hftn-link { padding: 10px 10px; font-size: 15px; }
	.hftn-search { min-width: 260px; }
}
@media (max-width: 1280px) {
	.hftn-link { padding: 9px 8px; font-size: 14.5px; }
	.hftn-search-go { padding: 0 14px; }
	.hftn-mega { width: min(880px, calc(100vw - 32px)); }
}

/* TABLET — nav collapses into the drawer, search stays visible.
   Collapsing at 1120 (not 1024): between those widths the four nav items and
   the search field fight, and the search field always loses. */
@media (max-width: 1120px) {
	.hftn-bar { gap: 12px; }
	.hftn-nav,
	.hftn-signin { display: none; }
	.hftn-burger { display: block; }
	.hftn-search { min-width: 200px; }
	.hftn-acct-name { display: none; }
}

/* MOBILE */
@media (max-width: 720px) {
	:root { --hftn-bar-h: 62px; }

	/* ⚠️ .hftn-bar IS .hftn-wrap — the SAME element. This padding REPLACES
	   .hftn-wrap's, so it must carry the side gutters itself, or the logo and
	   the search field end up flush against the screen edge. */
	.hftn-bar {
		flex-wrap: wrap;
		gap: 8px;
		min-height: 0;
		padding: 10px 20px 12px;
	}

	/* SCOPED TO .hftn-bar ON PURPOSE.
	   These `order` values are what put the logo and the actions on row one and
	   the search field on row two. Unscoped, they also hit the DRAWER's logo —
	   which has no `order` on its close button, so the ✕ sorted itself to the
	   LEFT of the logo. Seen in preview, 2026-07-14. Keep the .hftn-bar prefix. */
	.hftn-bar .hftn-logo { order: 1; flex: 1 1 auto; min-width: 0; }
	.hftn-bar .hftn-actions { order: 2; margin-left: auto; flex: none; gap: 2px; }
	.hftn-logo img,
	.hftn-logo .custom-logo { height: 32px; }
	/* her name is not worth a row of the header on a phone */
	.hftn-acct-name { display: none; }

	/* She came here to search. On a phone the field is a REAL field, full
	   width, on its own row — never a magnifying glass she has to hunt for. */
	.hftn-bar .hftn-search {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 48px;
	}
	.hftn-search-input { font-size: 16px; } /* below 16 and iOS zooms on focus */
	.hftn-search-go { padding: 0 14px; }

	/* SAF mode: same row, same full width (slot only — plugin paints the bar) */
	.hftn-bar .hftn-search--saf {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	/* the header CTA moves to the thumb zone */
	.hftn-hdr-cta { display: none; }
	.hftn-icon--fav { display: none; }
	.hftn-mobar { display: flex; }

	/* Full-width dropdown pinned under the header. JS (hft-header.js) sets the
	   exact `top` from the profile button's live position on open + scroll; this
	   var is only a pre-JS fallback so it never lands mid-screen (the old
	   `top:auto` on a position:fixed box resolved to its scrolled static
	   position, dropping it into the middle of the page). */
	.hftn-acct-menu {
		position: fixed;
		top: var(--hftn-bar-h);
		left: 10px;
		right: 10px;
		width: auto;
	}

	/* the sticky bar must not cover the last thing on the page */
	body { padding-bottom: 72px; }

	.hftn-promo { font-size: 12.5px; }
	.hftn-promo-in { padding-right: 40px; }
}

@media (max-width: 380px) {
	.hftn-search-go {
		/* on the smallest phones the word "Search" costs more than it earns —
		   the magnifier and the keyboard's own Go key are enough */
		padding: 0 10px;
		font-size: 0;
		width: 36px;
	}
	.hftn-search-go::after {
		content: "\2192";
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hftn-drawer,
	.hftn-mega,
	.hftn-btn,
	.hftn-chip { transition: none !important; }
	.hftn-btn:active { transform: none; filter: brightness(.92); }
}

/* =====================================================================
   ARMOR — the header defends itself
   =====================================================================

   THIS SITE PAINTS EVERY <button> PINK.

   Elementor's global kit stylesheet styles bare `button` and `[type=submit]`
   elements, and a global rule forces `-webkit-text-fill-color:#fff` on
   buttons. Both load AFTER the theme. The result, seen in preview on
   2026-07-14: the nav triggers and the search button rendered as big pink
   pills, because they are <button> elements and the site does not ask
   whose they are.

   So the header states its own case explicitly. The `:not(#no-such-id)`
   trick adds an ID's worth of specificity without matching anything — it
   beats the global rules on specificity, and !important where it can't.

   Every declaration below exists because something on this site fought it.
   Do not "clean these up" without re-checking the header in preview.
   ===================================================================== */

/* nav triggers are TEXT, not buttons. They are never pink. */
.hftn-hdr .hftn-link:not(#no-such-id) {
	background: transparent;
	color: var(--hft-navy);
	-webkit-text-fill-color: currentColor;
	border: 0;
	box-shadow: none;
	min-height: 0;
	border-radius: var(--hftn-r-pill);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif) !important;
	font-weight: 500;
}
.hftn-hdr .hftn-link:not(#no-such-id):hover,
.hftn-hdr .hftn-item.is-open > .hftn-link:not(#no-such-id) {
	background: var(--hft-cream);
	color: var(--hft-navy-900);
}
.hftn-hdr .hftn-link--free:not(#no-such-id) {
	color: var(--hft-green-deep);
	font-weight: 600;
}

/* The search FIELD.
   Measured live, 2026-07-14: the site's global input styles were putting a
   `1px solid #666` border and `8px 16px` of padding INSIDE our pill, and the
   global button padding (`15px 34px`) blew the submit button up to 131px —
   between them they squeezed the actual typing area down to 105px. She'd have
   been searching 25,000 resources through a letterbox. */
.hftn-hdr .hftn-search-input:not(#no-such-id),
.hftn-drawer .hftn-dsearch input:not(#no-such-id) {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
	color: var(--hft-ink);
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif) !important;
	font-weight: 600;
}

/* the search submit is navy — pink is reserved for the sale */
.hftn-hdr .hftn-search-go:not(#no-such-id) {
	flex: none;
	width: auto;
	height: 36px;
	min-height: 36px;
	padding: 0 18px;
	background: var(--hft-navy);
	color: #fff;
	-webkit-text-fill-color: #fff;
	box-shadow: none;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif) !important;
	font-size: 14px;
}
.hftn-hdr .hftn-search-go:not(#no-such-id):hover {
	background: var(--hft-navy-900);
}

/* icons, burger, close, accordion triggers: transparent, never pills.
   The size reset matters as much as the colour: the site's global button rule
   applies `padding: 15px 34px`, which quietly inflated the burger to 68px and
   the avatar button to 120px. At 320px wide that overflowed the row, and the
   logo, the actions and the search field each wrapped onto a line of their own.
   Measured in preview, 2026-07-14. */
.hftn-hdr .hftn-icon:not(#no-such-id),
.hftn-hdr .hftn-burger:not(#no-such-id),
.hftn-hdr .hftn-acct-btn:not(#no-such-id),
.hftn-hdr .hftn-signin:not(#no-such-id),
.hftn-promo .hftn-promo-x:not(#no-such-id),
.hftn-drawer .hftn-dclose:not(#no-such-id),
.hftn-drawer .hftn-acc-btn:not(#no-such-id) {
	background: transparent;
	box-shadow: none;
	border: 0;
	-webkit-text-fill-color: currentColor;
}
.hftn-hdr .hftn-icon:not(#no-such-id),
.hftn-hdr .hftn-burger:not(#no-such-id) {
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	flex: none;
}
.hftn-hdr .hftn-acct-btn:not(#no-such-id) {
	min-height: 0;
	padding: 4px 8px 4px 4px;
	gap: 6px;
	/* WS13: name/chevron text was inheriting default black → brand navy. */
	color: var(--hft-navy, #1B437D);
	-webkit-text-fill-color: var(--hft-navy, #1B437D);
	/* Full pill so the hover fill matches the other menu buttons (e.g. Resources)
	   — the site's global button rule forces a 30px rounded-rectangle otherwise.
	   Pill ends stay semicircular as the width changes with the first name. */
	border-radius: var(--hftn-r-pill);
}
.hftn-hdr .hftn-signin:not(#no-such-id) {
	min-height: 0;
	padding: 10px 12px;
}
.hftn-drawer .hftn-dclose:not(#no-such-id) {
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
}
.hftn-hdr .hftn-icon:not(#no-such-id):hover,
.hftn-hdr .hftn-burger:not(#no-such-id):hover,
.hftn-hdr .hftn-signin:not(#no-such-id):hover,
.hftn-hdr .hftn-acct-btn:not(#no-such-id):hover {
	background: var(--hft-cream);
}
.hftn-drawer .hftn-acc-btn:not(#no-such-id) {
	border-radius: 0;
	justify-content: space-between;
}

/* the count bubble is a tag, not a button */
.hftn-hdr .hftn-count:not(#no-such-id) {
	box-sizing: border-box;
	min-width: 18px;
	height: 18px;
	min-height: 0;
	padding: 0 3px;
	background: var(--hft-cta);
	color: #fff;
	-webkit-text-fill-color: #fff;
	border-radius: var(--hftn-r-pill);
}

/* the two real buttons keep their colour AND their size no matter what loads
   after us — border-box + explicit padding/min-height defeat the global button
   rule that otherwise inflates them (2026-07-15). */
.hftn-btn--cta:not(#no-such-id),
.hftn-btn--lib:not(#no-such-id) {
	box-sizing: border-box;
	min-height: 44px;
	height: auto;
	padding: 11px 22px;
	font-size: 15px;
	line-height: 1.1;
}
.hftn-btn--cta:not(#no-such-id) {
	background: var(--hft-cta);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hftn-btn--cta:not(#no-such-id):hover {
	background: var(--hft-cta-hover);
}
.hftn-btn--lib:not(#no-such-id) {
	background: var(--hft-navy);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hftn-btn--lib:not(#no-such-id):hover {
	background: var(--hft-navy-900);
}

/* =====================================================================
   THE LINK-COLOUR TRAP — and why every selector below carries :not(#…)
   =====================================================================

   Two things happen in sequence on this site, and you have to beat the
   FIRST one to escape the second:

   1. Elementor's kit sets `.elementor-kit-38 a { color: <retired sage> }`.
      That selector is class + element — it BEATS a plain `.hftn-mlink`.
      So every link in the header computed as sage.

   2. Code Snippet 162 ("A11y contrast AA") then walks `body *`, sees the
      computed sage in its colour map, and rewrites it to green as an
      INLINE style with !important. Inline !important outranks every
      stylesheet. At that point no CSS can save you — not at any
      specificity, not with !important.

   The escape is step 1, not step 2: if the link never computes as sage,
   it is not in snippet 162's map, and snippet 162 leaves it alone. Navy
   is not in the map. So the header simply has to WIN the cascade against
   the kit — which `:not(#no-such-id)` does, by adding an ID's worth of
   specificity while matching nothing.

   Observed live in preview, 2026-07-14: all 72 mega-menu links were being
   repainted green. Do not remove these rules.
   ===================================================================== */
.hftn-hdr .hftn-mlink:not(#no-such-id),
.hftn-drawer .hftn-mlink:not(#no-such-id) {
	color: var(--hft-navy);
	-webkit-text-fill-color: var(--hft-navy);
	box-shadow: none;
}
.hftn-hdr .hftn-mlink:not(#no-such-id):hover,
.hftn-drawer .hftn-mlink:not(#no-such-id):hover {
	color: var(--hft-navy-900);
	-webkit-text-fill-color: var(--hft-navy-900);
	background: var(--hft-cream);
}

.hftn-hdr .hftn-chip:not(#no-such-id),
.hftn-drawer .hftn-chip:not(#no-such-id) {
	color: var(--hft-navy);
	-webkit-text-fill-color: var(--hft-navy);
	box-shadow: none;
}
.hftn-hdr .hftn-chip:not(#no-such-id):hover,
.hftn-drawer .hftn-chip:not(#no-such-id):hover {
	background: var(--hft-navy);
	border-color: var(--hft-navy);
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.hftn-hdr .hftn-colhead a:not(#no-such-id),
.hftn-drawer .hftn-acc-head:not(#no-such-id) {
	color: var(--hft-muted);
	-webkit-text-fill-color: var(--hft-muted);
}
.hftn-hdr .hftn-colhead a:not(#no-such-id):hover {
	color: var(--hft-navy);
	-webkit-text-fill-color: var(--hft-navy);
}

.hftn-hdr .hftn-acct-menu a:not(#no-such-id),
.hftn-drawer .hftn-dlink:not(#no-such-id),
.hftn-hdr .hftn-signin:not(#no-such-id) {
	color: var(--hft-navy);
	-webkit-text-fill-color: var(--hft-navy);
}
.hftn-drawer .hftn-d-free:not(#no-such-id) {
	color: var(--hft-green-deep);
	-webkit-text-fill-color: var(--hft-green-deep);
}
.hftn-promo a:not(#no-such-id) {
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hftn-hdr .hftn-logo a:not(#no-such-id),
.hftn-drawer .hftn-logo a:not(#no-such-id) {
	color: var(--hft-navy);
	-webkit-text-fill-color: var(--hft-navy);
}

/* ---------------------------------------------------------------------
   WHITE TEXT ON WHITE — the drawer's turn.

   The site's global button rule also sets `color: #fff`. Every <button> in
   the drawer inherited it, so the accordion triggers ("Free Resources",
   "Grade Levels", …) and the close ✕ rendered as WHITE TEXT ON A WHITE
   PANEL. The drawer opened to a blank sheet. Seen in preview, 2026-07-14.

   `-webkit-text-fill-color: currentColor` was not enough — currentColor
   WAS the white. Each of these has to name its own colour out loud.
   ------------------------------------------------------------------- */
.hftn-drawer .hftn-acc-btn:not(#no-such-id),
.hftn-drawer .hftn-acc-btn:not(#no-such-id) span,
.hftn-drawer .hftn-dclose:not(#no-such-id),
.hftn-drawer .hftn-dsec:not(#no-such-id),
.hftn-hdr .hftn-acct-name:not(#no-such-id) {
	color: var(--hft-navy);
	-webkit-text-fill-color: var(--hft-navy);
}
.hftn-drawer .hftn-trust:not(#no-such-id) {
	color: var(--hft-slate);
	-webkit-text-fill-color: var(--hft-slate);
}
.hftn-hdr .hftn-av:not(#no-such-id) {
	background: var(--hft-navy);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hftn-hdr .hftn-icon:not(#no-such-id) {
	color: var(--hft-navy);
	-webkit-text-fill-color: var(--hft-navy);
}
.hftn-hdr .hftn-burger:not(#no-such-id) {
	color: var(--hft-navy);
}
.hftn-hdr .hftn-burger:not(#no-such-id) i {
	background: var(--hft-navy);
}

/* Elementor's kit sets a global button min-height/padding — the header's
   own sizing wins inside the header only. */
.hftn-hdr button:not(#no-such-id),
.hftn-drawer button:not(#no-such-id) {
	text-transform: none;
	letter-spacing: normal;
}

/* =====================================================================
   MEGA MENU — polish to match hft-nav-2026.html
   =====================================================================
   The live menu splits the mockup's one "Resources" mega into four
   top-level items (Free / Grade / Subject / Type). Each dropdown is one
   column of the mockup's panel + the selling card. These rules make each
   panel read like the mockup rather than a bare list.
   ===================================================================== */

/* size the panel to its content instead of a fixed 1080px slab */
.hftn-mega[data-cols="1"] { width: min(520px, calc(100vw - 40px)); }
.hftn-mega[data-cols="2"] { width: min(760px, calc(100vw - 40px)); }
.hftn-mega[data-cols="3"] { width: min(940px, calc(100vw - 40px)); }
.hftn-mega[data-cols="4"] { width: min(1080px, calc(100vw - 40px)); }

/* "Browse all resources →" — the mockup's .mall affordance */
.hftn-mall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 6px 10px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 13.5px;
	color: var(--hft-cta);
	-webkit-text-fill-color: var(--hft-cta);
	text-decoration: none;
	border-radius: 8px;
}
.hftn-mall:hover {
	background: var(--hft-cream);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* the selling card — member variant points at the account, not a checkout */
.hftn-offer--member { background: var(--hft-navy); }
.hftn-offer--member .hftn-btn--lib { width: 100%; }

/* =====================================================================
   HFT SEARCH & FILTER — type-ahead dropdown
   =====================================================================
   REMOVED in SAF v2.1: the theme's .hft-saf-suggest / .hft-suggest-* paint
   (labels, term rows + magnifier, product rows, thumb, "see all" footer).
   The plugin styles its own suggest dropdown natively now, so these theme
   overrides were retired to let the plugin's styling win.
   ===================================================================== */

/* the logo image sits at a fixed height, ratio preserved */
.hftn-logo-link { display: inline-flex; align-items: center; }
.hftn-logo-img { height: 38px; width: auto; display: block; }
@media (max-width: 720px) {
	.hftn-logo-img { height: 30px; }
}

/* =====================================================================
   EXACT MOCKUP MEGA — Resources (4-col) + Membership (2-col)
   Reproduces hft-nav-2026.html: emoji + counts, format dots, the
   "Free this week" card over the offer card.
   ===================================================================== */

/* panel widths to fit the mockup's columns */
.hftn-mega[data-cols="4"]{ width:min(1120px, calc(100vw - 40px)); }
.hftn-mega--membership{ width:min(720px, calc(100vw - 40px)); }
.hftn-mega-grid--resources{ grid-template-columns:1.05fr 1.05fr 1fr 300px; }
.hftn-mega-grid--membership{ grid-template-columns:1fr 300px; }

/* a second heading in the same column (Popular right now / What you get) */
.hftn-colhead--mt{ margin-top:20px; }

/* emoji + count inside a mega row */
.hftn-mlink .hftn-em{
	flex:none;
	width:20px;
	text-align:center;
	font-size:16px;
	line-height:1;
}
.hftn-mlink .hftn-mtext{ min-width:0; }
.hftn-mlink .hftn-n{
	margin-left:auto;
	padding-left:10px;
	flex:none;
	font-size:12px;
	font-weight:800;
	color:var(--hft-muted);
	-webkit-text-fill-color:var(--hft-muted);
}

/* the featured column: two stacked cards on a cream tray */
.hftn-mega .hftn-feature{
	flex-direction:column;
	gap:14px;
	padding:16px;
}

/* "Free this week" card — green-bordered, like the mockup .fcard */
.hftn-fcard{
	display:block;
	background:#fff;
	border:2px solid var(--hft-green-deep);
	border-radius:14px;
	overflow:hidden;
	box-shadow:var(--hftn-sh-sm);
	text-decoration:none;
}
.hftn-fcard-band{
	display:flex;
	justify-content:space-between;
	gap:8px;
	padding:6px 12px;
	background:var(--hft-green-deep);
	color:#fff;
	-webkit-text-fill-color:#fff;
	font-family:var(--hft-font-body,'Nunito Sans',sans-serif);
	font-weight:900;
	font-size:10.5px;
	letter-spacing:.1em;
	text-transform:uppercase;
}
.hftn-fcard-thumb{
	display:block;
	height:96px;
	background:
		repeating-linear-gradient(180deg,#fff 0 16px,#F1F5FA 16px 17px),
		linear-gradient(120deg,#EFF4FB,#fff);
}
.hftn-fcard-b{ display:block; padding:12px 14px; }
.hftn-fcard-title{
	display:block;
	font-family:var(--hft-font-serif,'Source Serif 4',Georgia,serif);
	font-weight:600;
	font-size:15px;
	line-height:1.25;
	color:var(--hft-navy);
	-webkit-text-fill-color:var(--hft-navy);
}
.hftn-fcard-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:8px;
}
.hftn-fcard-price{
	font-weight:900;
	font-size:15px;
	color:var(--hft-green-deep);
	-webkit-text-fill-color:var(--hft-green-deep);
}
.hftn-fcard-go{
	font-weight:800;
	font-size:13px;
	color:var(--hft-cta);
	-webkit-text-fill-color:var(--hft-cta);
}

/* the offer card copy sizing to match the mockup .mcta */
.hftn-offer b{ font-size:16.5px; }
.hftn-offer p{ font-size:12.5px; }

/* at the narrower desktop widths, drop the featured column first (mockup) */
@media (max-width:1180px){
	.hftn-mega[data-cols="4"]{ width:min(860px, calc(100vw - 32px)); }
	.hftn-mega-grid--resources{ grid-template-columns:1.1fr 1.1fr 1fr; }
	.hftn-mega-grid--resources .hftn-feature{ display:none; }
}

/* =====================================================================
   PROMO BAR ✕ — keep it inside the promo bar
   =====================================================================
   The dismiss ✕ is a <button>, so the site's global button rule inflated it
   (padding 15px 34px, min-height 44px) — it grew wider than a glyph and TALLER
   than the 38px promo bar, so it spilled down into the header ("off section").
   Pin it to a tidy 34×34 puck, centred, snug in the corner. :not(#no-such-id)
   + !important to beat the global button rule. */
.hftn-promo .hftn-promo-x:not(#no-such-id){
	position:absolute!important;
	top:50%!important;
	right:12px!important;
	transform:translateY(-50%)!important;
	width:32px!important;
	height:32px!important;
	min-height:0!important;
	padding:0!important;
	display:grid!important;
	place-items:center!important;
	border:0!important;
	border-radius:999px!important;
	background:transparent!important;
	box-shadow:none!important;
	font-size:15px!important;
	line-height:1!important;
	color:#9FB6D6!important;
	-webkit-text-fill-color:#9FB6D6!important;
}
.hftn-promo .hftn-promo-x:not(#no-such-id):hover{
	background:rgba(255,255,255,.12)!important;
	color:#fff!important;
	-webkit-text-fill-color:#fff!important;
}

/* =====================================================================
   NEW RESOURCE card (replaces the Free-this-week + member cards)
   ===================================================================== */
.hftn-fcard--new{ border-color:var(--hft-navy); }
.hftn-fcard--new .hftn-fcard-band{ background:var(--hft-navy); }
.hftn-fcard-bandprice{ font-weight:900; }
.hftn-fcard-bandprice .amount,
.hftn-fcard-bandprice bdi{ color:#fff!important; -webkit-text-fill-color:#fff!important; }
/* real product thumbnail */
.hftn-fcard-thumb--img{
	background-size:cover!important;
	background-position:center top!important;
	background-repeat:no-repeat!important;
	height:190px;
	image-rendering:auto;
}
/* the New Resource card fills its column so it reads as a full card */
.hftn-mega-grid--resources .hftn-feature{ align-self:stretch; }
.hftn-fcard--new{ display:flex; flex-direction:column; }
.hftn-fcard--new .hftn-fcard-b{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.hftn-fcard--new .hftn-fcard-go{ color:var(--hft-navy); -webkit-text-fill-color:var(--hft-navy); }

/* =====================================================================
   MEMBERSHIP mega — make the card button fit cleanly (req: "styled and
   formatted to fit in this dropdown section")
   ===================================================================== */
.hftn-mega--membership .hftn-feature{ padding:16px; }
.hftn-mega--membership .hftn-offer{
	height:100%;
	padding:18px;
}
.hftn-mega--membership .hftn-offer .hftn-btn{
	width:100%;
	min-height:42px;
	padding:11px 16px;
	font-size:14.5px;
	white-space:nowrap;
}
.hftn-mega--membership .hftn-offer b{ font-size:16px; }
.hftn-mega--membership .hftn-offer p{ font-size:12.5px; margin:4px 0 12px; }

/* =====================================================================
   BLUE MEMBER/OFFER CARD — stop it overflowing its column
   =====================================================================
   The navy .hftn-offer card was content-box: width:100% (268px) + 18px
   padding each side = 304px, overflowing the 300px feature column and
   spilling out the right of the cream tray. border-box keeps padding inside. */
.hftn-offer,
.hftn-feature,
.hftn-fcard{ box-sizing:border-box; }
.hftn-mega--membership .hftn-offer{ width:100%; max-width:100%; }

/* =====================================================================
   SEARCH WIDTH — grows as nav items are removed/hidden
   =====================================================================
   Blog is gone for everyone (shorter nav → wider search). For a logged-in
   member, Membership + Free Resources are hidden too, leaving just Resources
   — so the search takes the freed space and becomes the star of the header. */
.hftn-search--saf{ max-width:700px; }
body.hft-member .hftn-search--saf{ max-width:960px; }