/**
 * Responsive corrections for the location / area page bodies.
 *
 * WHAT WAS WRONG
 * --------------
 * style.css styles these pages twice: once at full size, and once inside
 * `@media (min-width: 320px) and (max-width: 767px)`. There is nothing in
 * between. So from 768px to 1239px - iPad portrait, iPad landscape, every
 * phone held sideways, and small laptops - the pages laid out at their fixed
 * desktop widths:
 *
 *   .looking-section { width: 1240px }
 *
 * inside a viewport of 768px. body carries `overflow-x: hidden`, which
 * propagates to the viewport, so the 472px sticking out was not scrollable.
 * It was simply chopped off. Every line of the main body copy on all 149
 * `areas` pages ended mid-word at the right edge of an iPad.
 *
 * Alongside that: two bootstrap rows escaped their section by the gutter
 * width, the banner's Contact Us button was `display: inline` so its white
 * pill broke apart when the label wrapped, and every heading was a fixed
 * pixel size that never scaled between the two extremes.
 *
 * SCOPE
 * -----
 * Everything here is scoped to the three body classes this slice renders as.
 * That is not decoration. `.looking-section`, `.care-planning-section`,
 * `.tag-line-section`, `.faq-Sectionnew`, `.forklift-for-box-sec` and
 * `.lacation_section` are also used by single-service.php and
 * single-training.php, which belong to other people. The same bug is almost
 * certainly present there; fixing it there is not this file's job.
 *
 * Nothing here touches the header, the orange utility bar, the navigation,
 * the footer, or the `.acl-links` cross-link block.
 *
 * @package acclaim-child
 */

/* Fluid type ramps, measured 375px -> 1440px against the sizes the design
   already used at each end (h1 50px, section headings 45px). */
.single-areas,
.single-locations_post,
.page-template-locations {
	--acl-geo-h1: clamp(1.75rem, 1.266rem + 2.066vw, 3.125rem);   /* 28 -> 50 */
	--acl-geo-h2: clamp(1.5rem, 1.038rem + 1.972vw, 2.8125rem);   /* 24 -> 45 */
	--acl-geo-h3: clamp(1.25rem, 1.03rem + 0.94vw, 1.875rem);     /* 20 -> 30 */
}

/* ------------------------------------------------------------------ *
 * 1. Structure: nothing may be wider than the viewport it sits in.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {

	/* Was a hard 1240px. Now it is the ceiling rather than the width, and the
	   15px of side padding replaces what the row's negative gutters used to
	   borrow from the page, so the content box is unchanged above 1270px. */
	.single-areas .looking-section {
		width: auto;
		max-width: 1270px;
		padding-left: 15px;
		padding-right: 15px;
	}

	/* .care-planning-section is width:100% with 5px of padding, so the row's
	   -15px bootstrap gutters hung 10px off both edges at every width,
	   including desktop. The columns keep their own 15px padding, so the
	   content does not move. */
	.single-areas .care-planning-section .row {
		margin-left: 0;
		margin-right: 0;
	}

}

/* 100px of side padding on the banner is a third of a 768px screen, and it is
   what squeezed the Contact Us column down to 149px. Desktop keeps its 100px. */
@media (min-width: 768px) and (max-width: 1199.98px) {

	.single-areas .tag-line-section {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* The ten WPBakery-authored area pages carry a `.vc_section` with
   `margin: 0 -15px`, bleeding its orange background 15px past both edges.
   Its own 15px padding means no text lives in that strip, so clipping the
   wrapper loses nothing and costs no layout. `clip` rather than `hidden`:
   it does not create a scroll container and does not break sticky children. */
.single-areas .wpbakery-area-wrapper {
	overflow-x: clip;
}

/* ------------------------------------------------------------------ *
 * 2. The 768-991 band: two-column splits that have no room to be two
 *    columns. Above 992 the original proportions are left alone.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 991.98px) {

	.single-areas .looking-section .col-md-4,
	.single-areas .looking-section .col-md-8 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* 50px of right padding on a 246px column left ~180px for a heading. */
	.single-areas .looking-section .col-md-4 {
		padding-right: 15px !important;
	}

	/* Right-aligned headings only read as right-aligned against a second
	   column. Once stacked they just look like a mistake. */
	.single-areas .looking-section h6,
	.single-areas .looking-section h2,
	.single-areas .looking-section .sub_head_sec {
		text-align: left;
	}

	/* The orange rule was the divider between the two columns. */
	.single-areas .looking-section .col-md-8:after {
		display: none;
	}

	.single-areas .care-planning-section .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Stacked, the background-image column no longer inherits the text
	   column's height - which was 1424px at 768px wide. */
	.single-areas .care-planning-image {
		min-height: 320px;
	}
}

/* ------------------------------------------------------------------ *
 * 3. Type that scales instead of jumping 50px -> 30px at 767.
 * ------------------------------------------------------------------ */

/* The ramps top out at exactly the sizes the design already used - h1 50px,
   section headings 45px - so a desktop page renders unchanged. */
.single-areas .tag-line-section h1 {
	font-size: var(--acl-geo-h1) !important;
}

.single-areas .looking-section h2,
.single-areas .looking-section .sub_head_sec,
.single-areas .care-planning-section h2,
.single-areas .contact-section-traning h2,
.single-areas .faq-Sectionnew .col-md-12.text-center h2,
.single-areas .faq-Sectionnew .faz-head h2,
/* The closing "Contact Your Nearest ... Depot To <place>" band, and the
   converted pages' CTA heading in the same slot. Same 45px/30px split. */
.single-areas .contact-heading h2,
/* sidebar-4's "Forklift For Hire From Only GBP 85!" band. */
.single-areas .forklift-for-box-sec h2 {
	font-size: var(--acl-geo-h2) !important;
}

/* Leading is the one thing that cannot be shared with desktop: these headings
   carry fixed pixel line-heights (52px on the h1, 44px and 68px on the h2s)
   that are proportionate at 45-50px and absurd at 28px. Proportional leading
   below 1200px only, so desktop keeps the spacing it was designed with. */
@media (max-width: 1199.98px) {

	.single-areas .tag-line-section h1 {
		line-height: 1.15 !important;
	}

	.single-areas .looking-section h2,
	.single-areas .looking-section .sub_head_sec,
	.single-areas .care-planning-section h2,
	.single-areas .contact-section-traning h2,
	.single-areas .faq-Sectionnew .col-md-12.text-center h2,
	.single-areas .faq-Sectionnew .faz-head h2,
/* The closing "Contact Your Nearest ... Depot To <place>" band, and the
   converted pages' CTA heading in the same slot. Same 45px/30px split. */
.single-areas .contact-heading h2,
	.single-areas .forklift-for-box-sec h2 {
		line-height: 1.2 !important;
	}
}

/* The page-builder pages set their heading sizes inline, so this has to be
   !important to reach them, and is held to the two geo templates that
   actually render builder content. */
@media (max-width: 1199.98px) {

	.single-areas .wpbakery-area-wrapper h1,
	.single-areas .wpbakery-area-wrapper h1.vc_custom_heading,
	.single-locations_post h1.vc_custom_heading {
		font-size: var(--acl-geo-h1) !important;
		line-height: 1.15 !important;
	}

	.single-areas .wpbakery-area-wrapper h2.vc_custom_heading,
	.single-locations_post h2.vc_custom_heading,
	.single-locations_post .text_style,
	.page-template-locations h2.vc_custom_heading {
		font-size: var(--acl-geo-h2) !important;
		line-height: 1.2 !important;
	}
}

/* Depot pages: the contact heading was `style="font-size: 45px"` in the
   template. The inline size is gone (see single-locations_post.php); this
   is what replaces it. */
.single-locations_post .loc-contact-heading {
	font-size: var(--acl-geo-h2);
	line-height: 1.2;
	text-align: center;
}

.single-locations_post .location_box h3,
.page-template-locations .result_box h3 {
	font-size: var(--acl-geo-h3);
	line-height: 1.25;
}

/* ------------------------------------------------------------------ *
 * 4. Components whose own box stopped containing their text.
 * ------------------------------------------------------------------ */

/* `display: inline` meant the white pill was a run of inline fragments: when
   "Contact Us" wrapped, the background broke into two boxes and the label sat
   outside both. It only ever got `inline-block` below 768px. */
.single-areas .tag-line-section .contact-btn {
	display: inline-block;
	white-space: nowrap;
}

/* Long place names in a narrow column ("Forklift Hire Tyne and Wear"). */
.single-areas .tag-line-section h1,
.single-areas .looking-section h2,
.single-areas .contact-section-traning h2,
.single-locations_post .location_box h3 {
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ *
 * 5. Landscape phones are ~390px tall. A 500px map (set inline in both
 *    templates) is taller than the whole viewport.
 * ------------------------------------------------------------------ */

@media (max-height: 500px) and (orientation: landscape) {

	.single-areas #map_canvas,
	.page-template-locations #map_canvas {
		height: 300px !important;
	}

	.single-locations_post #map_inner {
		min-height: 260px;
	}
}

/* The BOOK NOW modal is pinned with `position: absolute; top: 50%;
   transform: translate(-50%, -50%)`. Its content is 524px tall, so on a
   390px landscape phone the dialog starts at -67px: the "Book Now" heading
   and the x button (itself absolutely placed at the dialog's top right) are
   above the viewport, and because the dialog is taken out of flow the
   modal's own `overflow-y: auto` cannot scroll back up to them. There was no
   way to close it except by hitting the backdrop.

   Put the dialog back in normal flow when the viewport is too short to
   centre it, and the modal scrolls as bootstrap intends.

   Held to .single-areas: #book_now_hire is also rendered by
   single-training.php, which is not this slice's to change. */
@media (max-height: 640px) {

	.single-areas #book_now_hire .modal-dialog {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		margin: 20px auto !important;
	}
}