/* =========================================================================
   Batley Pharmacy — responsive
   Loaded last so these rules win without needing extra specificity.

   Most layout in this theme is intrinsically responsive: containers use
   fluid padding, grids use auto-fit + minmax, and type uses clamp(). What
   follows handles the changes that genuinely need a breakpoint — chiefly
   swapping the desktop menu for the mobile panel.

   Breakpoints
     1400px+   large desktop
     1200px+   desktop
     1200px+   the navigation switch — the pill bar needs this to fit
      992px+   laptop — the hero overlay's lower bound
      768px+   tablet
      576px+   mobile landscape
      < 576px  mobile portrait
      < 380px  small handsets
   ========================================================================= */

/* -------------------------------------------------------------------------
   Large desktop — allow the layout a little more room
   ---------------------------------------------------------------------- */

@media (min-width: 1400px) {
	:root {
		--container-max: 1280px;
	}
}

/* -------------------------------------------------------------------------
   Wide screens - the page stops at the design's 1440 and centres

   The designs are drawn at 1440 and the site is built to that width.
   Past it nothing grows: the root font size holds at 16px, the wide
   container holds at its 1374 (plus 40px either side) and the page
   sits in the middle of the screen with the body's white either side.
   The footer's panel is capped at the same 1374 in sections.css, so the
   hero, the panels and the footer share one edge at every width and
   nothing reads as boxed under something wider.

   Until 2026-10-20 a block here grew the root font size and both
   containers with the viewport from 1440 up to 1920, so the page filled
   a wide screen at the design's proportions. Building to 1440 instead
   was decided on that date; the block was removed rather than kept
   behind a switch, because every composition in cqw already scales
   with its panel and needs nothing from here.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Navigation switch — measured, not guessed: the logo, five pills and the
   Contact Us button need about 1200px before they all fit on one row, so
   the pill bar hands over to the hamburger below that. (At the old 992px
   switch the button overflowed the viewport edge between 992 and 1150.)
   ---------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.nav-toggle {
		display: none;
	}

	/* The panel is fixed-position, so it must be removed outright rather
	   than merely made transparent. */
	.mobile-nav {
		display: none;
	}
}

@media (max-width: 1199.98px) {
	.primary-nav {
		display: none;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.mobile-nav {
		inset-block-start: 5rem;
	}
}

/* The bar at its design sizes needs the full 1280: between the switch and
   1400 the items close up, the type drops a size and the buttons lose
   some padding, so the five items and both buttons still sit on one row. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.site-header__inner {
		gap: var(--space-sm);
	}

	.site-branding img,
	.custom-logo {
		max-height: 2rem;
	}

	.nav-pills {
		gap: 1rem;
	}

	.nav-pills__pill {
		font-size: 0.875rem;
	}

	.site-header__cta {
		padding-inline: 1rem;
	}
}

/* -------------------------------------------------------------------------
   Below laptop — the dense layouts stack
   ---------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	/* ---------------------------------------------------------------------
	   Hero below the desktop overlay: the same character, recomposed for
	   portrait. The photograph becomes a covering background layer and the
	   content column sits on top of it in normal flow, so the frame is
	   always exactly as tall as its content needs — text can never outgrow
	   the picture. The pale wash on the photograph's left keeps the dark
	   heading legible, and a scrim shades the foot for the white claims,
	   just as the desktop composition reads.
	   ------------------------------------------------------------------ */

	/* The frame itself is the flex column: the lead, claims and scroll cue
	   are its direct children (only the title, button and review card live
	   inside the panel), so the frame is the one ancestor that can order
	   them all. The panel dissolves so its three join the same flow. */
	.hero__frame {
		container-type: normal;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
		min-height: clamp(30rem, 140vw, 38rem);
		padding: clamp(1rem, 4.5vw, 1.75rem);
		border-radius: var(--radius-xl);
		overflow: hidden;
	}

	.hero__photo {
		position: absolute;
		inset: 0;
		height: 100%;
		object-fit: cover;
		/* Show the team through the frame's middle; the wash overlay below
		   keeps the heading legible above them. */
		object-position: 60% center;
	}

	/* Recreates the photograph's own pale wash behind the heading, and
	   shades its foot for the white claims — the desktop reading, redrawn
	   for a portrait crop. */
	.hero__frame::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		z-index: 1;
		height: 60%;
		background: linear-gradient(180deg, rgba(255, 244, 240, 0.95) 0%, rgba(255, 244, 240, 0.82) 55%, transparent 100%);
		pointer-events: none;
	}

	.hero__frame::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		z-index: 1;
		height: 38%;
		background: linear-gradient(180deg, transparent, rgba(9, 32, 63, 0.62));
		pointer-events: none;
	}

	.hero__panel {
		display: contents;
	}

	/* In flow, but positioned so they paint above the wash and scrim. */
	.hero__title,
	.hero__cta,
	.hero__proof,
	.hero__stats,
	.hero__lead {
		position: relative;
		z-index: 2;
		width: auto;
		left: auto;
		right: auto;
		top: auto;
	}

	/* The markup orders these for the desktop overlay; the flex column
	   re-reads them: promise, lead, action, proof — then the claims at the
	   foot. */
	.hero__title {
		order: 1;
		width: 100%;
		font-size: var(--fs-heading);
		line-height: 1.35;
	}

	.hero__lead {
		order: 2;
		max-width: 30rem;
		font-size: var(--fs-lead);
	}

	.hero__cta {
		order: 3;
		gap: var(--space-2xs);
		padding: 0.5rem 0.5rem 0.5rem 1.5rem;
		font-size: var(--fs-body);
	}

	.hero__cta-icon {
		width: 2.25rem;
		height: 2.25rem;
	}

	.hero__cta-icon svg {
		width: 1.125rem;
		height: 1.125rem;
	}

	/* The review card keeps its desktop treatment — white boxes floating on
	   the photograph — only sized in rem instead of frame units. */
	.hero__proof {
		order: 4;
		position: relative;
		margin-top: var(--space-2xs);
		width: min(19rem, 100%);
	}

	.hero__proof {
		/* The cqw sizes above have no container at this width. */
		--proof-step: 0.7rem;
	}

	.hero__proof-faces {
		padding: 0.9rem 0.9rem 0.3rem;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}

	.hero__faces li + li {
		margin-left: -0.4rem;
	}

	.hero__faces img {
		width: 2.25rem;
		height: 2.25rem;
		border-width: 2px;
	}

	.hero__proof-link {
		top: 0;
		right: 0;
		width: 3.5rem;
		height: 3.5rem;
	}

	.hero__proof-link svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.hero__proof-text {
		padding: 0.7rem 0.9rem 1.1rem;
		border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
		font-size: var(--fs-sm);
		line-height: 1.7;
	}

	/* The claims ride the scrim at the foot of the photograph, in white,
	   exactly as they do on desktop. */
	.hero__stats {
		order: 5;
		margin-top: auto;
		padding-top: var(--space-md);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: var(--space-sm) var(--space-lg);
	}

	.hero__stat {
		gap: 0.15rem;
	}

	.hero__stat-value {
		font-size: var(--fs-body);
	}

	.hero__stat-label {
		font-size: var(--fs-xs);
	}

	/* The cue pointed down a composition that now sizes to its content. */
	.hero__scroll {
		display: none;
	}

	/* Three fixed footer columns become however many fit. */
	.site-footer__columns {
		grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	}
}

/* -------------------------------------------------------------------------
   "Care you can book today"

   The composition is a 1200px design: copy in a 305px column, then three
   card columns of 299 / 260 / 207. Below that width the narrowest column
   stops being able to hold a sentence, so it is unwound in two steps.
   ---------------------------------------------------------------------- */

/* Step one: the copy moves above the cards, which keep all three columns and
   the full width of the container to themselves. */
@media (max-width: 1199.98px) {
	.popular__inner {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.popular__copy {
		padding-top: 0;
	}

	.popular__text {
		max-width: 44rem;
	}
}

/* Step two: the paired columns are dissolved and the six cards flow on their
   own. display:contents lets them leave their wrappers without a second set of
   markup.

   They flow into CSS columns rather than a grid. A grid would align the cards
   into rows, and since a portrait photograph is roughly twice the height of a
   panel, every row would be padded out to the tallest card in it — a column of
   holes. Multi-column packs them top to bottom with nothing left over, which
   is the behaviour the staggered desktop layout had anyway. */
@media (max-width: 899.98px) {
	.popular__col {
		display: contents;
	}

	.popular__cards {
		display: block;
		columns: 2;
		column-gap: var(--space-md);
	}

	.popular-card {
		/* Multi-column would otherwise split a card across the break. */
		break-inside: avoid;
		margin-bottom: var(--space-md);
	}

	/* Nothing is absorbing leftover height any more, so the panels size to
	   their own text and the photographs keep their ratio. */
	.popular-card--panel {
		flex: none;
		min-height: 0;
		padding: var(--space-lg) var(--space-md);
	}

	.popular-card__label {
		width: min(88%, 15rem);
	}

	/* The featured pair — wide beside tall — has no room to sit side by side. */
	.blog__featured {
		grid-template-columns: 1fr;
	}

	/* The three staggered review columns dissolve the same way the cards
	   section does: wrappers become display:contents and the cards flow into
	   however many columns fit, at their natural heights. */
	.reviews-col {
		display: contents;
	}

	.reviews-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
		gap: var(--space-md);
	}

	.reviews-col .review-card,
	.reviews-col .review-card--featured,
	.reviews-col .review-card + .review-card,
	.reviews-col .google-card {
		flex: none;
	}
}

/* -------------------------------------------------------------------------
   Tablet and below
   ---------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	/* The call to action still appears inside the mobile panel, so hiding it
	   in the bar does not remove it from the page. */
	.site-header__cta {
		display: none;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-footer__legal {
		text-align: left;
	}

	.post-navigation .nav-next {
		text-align: left;
	}

	.entry-content ul,
	.entry-content ol {
		padding-left: 1.125rem;
	}

	/* The plane can hang further out at desktop widths; on a phone the panel
	   is the full container, so rein it in before it clips at the viewport. */
	.travel__plane {
		left: -8%;
		width: 92%;
	}
}

/* -------------------------------------------------------------------------
   Mobile landscape and below
   ---------------------------------------------------------------------- */

@media (max-width: 575.98px) {
	/* Two columns of cards this narrow would leave the panels a word per line. */
	.popular__cards {
		columns: 1;
	}

	.post-grid {
		gap: var(--space-md);
	}

	.section__header {
		margin-bottom: var(--space-lg);
	}

	.comment-list .children {
		padding-left: var(--space-2xs);
	}

	.btn {
		padding: 0.75rem 1.375rem;
	}

	/* Stacking beats letting a long label push the row sideways. */
	.search-form {
		flex-wrap: wrap;
	}

	.search-form .search-field {
		flex-basis: 100%;
	}
}

/* -------------------------------------------------------------------------
   Small handsets
   ---------------------------------------------------------------------- */

@media (max-width: 359.98px) {
	:root {
		/* Buy back a little horizontal room on very narrow screens. The phone
		   design (2026-10-26) is drawn at 375 with the 16px gutter, so this
		   starts below it. */
		--container-pad: 0.875rem;
	}

	.site-branding img,
	.custom-logo {
		max-height: 2.25rem;
	}

	.review-card,
	.card__body,
	.service-card {
		padding: var(--space-sm);
	}
}

/* -------------------------------------------------------------------------
   Short viewports — a landscape phone has very little height
   ---------------------------------------------------------------------- */

@media (max-height: 480px) and (max-width: 991.98px) {
	.mobile-nav {
		padding-block: var(--space-md);
	}

	.mobile-nav .nav__link {
		padding-block: 0.625rem;
		font-size: var(--fs-body);
	}
}

/* -------------------------------------------------------------------------
   Print
   ---------------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.mobile-nav,
	.nav-toggle,
	.pagination,
	.post-navigation,
	.comments-area {
		display: none;
	}

	body {
		color: #000;
		background: #fff;
	}

	.entry-content a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}

/* -------------------------------------------------------------------------
   The phone design (2026-10-26): the header and the footer

   The logo at 110 wide. In the footer, the quick links and the legal
   links indented a step; a map pin and a handset before the address and
   the number; the social profiles (where the Customizer has their URLs)
   as 40px blue discs; the NHS mark on the right; and the legal bar
   stacked, the links first and the copyright under them.
   ---------------------------------------------------------------------- */

/* The icon before a contact line is the phone design's; above the phone
   layout the footer is the 2026-10-21 design, which has none. */
.footer-lines__icon {
	display: none;
}

@media (max-width: 575.98px) {
	.site-branding img,
	.custom-logo {
		max-height: 1.375rem;
	}
}

@media (max-width: 767.98px) {
	/* The page's own gutter either side (16px at 375), as the design draws
	   the footer. A rule printed inline after the stylesheets widens it to
	   24 on narrow screens, so this one carries the extra class to win. */
	.site-footer .site-footer__panel {
		padding-inline: var(--container-pad);
	}

	.footer__heading {
		margin-bottom: 1.5rem;
	}

	.footer-lines {
		font-size: 1rem;
	}

	/* The element selectors are load-bearing: base.css's ul[class] reset
	   outranks a lone class, so a class alone could never win the indent. */
	ul.footer-menu {
		gap: 1rem;
		padding-inline-start: 1rem;
	}

	ul.footer-lines--contact {
		padding-inline-start: 1rem;
		font-size: var(--fs-sm);
	}

	.footer-lines--contact li {
		display: flex;
		gap: 0.75rem;
		align-items: flex-start;
	}

	.footer-lines__icon {
		display: inline-flex;
		flex-shrink: 0;
		margin-block-start: 0.1rem;
		color: #1d66ac;
	}

	ul.social-links {
		gap: 0.625rem;
		margin-top: 1.5rem;
		padding-inline-start: 1rem;
	}

	.social-links__link {
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background: var(--color-primary);
		color: #ffffff;
	}

	.social-links__link:hover {
		background: var(--color-primary-hover);
		color: #ffffff;
	}

	.nhs-badge {
		display: flex;
		width: fit-content;
		margin: 5.5rem 0 0 auto;
	}

	.nhs-badge__text {
		color: #262023;
	}

	.site-footer__bottom {
		gap: 1.25rem;
		padding-top: 2rem;
	}

	.site-footer__bottom > nav,
	.site-footer__bottom > .legal-menu {
		order: -1;
	}

	ul.legal-menu {
		flex-direction: column;
		gap: 1.25rem;
		padding-inline-start: 1rem;
	}

	.legal-menu li {
		padding-inline: 0;
	}

	.legal-menu li + li {
		border: 0;
	}

	.site-footer__copyright,
	.site-footer__credit {
		font-size: var(--fs-xs);
	}
}