/**
 * Responsive fixes for the header and homepage. Issue #53.
 *
 * Kept out of style.css so the changes stay reviewable rather than disappearing
 * into a 143KB file with no LESS source. Loaded after style.css, so these win on
 * load order without needing !important except where noted.
 *
 * Each block records the breakpoint the problem shows at and why it happens —
 * in every case here it is a fixed width or a non-wrapping flex row that turns
 * on at a breakpoint before there is room for it.
 */

/* How far the search button sits from the right edge of the header row. Enough to
   clear the ~52px hamburger beside it. The expanded search form is positioned off
   this too, so the two cannot drift into each other. */
:root {
	--treg-search-toggle-right: 76px;
}

/* ------------------------------------------------- header logos (from ~375px) */

/* The header row's marks sit on white and are set from the Customizer (see
   inc/header-logos.php). Cap their height so they cannot crowd the search and
   hamburger controls to their right — at 375px they were overlapping.
   Height is pinned and width follows the aspect ratio, so the marks must never be
   allowed to shrink: a flex row that squeezed them narrower while the height held
   distorted the lettering. Hence 0 0 auto on the logo block and its anchors, and
   no max-width on the images. */
.header-inner__logo-wrapp img {
	width: auto;
	max-width: none;
	height: 26px;
}

.header-inner__left,
.header-inner__logo-wrapp,
.header-inner__logo-wrapp a,
.header-inner__logo-wrapp .separator {
	flex: 0 0 auto;
}

/* The marks sat 4px above the centre of their row, in both bars. They are inline
   images, so they were sitting on their link's text baseline with the descender
   space below them — the anchor was centred, but the image inside it was not.
   Making them blocks removes the line box, so the anchor is exactly the image and
   the flex centring lands where it should. */
.topbar-inner__logo-wrapp img,
.header-inner__logo-wrapp img {
	display: block;
}

/* The divider carried a 5px bottom margin that pushed it off the same centre. */
.topbar-inner__logo-wrapp .separator,
.header-inner__logo-wrapp .separator {
	margin-bottom: 0;
}

@media only screen and (max-width: 400px) {

	.header-inner__logo-wrapp img {
		height: 22px;
	}
}

/* The search button is absolutely positioned at right: 50px while the hamburger
   next to it is ~52px wide, so the two overlapped by about 17px. Clear it, and
   drop the dark chip — a white icon on a #262524 square made sense when the row
   was dark, but the row is white now. */
@media only screen and (max-width: 1200px) {

	button.search-toggle {
		right: var(--treg-search-toggle-right);
		background: transparent;
		color: var(--treg-nav-ink, #221f1c);

		/* style.css pins this button at `top: 12px`, which centred it in the header
		   row it was written for. The row is 57px tall on mobile but 72px at 1024,
		   so the icon rode 7px high there. Centre it on the row instead — its
		   containing block is .header-inner, which is exactly the row. */
		top: 50%;
		transform: translateY(-50%);

		/* The toggle bar is z-index 1 and, now that it stretches across the row to
		   put the hamburger on the right, its blocks sit over this button and ate
		   the clicks. Lift the button above the bar. */
		z-index: 2;
	}

	/* Belt and braces: the bar's left and centre blocks hold nothing in this
	   configuration, so they should never intercept a click meant for something
	   underneath. :empty scopes this to exactly that case — add a toggle block in
	   the Max Mega Menu settings and it starts receiving clicks again. */
	#mega-menu-wrap-menu-1 .mega-toggle-blocks-left:empty,
	#mega-menu-wrap-menu-1 .mega-toggle-blocks-center:empty {
		pointer-events: none;
	}

	/* With the search open, the expanded form ran under the close button — its
	   submit and the X overlapped by 14px at 375px. style.css sizes the form as
	   `left: 0; width: 75%`, so its right edge is a percentage of the row while the
	   button sits at a fixed offset from the right: they only collide once the row
	   is narrow enough. Give the form a right offset derived from the button's own,
	   so the two stay a fixed distance apart at every width instead of converging.
	   32px is the button's width, 12px the gap. */
	.header-inner__search .search-form-wrapper.active {
		width: auto;
		right: calc(var(--treg-search-toggle-right) + 32px + 12px);
	}

	/* The old 75% width happened to be wider than the logos, so it always covered
	   them. Stopping the form short of the close button makes it narrower than the
	   logo block on small screens, and the tail of the Tregaskiss mark showed
	   through in the gap beside the X. The open search takes over the row, so hide
	   the branding while it is open — visibility rather than display, so nothing
	   else shifts underneath it. */
	.header-inner__left:has(.search-form-wrapper.active) .header-inner__logo {
		visibility: hidden;
	}
}

/* ------------------------------------------- homepage featured (from 481px) */

/* The decorative grid was a fixed 600px, so it spilled out of any viewport
   narrower than that. Only the <=480px rule reined it in, which left 481px to
   ~600px overflowing. */
.homepage-featured .inner::before {
	max-width: 100%;
}

/* ------------------------------------------------ homepage 4-col (from 481px) */

/* A five-item flex row with a 25px gap, switched to a column only at <=480px —
   so at 481px the items were forced onto one line and overflowed.

   Wrapping alone does not fix it: the items are `flex-basis: 0` with grow, so they
   always "fit" no matter how narrow the row, and the line never breaks. Giving
   them a real basis is what lets wrapping happen — 200px is about the narrowest a
   product name reads at, so the row breaks into twos rather than crushing five
   columns until the headings spill out of them. */
.homepage-4col__grid {
	flex-wrap: wrap;
}

/* min-width: 0 alongside the basis, not instead of it. A flex item defaults to
   min-width: auto, so its min-content size — not the basis — decides where the
   line breaks; pairing 0 with the original basis of 0 was what let these crush
   instead of wrap. */
.homepage-4col__grid-item {
	flex: 1 1 200px;
	min-width: 0;
}

/* -------------------------------------- homepage static blocks (from 820px) */

/* Same shape of problem one breakpoint up: the flex row turns on at exactly
   820px, where three columns plus two 25px gaps do not fit. These blocks are
   `flex-basis: 0` too, so they need a real basis before the row will break — and
   more room than the 4-col items, since they carry 10% side padding. */
@media only screen and (min-width: 820px) {

	.homepage-static-blocks .inner {
		flex-wrap: wrap;
	}

	.homepage-static-block {
		flex: 1 1 280px;
		min-width: 0;
	}
}

/* ------------------------------------------- homepage latest (from 820px) */

/* Five post teasers, `flex: 1` (basis 0) — same story. */
@media only screen and (min-width: 820px) {

	.homepage-latest ul {
		flex-wrap: wrap;
	}

	.homepage-latest li {
		flex: 1 1 200px;
		min-width: 0;
	}
}

/* ------------------------------------------------ long headings (all widths) */

/* Post titles are editor-entered and some carry words long enough to beat their
   column on their own: the longest here needs 224px of content box, while the
   five-across desktop row gives each teaser 175px. So this one spilled at every
   width, before any of the wrapping above — narrowing the column only made it
   obvious. Let the words break instead, which is also what keeps a 200px basis
   safe once the rows wrap. */
.homepage-latest h4,
.homepage-4col__grid-item__content h3 {
	overflow-wrap: break-word;
}

/* --------------------------------------------- top bar crowding (from ~1025px) */

/* At 1025px the container has shrunk but the top bar still holds the logo,
   search, phone and Sign In with only 10px between the last two, so the phone
   number and the button label both wrapped to two lines. */
.topbar-inner {
	gap: 20px;
}

.topbar-inner__left {
	min-width: 0;
	gap: 16px;
}

.topbar-inner__right {
	gap: 12px;
	flex: 0 0 auto;
}

.topbar-inner__right--cta {
	margin-left: 0;
}

/* Keep both control labels on one line — they are short, and wrapping them is
   what made the bar look broken. */
.btn-call-cta,
.topbar-inner__right--cta .button {
	white-space: nowrap;
}

/* The search field is a fixed 180px plus a 40px button, but its flex container
   is allowed to shrink — so once the bar tightened, the field and button spilled
   out of their box and sat on top of the phone button. Let the field shrink with
   the bar instead of overflowing it. */
.topbar-inner__search {
	flex: 1 1 200px;
	min-width: 0;
}

.topbar-inner__search .header-search,
.topbar-inner__search .search-form {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
}

/* style.css pins `.topbar .search-form input { min-width: 180px }` below 1300px,
   which is what actually forced the overflow — matched here on specificity so it
   can shrink. */
.topbar .search-form input,
.topbar-inner__search .search-form input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.topbar-inner__search .search-submit {
	flex: 0 0 auto;
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {

	/* Trim the horizontal padding rather than let the labels wrap. */
	.btn-call-cta {
		padding: 10px 8px;
	}

	.topbar-inner__search {
		min-width: 0;
	}
}

/* ----------------------------------------- mobile menu toggle (to 1200px) */

/* Between 1025px and 1200px the header row hides .header-inner__left, leaving
   the nav as its only child; with .site-navigation { order: -1 } the hamburger
   ended up alone on the left in a black box, which read as a stray element.
   Send it to the right and let it sit as a plain dark icon on the white row. */
@media only screen and (max-width: 1200px) {

	#mega-menu-wrap-menu-1 .mega-menu-toggle {
		justify-content: flex-end;
		background: transparent;
	}

	/* MMM's generated CSS paints the bar and the icon bars, both with their own
	   theme settings; overriding here keeps the change to this breakpoint only
	   rather than changing the toggle everywhere. */
	#mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block,
	#mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated {
		background: transparent;
	}

	/* The generated rule for the icon bars carries the block class as well, so it
	   out-specifies a shorter selector — match it. */
	#mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner,
	#mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before,
	#mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after {
		background-color: var(--treg-nav-ink, #221f1c);
	}

	/* The nav shrink-wraps at these widths, so the toggle had no room to move
	   within it — let it take the leftover space. Basis 0 rather than width: 100%:
	   a nav asking for the full row makes the flex line overflow, and everything
	   including the logo block gets shrunk to compensate. */
	#masthead .site-navigation {
		flex: 1 1 0%;
		width: auto;
		min-width: 0;
	}
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {

	/* The nav is the only visible child of the header row at these widths, so it
	   no longer needs to come first. */
	#masthead .site-navigation {
		order: 0;
	}
}