/*
 * Style refresh: print section colours, type, metaboxes, buttons and accessibility fixes.
 * Loaded after style-overrides.css. Everything is scoped to body.clp (added in inc/section-colours.php),
 * which keeps it out-ranking the older theme rules without needing !important in most places.
 * Text never uses the lighter print gold or cyan (they fail WCAG contrast); the darker "ink" colour is used
 * for text and the print colour for fills and rules.
 */

/* ---------------------------------------------------------------- tokens */

.clp {
	--clp-ink: #1d2233;
	--clp-mute: #586074;
	--clp-navy: #2F3D85;
	--clp-peri: #3645B8;
	--clp-peri-d: #2A3799;
	--clp-lav: #E8EAFB;

	/* default section is Features / navy, used wherever no section applies */
	--clp-sec: #2F3D85;
	--clp-sec-ink: #2F3D85;
	--clp-tint: #E7EAF6;

	--clp-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--clp-serif: "Merriweather", Georgia, serif;

	/* the theme builds links, buttons, tags and the nav from this variable */
	--pdt-irisblue: #3645B8;
}

/* regular weight everywhere: the theme sets body copy, cards and footer to Merriweather Light */
body.clp,
.clp .site-footer,
.clp .site-footer .textwidget {
	font-weight: 400;
}

.clp-sec-update   { --clp-sec: #F8C800; --clp-sec-ink: #7A5A00; --clp-tint: #FFF5CC; }
.clp-sec-regulars { --clp-sec: #0CB8D8; --clp-sec-ink: #006A88; --clp-tint: #E1F6FA; }
.clp-sec-features { --clp-sec: #2F3D85; --clp-sec-ink: #2F3D85; --clp-tint: #E7EAF6; }
.clp-sec-talking  { --clp-sec: #A00078; --clp-sec-ink: #A00078; --clp-tint: #F8E5F1; }
.clp-sec-arts     { --clp-sec: #F40004; --clp-sec-ink: #C4001A; --clp-tint: #FDE7E7; }

/* five-colour strip across the top of every page */
.clp::before {
	content: "";
	display: block;
	height: 6px;
	background: linear-gradient(90deg, #F8C800 0 20%, #0CB8D8 20% 40%, #2F3D85 40% 60%, #A00078 60% 80%, #F40004 80% 100%);
}

/* ------------------------------------------------------------ typography */

.clp h1,
.clp h2,
.clp h3,
.clp h4,
.clp h5,
.clp h6,
.clp .h1,
.clp .h2,
.clp .h3,
.clp .h4,
.clp .entry-title,
.clp .main-navigation,
.clp .entry-meta,
.clp .entry-lede {
	font-family: var(--clp-sans);
}

.clp h1,
.clp h2,
.clp h3,
.clp h4,
.clp .entry-title,
.clp h2.entry-title {
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.15;
}

.clp .entry-title,
.clp .page-title {
	color: var(--clp-navy);
}

.clp h1.entry-title {
	font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.clp .entry-lede {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.4;
	color: #2c3347;
}

.clp .entry-meta {
	font-weight: 400;
	color: var(--clp-mute);
}

.clp .entry-meta a {
	font-weight: 600;
}

/* Merriweather body, regular weight, a touch larger and looser than before */
.clp .entry-content {
	font-size: 1.125rem;
	line-height: 1.75;
	font-weight: 400;
}

.clp .entry-content h2,
.clp .entry-content h3 {
	font-family: var(--clp-sans);
	font-weight: 700;
	color: var(--clp-sec-ink);
	margin-top: 1.8em;
}

.clp .entry-content h2 {
	font-size: 1.75rem;
}

.clp .entry-content figure figcaption,
.clp .featured-image-caption,
.clp .wp-caption-text,
.clp .gallery figcaption {
	font-family: var(--clp-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	color: #2c3347;
}

/*
 * Line length and wrapping.
 * Cap running text at about 68 characters a line (the comfortable range for a serif at this size is 55 to 75).
 * It is set on the text blocks only, so galleries, images, metaboxes and pullquotes keep their own widths,
 * and it does nothing where the column is already narrower than the cap, which is the case in the
 * standard article column today. It is a safeguard for wider layouts (full-width pages, no-sidebar templates).
 */
.clp .entry-content > p,
.clp .entry-content > ul,
.clp .entry-content > ol,
.clp .entry-content > dl {
	max-width: 68ch;
}

/*
 * text-wrap is progressive enhancement: browsers that do not support a value ignore it.
 * balance evens out the lines of short text (headings, standfirsts, captions, card titles);
 * pretty avoids a single word stranded on the last line of body copy.
 */
.clp h1,
.clp h2,
.clp h3,
.clp h4,
.clp .entry-lede,
.clp figcaption,
.clp .featured-image-caption,
.clp .wp-caption-text,
.clp .promo_title {
	text-wrap: balance;
}

.clp .entry-content p,
.clp .entry-content li,
.clp .get-involved p,
.clp .site-footer p {
	text-wrap: pretty;
}

/* ------------------------------------------------- section colour devices */

/* kicker: square in the print colour plus the category name, as on the print contents page */
.clp.single-post[class*="clp-sec-"] .entry-header::before {
	content: var(--clp-label, "");
	display: block;
	margin-bottom: .75rem;
	padding-left: 1.1rem;
	font-family: var(--clp-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--clp-sec-ink);
	background: linear-gradient(var(--clp-sec), var(--clp-sec)) no-repeat left center / 10px 10px;
}

/* the issue the article ran in, as a small tinted label */
.clp .entry-date .posted-on a {
	display: inline-block;
	padding: .1rem .6rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--clp-tint);
	color: var(--clp-sec-ink);
	border-bottom: 0;
}

/* drop cap: bold sans, three lines deep, in the section ink */
.clp .has-dropcap > p:first-child:first-letter {
	float: left;
	opacity: 1;
	font-family: var(--clp-sans);
	font-weight: 700;
	font-size: 6em;
	line-height: .78;
	padding: .09em .12em 0 0;
	color: var(--clp-sec-ink);
}

/* pullquote: 3px rules in the section colour above and below, light sans */
.clp .entry-content blockquote {
	clear: both;
	margin: 2.5rem 0;
	padding: 1.5rem 0;
	border-top: 3px solid var(--clp-sec);
	border-bottom: 3px solid var(--clp-sec);
	font-family: var(--clp-sans);
	font-weight: 300;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem);
	line-height: 1.2;
	color: #2a3045;
	text-wrap: balance;
}

.clp .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* end mark: small square after the last paragraph of body copy (class added by the plugin) */
.clp .entry-content .clp-end::after {
	content: "";
	display: inline-block;
	width: .55em;
	height: .55em;
	margin-left: .45em;
	background: var(--clp-sec);
}

/* listing cards pick up a section-coloured edge under the image */
.clp .listing[class*="clp-sec-"] .listing-image {
	border-bottom: 4px solid var(--clp-sec);
}

/* --------------------------------------------------------------- menus */

/*
 * No sticky header below the desktop breakpoint (the theme's drawer menu takes over there).
 * The theme's script only ever adds .fixed-top above 992px, and never removes it when the window
 * shrinks or rotates, so reset it here as well as stopping it from applying.
 */
@media (max-width: 991.98px) {
	.clp #masthead.fixed-top {
		position: static !important;
		top: auto !important;
		transform: none !important;
		box-shadow: none;
		padding: 0 !important;
		background-color: transparent;
	}

	body.clp {
		padding-top: 0 !important;
	}
}


/* utility menu (Subscribe, My account, Logout): the theme sets it at 80% */
.clp #masthead #loginout .btn-secondary {
	font-size: 1rem;
	font-weight: 600;
	/* same shape and hover as the primary menu links: square, 2px underline, gold wash */
	padding: .5rem .75rem;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	color: var(--clp-peri);
}

.clp #masthead #loginout .btn-secondary:hover,
.clp #masthead #loginout .btn-secondary:focus {
	border-bottom-color: var(--pdt-stratos);
	background-color: var(--pdt-goldenyellow) !important;
	color: var(--pdt-stratos) !important;
}

/* primary menu: slightly larger, and a plain bold underlined current item (no section colours) */
.clp .main-navigation .nav-link {
	font-size: 1.0625rem;
}

@media (min-width: 1200px) {
	.clp .main-navigation .nav-link {
		font-size: 1.125rem;
	}
}

.clp #site-navigation ul.navbar-nav > li.active > a.nav-link {
	font-weight: 700;
	border-bottom: 4px solid var(--clp-navy) !important;
}

.clp .main-navigation .dropdown-item {
	font-size: 1rem;
}

/* ------------------------------------------------------------------ pills */

/* category and tag pills: small tinted caps boxes, like the issue label */
:where(.clp .categories a, .clp .tags a) {
	--clp-sec: #2F3D85;
	--clp-sec-ink: #2F3D85;
	--clp-tint: #E7EAF6;
}

.clp .tags a:link,
.clp .tags a:visited,
.clp .categories a:link,
.clp .categories a:visited {
	display: inline-block;
	margin: 0 .25rem .25rem 0;
	padding: .2rem .6rem;
	border: 0 !important;
	border-radius: 0;
	background: var(--clp-tint);
	color: var(--clp-sec-ink);
	font-family: var(--clp-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	transition: none;
}

/* hover and focus: invert to solid ink with white text, no border animation */
.clp .tags a:hover,
.clp .tags a:focus,
.clp .categories a:hover,
.clp .categories a:focus {
	border: 0 !important;
	background-color: var(--clp-sec-ink);
	color: #fff !important;
	text-decoration: none;
	transition: none;
}

/*
 * Listing cards: the post_class on the homepage listings is read from the page rather than each post,
 * so take the card's colour from its own category pill instead. Later rules win, so the order runs from
 * lowest to highest precedence.
 */
.clp .listing:has(.categories a.clp-sec-features) .listing-image { border-bottom: 4px solid #2F3D85; }
.clp .listing:has(.categories a.clp-sec-talking) .listing-image { border-bottom: 4px solid #A00078; }
.clp .listing:has(.categories a.clp-sec-arts) .listing-image { border-bottom: 4px solid #F40004; }
.clp .listing:has(.categories a.clp-sec-regulars) .listing-image { border-bottom: 4px solid #0CB8D8; }
.clp .listing:has(.categories a.clp-sec-update) .listing-image { border-bottom: 4px solid #F8C800; }


/* ------------------------------------------------------------- metaboxes */

/*
 * .meta-box is the periwinkle box, .sidebar-box is the gold one.
 * Square corners, a straight bold top edge in a deeper tint of the same colour,
 * and a very light top-to-bottom gradient.
 */
.clp .meta-box,
.clp .sidebar-box {
	--box-a: #EFF1FD;
	--box-b: #DFE3F9;
	--box-edge: #6A78DB;
	margin-bottom: 1.5rem;
	padding: 1.5rem 1.5rem 1.25rem;
	border: 0;
	border-top: 5px solid var(--box-edge);
	border-radius: 0;
	background: linear-gradient(180deg, var(--box-a), var(--box-b));
	color: var(--clp-ink);
	font-family: var(--clp-sans);
	font-size: 1.125rem;
	line-height: 1.6;
}

.clp .sidebar-box {
	--box-a: #FFF5C9;
	--box-b: #FFEA99;
	--box-edge: #D9A800;
}

.clp .meta-box p,
.clp .sidebar-box p {
	margin-bottom: .75rem;
}

/* headings inside the boxes: no inherited article spacing */
.clp .entry-content .meta-box h2,
.clp .entry-content .meta-box h3,
.clp .entry-content .sidebar-box h2,
.clp .entry-content .sidebar-box h3 {
	margin: 0 0 .6rem;
	padding: 0;
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--clp-navy);
}

.clp .meta-box > :first-child,
.clp .sidebar-box > :first-child {
	margin-top: 0;
	padding-top: 0;
}

.clp .meta-box ul,
.clp .meta-box ol,
.clp .sidebar-box ul,
.clp .sidebar-box ol {
	padding-left: 1.25rem;
	margin-bottom: .75rem;
}

.clp .meta-box li,
.clp .sidebar-box li {
	padding-bottom: .4rem;
}

.clp .meta-box p:last-child,
.clp .sidebar-box p:last-child {
	margin-bottom: 0;
}

.clp .meta-box img,
.clp .sidebar-box img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 1rem;
	box-shadow: 0 1px 6px rgba(29, 34, 51, .3);
}

/* titles in the box, usually wrapped in <em> or <i>, set in the serif */
.clp .meta-box em,
.clp .meta-box i,
.clp .sidebar-box em,
.clp .sidebar-box i {
	font-family: var(--clp-serif);
}

.clp .meta-box-float-right,
.clp .sidebar-box-float-right {
	float: right;
	width: 20rem;
	max-width: 50%;
	margin: .25rem 0 1.25rem 2rem;
}

/* breathing room above a box that follows article text */
.clp .entry-content .meta-box,
.clp .entry-content .sidebar-box {
	margin-top: 1.25rem;
}

/* hover on the gold box would otherwise be gold on gold */
.clp .sidebar-box a:hover,
.clp .sidebar-box a:focus {
	background-color: #fff;
}

@media (max-width: 768px) {
	.clp .meta-box-float-right,
	.clp .sidebar-box-float-right {
		float: none;
		width: auto;
		max-width: none;
		margin: 1.25rem 0;
	}
}

/* ------------------------------------------------------ Gravity Forms buttons */

/* Gravity Forms' own theme out-ranks the primary button rule, so match its selectors */
.clp .gform_wrapper .gform_footer .gform_button,
.clp .gform_wrapper .gform_footer input[type="submit"],
.clp .gform_wrapper .gform_page_footer .gform_button,
.clp .gform_wrapper .gform_page_footer .gform_next_button,
.clp .gform_wrapper button.gform_button,
.clp .gform_wrapper.gravity-theme .button.gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	width: auto;
	padding: .75rem 1.5rem;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--clp-peri) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: var(--clp-sans);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	white-space: normal;
	cursor: pointer;
}

.clp .gform_wrapper .gform_footer .gform_button:hover,
.clp .gform_wrapper .gform_footer .gform_button:focus,
.clp .gform_wrapper .gform_footer input[type="submit"]:hover,
.clp .gform_wrapper .gform_footer input[type="submit"]:focus,
.clp .gform_wrapper .gform_page_footer .gform_button:hover,
.clp .gform_wrapper .gform_page_footer .gform_next_button:hover,
.clp .gform_wrapper button.gform_button:hover,
.clp .gform_wrapper button.gform_button:focus {
	background: var(--pdt-goldenyellow) !important;
	color: var(--pdt-stratos) !important;
}

/* previous button on multi-page forms: outlined version of the same shape */
.clp .gform_wrapper .gform_page_footer .gform_previous_button {
	min-height: 48px;
	padding: .75rem 1.5rem;
	border: 2px solid var(--clp-peri) !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--clp-peri) !important;
	font-family: var(--clp-sans);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* -------------------------------------------------- get involved, footer */

/* very light top-to-bottom gradient on the lavender band and the footer, matching the metaboxes */
.clp .get-involved.shaded-light,
.clp .site-footer {
	background: linear-gradient(180deg, #EFF1FD, #DFE3F9);
}

/* the theme sets text in the band to 80%, which comes out around 13px */
.clp .get-involved p {
	font-size: 1.0625rem;
	line-height: 1.5;
}

.clp .get-involved .btn-primary {
	font-size: .9375rem;
}

/* ------------------------------------------------------- related stories */

/* "More like this" on phones: one story per row, image left and title right, instead of 2 + 1 */
@media (max-width: 767.98px) {
	.clp :is(.block-related, .block-promos) .block-promo {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin-bottom: 0;
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-top: 1px solid #dfe3f0;
	}

	.clp :is(.block-related, .block-promos) .block-promo:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.clp :is(.block-related, .block-promos) .block-promo a.promo_url {
		display: flex;
		align-items: flex-start;
		gap: 1rem;
	}

	.clp :is(.block-related, .block-promos) .block-promo .promo_image {
		flex: 0 0 38%;
		max-width: 38%;
		aspect-ratio: 4 / 3;
	}

	.clp :is(.block-related, .block-promos) .block-promo .promo_image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.clp :is(.block-related, .block-promos) .block-promo .promo_title {
		flex: 1 1 auto;
		margin: 0;
		padding: 0;
		font-size: 1.125rem;
		line-height: 1.3;
	}
}

/* headlines of the stories under the lead story on the homepage: a step up from the card default */
.clp .secondary-story .promo_title {
	font-size: 1.25rem;
	line-height: 1.25;
}

/* ------------------------------------------------------ homepage on phones */

/*
 * The same image-left, title-right rows as "More like this", for the other homepage story grids:
 * the stories under the lead and "Featured" (Featured is covered by the related stories rules above).
 * The lead image, the cartoons and the two-up "In the current issue" grid are left as they are.
 */
@media (max-width: 767.98px) {
	/* stories under the lead story */
	.clp .secondary-story {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-top: 1px solid #dfe3f0;
	}

	.clp .secondary-story a.promo_url {
		display: flex;
		align-items: flex-start;
		gap: 1rem;
	}

	.clp .secondary-story .promo_image {
		flex: 0 0 38%;
		max-width: 38%;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.clp .secondary-story .promo_image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.clp .secondary-story .promo_title {
		flex: 1 1 auto;
		margin: 0;
		padding: 0;
	}
}

/* --------------------------------------------------------- accessibility */

/* visible, high-contrast focus on every interactive element (WCAG 2.4.7, 2.4.11) */
.clp :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--clp-ink) !important;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #fff !important;
}

/* minimum 24px targets (WCAG 2.5.8) */
.clp .btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--clp-sans);
	font-weight: 700;
}

.clp #loginout .btn {
	min-height: 32px;
}

/* primary buttons: square corners and a small caps label, like the pills and menu */
.clp .btn-primary,
.clp .button-cta,
.clp input[type="submit"] {
	border-radius: 0;
}

.clp .btn-primary,
.clp input[type="submit"] {
	padding: .75rem 1.5rem;
	box-shadow: none;
	font-family: var(--clp-sans);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.clp .tags a,
.clp .categories a {
	display: inline-block;
	min-height: 24px;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.clp .block {
		animation: none;
	}
	.clp [data-aos] {
		transition: none !important;
		transform: none !important;
	}
	.clp .block-promo img,
	.clp .listing-image img {
		transition: none;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------- search */

/*
 * Accessible search (markup in template-parts/nav-compact.php):
 * always visible, labelled for screen readers, SVG icon, 44px button, 3:1 border, one focus ring.
 */
.clp .nav-search-a11y {
	display: flex;
	align-items: center;
	margin: 0 0 0 .75rem;
	list-style: none;
}

.clp .nav-search-a11y form {
	display: flex;
	align-items: stretch;
	width: 100%;
	border: 2px solid var(--clp-ink);
	background: #fff;
}

.clp .nav-search-a11y form:focus-within {
	outline: 3px solid var(--clp-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #fff;
}

.clp .nav-search-a11y input[type="search"],
.clp .nav-search-a11y input[type="search"]:focus {
	flex: 1 1 auto;
	width: 11rem;
	min-height: 40px;
	margin: 0;
	padding: 0 .75rem;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	color: var(--clp-ink) !important;
	font-family: var(--clp-sans);
	font-size: 1rem;
}

.clp .nav-search-a11y input[type="search"]::placeholder {
	color: var(--clp-mute);
	opacity: 1;
}

.clp .nav-search-a11y button {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--clp-peri);
	color: #fff;
	cursor: pointer;
}

.clp .nav-search-a11y button:hover,
.clp .nav-search-a11y button:focus {
	background: var(--clp-peri-d) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.clp .nav-search-a11y button:focus-visible {
	outline: 0 !important;
}

/* mobile drawer */
.clp .nav-search-mobile {
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid #e6e9fc;
}

.clp .nav-search-mobile input[type="search"] {
	width: auto;
	min-width: 0;
}

/* results count under the search heading */
.clp .search-count {
	font-family: var(--clp-sans);
	font-size: 1.125rem;
	color: var(--clp-mute);
}

.clp #loginout,
.clp .clm-menu-title,
.clp #navbar-primary-mobile .nav-link { font-family: var(--clp-sans); }
/* ------------------------------------------------- header at medium widths */

/*
 * Between the mobile drawer and the full-width header (992px to 1199px) the container is 960px wide and the
 * menu plus search box need about 900px of it, so the logo, which was allowed to shrink, collapsed to a few
 * pixels. Keep the logo at a fixed width instead, and give the room back from the menu padding and the search box.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.clp #masthead #logo-nav-link {
		flex: 0 0 auto;
		width: 130px;
		margin-right: 1rem;
	}

	.clp #masthead #logo-nav-link img {
		display: block;
		width: 100%;
		height: auto;
	}

	.clp #site-navigation ul.navbar-nav > li > a.nav-link,
	.clp #site-navigation ul.navbar-nav > li > a.nav-link.dropdown-toggle {
		padding-left: .5rem !important;
		padding-right: .5rem !important;
	}

	.clp .nav-search-a11y {
		margin-left: .5rem;
	}

	.clp .nav-search-a11y input[type="search"],
	.clp .nav-search-a11y input[type="search"]:focus {
		width: 7rem;
	}
}