/* KPDDI additions — template look preserved, template palette only (#282A43 navy, #EFC940 yellow).
   1. Readability scrim over hero photos (template demo photos had darkness baked in; real photos need it
      for WCAG contrast of white hero text and the transparent header's white menu).
   2. Hero CTA row: template hero shipped one button; this lays out two without altering button styles.
   3. Filled hero button gets navy text: .promo-slider__button forces white, which fails contrast on yellow. */

.promo-slider__item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(40, 42, 67, 0.55), rgba(40, 42, 67, 0.35));
	z-index: 1;
}

.promo-slider__item .container {
	position: relative;
	z-index: 2;
}

/* Focal point for the hero photo: template default is top-anchored, which would crop
   to ceiling/walls on wide screens; this keeps the children and the book in frame. */
.promo-slider__item .img--bg {
	-o-object-position: center 62%;
	object-position: center 62%;
}

.promo-cta-row {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.promo-cta-row .promo-slider__button {
	margin-top: 35px;
	width: auto;
	max-width: none;
	white-space: nowrap;
}

.promo-slider__button.button--filled {
	color: #282a43;
}

.promo-slider__button.button--filled:hover {
	color: #282a43;
}

/* Hero H1 line boxes: the template sized only the inner span responsively (36→90px);
   the heading element itself (h2 in the template, h1 in this build) keeps 70px metrics
   at every width, so below 992px small glyphs sit in oversized line boxes. Mirror the
   span's scale on the h1 so line spacing tracks the visible text size. */
.promo-slider__item--style-1 .promo-slider__title {
	font-size: 36px;
	line-height: 1.4;
}

@media only screen and (min-width: 576px) {
	.promo-slider__item--style-1 .promo-slider__title {
		font-size: 42px;
		line-height: 60px;
	}
}

@media only screen and (min-width: 768px) {
	.promo-slider__item--style-1 .promo-slider__title {
		font-size: 50px;
		line-height: 70px;
	}
}

@media only screen and (min-width: 992px) {
	.promo-slider__item--style-1 .promo-slider__title {
		font-size: 70px;
		line-height: 90px;
	}
}

@media only screen and (min-width: 1200px) {
	.promo-slider__item--style-1 .promo-slider__title {
		font-size: 80px;
		line-height: 100px;
	}
}

@media only screen and (min-width: 1367px) {
	.promo-slider__item--style-1 .promo-slider__title {
		font-size: 90px;
		line-height: 110px;
	}
}

/* Readability scrim for the info-box (white text sits directly on the photo in the template). */
.info-box::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(40, 42, 67, 0.55);
	z-index: -1;
}

/* Get-involved band: display word set in Quicksand instead of the Storytella script
   (script face is illegible for low-vision readers). Size clamped because Quicksand
   runs much wider than the script it replaces. */
.text-section__heading,
.text-section .text-section__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(70px, 13vw, 190px);
	line-height: 1.1;
	margin-top: 0;
}

.text-section {
	overflow: hidden;
}

/* Generic left-aligned CTA row (promo-cta-row is the centered hero variant). */
.cta-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.cta-row--center {
	justify-content: center;
}

/* Plain full-width photo in programme split sections. */
.programme-img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Mobile header ------------------------------------------------------ */

/* On phones the top bar carries only the hamburger; the full logo lives in
   the slide-out menu instead (see .aside-dropdown__item--logo). The bar floats
   transparent over the hero (white hamburger); once scrolled, the template's
   header--fixed state paints it white and its own rules turn the lines dark. */
@media (max-width: 575.98px) {
	.header-logo {
		display: none;
	}

	header.header {
		padding: 10px 8px;
	}

	.header--front:not(.header--fixed),
	.header--inner:not(.header--fixed) {
		background: transparent;
		box-shadow: none;
	}

	/* The mobile trigger carries Bootstrap's d-block (display:block !important),
	   which defeats flex centering — so the line stack (17px tall: line + two
	   offsets below) is centered absolutely inside the 44px tap target instead. */
	.dropdown-trigger {
		position: relative;
		width: 48px;
		height: 44px;
	}

	.dropdown-trigger__item {
		position: absolute;
		top: 13px;
		left: 50%;
		transform: translateX(-50%);
	}

	.dropdown-trigger__item,
	.dropdown-trigger__item::before,
	.dropdown-trigger__item::after {
		width: 30px;
		height: 3px;
	}

	.header--front:not(.header--fixed) .dropdown-trigger__item,
	.header--front:not(.header--fixed) .dropdown-trigger__item::before,
	.header--front:not(.header--fixed) .dropdown-trigger__item::after,
	.header--inner:not(.header--fixed) .dropdown-trigger__item,
	.header--inner:not(.header--fixed) .dropdown-trigger__item::before,
	.header--inner:not(.header--fixed) .dropdown-trigger__item::after {
		background: #fff;
	}

	header.header.header--fixed {
		background: #fff;
		box-shadow: 0 3px 10px 2px rgba(0, 0, 0, 0.04);
	}
}

.aside-dropdown__item--logo {
	padding-bottom: 0;
}

.aside-logo {
	display: block;
	max-width: 220px;
	height: auto;
}

/* --- Accessibility layer ------------------------------------------------ */

/* Skip link: first focusable element on every page. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: #282a43;
	color: #fff;
	padding: 12px 24px;
	font-weight: 700;
	border-radius: 0 0 8px 0;
}

.skip-link:focus {
	left: 0;
	color: #fff;
	outline: 3px solid #efc940;
}

/* Respect reduced-motion preferences (template ships none). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* WCAG AA contrast corrections to template defaults:
   body text #777777 (4.48:1, fails) -> #6d6d6d (5.1:1);
   pre-titles #9e9e9e (2.8:1, fails) -> #757575 (4.6:1);
   white text on the green/olive masonry panels (~2.2:1) -> template navy. */
body {
	color: #6d6d6d;
}

.heading__pre-title {
	color: #757575;
}

.projects-masonry__text .projects-masonry__title a,
.projects-masonry__text p,
.projects-masonry__text .projects-masonry__details-item span {
	color: #282a43;
}

/* Simple styled content list (template ships no content-list class). */
.check-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
}

.check-list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #efc940;
}

/* Inner-page banner (promo-primary): white title, no built-in overlay in the template. */
.promo-primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(40, 42, 67, 0.6), rgba(40, 42, 67, 0.4));
	z-index: 0;
}

.promo-primary .container {
	position: relative;
	z-index: 1;
}

/* Same scrim for masonry tiles that overlay text on the photo. */
.projects-masonry__item--primary .projects-masonry__img::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(40, 42, 67, 0.5);
	z-index: -1;
}