/* ==========================================================================
   RESPONSIVE
   Breakpoint overrides. Design-Brief.md sections 4.4 and 4.6.
   Breakpoints: 1300 / 1260 / 1022 / 767 / 570 / 430.
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1260px  container steps down to 970px
   -------------------------------------------------------------------------- */

@media (max-width: 1260px) {

	.container {
		max-width: var(--container-md);
	}
}

/* 1101 to 1260px: one line, as the reference shows at 1140.

   The row needs 1053px and the 970px container gives it 930px. Two ways to
   close a 123px gap: shrink everything by about a fifth, which is what the
   reference does and which would take the accessibility controls from 44px to
   about 35px; or give the header more width and trim only what is safe to
   trim. The controls stay 44px, because 44px targets are a reserved area of
   the brief and this audience is exactly who they are for.

   So the header alone drops the 970px container and runs to the viewport
   gutter, and the wordmark, the mark and the search box come down a step.
   Body content below is untouched and still steps to 970px. */

@media (min-width: 1101px) and (max-width: 1260px) {

	/* The header alone runs full width here. Body content below keeps the
	   970px container, so the two do not align at this band. That is
	   deliberate: aligning them means fitting 938px of controls into 930px of
	   content, which leaves the brand and the utilities almost touching. A
	   full width bar with a real gap between the two groups reads better than
	   a correctly aligned one with no breathing space. 48px of gutter rather
	   than the mobile 20px so it does not sit flush to the glass. */

	.site-header {
		--header-gutter: 48px;
	}

	.site-header .container {
		max-width: none;
		padding-inline: var(--header-gutter);
	}

	/* The burger is absolutely positioned against the row, so it is placed
	   from the row's border box, not from its content box. With the row
	   padded to 48px and the burger still on the 20px mobile inset, MENU sat
	   28px outside the content edge, hard against the glass while everything
	   above and below it stopped short. Both now read the same token, so the
	   two cannot drift apart again. */

	.burger {
		right: var(--header-gutter);
	}

	.header-lockup {
		flex: 0 0 auto;
		gap: 16px;
	}

	.header-lockup__logo svg {
		height: 52px;
	}

	.header-lockup__wordmark {
		font-size: 30px;
	}

	.header-utility {
		gap: 16px;
	}

	input.search-form__input {
		width: 108px;
	}
}

/* --------------------------------------------------------------------------
   <= 1100px  the header goes to its mobile form

   This used to happen at 767px, and the band in between got a header that
   wrapped: the lockup on one line, then the utility group on a second, then
   the group wrapping again onto a third. Three stacked rows and a 288px
   header, which looked broken rather than responsive.

   1100px rather than 1022px because the one line treatment runs out of room
   before the container does. The lockup and the utility group need about
   938px between them, and the gap between "Ageing Well" and "back to main
   website" closes at 1px per 1px of viewport: 106px at 1140, 26px at 1060,
   and exactly 0 at 1023, where the wordmark touches the link. Switching at
   1100 leaves 66px there, so the two groups still read as two groups right
   up to the moment the mobile header takes over.

   Nothing becomes unreachable: the overlay menu carries the search box and
   the accessibility toolbar below this width. js/overlay-menu.js reads the
   same breakpoint and the two must move together.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

	/* Header drops to 72px: 12 + 44 + 12 + the 4px gold border (8.1).
	   Strip two is hidden and the burger moves into strip one. Layout follows
	   design specimen 1b, "Homepage mobile 390", the only drawn mobile layout
	   in the bundle, except that the lockup is left aligned rather than
	   centred: see the note on that below. */

	.site-header__strip-one {
		padding: 12px 0;
	}

	.site-header__strip-two {
		display: none;
	}

	/* Two tracks, not justify-content: center. Centring the lockup in the
	   full row while the burger sat on top of it as an absolute box is what
	   produced the overlap: nothing reserved the burger's width, so the
	   nowrap wordmark ran straight underneath MENU. It collided by 10px at
	   375px and by more at 320px. The burger is now a real grid item, so the
	   lockup can never reach it at any width. */

	.site-header__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
	}

	/* Left aligned, not centred.

	   Specimen 1b centres the lockup in the 390px sheet, and that is what was
	   built. On a real handset it reads as drifting: the logo floats away from
	   the left edge with no other anchor, while MENU stays pinned right, and
	   the two look unrelated rather than like one bar. Left aligning puts the
	   mark on the same 20px gutter as the breadcrumb, the h1 and the body copy
	   underneath it, so the whole page shares one left edge. Deliberate
	   departure from 1b, on instruction. */

	.header-lockup {
		gap: 12px;
		justify-self: start;
		min-height: 44px;
	}

	.burger {
		position: static;
		justify-self: end;
		transform: none;
	}

	/* The back link, search box and accessibility toolbar do not fit a 72px
	   header. Hidden here and rehomed: js/overlay-menu.js moves the search box
	   and the toolbar into the overlay panel, so nothing becomes unreachable.
	   That JS reads the same 1022px breakpoint as this block. */
	.header-utility {
		display: none;
	}

	/* Between 768 and 1100 there is room for the mark and wordmark at close
	   to their desktop size, so they only step down at the 767px break where
	   8.1 asks for 22px. A 22px wordmark on a 1000px screen looks lost. */

	.header-lockup__logo svg {
		height: 44px;
	}

	.header-lockup__wordmark {
		font-size: 30px;
	}
}

/* --------------------------------------------------------------------------
   <= 1260px  the footer band stacks

   "Further information" and the five links share one row at 1200px. Below
   that the links wrapped while still right aligned, so they broke into a
   ragged 3 + 2 block hard against the right edge with a large hole beside the
   heading. Stacking them left aligned reads as one list instead of two rows
   of leftovers.
   -------------------------------------------------------------------------- */

@media (max-width: 1260px) {

	.footer-band__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.footer-menu__list {
		justify-content: flex-start;
		gap: 16px 32px;
	}
}

/* --------------------------------------------------------------------------
   <= 1022px  container 718px, type step one, main padding 40px
   -------------------------------------------------------------------------- */

@media (max-width: 1022px) {

	:root {
		--fs-h1: 34px;
		--fs-h2: 30px;
		--fs-h3: 24px;
		--fs-h4: 24px;
		--main-pad-top: 40px;
	}

	.container {
		max-width: var(--container-sm);
	}

	/* Card titles take their own scale (4.5): 32 desktop, 20 tablet, 23 mobile. */
	.card__title {
		font-size: 20px;
	}

	/* Card grid goes one across at and below 1022px (6.1), earlier than the
	   generic grid helpers, which collapse at 767px. */
	.cards--3 {
		grid-template-columns: 1fr;
	}

	/* Intro row stacks: the 100px gap is a desktop measure. */
	.home-intro {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* --------------------------------------------------------------------------
   <= 767px  container 555px, columns collapse
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.container {
		max-width: var(--container-xs);
	}

	.cols,
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
	}

	.cols--home,
	.cols--inner {
		gap: var(--grid-gap);
	}

	/* Leaf page columns stack; the 80px gap is a desktop measure. */
	.leaf .wp-block-columns {
		flex-direction: column;
		gap: 40px;
	}

	/* Specimen 1b draws the mark at roughly 39px wide against a 22px
	   wordmark. At 44px tall ours was 56px wide, which is what made the
	   lockup too wide to sit beside MENU at 320px. min-height on the anchor
	   above keeps the tap target at 44px even though the mark is smaller. */

	.header-lockup__logo svg {
		height: 32px;
	}

	/* 22px below 767px, per 8.1. var(--fs-h4) is 24px until the 570px step,
	   so the wordmark was rendering 24px between 767 and 571. */

	.header-lockup__wordmark {
		font-size: 22px;
	}

	/* Footer stacks, following specimen 1b.

	   Social panel: four icons on one row. At 32px panel padding the row
	   needed 248px (4 x 44 + 3 x 24) inside 246px of content and the fourth
	   icon wrapped to a line of its own, which is what made the panel read as
	   a tall empty box with one icon adrift in it. 24px padding and a 16px
	   gap need 224px inside 232px at 320px, so all four hold one line at
	   every width down to 320. Targets stay 44px. */

	.social-panel {
		padding: 24px;
	}

	.social-panel__list {
		gap: 16px;
	}

	/* Two across, as 1b draws them. Four columns at 375px gave each logo
	   53.5px, well under the 44px minimum height once scaled. */

	.partner-logos {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
		padding-top: 32px;
	}

	/* The white gap above Further information was 128px: 56px of footer-top
	   padding plus 72px of band margin. 1b brings the gold rule up close
	   behind the logos. 32 + 40 = 72px total. */

	.footer-top {
		padding-bottom: 32px;
	}

	.footer-band {
		margin-top: 40px;
	}

	.footer-band__row {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.footer-band__heading {
		text-align: center;
	}

	/* One link per line, centred. The list kept justify-content: flex-end
	   from the desktop rule while wrapping at a 48px gap, which is what made
	   the links ragged and right-aligned. 1b stacks them centred. */

	.footer-menu__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 0;
		width: 100%;
	}

	.footer-menu__list a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   <= 570px  container 350px, type step two, main padding 20px
   -------------------------------------------------------------------------- */

@media (max-width: 570px) {

	:root {
		--fs-h1:   30px;
		--fs-h2:   26px;
		--fs-h3:   23px;
		--fs-h4:   22px;
		--fs-body: 18px;
		--main-pad-top: 20px;
	}

	.container {
		max-width: var(--container-xxs);
	}

	/* Card padding drops to 30px on mobile (4.5). */
	.card__inner {
		padding: 30px;
	}

	/* Card title returns to 23px on mobile, per the scale in 4.5. */
	.card__title {
		font-size: 23px;
	}
}

/* --------------------------------------------------------------------------
   <= 430px
   Reserved. No overrides required by the brief at this step yet.
   -------------------------------------------------------------------------- */