/**
 * WRC single news article — alignment, spacing, sharing and article navigation.
 *
 * This file does NOT restyle the article. The parent theme still supplies the
 * colours, the Montserrat typography, the dark hero band, the greyscale featured
 * image and the meta row, and single.php keeps the parent's markup and class
 * names so all of that continues to apply. What is here is geometry, vertical
 * rhythm, and the two new blocks (share row, previous/next cards).
 *
 * Everything is scoped under `.wrc-single` — a body class added only on single
 * posts, see wrc_article_body_class() in functions.php — so nothing can reach the
 * Elementor header, the Elementor footer, the chatbot or any other page.
 *
 *
 * THE PROBLEM THIS FIXES
 * ---------------------------------------------------------------------------
 * Measured on the live article at a 1440px viewport, before this file:
 *
 *     hero title band ....... x 30    -> 1395   (full bleed, 30px gutter)
 *     .container_vis ........ x 123   -> 1303   (1180px, centred)
 *     .meta-single .......... x 313   -> 1493   (!!! past the viewport)
 *     .fullcontent .......... x 313   -> 1113   (800px)
 *     body copy ............. x 343   -> 1083   (740px)
 *     .postinfo / #post-nav.. x 313   -> 1493   (!!! past the viewport)
 *
 * Four different left edges, a 740px measure, and two blocks running 53px past
 * the right edge of the window — which is where the horizontal scrollbar and the
 * cropped previous-article thumbnail floating off the right of the page came
 * from. After this file every one of those blocks shares a single 1180px box,
 * centred, with equal left and right margins.
 *
 * Three separate sources had to be corrected, in sections 2 to 4 below:
 *
 *   1. The parent theme caps `.fullcontent` at 800px and floats its prev/next
 *      block right while hiding its text (citygov/style-mobile.css, style.css).
 *   2. A site-wide custom-CSS rule — `.p-border, .meta, … { width: 1180px
 *      !important }`, saved in the Elementor kit, not in any theme file — forces
 *      an absolute 1180px onto `.meta-single`, `.postinfo`, `#post-nav` and
 *      `.post-previous`, all of which live inside an 800px column. That rule is
 *      site-wide configuration, so it is overridden here for the article rather
 *      than edited.
 *   3. wrc-container.css indents top-level `wp-post` Elementor containers by the
 *      30px site gutter, which is right for a full-bleed post but wrong for post
 *      content nested inside the article column — it is what put the copy 30px
 *      in from the meta row above it.
 * ========================================================================== */

/* ==========================================================================
 * 1. Tokens
 *
 * Colour names match those already established in wrc-staff.css and
 * wrc-globalsearch.css so the child theme keeps one vocabulary. These are used
 * only by the two new blocks; nothing existing is recoloured.
 * ========================================================================== */

.wrc-single {
	--wrc-blue:      #094E9C;
	--wrc-lightblue: #00AEEF;
	--wrc-green:     #A9CC4F;
	--wrc-white:     #FFFFFF;

	--wrc-ink:       #16202C;
	--wrc-ink-soft:  #4A5764;
	--wrc-grey-bg:   #F4F7FA;
	--wrc-grey-line: #E1E8EF;

	--wrc-radius:    12px;
	--wrc-radius-sm: 8px;

	--wrc-shadow:    0 1px 2px rgba( 9, 78, 156, .04 ), 0 8px 24px rgba( 9, 78, 156, .07 );

	/*
	 * The one measure the whole article shares.
	 *
	 * 1180px is the theme's own `.container` width — the box already used by the
	 * hero band, the breadcrumbs and every non-Elementor page — and 20px is that
	 * container's own side padding, so the article lands on an alignment line the
	 * site already has rather than inventing a new one. Content measure is
	 * therefore 1140px.
	 */
	--wrc-article-width:  1180px;
	--wrc-article-gutter: 20px;

	/* Vertical rhythm between the major blocks of the page. */
	--wrc-block-gap:      clamp( 30px, 3.4vw, 46px );
}

/* Shared icon sizing for the new blocks. Strokes, so one style covers them all. */
.wrc-single .wrc-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The brand marks are solid shapes, not strokes. */
.wrc-single .wrc-icon--solid {
	fill: currentColor;
	stroke: none;
}

/* ==========================================================================
 * 2. The shared measure
 *
 * One box, centred, equal gutters, used by the hero band's contents, the meta
 * row, the copy, the share row and the prev/next cards.
 *
 * `body.wrc-single …` rather than `.wrc-single …` throughout this section: it
 * adds an element to the selector so these rules outrank the parent theme's
 * `.postbarLeftNarrow …` pairs and wrc-container.css's `.wrc-std-width …` pairs
 * on specificity, and therefore do not depend on stylesheet order.
 * ========================================================================== */

/* -- the hero band -------------------------------------------------------- */

/*
 * The band itself stays full bleed with its dark background and greyscale
 * featured image, exactly as it is now. Only its inner container moves onto the
 * shared line. wrc-container.css section 4 puts this container on the site-wide
 * 30px inset for ordinary pages; on an article it has to match the column
 * beneath it instead.
 *
 * `text-align: center` is inherited from the parent and deliberately kept — the
 * title and breadcrumbs stay centred inside a box whose edges now line up with
 * the article.
 */
body.wrc-single .page-header > .container {
	width: 100%;
	max-width: var( --wrc-article-width );
	margin-left: auto;
	margin-right: auto;
	padding-left: var( --wrc-article-gutter );
	padding-right: var( --wrc-article-gutter );
	box-sizing: border-box;
}

/* -- the article column --------------------------------------------------- */

body.wrc-single .postbarLeftNarrow > .container,
body.wrc-single .container.container_vis {
	width: 100%;
	max-width: var( --wrc-article-width );
	margin-left: auto;
	margin-right: auto;
	padding-left: var( --wrc-article-gutter );
	padding-right: var( --wrc-article-gutter );
	box-sizing: border-box;
}

body.wrc-single #core {
	width: 100%;
	max-width: 100%;
	margin: 0;
	/*
	 * The parent left the meta row sitting flush against the bottom edge of the
	 * dark hero band. This opens the same gap between the band and the article as
	 * the article uses between its own blocks.
	 */
	padding: var( --wrc-block-gap ) 0 0;
	float: none;
}

/*
 * The 800px cap (citygov/style-mobile.css, inside `@media (min-width: 1024px)`)
 * is what made the copy 740px wide and left it ending well short of the hero
 * above it. Removing the cap widens the copy to the full 1140px measure. The
 * 80px bottom margin in the same rule was most of the dead white space above the
 * footer.
 */
body.wrc-single .fullcontent {
	width: 100%;
	max-width: 100%;
	margin: 0 auto clamp( 34px, 4vw, 58px );
	padding: 0;
	float: none;
	/*
	 * Belt and braces against horizontal scrolling: whatever an editor pastes
	 * into an article, it cannot widen the page. `clip` rather than `hidden` so
	 * this never becomes a scroll container of its own.
	 */
	overflow-x: clip;
}

body.wrc-single .entry.entryfull {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	overflow: visible;
}

/* ==========================================================================
 * 3. Undo the site-wide `width: 1180px !important`
 *
 * A custom-CSS rule saved against the Elementor kit reads:
 *
 *     .p-border, .sidebar_item, .give-goal-progress, .meta, h3#reply-title,
 *     .tagcloud a, .taggs a, .page-numbers, .nav_item a, .tp_recent_tweets ul li,
 *     .page-link a span, .post-pagination>p a {
 *         border-color: #ffffff !important;
 *         width: 1180px !important;
 *     }
 *
 * `.meta-single`, `.postinfo`, `#post-nav` and `.post-previous` all carry
 * `.p-border`, and the meta row itself carries `.meta`, so each of them was
 * being forced to an absolute 1180px inside an 800px column and overflowing the
 * window by 53px. That rule is site-wide configuration and is left alone; it is
 * overridden here, for articles only.
 *
 * `!important` is unavoidable — the rule being corrected uses it. Specificity is
 * (0,3,0) against its (0,1,0), and the selectors are confined to the article
 * wrapper so the header, the footer and every other page are untouched.
 * ========================================================================== */

.wrc-single .postbarLeftNarrow .p-border,
.wrc-single .postbarLeftNarrow .meta,
.wrc-single .postbarLeftNarrow .meta-single,
.wrc-single .postbarLeftNarrow .post-pagination,
.wrc-single .postbarLeftNarrow .page-link,
.wrc-single .postbarLeftNarrow .page-link a span {
	width: auto !important;
	max-width: 100% !important;
}

/* ==========================================================================
 * 4. Elementor corrections inside the article column
 *
 * wrc-container.css indents and caps top-level `wp-post` containers for the
 * full-bleed case. Inside the article body those containers are already inside
 * the measure, so the 30px gutter has to come off and the 1650px cap has to go —
 * otherwise the copy sits one gutter in from the meta row and the hero above it,
 * which is exactly what it was doing.
 *
 * Specificity beats wrc-container.css (four classes + attribute against two), so
 * no !important is needed.
 * ========================================================================== */

.wrc-single .entry.entryfull .elementor[data-elementor-type="wp-post"] > .e-con,
.wrc-single .entry.entryfull .elementor[data-elementor-type="wp-post"] > .elementor-section {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.wrc-single .entry.entryfull .elementor[data-elementor-type="wp-post"] > .e-con > .e-con-inner,
.wrc-single .entry.entryfull .elementor[data-elementor-type="wp-post"] > .elementor-section > .elementor-container {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Elementor text widgets inherit the article's type rather than setting their own. */
.wrc-single .entry.entryfull .elementor-widget-text-editor,
.wrc-single .entry.entryfull .elementor-widget-text-editor .elementor-widget-container {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/*
 * `alignwide` and `alignfull` are sized by the parent with `calc(38% - 30vw)` and
 * `calc(50% - 50vw)` margins tuned for the old 800px column. Against a 1140px
 * measure they pull content past the article's edges, so inside the article they
 * are normalised to the shared width — "all paragraphs, headings, images and
 * embedded content follow the same content width".
 *
 * The parent's rules use !important, so these have to as well; specificity is
 * (0,3,0) against (0,2,0).
 */
.wrc-single .postbarLeftNarrow .alignwide,
.wrc-single .postbarLeftNarrow .alignfull {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wrc-single .postbarLeftNarrow .wp-block-gallery.alignfull {
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
 * 5. Hero band vertical rhythm
 *
 * Colours, the greyscale image treatment and the 40px uppercase title are the
 * parent theme's and are not touched. The 100px top and bottom padding is kept
 * on desktop — it is the band's current proportion — and only trimmed further
 * down, where 100px above and below a wrapped title is most of the screen.
 * ========================================================================== */

.wrc-single .page-header .main-breadcrumbs {
	margin-bottom: 14px;
}

.wrc-single .page-header h1.entry-title {
	margin: 0;
	/* A long headline must not overflow the band on a narrow screen. */
	overflow-wrap: break-word;
}

/* ==========================================================================
 * 6. Meta row
 *
 * Same date | category | author line as now, in the same 11px light-blue type.
 * Only its box changes: it starts on the shared left edge instead of overflowing
 * the window, and it is separated from the copy by a rule rather than by the
 * invisible white border the site-wide rule gave it.
 * ========================================================================== */

.wrc-single .postbarLeftNarrow .meta-single {
	margin: 0 0 var( --wrc-block-gap );
	padding: 0 0 16px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	/*
	 * The same site-wide rule described in section 3 also sets
	 * `border-color: #ffffff !important` on `.p-border`, which the meta row
	 * carries — so its divider was drawn in white on white and never appeared.
	 * Matching !important with a more specific selector is the only way to get a
	 * visible rule here without editing that site-wide CSS.
	 */
	border-bottom-color: var( --wrc-grey-line ) !important;
}

.wrc-single .meta-single .meta.meta_full {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
}

.wrc-single .meta-single .meta.meta_full .divider {
	margin: 0 4px;
	opacity: .45;
}

/* ==========================================================================
 * 7. Prose spacing
 *
 * Type is the parent's — Montserrat 16px/1.8 in #858585, headings in Poppins.
 * Nothing below sets a font family, a font size or a colour. What it sets is the
 * space between things, which is what makes a long article readable: a little
 * more air between paragraphs, and clearly more above a heading than below it so
 * each heading reads as belonging to the section it introduces.
 * ========================================================================== */

.wrc-single .entry.entryfull p {
	margin: 0 0 1.55em;
}

.wrc-single .entry.entryfull > :last-child,
.wrc-single .entry.entryfull p:last-child {
	margin-bottom: 0;
}

.wrc-single .entry.entryfull h1,
.wrc-single .entry.entryfull h2,
.wrc-single .entry.entryfull h3,
.wrc-single .entry.entryfull h4,
.wrc-single .entry.entryfull h5,
.wrc-single .entry.entryfull h6 {
	margin: 1.9em 0 .65em;
	overflow-wrap: break-word;
}

.wrc-single .entry.entryfull h1:first-child,
.wrc-single .entry.entryfull h2:first-child,
.wrc-single .entry.entryfull h3:first-child,
.wrc-single .entry.entryfull h4:first-child,
.wrc-single .entry.entryfull h5:first-child,
.wrc-single .entry.entryfull h6:first-child {
	margin-top: 0;
}

.wrc-single .entry.entryfull ul,
.wrc-single .entry.entryfull ol {
	margin: 0 0 1.55em;
	padding-left: 1.4em;
}

.wrc-single .entry.entryfull li {
	margin-bottom: .55em;
}

.wrc-single .entry.entryfull ul ul,
.wrc-single .entry.entryfull ol ol,
.wrc-single .entry.entryfull ul ol,
.wrc-single .entry.entryfull ol ul {
	margin-top: .55em;
	margin-bottom: 0;
}

.wrc-single .entry.entryfull blockquote {
	margin: 2em 0;
}

.wrc-single .entry.entryfull hr {
	margin: 2.4em 0;
}

/* Elementor sections inside the copy get the same rhythm as native blocks. */
.wrc-single .entry.entryfull .elementor[data-elementor-type="wp-post"] > .e-con + .e-con,
.wrc-single .entry.entryfull .elementor[data-elementor-type="wp-post"] > .elementor-section + .elementor-section {
	margin-top: 1.55em;
}

/* -- media and embeds keep to the measure --------------------------------- */

.wrc-single .entry.entryfull img,
.wrc-single .entry.entryfull video,
.wrc-single .entry.entryfull iframe,
.wrc-single .entry.entryfull embed,
.wrc-single .entry.entryfull object {
	max-width: 100%;
	height: auto;
}

.wrc-single .entry.entryfull figure,
.wrc-single .entry.entryfull .wp-block-image,
.wrc-single .entry.entryfull .wp-block-embed {
	max-width: 100%;
	margin: 1.9em 0;
}

.wrc-single .entry.entryfull figure:first-child,
.wrc-single .entry.entryfull .wp-block-image:first-child {
	margin-top: 0;
}

/* Responsive video: keep 16/9 rather than an embed's hard-coded height. */
.wrc-single .entry.entryfull iframe[src*='youtube'],
.wrc-single .entry.entryfull iframe[src*='youtu.be'],
.wrc-single .entry.entryfull iframe[src*='vimeo'],
.wrc-single .entry.entryfull .wp-block-embed__wrapper > iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/*
 * A table or a pre block wider than the measure scrolls inside its own wrapper,
 * so the page itself still never scrolls sideways.
 */
.wrc-single .entry.entryfull figure.wp-block-table,
.wrc-single .entry.entryfull .wp-block-table,
.wrc-single .entry.entryfull .tablepress-scroll-wrapper,
.wrc-single .entry.entryfull .wrc-table-scroll {
	max-width: 100%;
	margin: 1.9em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wrc-single .entry.entryfull pre {
	max-width: 100%;
	overflow-x: auto;
}

/* ==========================================================================
 * 8. Share this article
 *
 * Below the copy, above the previous/next cards, on the same left and right
 * edges as both. Icons with labels, laid out in one horizontal row on desktop
 * and wrapping onto as many lines as it needs on tablet and mobile.
 * ========================================================================== */

.wrc-single .wrc-share {
	margin: var( --wrc-block-gap ) 0 0;
	padding: clamp( 22px, 2.6vw, 30px ) 0 0;
	border-top: 1px solid var( --wrc-grey-line );
}

.wrc-single .wrc-share__title {
	margin: 0 0 18px;
	color: var( --wrc-blue );
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wrc-single .wrc-share__list {
	display: flex;
	flex-wrap: wrap;      /* one row on desktop, tidy extra lines below it */
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wrc-single .wrc-share__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wrc-single .wrc-share__item::before,
.wrc-single .wrc-share__item::marker {
	content: none;
}

.wrc-single .wrc-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;     /* comfortable tap target */
	/*
	 * `margin: 0` is load-bearing: the site gives every `button` a 15px bottom
	 * margin, which made the Copy Link button's row 15px taller than the five
	 * links beside it and pushed it out of line with them.
	 */
	margin: 0;
	padding: 0 17px;
	border: 1px solid var( --wrc-grey-line );
	-webkit-appearance: none;
	appearance: none;
	border-radius: 999px;
	background: var( --wrc-white );
	color: var( --wrc-blue );
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wrc-single .wrc-share__btn .wrc-icon {
	font-size: 16px;
}

/* The subtle hover: a 1px lift, a soft brand shadow, and the network's colour. */
.wrc-single .wrc-share__btn:hover,
.wrc-single .wrc-share__btn:focus-visible {
	background: var( --wrc-blue );
	border-color: var( --wrc-blue );
	color: var( --wrc-white );
	transform: translateY( -2px );
	box-shadow: var( --wrc-shadow );
}

.wrc-single .wrc-share__btn:active {
	transform: translateY( 0 );
}

/* Brand-true per network, so the row is scannable by colour. */
.wrc-single .wrc-share__btn--facebook:hover,
.wrc-single .wrc-share__btn--facebook:focus-visible { background: #1877F2; border-color: #1877F2; }

.wrc-single .wrc-share__btn--linkedin:hover,
.wrc-single .wrc-share__btn--linkedin:focus-visible { background: #0A66C2; border-color: #0A66C2; }

.wrc-single .wrc-share__btn--x:hover,
.wrc-single .wrc-share__btn--x:focus-visible { background: #14171A; border-color: #14171A; }

.wrc-single .wrc-share__btn--whatsapp:hover,
.wrc-single .wrc-share__btn--whatsapp:focus-visible { background: #1FA855; border-color: #1FA855; }

/* Email and copy-link have no third-party brand, so they use WRC's own. */
.wrc-single .wrc-share__btn--email:hover,
.wrc-single .wrc-share__btn--email:focus-visible { background: var( --wrc-lightblue ); border-color: var( --wrc-lightblue ); }

.wrc-single .wrc-share__btn--copy:hover,
.wrc-single .wrc-share__btn--copy:focus-visible { background: var( --wrc-green ); border-color: var( --wrc-green ); color: #14370A; }

/* Confirmation state after the link has been copied. */
.wrc-single .wrc-share__btn.is-copied {
	background: var( --wrc-green );
	border-color: var( --wrc-green );
	color: #14370A;
}

/*
 * The live region that announces the copy result. Screen-reader only: sighted
 * users get the same confirmation from the button itself, which turns green and
 * relabels to "Link copied". Kept out of the list so an empty span cannot add
 * height to the copy button's row.
 */
.wrc-single .wrc-share__status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
 * 9. Previous / next articles
 *
 * Previous on the left, next on the right, on the same measure as the copy.
 * ========================================================================== */

.wrc-single .wrc-postnav {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px;
	margin: var( --wrc-block-gap ) 0 0;
	padding: clamp( 22px, 2.6vw, 30px ) 0 0;
	border-top: 1px solid var( --wrc-grey-line );
}

/*
 * A lone card must not stretch across both columns, and a lone next card belongs
 * on the right where a reader expects to find it.
 */
.wrc-single .wrc-postnav__card:only-child.wrc-postnav__card--prev { grid-column: 1; }
.wrc-single .wrc-postnav__card:only-child.wrc-postnav__card--next { grid-column: 2; }

.wrc-single .wrc-postnav__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px;
	border: 1px solid var( --wrc-grey-line );
	border-radius: var( --wrc-radius );
	background: var( --wrc-white );
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wrc-single .wrc-postnav__card:hover,
.wrc-single .wrc-postnav__card:focus-visible {
	border-color: var( --wrc-lightblue );
	box-shadow: var( --wrc-shadow );
	transform: translateY( -2px );
}

/* Next reads right-to-left: title then thumbnail, text ranged right. */
.wrc-single .wrc-postnav__card--next {
	flex-direction: row-reverse;
	text-align: right;
}

.wrc-single .wrc-postnav__thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: var( --wrc-radius-sm );
	background: var( --wrc-grey-bg );
}

.wrc-single .wrc-postnav__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The parent theme greyscales these; in colour they read as real articles. */
	filter: none;
	max-width: none;
}

.wrc-single .wrc-postnav__text {
	min-width: 0;
}

.wrc-single .wrc-postnav__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 5px;
	color: var( --wrc-lightblue );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wrc-single .wrc-postnav__card--next .wrc-postnav__label {
	flex-direction: row-reverse;
}

.wrc-single .wrc-postnav__headline {
	/* Clamped so both cards stay the same height whatever the title length. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var( --wrc-blue );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.42;
	transition: color .18s ease;
}

.wrc-single .wrc-postnav__card:hover .wrc-postnav__headline,
.wrc-single .wrc-postnav__card:focus-visible .wrc-postnav__headline {
	color: var( --wrc-lightblue );
}

/* ==========================================================================
 * 10. What the article no longer shows
 *
 * single.php stops rendering these, but the selectors stay: a post still routed
 * through a parent template for any reason must not show the old versions
 * alongside the new ones.
 * ========================================================================== */

/*
 * The floating social bar down the left-hand side of the page.
 *
 * It is the Float Menu plugin's site-wide follow bar (Facebook, LinkedIn, X,
 * YouTube, WhatsApp), not article sharing — the share row in section 8 is what
 * shares the article. Hidden on single posts only, so it keeps working on every
 * other page, and hidden from assistive technology too rather than merely moved
 * off screen. No plugin file is touched.
 */
.wrc-single .floating-menu,
.wrc-single .fm-bar {
	display: none !important;
}

/* The parent's prev/next block, replaced by section 9. */
.wrc-single .postinfo,
.wrc-single #post-nav {
	display: none !important;
}

/*
 * The empty comments box. Comments are closed on posts, so the parent template
 * printed a bordered block containing only "Comments are closed." — a band of
 * dead space directly above the footer.
 */
.wrc-single .postbarLeftNarrow #comments,
.wrc-single .postbarLeftNarrow .nocomments {
	display: none !important;
}

/* ==========================================================================
 * 11. Accessibility
 * ========================================================================== */

.wrc-single .wrc-share a:focus-visible,
.wrc-single .wrc-share button:focus-visible,
.wrc-single .wrc-postnav a:focus-visible {
	outline: 3px solid var( --wrc-lightblue );
	outline-offset: 3px;
}

/* Inside the dark hero band the light-blue ring has too little contrast. */
.wrc-single .page-header a:focus-visible {
	outline: 3px solid var( --wrc-green );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {

	.wrc-single .wrc-share__btn,
	.wrc-single .wrc-postnav__card,
	.wrc-single .wrc-postnav__headline {
		transition-duration: .01ms !important;
	}

	.wrc-single .wrc-share__btn:hover,
	.wrc-single .wrc-share__btn:focus-visible,
	.wrc-single .wrc-postnav__card:hover,
	.wrc-single .wrc-postnav__card:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
 * 12. Responsive
 *
 * Breakpoints match the ones wrc-responsive.css and wrc-container.css already
 * use — 1024 and 767 — so the article behaves in step with the rest of the site.
 * Below 1180px the measure is the viewport minus its two equal gutters, so the
 * left and right margins stay equal at every width and nothing can scroll
 * sideways.
 * ========================================================================== */

/* -- tablet --------------------------------------------------------------- */

@media ( max-width: 1024px ) {

	.wrc-single .page-header {
		padding-top: clamp( 46px, 7vw, 72px );
		padding-bottom: clamp( 40px, 6vw, 64px );
	}

	.wrc-single .page-header h1.entry-title {
		font-size: 32px;
		line-height: 1.22;
	}

	.wrc-single .wrc-postnav {
		gap: 14px;
	}
}

/* -- phones --------------------------------------------------------------- */

@media ( max-width: 767px ) {

	.wrc-single {
		/* Matches the 16px mobile gutter the rest of the site uses. */
		--wrc-article-gutter: 16px;
	}

	.wrc-single .page-header {
		padding-top: 34px;
		padding-bottom: 30px;
	}

	.wrc-single .page-header h1.entry-title {
		font-size: 25px;
		line-height: 1.26;
	}

	.wrc-single .page-header .main-breadcrumbs {
		margin-bottom: 10px;
	}

	/*
	 * Labels stay visible — the buttons wrap onto as many lines as they need
	 * instead of collapsing to unlabelled icons.
	 */
	.wrc-single .wrc-share__list {
		gap: 8px;
	}

	.wrc-single .wrc-share__btn {
		padding: 0 14px;
		font-size: 13px;
	}

	/* Stack the cards, and never leave a lone card sitting in column 2. */
	.wrc-single .wrc-postnav {
		grid-template-columns: minmax( 0, 1fr );
		gap: 12px;
	}

	.wrc-single .wrc-postnav__card:only-child.wrc-postnav__card--prev,
	.wrc-single .wrc-postnav__card:only-child.wrc-postnav__card--next {
		grid-column: 1;
	}

	/* Both cards read left-to-right once stacked. */
	.wrc-single .wrc-postnav__card--next {
		flex-direction: row;
		text-align: left;
	}

	.wrc-single .wrc-postnav__card--next .wrc-postnav__label {
		flex-direction: row;
	}

	.wrc-single .wrc-postnav__card {
		min-height: 88px; /* easy to tap */
	}

	.wrc-single .wrc-postnav__thumb {
		width: 64px;
		height: 64px;
	}
}

/* -- very small phones ---------------------------------------------------- */

@media ( max-width: 380px ) {

	.wrc-single .page-header h1.entry-title {
		font-size: 22px;
	}

	/* Two per line rather than one wide button per line. */
	.wrc-single .wrc-share__btn {
		padding: 0 12px;
		gap: 7px;
	}
}