/*
 Theme Name:   Balance
 Theme URI:    https://myworldinbalance.co.za
 Description:  Child theme of Storefront for the Balance wellness store (navy/cream/saffron palette, Fraunces + Assistant typography).
 Author:       Balance
 Template:     storefront
 Version:      1.0.0
 Text Domain:  balance
*/

:root {
	--balance-navy: #2d4862;
	--balance-blue: #4397d3;
	--balance-ink: #121212;
	--balance-offwhite: #f3f3f3;
	--balance-white: #ffffff;

	/* 2026 homepage redesign palette — additive alongside the --balance-*
	   tokens above (still used site-wide by header/buttons/cart/account/
	   policy pages). New work uses --bal-*; older sections migrate to it
	   only as they're actively touched, not via a blanket find/replace. */
	--bal-navy: #2d4862;
	--bal-navy-deep: #22384d;
	--bal-cream: #faf6ee;
	--bal-sky: #5b93bb;
	--bal-sky-light: #b5d4f4;
	--bal-saffron: #ef9f27;
	--bal-saffron-text: #412402;
	--bal-lavender: #ede9f7;
	--bal-ink: #121212;
}

body {
	font-family: "Assistant", sans-serif;
	color: var(--balance-ink);
	background-color: var(--balance-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Fraunces", serif;
	font-weight: 600;
}

.site-title,
.storefront-primary-navigation .menu > .menu-item > a {
	font-family: "Assistant", sans-serif;
	font-weight: 600;
}

h1 {
	font-size: clamp(40px, 5vw, 64px);
}

h2 {
	font-size: clamp(28px, 3.5vw, 40px);
}

h3 {
	font-size: clamp(20px, 2.2vw, 24px);
}

.balance-accent {
	font-family: "Fraunces", serif;
	font-style: italic;
	font-weight: 500;
}

/* C7: single navy band, slim + sticky. Storefront renders the branding
   row (#masthead > .col-full) and the primary nav (nested <nav
   class="storefront-primary-navigation">) as two sibling rows inside
   #masthead — previously styled as two visually distinct bands (white
   branding row, navy nav row). Painting both navy here and dropping the
   nav's own background removes the seam between them so they read as one
   band; reduced padding keeps it from being tall enough to eat into the
   video hero below.
   position:fixed rather than sticky — Storefront's own `.site{overflow-x:
   hidden}` (its horizontal-scroll guard) turns #page into a scroll
   container per spec, which hijacks position:sticky's containing block
   and makes it track that (non-scrolling) box instead of the viewport, so
   it never actually sticks. Fixed positioning isn't affected by that.
   assets/js/site-header.js measures the real rendered height (menu can
   wrap at in-between widths) and sets --site-header-height, which
   #content below uses as padding-top so fixed positioning doesn't cover
   the top of the page. */
.site-header {
	background-color: var(--bal-navy);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	transition: padding 0.25s ease;
}

/* E2: shrink-on-scroll — ~130px at top, ~72px once assets/js/
   site-header.js flags 100px of scroll (adds .is-scrolled to
   #masthead). Same nav items, just a smaller logo and tighter padding
   throughout, so the fixed bar reads as intentionally compact rather
   than just heavy the whole time it's stuck to the viewport. */
.site-header.is-scrolled {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

/* #masthead (ID) rather than .site-header (class): the base logo-sizing
   rule above is #masthead-scoped specifically to beat Storefront's own
   .site-header .custom-logo-link img rule (see its comment) — a
   class-only override here loses that same specificity fight and the
   logo silently stays at the base size despite this rule "winning" on
   paper (both !important, but ID beats any number of classes). */
#masthead.is-scrolled .site-branding img,
#masthead.is-scrolled .custom-logo {
	height: 26px !important; /* 22px + 20% */
}

.site-header.is-scrolled .storefront-primary-navigation ul.menu > li > a {
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	line-height: 1.3; /* Storefront's own ~1.6 line-height is most of what's left to trim once padding/logo are down */
}

#content {
	padding-top: var(--site-header-height, 146px);
}

@media (max-width: 767px) {
	#content {
		padding-top: var(--site-header-height, 116px);
	}
}

.storefront-primary-navigation {
	background-color: transparent;
}

.storefront-primary-navigation ul.menu > li > a {
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
	transition: padding 0.25s ease;
}

/* The branding row's own container has nothing left to clear now that the
   search box (previously floated alongside the logo) moved into the header
   icon row — see inc/header-search.php. Without a clearfix the container
   collapses to 0 height and the floated logo overlaps the navy nav bar
   below it instead of sitting inside its own padded row. Desktop has
   enough header padding that this went unnoticed; on mobile the logo ends
   up flush against the nav bar above and below it. */
.site-header > .col-full {
	overflow: hidden;
}

/* !important + #masthead-scoped: Storefront's own
   `.site-header .custom-logo-link img{width:100%;max-width:210px}` is
   more specific than a plain `.custom-logo` class selector and otherwise
   wins the cascade even though it doesn't declare height itself — the
   browser still renders at the pre-redesign size via that rule's width
   constraint and the image's intrinsic aspect ratio. */
#masthead .site-branding img,
#masthead .custom-logo {
	height: 43px !important; /* 36px + 20% */
	width: auto !important;
	max-width: none !important;
	transition: height 0.25s ease;
}

@media (max-width: 767px) {
	.site-header {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}
}

/* Offsets the fixed header below WP's own fixed admin bar when logged in
   — same breakpoint WP core uses to shrink the admin bar itself (32px
   desktop, 46px on narrow/touch screens). */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-title a {
	color: var(--balance-white);
}

a {
	color: var(--balance-navy);
}

a:hover,
a:focus {
	color: var(--balance-blue);
}

.storefront-primary-navigation {
	background-color: var(--balance-navy);
}

.storefront-primary-navigation ul.menu > li > a,
.storefront-primary-navigation .site-search .search-toggle {
	color: var(--balance-white);
}

/* E2: was --balance-blue/white, which Lighthouse's axe audit flagged at
   3.17:1 (needs 4.5:1) — swapped for the saffron/saffron-text pair (A1),
   already designed together specifically as a passing-contrast
   accent/text combination. */
.storefront-primary-navigation ul.menu > li:hover > a,
.storefront-primary-navigation ul.menu > li.current-menu-item > a {
	background-color: var(--bal-saffron);
	color: var(--bal-saffron-text);
}

/* Header "My account" icon, next to the basket icon (added via
   balance_header_account_link() in inc/account.php). Storefront's own
   handheld footer bar (the fixed bottom bar shown below 768px) already
   has its own "My Account" link, so this one is desktop-only. On desktop,
   Storefront's own float math already sums the nav (73.91%) and basket
   (21.74%) to exactly 100% of the row, leaving zero float room for a
   third element — floating this alongside them just wraps it onto its
   own line. Flexbox on .col-full sidesteps that instead of chasing exact
   percentages. */

.balance-account-link {
	display: flex;
	align-items: center;
	color: var(--balance-white);
	padding: 0.5rem 0.75rem;
	margin-right: 0.5rem;
	text-decoration: none;
}

.balance-account-link:hover,
.balance-account-link:focus {
	color: var(--balance-blue);
}

.balance-account-link svg {
	width: 1.35rem;
	height: 1.35rem;
}

/* Header search icon, between the account and basket icons (added via
   balance_header_search() in inc/header-search.php). Storefront's own
   product-search widget is reused inside the dropdown rather than
   rebuilding search from scratch. */

.balance-header-search {
	position: relative;
	display: flex;
	align-items: center;
}

.balance-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.5rem 0.75rem;
	margin-right: 0.5rem;
	color: var(--balance-white);
	cursor: pointer;
}

.balance-search-toggle:hover,
.balance-search-toggle:focus {
	background: none;
	color: var(--balance-blue);
}

.balance-search-toggle svg {
	width: 1.35rem;
	height: 1.35rem;
}

.balance-header-search-form {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.5rem;
	background: var(--balance-white);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	padding: 0.75rem;
	min-width: 280px;
	z-index: 100;
}

.balance-header-search.is-open .balance-header-search-form {
	display: block;
}

.balance-header-search-form .site-search {
	width: auto !important;
	float: none !important;
}

.balance-header-search-form .woocommerce-product-search {
	display: flex;
	gap: 0.5rem;
}

.balance-header-search-form .woocommerce-product-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--balance-offwhite);
	border-radius: 6px;
	font-family: "Assistant", sans-serif;
}

.balance-header-search-form .woocommerce-product-search button[type="submit"] {
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.balance-account-link,
	.balance-header-search {
		display: none;
	}
}

@media (min-width: 768px) {
	.storefront-primary-navigation .col-full {
		display: flex;
		align-items: center;
	}

	.storefront-primary-navigation .main-navigation {
		float: none !important;
		width: auto !important;
		margin-right: 0 !important;
		flex: 1 1 auto;
	}

	.balance-account-link {
		float: none !important;
		order: 2;
	}

	.balance-header-search {
		order: 3;
	}

	.storefront-primary-navigation #site-header-cart {
		float: none !important;
		width: auto !important;
		flex: 0 0 auto;
		order: 4;
	}
}

/* Storefront's own mini-cart dropdown (hover preview of the basket) is
   width:100% of its trigger, #site-header-cart — fine when that trigger
   is Storefront's original ~22%-of-row width, but the flexbox rule above
   shrinks it to just the icon+total (~114px) to sit properly next to the
   account/search icons, and the dropdown inherited that same width,
   squeezing "View basket"/"Checkout" onto three lines. Give the dropdown
   its own fixed width instead, anchored from the right edge of the
   trigger (rather than Storefront's left edge) so it opens toward the
   nav menu instead of running off the right edge of the viewport. */
.site-header-cart .widget_shopping_cart {
	width: 280px !important;
	left: auto !important;
	right: -999em;
}

.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart {
	right: 0 !important;
	left: auto !important;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--balance-navy);
	color: var(--balance-white);
	border: none;
	font-family: "Assistant", sans-serif;
}

button:hover,
.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--balance-blue);
	color: var(--balance-white);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--balance-navy);
}

/* Square the thumbnails in the Related products / Up-sells grids at the foot
   of a single product page.
 *
 * Product thumbnails are generated uncropped (migration 0017), so each one
 * keeps its source proportions: the bottle shots are portrait (324x669) while
 * The Complete Balance Bundle's two-bottle shot is square (324x324). Side by
 * side in the same row, the bottle rendered at twice the height of the bundle.
 *
 * The shop and category archives already solve this, but in assets/css/shop.css
 * — which is only enqueued on those archives, so none of it reaches a single
 * product page. Only the squaring is repeated here, deliberately not the rest
 * of that card treatment (negative margins, borders, padding): those belong to
 * the archive's card design, and this grid has no card around it.
 *
 * `contain` rather than `cover`, for the same reason as on the archives — the
 * sources are full bottles, and cover would slice their tops and bottoms off
 * to fill the square. */
.woocommerce div.product .related ul.products li.product img,
.woocommerce div.product .up-sells ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	height: auto;
}

/* C6: navy footer band, matching the header/hero instead of Storefront's
   plain off-white default.
   !important throughout: Storefront's Customizer "Colors" panel emits its
   own inline <style> block (selectors like
   `.site-footer a:not(.button):not(.components-button)` and
   `.site-footer .widget .widget-title`) that's more specific than a
   straightforward `.site-footer a` / `.site-footer .widget-title` and
   loads after this stylesheet, so it wins the cascade without it. */
.site-footer {
	background-color: var(--bal-navy-deep) !important;
	color: rgba(255, 255, 255, 0.75) !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title,
.site-footer .widget .widgettitle {
	color: var(--balance-white) !important;
	font-family: "Fraunces", serif;
	font-weight: 600;
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.site-footer a {
	color: var(--bal-sky-light) !important;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--balance-white) !important;
	text-decoration: underline;
}

.footer-widgets {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.site-info {
	/* E2: was 0.5 opacity (4.31:1 on navy-deep — axe needs 4.5:1) */
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.85rem;
}

.site-info span[role="separator"]::before {
	color: rgba(255, 255, 255, 0.3);
}

.hero-balance {
	background-color: var(--balance-offwhite);
	padding: 4rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	flex-wrap: wrap;
	text-align: center;
}

.hero-balance__content {
	max-width: 32rem;
}

.hero-balance__image img {
	max-width: 26rem;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.hero-balance h1 {
	color: var(--balance-navy);
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
}

.hero-balance p {
	font-size: 1.2rem;
	color: var(--balance-ink);
}

@media (min-width: 750px) {
	.hero-balance {
		text-align: left;
		justify-content: space-between;
	}
}

/* Placeholder flagging (site-wide) --------------------------------------- */

.balance-placeholder {
	position: relative;
	border: 2px dashed #d99a1b;
	background-color: #fff8e8;
	border-radius: 8px;
	padding: 2rem 1.5rem 1.5rem;
}

.balance-placeholder__tag {
	position: absolute;
	top: -0.75rem;
	left: 1rem;
	background: #d99a1b;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.6rem;
	border-radius: 4px;
}

/* Footer "Get in Touch" widget -------------------------------------------- */

.balance-footer-contact p {
	margin: 0 0 0.5rem;
}

.balance-footer-contact__social {
	display: flex;
	gap: 1rem;
	margin-top: 0.75rem;
}

.balance-footer-contact__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--balance-white) !important;
}

.balance-footer-contact__social a:hover {
	background: var(--bal-sky);
	color: var(--balance-white) !important;
}

.balance-footer-contact__social svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* Product page Description tab (Description/Benefits/Active Ingredients/
   How to Use headings) — Storefront's default vertical rhythm puts ~59px
   above every heading that follows a paragraph or list (p/ul/ol + h2/h3
   { margin-top: 2.29068em }, relative to the heading's own larger font
   size), which reads as an oversized gap between these short sections. */

.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3 {
	margin-top: 1.1em;
}

/* Floating "Contact us on WhatsApp" button (site-wide, added via
   balance_render_whatsapp_widget() in inc/whatsapp-widget.php). */

/* E6: kept WhatsApp's own green for recognition (it's a widely-learned
   color cue for "this opens WhatsApp") rather than reskinning it navy,
   but a 2px cream ring and a ~15% smaller size (3.5rem -> 3rem) tie it
   into the palette instead of sitting on the page as a plain stock
   bubble. */
.balance-whatsapp-widget {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 2px solid var(--bal-cream);
	background: #25d366;
	color: var(--balance-white);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.balance-whatsapp-widget:hover,
.balance-whatsapp-widget:focus {
	background: #1ebe5b;
	color: var(--balance-white);
	transform: scale(1.06);
}

.balance-whatsapp-widget svg {
	width: 1.6rem;
	height: 1.6rem;
}

@media (max-width: 767px) {
	.balance-whatsapp-widget {
		right: 1rem;
		bottom: calc(1rem + 56px);
	}
}

/* Pill CTA buttons (site-wide: homepage CTAs + product page add-to-cart) -- */

.balance-pill-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	background: var(--balance-navy);
	color: var(--balance-white);
	padding: 0.6rem 0.6rem 0.6rem 1.6rem;
	border: none;
	border-radius: 999px;
	text-decoration: none;
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.balance-pill-button:hover {
	background: var(--balance-blue);
	color: var(--balance-white);
	transform: translateY(-2px);
}

.balance-pill-button--on-dark {
	background: var(--balance-blue);
}

.balance-pill-button--on-dark:hover {
	background: var(--balance-white);
	color: var(--balance-navy);
}

.balance-pill-button--on-dark:hover .balance-pill-button__icon {
	background: rgba(45, 72, 98, 0.15);
	color: var(--balance-navy);
}

.balance-pill-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
}

.balance-pill-button__icon svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* 2026 button system — .btn-primary/.btn-secondary. Used on the redesigned
   hero CTA, goal-nav cards, and signup submit; .balance-pill-button above
   stays as-is for spots not yet migrated (e.g. product purchase options). */

.btn-primary,
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	border-radius: 999px;
	padding: 14px 28px;
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
	background: var(--bal-saffron);
	color: var(--bal-saffron-text);
	border: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: #d6890f; /* --bal-saffron darkened ~8% */
	color: var(--bal-saffron-text);
}

.btn-secondary {
	background: transparent;
	color: var(--bal-navy);
	border: 1.5px solid currentColor;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	background: var(--bal-navy);
	color: var(--balance-white);
}

/* Shop-grid "From RXXX/mo" price display (products with a subscription) --- */

.balance-price-subscription {
	display: block;
	font-weight: 700;
	color: var(--balance-navy);
}

.balance-price-subscription__unit {
	font-weight: 400;
	font-size: 0.85em;
}

.balance-price-onetime {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	color: #6b6b6b;
}

/* Single product pages, shop archive, category/tag archives, the FAQ/
   About/Contact pages, and the four policy pages (page-id-3 privacy,
   -11 refund/returns, -58 shipping, -59 terms — sidebar removal is
   keyed off page ID since there's no shared body class across them):
   no sidebar (removed in inc/product-purchase-options.php and
   inc/content-pages.php), so let the content area take the full width
   instead of leaving a gap. */

.single-product .content-area,
.woocommerce-shop .content-area,
.tax-product_cat .content-area,
.tax-product_tag .content-area,
.page-id-14 .content-area,
.page-id-13 .content-area,
.page-id-16 .content-area,
.page-id-3 .content-area,
.page-id-11 .content-area,
.page-id-58 .content-area,
.page-id-59 .content-area,
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area,
.blog .content-area,
.single-post .content-area,
.category .content-area {
	width: 100%;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

/* Single product gallery ---------------------------------------------------- */

/* The main product image is now a bottle cutout in portrait (roughly 700x1450)
   where it used to be a squarish marketing composite (~600x600). At
   Storefront's 416px single-image width that renders about 880px tall — twice
   the height of what it replaced — and pushes the price and Add to Basket
   below the fold.

   Halved, which puts the bottle back at roughly the height the composite
   occupied, and centred in the column it no longer fills.

   Only above the mobile breakpoint: below it the gallery is already a single
   narrow column, and a half-width bottle there would be too small to make out
   the label. */

@media (min-width: 768px) {
	/* Capped on HEIGHT rather than width, because the slides are not all the
	   same shape. The main image is a portrait bottle cutout (~700x1450) and
	   needs bringing down; the secondary images are squarish (~600x600) and
	   were already the right size. A width cap treats them alike and shrinks
	   the square ones to half the column for no reason.

	   462px is what the halved bottle occupies, so the cutout is unchanged
	   while a square image is limited by max-width instead and still fills
	   the column.

	   The auto margins go on the <a> WooCommerce wraps each image in, not on
	   the <img>: sizing the image directly works, but centring it does not —
	   something further down the cascade sets its margins and wins, so
	   margin-left:auto never takes. fit-content shrinks the anchor to the
	   image so the auto margins have something to centre. */
	.single-product .woocommerce-product-gallery__image > a {
		display: block;
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.single-product .woocommerce-product-gallery__image img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 462px;
	}
}

/* FAQ page (/faqs/) --------------------------------------------------------- */

.balance-faq-page__intro {
	font-size: 1.05rem;
	color: var(--balance-ink);
	max-width: 46rem;
	margin-bottom: 2rem;
}

.balance-faq__list {
	max-width: 46rem;
}

.balance-faq__item {
	background: var(--balance-white);
	border: 1px solid var(--balance-offwhite);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
}

.balance-faq__item.balance-placeholder {
	background-color: #fff8e8;
	border: 2px dashed #d99a1b;
	padding: 2rem 1.25rem 1.25rem;
}

.balance-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	font-family: "Assistant", sans-serif;
	color: var(--balance-navy);
}

.balance-faq__item p {
	margin: 0.75rem 0 0;
}