/*
 * gregloucks.food - the header, in two rows.
 *
 * Greg, 2026-09-29: "the menu on gregloucks.food is all scrunched over to the
 * left", then "the store button and language translators should be further up
 * on the same row as the logo ... so the menu can go across the screen".
 *
 * ⚠ WHAT WAS WRONG: THE MENU DID NOT FIT AND WRAPPED. Measured at 1440px -
 * eight top-level items came to 830px of content inside a 769px box, so
 * "Cooking encyclopedia" fell onto a second line at the far left and the
 * header stood 144px tall. savor's `3-MinimalLayout` puts the mega menu and
 * the whole `menu` module position in ONE flex row, and on this site that
 * position holds the Store button, the language switcher and the translate
 * control - about 440px of a 1290px row.
 *
 * ⚠ IT WAS WORSE IN EVERY TRANSLATED LANGUAGE, which is why shaving padding
 * was not a fix: Spanish 830px of items into 752, French 806 into 701, German
 * 660 into 637. The box SHRINKS as the page translates, because the controls
 * beside it grow with their own labels.
 *
 * The layout now has two rows (headers/10-LogoBarMenuRow), so the menu has the
 * full width and nothing below rations it. Only spacing is left here.
 */

/* The two rows should read as one header, not as two stacked bars. */
#sp-header.sp-header--two-row .sp-header__top {
	padding-block: .35rem;
}

#sp-header.sp-header--two-row .sp-header__nav .sp-column {
	justify-content: flex-start;
}

/* ⚠ THE MENU STARTS WHERE THE LOGO DOES. `.sp-column` inside the nav row is a
   flex container; without this the mega menu keeps the right-alignment it
   needed when it shared a row with the controls, and the second row would sit
   under the Store button instead of under the logo. */
#sp-header.sp-header--two-row .sp-megamenu-parent {
	float: none;
	margin-inline: -9px;   /* pull the first item's padding back to the edge */
}

/* ⚠ AND A LABEL NEVER BREAKS INSIDE ITS OWN ITEM. "Food & Recipes" splitting
   across two lines is the same fault one level down, and it appears the moment
   the page is machine-translated into a language with longer words. */
.sp-megamenu-parent > li > a {
	white-space: nowrap;
}

/* The controls keep their own size; nothing squeezes them now. */
#sp-header.sp-header--two-row .sp-header__top .sp-module {
	flex: 0 0 auto;
}

/*
 * ── LEGIBILITY ON THE DARK BAR ─────────────────────────────────────────
 *
 * ⚠ THE SWITCHER WAS BLACK-ON-BLACK, AND HAD BEEN ALL ALONG. Measured: the
 * header's background is rgb(22,19,11) and everything inside it inherits
 * rgb(36,24,24) - the BODY text colour. The menu links escape that because
 * template.css names them explicitly; the modules in the header never did.
 * It was survivable while the controls sat over a photograph and invisible
 * the moment they moved onto the bar.
 *
 * ⚠ THE HEX IS THE PRESET'S OWN `menu_text_color` (#F6F1EA), copied because
 * Helix compiles its presets to literal colours and publishes no CSS variable
 * to point at. If the preset is ever changed in the template style, this line
 * is the one thing that has to change with it.
 */
#sp-header.sp-header--two-row .sp-header__top {
	color: #F6F1EA;
}

#sp-header.sp-header--two-row .sp-header__top .mls-trigger {
	color: #F6F1EA;
	border-color: rgba(246, 241, 234, .45);
}

#sp-header.sp-header--two-row .sp-header__top .mls-trigger:hover,
#sp-header.sp-header--two-row .sp-header__top .mls-trigger:focus-visible {
	border-color: #F6F1EA;
}

/* ══ TEXT YOU COULD NOT READ ═══════════════════════════════════════════════
 * Greg, 2026-09-29: "because od the text color with the backgroubd you cant
 * resd some pages at gregloucks.food" and "the languagecpagevtranslator needs
 * to change colors on some pages too".
 *
 * ⚠ EVERY NUMBER BELOW WAS MEASURED, NOT JUDGED. Each page was rendered twice -
 * once normally, once with every glyph turned transparent - so the second shot
 * photographs what is actually BEHIND the words. Reading the CSS could not have
 * answered this: the backgrounds are photographs and gradients, and
 * getComputedStyle reports them as transparent. 48 elements genuinely failed
 * WCAG AA against their real background.
 *
 * ⚠ THE BRAND GOLD IS NOT THE PROBLEM - ITS BACKGROUND IS. #b79c56 measures
 * 6.98:1 on the dark bar and 2.36:1 on the cream page. So the gold STAYS
 * wherever the ground is dark, and only the light-ground uses are darkened, to
 * #856a28 - 4.57:1 on cream, and 5.14:1 the other way round so it still works
 * as a button fill. Changing the gold everywhere would have thrown away a
 * perfectly readable, and deliberate, part of the design.
 */

:root {
	--glf-gold: #b79c56;          /* unchanged: for dark grounds */
	--glf-gold-on-light: #856a28; /* 4.57:1 on the cream page */
	--glf-cream: #f6f1ea;
	--glf-ink: #221f16;
}

/* ── 1. THE MENU WAS INVISIBLE ON /blog: CREAM ON CREAM, 1.00:1 ─────────────
 * Measured rgb(246,241,234) text on rgb(246,241,234) - all seven links, gone.
 *
 * ⚠ THE COLOUR WAS NEVER WRONG; THE PAGE UNDER IT WAS MISSING. On the page
 * builder pages the header floats over a dark hero photograph, so cream links
 * are right. Articles Plus draws no hero, so the same links landed on the cream
 * page background and disappeared - which is why the menu "could not be found",
 * on a computer as much as on a phone.
 *
 * So the header gets a ground of its own wherever the page does not supply one.
 * Scoped to :not(.com_sppagebuilder) so the hero pages keep their float. */
body:not(.com_sppagebuilder) #sp-header {
	background-color: var(--glf-ink);
}

body:not(.com_sppagebuilder) #sp-header .sp-megamenu-parent > li > a,
body:not(.com_sppagebuilder) #sp-header .sp-megamenu-parent > li > span {
	color: var(--glf-cream);
}

/* The active item was gold on cream, 2.33:1. Gold on the dark ground is 6.98:1. */
body:not(.com_sppagebuilder) #sp-header .sp-megamenu-parent > li.active > a {
	color: var(--glf-gold);
}

/* ── 2. THE LANGUAGE AND TRANSLATE CONTROLS: 1.07:1 ON EVERY PAGE ───────────
 * "English" measured rgb(26,26,26) on rgb(22,19,11) - near-black ink on a
 * near-black bar, on all six pages tested. The control was there the whole
 * time and simply could not be seen. Cream on that bar is 16.51:1. */
#sp-header .mls,
#sp-header .mls *,
#sp-header .tbar,
#sp-header .tbar * {
	color: var(--glf-cream);
}

#sp-header .mls-caret,
#sp-header .tbar-caret {
	border-top-color: var(--glf-cream);
}

/* ⚠ THE OPEN PANEL IS A LIGHT CARD, so the rule above must not follow the list
   into it or the language names go cream-on-white. */
#sp-header .mls-list,
#sp-header .mls-list *,
#sp-header .tbar-panel,
#sp-header .tbar-panel * {
	color: var(--glf-ink);
}

/* ── 3. THE FOOD QUOTE: WHITE ON CREAM, 1.12:1 ─────────────────────────────
 * The randomising quote was written to sit over the pancake photograph in white.
 * Measured, its actual ground is rgb(246,241,234) - the photograph is not behind
 * it - so the words were white on cream. Dark ink on that ground is 13.4:1. */
.glf-quote__text,
.glf-quote__who {
	color: var(--glf-ink);
}

/* ── 4. "Post comment" WAS BLACK ON THE DARK PANEL, 1.13:1 ─────────────────
 * On five pages. A gold fill with white on it is 5.14:1 and matches the site. */
.ap-btn {
	background-color: var(--glf-gold-on-light);
	border-color: var(--glf-gold-on-light);
	color: #fff;
}

.ap-btn:hover,
.ap-btn:focus-visible {
	background-color: #6f5720;
	border-color: #6f5720;
	color: #fff;
}

/* ── 5. GOLD ON THE CREAM PAGE: 2.36:1, THE BIGGEST FAMILY ─────────────────
 *
 * ⚠ MY FIRST ATTEMPT AT THIS DID NOTHING, and re-measuring is the only reason
 * I know. Page Builder writes a rule PER ADDON, scoped by id:
 *     #sppb-addon-1685443517598 .sppb-addon-title { color: var(--link-color); }
 * An id selector outranks any class rule here, so `.sppb-addon-title { color }`
 * in this file lost every time even though custom.css loads last (742nd of 744).
 * The headings, staff roles, step numbers and prices measured exactly the same
 * 2.36:1 after the "fix" as before it.
 *
 * ⚠ SO CHANGE THE VARIABLE, NOT THE RULE. Those id rules resolve
 * var(--link-color) at use time, so redefining the variable reaches every one of
 * them with no specificity contest at all - and reaches the addons on pages I
 * have not measured too.
 *
 * ⚠ AND NO SINGLE GOLD WORKS EVERYWHERE - measured, both ways:
 *       #b79c56 (current)  2.36:1 on cream   6.98:1 on the dark bar
 *       #856a28 (new)      4.57:1 on cream   3.61:1 on the dark bar
 * Swapping it globally would simply move the failure onto the dark header. The
 * page ground is cream, so cream takes the default and the dark contexts take
 * the bright gold back - by re-declaring the variable on themselves, which their
 * descendants then inherit.
 */
:root {
	--link-color: var(--glf-gold-on-light);
}

/* The dark grounds keep the original gold; everything inside them inherits it. */
#sp-header,
#sp-footer,
.sp-header__utility,
.sppb-section--dark,
[data-dark="1"] {
	--link-color: var(--glf-gold);
}

/* ── 6. BUTTON FILLS THAT WERE TOO PALE FOR WHITE LETTERING ────────────────
 * "Browse Gallery" measured white on rgb(192,169,109) = 2.30:1 and "Book Now"
 * white on rgb(175,154,95) = 2.76:1. These fills are painted from the addon's
 * own id-scoped rule, so again the variable is the lever - but these two carry
 * a literal colour rather than the variable, so they need the declaration. */
.sppb-btn.btn-fill.sppb-btn-default,
.sppb-btn-dash-circle.btn-fill {
	background-color: var(--glf-gold-on-light) !important;
	border-color: var(--glf-gold-on-light) !important;
	color: #fff !important;
}

/* ── 7. THE COMMENT PANEL HAS NO GROUND OF ITS OWN ────────────────────────
 *
 * ⚠⚠ MY PREVIOUS ATTEMPT AT THIS TRIPLED THE PROBLEM - 27 failures became 107 -
 * and the re-measurement is the only reason that is not still live. I read the
 * panel's background off /blog, where it measured grey rgb(154,151,143), and
 * forced dark ink onto everything. On /about and /contact the very same panel
 * measures rgb(22,19,11), nearly black, so dark ink landed on a dark ground at
 * 1.13:1 - every reaction button, every label, on two pages out of three.
 *
 * ⚠ THE LESSON IS THE DIAGNOSIS, NOT THE COLOUR. Articles Plus sets NO
 * background on .ap-comments or .ap-reactions at all, so the panel simply
 * inherits whatever page section it lands in - dark inside a dark band, grey
 * inside a grey one. No fixed ink can be right on both, and picking one from a
 * single page's measurement is picking at random.
 *
 * So the panel gets a ground of its own. Once it does, one ink is correct
 * everywhere, because the panel no longer depends on what is behind it:
 * #221f16 on cream measures 13.4:1.
 */
.ap-comments,
.ap-reactions {
	background-color: var(--glf-cream);
	color: var(--glf-ink);
	border-radius: .5rem;
	padding: 1rem 1.15rem;
}

/* ⚠ THE DESCENDANT RULE LOST TO LINK STYLING. `.ap-comments *` is one class
   plus the universal selector, which any `a` rule elsewhere outranks - so the
   reaction links stayed cream and, now that the panel is cream too, measured
   1.00:1. The anchors have to be named. */
.ap-comments *,
.ap-reactions * {
	color: var(--glf-ink);
}

.ap-comments a,
.ap-reactions a,
.ap-reaction-choice,
.ap-reactions__more {
	color: var(--glf-ink) !important;
}

/* The labels keep the darker gold, which is 4.57:1 on this cream ground. */
.ap-comments .ap-label,
.ap-reactions .ap-label,
.ap-comments__heading {
	color: var(--glf-gold-on-light);
}

/* ⚠ THE BUTTON MUST CARRY BOTH HALVES OR THEY DISAGREE AGAIN. Last time the
   white lettering applied and the fill did not, which left white on light grey
   at 1.49:1 - worse than the black-on-dark it replaced. */
.ap-btn,
.ap-comments .ap-btn {
	background-color: var(--glf-gold-on-light) !important;
	border-color: var(--glf-gold-on-light) !important;
	color: #fff !important;
}

.ap-btn:hover,
.ap-btn:focus-visible {
	background-color: #6f5720 !important;
	border-color: #6f5720 !important;
	color: #fff !important;
}

/* Emoji buttons are glyphs on the panel; give them a visible edge rather than
   relying on a colour the emoji does not take anyway. */
.ap-reaction-choice {
	background-color: #fff;
	border: 1px solid rgba(34, 31, 22, .25);
	border-radius: .35rem;
}

/* ══ THE PHONE HEADER ══════════════════════════════════════════════════════
 * Greg, 2026-09-29: "cabt find the menu for gregloucks.food on mobile devices
 * abd the labguage oage chooser is cut off on mobule devices", then "actually
 * to the right of the logo wirks do rhat".
 *
 * ⚠ BOTH COMPLAINTS WERE ONE MEASUREMENT AWAY FROM BEING GUESSED AT WRONGLY.
 * Rendered at 390px and read off the DOM:
 *   #offcanvas-toggler  ->  display: none, width 0, height 0
 *   #sp-header          ->  height 72px, while its own rows need 171px
 * So the menu button did not exist on a phone at all, and the header was
 * cropping everything past its first 72 pixels. Neither is a spacing problem
 * and no amount of padding would have touched either.
 */

/* ── 1. THERE WAS NO MENU BUTTON ON A PHONE ─────────────────────────────────
 * The offending rule is `#sp-header #offcanvas-toggler.mega { display: none
 * !important }` and it carries NO media query, so it hides the burger at every
 * width. The template writes `class="<?php echo $menu_type; ?>"` on the toggler
 * and this site's menu_type is `mega`, so the burger matched and vanished.
 * On the stock layouts that does not matter because they put the toggler in the
 * same row as the mega menu, which is itself hidden below 992px; this header
 * deliberately keeps the burger in row one, where it now has to be visible.
 *
 * ⚠ !important IS REQUIRED, not preferred: the rule being overridden is itself
 * !important, so an ordinary declaration cannot reach it. */
@media (max-width: 991.98px) {
	#sp-header #offcanvas-toggler.mega,
	#sp-header #offcanvas-toggler.offcanvas {
		display: inline-flex !important;
	}
}

/* ── 2. THE HEADER WAS CROPPING ITSELF ──────────────────────────────────────
 * height: 72px is set three times, including inside the max-width 991px and
 * 575px media queries, so the phone got a 72px box holding 171px of content.
 * Everything below the fold of that box - the language chooser and the
 * translate control - was simply clipped off. On a phone the header has to be
 * as tall as what is in it. */
/* ⚠ AND NOT ONLY ON PHONES. `height: 72px` is the ONE-ROW assumption, and this
   header has two rows by design - measured at 1440px its content is 158px tall
   inside a 72px box. It happens to still paint because the overflow is visible,
   but every sticky-offset and clipping calculation downstream is working from
   the wrong number. A two-row header is as tall as its two rows. */
#sp-header.sp-header--two-row {
	height: auto !important;
	min-height: 72px;
}

@media (max-width: 991.98px) {
	#sp-header {
		height: auto !important;
		min-height: 72px;
	}

	/* The sticky placeholder reserves the old fixed height; let it follow. */
	.sticky-header-placeholder {
		height: auto !important;
	}
}

/* ── 3. THE CONTROLS FIT BESIDE THE LOGO ONLY IF THEY GET SMALLER ───────────
 * Measured at 390px: logo 150px + language 201px + translate 100px = 451px, so
 * they cannot share a row with the logo at full size however they are aligned.
 * The language name is the expensive part ("English", and far worse once
 * translated - "Inglés (Reino Unido)"), and the flag already says the same
 * thing. Flag and caret only: about 44px each, so logo + both controls + the
 * burger come to roughly 278px and sit on one row beside the logo, which is
 * where you asked for them. */
@media (max-width: 991.98px) {
	/* ⚠ THE WRAP IS ON THE ROW, NOT ON THE COLUMN INSIDE IT. Setting nowrap on
	   .sp-column did nothing: .sp-header__top is itself the Bootstrap .row, and
	   .row carries flex-wrap: wrap. Measured at 390px the two columns needed
	   150 + 190 + 48px of gutter = 388px against 390px of screen, so they wrapped
	   and the controls dropped below the logo instead of sitting beside it.
	   Trimming the gutter buys the margin back. */
	#sp-header .sp-header__top {
		flex-wrap: nowrap;
		--bs-gutter-x: .75rem;
	}

	#sp-header .sp-header__top > [class*="col"] {
		padding-inline: .375rem;
	}

	#sp-header .sp-header__top .sp-column {
		flex-wrap: nowrap;
	}

	#sp-header .mls-name,
	#sp-header .tbar-label,
	#sp-header .tbar-note {
		display: none;
	}

	#sp-header .mls,
	#sp-header .tbar {
		margin-inline: .15rem;
	}

	/* ⚠ THE BURGER NEVER SHRINKS. It is the only way to the menu on a phone, so
	   it must not be the thing that gets squeezed out when a label is long. */
	#sp-header #offcanvas-toggler {
		flex: 0 0 auto;
		margin-inline-start: .35rem;
	}

	/* The language panel is a fixed-width card; keep it on screen. */
	#sp-header .mls-list,
	#sp-header .tbar-panel {
		max-width: calc(100vw - 1.5rem);
		right: .75rem;
		left: auto;
	}
}

/* ── 4. THE ACCOUNT AND SEARCH STRIP ABOVE THE LOGO ────────────────────────
 * Greg: "i want the silhoutte login thing abd search thing ... above the logo
 * on mobile devices ahd somewhere good on a comouter". Row zero on phones; on a
 * computer they stay in row one beside the logo, which is where the other sites
 * put them. */
.sp-header__utility {
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sp-header__utility .sp-column {
	gap: .5rem;
	padding-block: .3rem;
}

.sp-header__utility .sp-module {
	margin: 0;
}

/* The silhouette and the magnifier are cream, on the dark header ground. */
.sp-header__utility a,
.sp-header__utility .fas,
.sp-header__utility .far {
	color: var(--glf-cream);
}

/* ⚠ THE SEARCH FIELD MUST NOT PUSH THE STRIP WIDER THAN THE SCREEN. */
.sp-header__utility .mod-finder,
.sp-header__utility form {
	max-width: 62vw;
}

.sp-header__utility input[type="search"],
.sp-header__utility input[type="text"] {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* ⚠ THE LOGO AND THE STORE BUTTON WERE TOUCHING at 390px - the logo box is
   132px and the Store button began at 130. The logo is the one that should
   give way, because it is the only item here that can be read at a smaller
   size without losing its job. */
@media (max-width: 991.98px) {
	/* ⚠ 38vw MADE IT BIGGER, NOT SMALLER, and pushed the burger off the right
	   edge entirely - measured x=374..399 against a 390px screen. The logo was
	   already 132px; a max-width only helps if it is BELOW the natural size.
	   30vw is 117px at 390, and min-width:0 is what actually lets a flex item
	   shrink at all. */
	#sp-header #sp-logo {
		max-width: 30vw;
		min-width: 0;
		flex-shrink: 1;
		padding-inline-end: .5rem;
	}

	#sp-header #sp-logo img,
	#sp-header #sp-logo .logo-image {
		max-width: 100%;
		height: auto;
	}
}

/* ── 8. THE HERO HEADINGS SIT ON PHOTOGRAPHS, NOT ON THE CREAM PAGE ────────
 *
 * ⚠ SECTION 5 BROKE THESE AND THE RE-MEASUREMENT CAUGHT IT. Darkening
 * --link-color fixed the many headings on the cream page and quietly ruined the
 * few over dark photographs: "Delight in every bite" went to 2.47:1, "About us"
 * to 2.96:1. Their ground is not a colour at all - getComputedStyle reports the
 * nearest background as cream for every one of them, because the darkness is a
 * JPEG. That is the whole reason this site is audited by screenshot.
 *
 * ⚠ AND THEY CANNOT BE SELECTED BY "HAS A BACKGROUND IMAGE" - CSS has no such
 * selector. Page Builder writes the photograph into a per-section id rule, so
 * the ten sections that carry one were read out of the rendered pages and are
 * named here. Each re-declares --link-color for its own subtree, so every
 * heading inside a photographic section inherits the bright gold again while the
 * cream page keeps the dark one.
 *
 * ⚠ IF A SECTION'S PHOTOGRAPH IS REMOVED its id must come off this list, or its
 * headings will be bright gold on cream at 2.36:1 - the very fault section 5
 * exists to fix.
 */
#section-id-0OPEzH8YfD-muAtUy9lvM,
#section-id-0uVZSCWPUR4t2RN9ZTVgF,
#section-id-15EUQbl_2Mu8QNg2cxkVM,
#section-id-17wq4slS_TWguDuNUygUU,
#section-id-2vvJkB0QlFNk9rZGZu6RX,
#section-id-RozFb2UAF39J2lYckiNaf,
#section-id-Wi9PDed5jA4Ic56C7h5MN,
#section-id-bb119eb5-89a0-4677-8556-e5cfe352284d,
#section-id-tizMDYXyBbPLd2wZ6f3Nk,
#section-id-weUGHCHf28SAYZNapG1yp {
	--link-color: var(--glf-gold);
}

/* ── 9. "Post comment" STILL WOULD NOT TAKE ITS FILL ───────────────────────
 * Measured white on rgb(246,241,234) at 1.12:1 - the white lettering applied
 * and the background did not, so the button was invisible on the cream panel I
 * had just given it. Articles Plus sets no !important of its own, so the fill
 * was being lost to the element's own default button background; naming the
 * element type as well as the class settles it. */
/* ⚠ AND NOT `.ap-comments__form button`, WHICH IS WHAT I WROTE FIRST. That
   swept up the emoji reaction buttons that live in the same form and painted
   them white on the cream panel - 13 failures became 50. A submit button is
   .ap-btn; nothing else in that form is. */
button.ap-btn,
input.ap-btn,
a.ap-btn,
.ap-comments button.ap-btn {
	background-color: var(--glf-gold-on-light) !important;
	background-image: none !important;
	border: 1px solid var(--glf-gold-on-light) !important;
	color: #fff !important;
}

/* ⚠ TWO MORE PHOTOGRAPHIC SECTIONS, FOUND BY MEASURING RATHER THAN BY READING
   THE LIST AGAIN. These two carry their picture in a way the earlier sweep of
   "#section-id-* { background-image }" did not catch, and their headings were
   left on the dark gold at 4.01:1 against an almost-black photograph
   (rgb(8,2,2)): "Healthy Foods", "City Centre", "Since 1990", "Karoke nights",
   "Reseravation". The bright gold is about 9:1 there. */
#section-id-1684404627108,
#section-id-Magu6bWrLwqOpH_8-mv-Z {
	--link-color: var(--glf-gold);
}