/**
 * HealBridge brand layer.
 *
 * Applied site-wide, including Elementor and demo-built pages. Deliberately
 * narrow: colour, type and a few emphasis rules only. It does NOT touch
 * layout, spacing or backgrounds wholesale, because an earlier version of the
 * child theme did exactly that and fought every page the theme's own builder
 * produced.
 *
 * Palette derived from a sample of Women's Aid, Refuge, Solace and WARIF.
 * All four run a white base, a deep desaturated aubergine or navy for
 * structure, one warm accent, and a cool tone for trust. None use the
 * orange-ochre earth palette that reads as a generic appeal.
 *
 * Contrast measured against white, not estimated:
 *   ink        #241E3C  15.84
 *   ink-soft   #4A4460   9.18
 *   rose       #D81E5B   4.93
 *   rose-deep  #A8153F   7.38
 *   teal       #0E5F63   7.41
 *   teal-lite  #17868C   4.35  decoration only, never body text
 */

/*
 * Green and white, for a Nigerian organisation.
 *
 * The flag green (#008751) is the reference but not the working value: it
 * measures 4.58 on white, which clears AA by a hair and leaves nothing in
 * reserve for hover and disabled states. The brand tones sit a little deeper
 * and stay recognisably the same green.
 *
 * Gold rather than a second green for the urgent path. Green, white and gold
 * reads Nigerian without dressing the site as a flag, and it keeps "Find
 * Support" visually separate from every partnership control on the page.
 *
 * Measured on white:
 *   brand green  #00713F   6.12
 *   green deep   #04563A   8.76
 *   forest       #0B3A2A  12.71
 *   ink          #16281F  15.47
 *   gold         #8A4F00   6.56
 *   mint         #E8F3EC   tint only, never text
 */
:root {
	/* Logo colours, kept as-is for graphics, icons and large fills.
	   None of them clear AA for text: green 3.19, red 3.83, yellow 1.73.
	   Never put body copy or a small label in these. */
	--hbb-logo-green:  #12A64F;
	--hbb-logo-red:    #F0402F;
	--hbb-logo-yellow: #FDB913;

	/* Working tones, derived from the logo and measured on white.
	   Green runs brighter than the previous #00713F while still passing. */
	--hbb-green:      #00893F;  /* 4.52  partnership buttons */
	--hbb-green-deep: #046A34;  /* 6.74  links, green text */
	--hbb-forest:     #0B3A2A;  /* 12.71 headings */
	--hbb-ink:        #16281F;  /* 15.47 body */
	--hbb-ink-soft:   #3D4A42;

	/* Red carries the urgent path now, replacing the gold. It comes from the
	   centre figure of the logo, so the site and the mark agree. */
	--hbb-red:       #D62818;   /* 5.03  urgent CTA */
	--hbb-red-deep:  #B01D10;   /* 6.93  hover, red text */

	--hbb-mint:       #E9F6EE;
	--hbb-sand:       #F6F4F0;
	--hbb-paper:      #ffffff;

	/* Retained so any older rule still resolves to a defined colour. */
	--hbb-gold:       var(--hbb-red);
	--hbb-gold-hover: var(--hbb-red-deep);

	/* Kept as aliases so any rule written against the previous palette keeps
	   resolving to a defined colour instead of silently falling back. */
	--hbb-rose:      var(--hbb-gold);
	--hbb-rose-deep: var(--hbb-gold-hover);
	--hbb-teal:      var(--hbb-green);
	--hbb-teal-lite: var(--hbb-green);

	--hbb-display: 'Space Grotesk', system-ui, sans-serif;
	--hbb-body:    'DM Sans', system-ui, sans-serif;
}

/* ---- Typography --------------------------------------------------------
   Space Grotesk on headings gives the site a voice the stock theme does not
   have. Body stays DM Sans. Both are self-hosted, so no third-party request. */

/*
 * !important is load-bearing here rather than lazy. Charite and Elementor both
 * emit per-element inline font rules from the demo import, which outrank any
 * selector this stylesheet can reasonably write.
 *
 * This also repairs a side effect of the privacy work: the parent theme
 * declares Nunito, Pacifico and DM Sans and loads them from Google. Those
 * requests are blocked, so the demo's headings were silently falling back to
 * a system font. Pointing everything at the two self-hosted families fixes
 * the typography and keeps the site free of third-party requests.
 */
body,
.elementor-widget-container p,
.elementor-widget-text-editor,
.elementor-widget-container li {
	font-family: var(--hbb-body) !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.section-title h2,
.section-title .sub-title,
.theme-btn,
.elementor-button,
button,
input[type="submit"] {
	font-family: var(--hbb-display) !important;
	letter-spacing: -0.015em;
}

h1, h2 { text-wrap: balance; }

/* ---- Colour ------------------------------------------------------------
   Charite's own main_color option already recolours most accents. These
   rules cover the places it misses and set the structural tone. */

h1, h2, h3, h4, h5, h6,
.section-title h2 {
	color: var(--hbb-forest);
}

body { color: var(--hbb-ink-soft); }

a { color: var(--hbb-green); }
a:hover { color: var(--hbb-green-deep); }

/* Section tints to break up long white pages without inverting the theme. */
.hbb-sand { background-color: var(--hbb-sand); }
.hbb-mint { background-color: var(--hbb-mint); }

/* The urgent path, in the logo's red. White on #D62818 measures 5.03.
   Kept distinct from the green partnership controls so the button a woman in
   crisis needs never disappears into the ones asking her employer for help. */
.btn--style-one,
a.btn--style-one,
.hbb-urgent {
	background-color: var(--hbb-red) !important;
	border-color: var(--hbb-red) !important;
	color: #fff !important;
}

.btn--style-one:hover,
a.btn--style-one:hover,
.hbb-urgent:hover {
	background-color: var(--hbb-red-deep) !important;
	border-color: var(--hbb-red-deep) !important;
	color: #fff !important;
}

/* Logo colours for decorative shapes only, never behind text. */
.hbb-fill-green  { background-color: var(--hbb-logo-green); }
.hbb-fill-red    { background-color: var(--hbb-logo-red); }
.hbb-fill-yellow { background-color: var(--hbb-logo-yellow); }

/* GiveWP ships its own amber (#FFB840) on donation buttons, which measures
   1.9 behind white text and ignores the theme palette entirely. Bring it into
   the green family and fix the contrast at the same time. */
.give-btn,
.give-submit,
.give-form-wrap .give-btn,
input[type="submit"].give-submit,
.give-donation-level-btn,
.give-btn-modal {
	background-color: var(--hbb-green) !important;
	border-color: var(--hbb-green) !important;
	color: #fff !important;
}

.give-btn:hover,
.give-submit:hover,
.give-donation-level-btn:hover,
.give-btn-modal:hover {
	background-color: var(--hbb-green-deep) !important;
	border-color: var(--hbb-green-deep) !important;
	color: #fff !important;
}

/* Progress bars on the programme cards follow the same green. */
.give-progress-bar > span,
.give-goal-progress .give-progress-bar span {
	background-color: var(--hbb-logo-green) !important;
}

/* ---- Quote section -----------------------------------------------------
   Reduced to a single attributed quote, so the section no longer needs the
   height a testimonial carousel wanted. Typography carries it: no portrait,
   because a real person's photograph here would imply an endorsement that was
   never given. */

.hbb-quote {
	background-color: var(--hbb-mint);
}

/* The theme's own bottom padding on this block is 120px, which is what kept
   the section tall even after the Elementor padding was halved. */
.hbb-quote .testimonials-area-two,
.hbb-quote [class*="pb-120"] {
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

/* Drop the portrait column entirely and let the quote run full width.
   This is the change that actually halves the section: the image column was
   carrying most of the height, and a photograph of a real person here would
   imply an endorsement HealBridge does not have. */
.hbb-quote .testimonial-two-image,
.hbb-quote .col-lg-5:has(.testimonial-two-image) {
	display: none !important;
}

.hbb-quote .row > [class*="col-lg"] {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

.hbb-quote .row {
	justify-content: center;
	gap: 0 !important;
}

.hbb-quote .testimonial-item,
.hbb-quote .testimonial-content {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}

.hbb-quote blockquote,
.hbb-quote .testimonial-content p {
	font-family: var(--hbb-display);
	font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--hbb-forest);
	margin-bottom: 1.25rem;
}

/* Attribution stays quiet and clearly separate from the quote itself, so the
   words are never mistaken for HealBridge's own. */
.hbb-quote .testimonial-author h4,
.hbb-quote .author-name {
	font-family: var(--hbb-display);
	font-size: 1rem;
	color: var(--hbb-green-deep);
}

.hbb-quote .testimonial-author span,
.hbb-quote .author-designation {
	font-size: 0.85rem;
	color: var(--hbb-ink-soft);
}

/* Carousel furniture is pointless with one slide. */
.hbb-quote .owl-dots,
.hbb-quote .owl-nav,
.hbb-quote .slick-dots,
.hbb-quote .slick-arrow {
	display: none !important;
}

/* Charite's own .btn--yellow (#FFB840) carries white label text, which
   measures 1.9 and is unreadable. Retired from the palette entirely: the
   partnership ask is green, the urgent ask is red, and nothing here is
   yellow. */
.btn--yellow,
a.btn--yellow,
.theme-btn.btn--yellow {
	background-color: var(--hbb-green) !important;
	border-color: var(--hbb-green) !important;
	color: #fff !important;
}

/* The three "ways to help" cards carry a photograph as an inline background
   image, and their colour comes from a tinted overlay pseudo-element sitting
   on top of it. Earlier rules set background-color on the card itself, which
   the overlay covered, so the third card stayed amber. The overlay is the
   thing that needs recolouring. */
.feature-item--3::before,
.feature-item--3::after,
.feature-item--two.feature-item--3::before {
	background-color: var(--hbb-green) !important;
	background-image: none !important;
}

/* Keep the first two on brand too, in case the theme varies their tints. */
.feature-item--1::before,
.feature-item--2::before {
	background-color: var(--hbb-green) !important;
}

/* The third card's button was amber-on-white to match its old tint. */
.feature-item--3 .theme-btn,
.feature-item--3 a.btn {
	color: var(--hbb-green) !important;
}

/* ---- Feature card overlap ----------------------------------------------
   The parent theme pulls this block up with transform: translateY(-200px) so
   the cards sit over the section above. At -200px they cover the counter
   figures, which are the numbers the section exists to show. Eased to -120px:
   the overlap effect is kept, the counters stay readable. */
.features-area-two {
	transform: translateY(-120px) !important;
}

/* The pull leaves a gap below, which the theme compensates for further down.
   Reducing the pull by 80px means reclaiming 80px of that compensation. */
.features-area-two + *,
.features-area-two ~ .elementor-section {
	margin-top: -80px;
}

@media (max-width: 991px) {
	/* Stacked on a phone there is nothing to overlap, so drop it entirely. */
	.features-area-two {
		transform: none !important;
	}
	.features-area-two + *,
	.features-area-two ~ .elementor-section {
		margin-top: 0;
	}
}

.btn--yellow:hover,
a.btn--yellow:hover {
	background-color: var(--hbb-green-deep) !important;
	border-color: var(--hbb-green-deep) !important;
	color: #fff !important;
}

/* ---- Partnership emphasis ---------------------------------------------
   Teal marks anything about working together, rose marks anything urgent.
   Keeping the two jobs visually distinct is the whole point of the palette. */

/* Secondary buttons carry the partnership job, so they take teal while rose
   stays reserved for the urgent path. Two asks in the same colour read as one
   ask repeated. White on #0E5F63 measures 7.41. */
.hbb-partner,
.elementor-button.hbb-partner,
.btn--style-two,
a.btn--style-two {
	background-color: var(--hbb-teal) !important;
	border-color: var(--hbb-teal) !important;
	color: #fff !important;
}

.hbb-partner:hover,
.btn--style-two:hover,
a.btn--style-two:hover {
	background-color: #0a4a4e !important;
	border-color: #0a4a4e !important;
	color: #fff !important;
}

/* ---- Emphasis line -----------------------------------------------------
   The hero's second clause is wrapped in a span by the copy, so it can carry
   the accent without a second heading element. */

/* Two-tone headings. Charite's own section headings wrap the emphasised half
   in a span; giving it the brand accent is what makes those blocks read as
   designed rather than as a plain line of text. */
.hbb-hero-accent,
.banner-content h1 span,
.video-banner-content h1 span,
.section-title h2 span,
.section-title h3 span,
h2 span.hbb-accent {
	color: var(--hbb-green);
}

/* ==========================================================================
   HERO HEIGHT CAP

   The hero is sized by the background video's 16:9 ratio, so on a 1905px
   screen it renders 1071px tall and swallows the entire viewport: no headline,
   no buttons, nothing but video until you scroll.

   Capping the height also stops the video being upscaled across the full
   width, which is what made it look soft.
   ========================================================================== */

/* The hero is left entirely to the parent theme.
 *
 * Three attempts to control its height from here all broke it in different
 * ways: max-height plus overflow:hidden clipped the subtitle and both CTAs,
 * and flex centring on the section hid the headline outright. The theme nests
 * video.videoembed inside .videocontainer inside .banner inside .hero-area,
 * and each of those carries its own positioning that these overrides fought.
 *
 * If the hero needs resizing, do it in Elementor on the widget itself rather
 * than with CSS from the child theme. */

/* ==========================================================================
   RESPONSIVE HARDENING

   Defensive rules for the ways builder themes usually break on small screens.
   Written to prevent breakage rather than to re-lay-out the page, because the
   measured structure already collapses correctly at 390, 768 and 1280.
   ========================================================================== */

/* Nothing may push the page wider than the viewport. Elementor negative
   margins and full-bleed rows are the usual culprits. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Media scales instead of forcing the page wide. */
img, video, iframe, svg, canvas {
	max-width: 100%;
	height: auto;
}

/* Long words, URLs and email addresses break instead of overflowing. */
p, li, h1, h2, h3, h4, h5, h6, td, th, dd, dt, figcaption, blockquote {
	overflow-wrap: break-word;
}

/* Tables scroll inside their own box rather than widening the page. */
.entry-content table,
.elementor-widget-container table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 991px) {
	/* Charite pins several decorative shapes with absolute positioning and
	   negative offsets. On a narrow screen they sit outside the viewport and
	   drag a scrollbar with them without adding anything. */
	.shape,
	[class*="-shape"],
	[class*="shape-"],
	.circle-shape,
	.dot-shape {
		display: none !important;
	}

	/* Two-column rows that the theme leaves side by side below the lg
	   breakpoint. Anything narrower than a phone is unreadable. */
	.row > [class*="col-lg-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Big display type set for desktop overflows small screens; cap it. */
	.elementor-heading-title,
	.section-title h2 {
		font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.25rem) !important;
		line-height: 1.2 !important;
	}
}

/* Section rhythm is left to the parent theme.
 *
 * An attempt to halve it here was reverted: the padding shrank but the
 * widgets inside kept their own fixed heights, so the sections ended up with
 * more dead space rather than less, and the layout read as broken. Compressing
 * this properly means resizing the inner blocks first, not the wrappers.
 *
 * The quote section keeps its own tighter padding, set in the quote rules
 * above, because its content was genuinely reduced to a single line. */

@media (max-width: 600px) {
	/* Buttons go full width and stack, so no CTA ends up half off-screen or
	   wrapped onto three lines. */
	.theme-btn,
	.btn,
	.elementor-button,
	.give-btn {
		width: 100%;
		justify-content: center;
		white-space: normal;
	}

	/* Counters and stat rows sit two-up rather than four-up. */
	.counter-item,
	.funfact-item {
		width: 50%;
	}
}

/* ---- Focus -------------------------------------------------------------
   Never let a builder stylesheet remove the focus ring. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-button:focus-visible {
	outline: 3px solid var(--hbb-teal) !important;
	outline-offset: 2px !important;
}

/* ---- Quick Exit --------------------------------------------------------
   Unchanged from the original build. White on #8b0020 measures 9.91, and this
   control has to stay the most legible thing on any page it appears on. */

/* ---- Comment meta ------------------------------------------------------
   Comments are closed site-wide on purpose: an open comment box on a domestic
   abuse site lets anyone post identifying detail about a woman, or lets the
   person she left post directly.

   The parent theme calls comments_popup_link() straight into the post meta in
   template-parts/content.php and content-single.php, so WordPress prints
   "Comments Off" next to the author and date. Beside a byline that reads as a
   fault rather than a decision.

   Hidden here rather than by copying both template parts into the child theme,
   which would duplicate parent markup and drift on the next theme update. */

.blog-meta li:has(> .flaticon-bubble-chat) {
	display: none;
}

/* ==========================================================================
   ARTICLE FURNITURE

   Styles for the three blocks the article builder emits: the FAQ, the table of
   contents and the related reading list. All scoped to their own class so
   nothing else on the site is affected.
   ========================================================================== */

/* ---- FAQ ----------------------------------------------------------------
   Built on native details and summary, so it opens and closes without any
   JavaScript, works from the keyboard, and still reads correctly if the
   stylesheet fails to load. The default disclosure triangle is removed in two
   ways because Safari and Chrome disagree about which one draws it. */
.hb-faq {
	margin: 34px 0;
	border-top: 1px solid rgba(11, 58, 42, .14);
}

.hb-faq__item {
	border-bottom: 1px solid rgba(11, 58, 42, .14);
}

.hb-faq__q {
	position: relative;
	display: block;
	list-style: none;
	cursor: pointer;
	padding: 20px 52px 20px 0;
	font-family: var(--hbb-display), system-ui, sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.45;
	color: #0B3A2A;
}

.hb-faq__q::-webkit-details-marker { display: none; }
.hb-faq__q::marker { content: ''; }

.hb-faq__q::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -8px;
	border-right: 2px solid #00893F;
	border-bottom: 2px solid #00893F;
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.hb-faq__item[open] > .hb-faq__q::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.hb-faq__q:hover,
.hb-faq__item[open] > .hb-faq__q {
	color: #00893F;
}

/* Never remove the focus ring. */
.hb-faq__q:focus-visible {
	outline: 3px solid #00893F;
	outline-offset: 3px;
}

.hb-faq__a {
	padding: 0 52px 22px 0;
}

.hb-faq__a p {
	margin: 0;
}

@media (max-width: 575px) {
	.hb-faq__q { font-size: 17px; padding-right: 42px; }
	.hb-faq__a { padding-right: 0; }
}

/* ---- On this page -------------------------------------------------------- */
.hb-toc {
	margin: 0 0 34px;
	padding: 22px 26px;
	background: #E8F3EC;
	border-radius: 10px;
}

.hb-toc__title {
	margin: 0 0 10px;
	font-family: var(--hbb-display), system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0B3A2A;
}

.hb-toc ul { margin: 0; padding: 0 0 0 18px; }
.hb-toc li { margin: 0 0 6px; }
.hb-toc a { color: #04563A; text-decoration: underline; text-underline-offset: 2px; }
.hb-toc a:hover { color: #00893F; }

/* ---- Related reading ----------------------------------------------------- */
.hb-related {
	margin: 40px 0 8px;
	padding: 26px 28px;
	border: 1px solid rgba(11, 58, 42, .16);
	border-radius: 10px;
}

.hb-related h2 {
	margin: 0 0 14px;
	font-size: 20px;
}

.hb-related ul { margin: 0; padding: 0; list-style: none; }

.hb-related li {
	padding: 12px 0;
	border-top: 1px solid rgba(11, 58, 42, .1);
}

.hb-related li:first-child { border-top: 0; padding-top: 0; }

.hb-related a {
	display: block;
	font-family: var(--hbb-display), system-ui, sans-serif;
	font-weight: 600;
	color: #04563A;
}

.hb-related a:hover { color: #00893F; }

.hb-related__note {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	line-height: 1.5;
	opacity: .78;
}

/* ---- Restored after a theme file revert ---------------------------------
   Both of these were applied earlier and were lost when the child theme files
   went back to an older copy.

   The hero headline: Charite sets text-transform:capitalize on
   .hero-content h1, which title cases the client's line. It is meant to read
   "In the silence where fear lives, we build a bridge", and title case changes
   the register of a deliberately quiet sentence. !important is load bearing
   because charite/assets/css/style.css is enqueued after this file. */
.hero-content h1 {
	text-transform: none !important;
}

/* ---- Protective notices --------------------------------------------------
   Markup comes from inc/disclaimer.php, and appears on ARTICLES ONLY — never
   on the home page, Get Help, Contact, Donate, Volunteer or the policy pages.
   See the note at the top of that file for why.

   Forest rather than red. The red is reserved for the urgent path, and a legal
   notice must not compete visually with the emergency block on Get Help.

   !important is load bearing throughout: charite/assets/css/style.css is
   enqueued after this file, so its generic .entry-content rules would otherwise
   win on equal specificity. */

.hb-disclaimer {
	margin: 0 0 30px !important;
	padding: 18px 22px !important;
	background: #F2F6F3 !important;
	border: 1px solid rgba(11, 58, 42, .22) !important;
	border-left: 4px solid #0B3A2A !important;
	border-radius: 8px !important;
}

.hb-disclaimer__label {
	margin: 0 0 6px !important;
	font-family: var(--hbb-display), system-ui, sans-serif;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0B3A2A !important;
}

.hb-disclaimer p:last-child {
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #16281F !important;
}

.hb-statement {
	margin: 44px 0 8px !important;
	padding: 26px 28px !important;
	background: #F2F6F3 !important;
	border: 1px solid rgba(11, 58, 42, .22) !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #16281F !important;
}

.hb-statement h2 {
	margin: 0 0 12px !important;
	font-size: 20px !important;
	color: #0B3A2A !important;
}

.hb-statement p { margin: 0 0 14px !important; }

.hb-statement__list { margin: 0 0 4px !important; }

.hb-statement__list dt {
	margin-top: 14px !important;
	font-weight: 700 !important;
	color: #0B3A2A !important;
}

.hb-statement__list dd {
	margin: 4px 0 0 !important;
	padding: 0 !important;
}

.hb-statement__urgent {
	margin-top: 18px !important;
	padding-top: 14px !important;
	border-top: 1px solid rgba(11, 58, 42, .18) !important;
}

.hb-statement__more { margin-bottom: 4px !important; }

.hb-statement__links {
	margin: 0 !important;
	padding-left: 20px !important;
}

.hb-statement a,
.hb-disclaimer a {
	color: #04563A !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hb-statement a:hover,
.hb-disclaimer a:hover { color: #00893F !important; }

@media (max-width: 600px) {
	.hb-disclaimer { padding: 15px 17px !important; }
	.hb-statement { padding: 20px 18px !important; }
}

@media print {
	.hb-disclaimer,
	.hb-statement { border: 1px solid #000 !important; background: none !important; }
}

/* For text that must reach a screen reader without occupying space. Not
   display:none, which would remove it from the accessibility tree as well. */
.hb-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Article head --------------------------------------------------------
   Replaces Charite's full-bleed .page-banner-area on single posts, which put a
   fixed photograph of children behind the title of all 93 articles. Markup is
   in template-parts/content-single.php; the banner is unhooked in functions.php.

   Sits in brand.css rather than style.css because charite/assets/css/style.css
   is enqueued after style.css, so equal-specificity rules there lose. */

/* Full-width band above the content/sidebar row. The rule at the bottom is what
   separates it from the two columns, the way an editorial page does it. */
.hb-article-head {
	margin: 0 0 40px;
	padding-bottom: 26px;
	border-bottom: 1px solid rgba(11, 58, 42, 0.14);
	max-width: 62rem;   /* a headline the full 1200px wide is hard to read */
}

/* Category, above the title. */
.hb-article-head__kicker {
	margin: 0 0 12px !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.hb-article-head__kicker a {
	color: var(--hbb-green-deep) !important;   /* 6.74 on white */
	text-decoration: none;
}

.hb-article-head__kicker a:hover,
.hb-article-head__kicker a:focus-visible {
	text-decoration: underline;
}

/* Date and reading time, below the standfirst. */
.hb-article-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0 !important;
	font-size: 14px;
	line-height: 1.4;
	color: var(--hbb-ink-soft);
}

.hb-article-head__sep {
	color: #9AA8A1;   /* separator glyph only, never text */
}

/* Fluid, so the longest titles do not run to four lines on a narrow screen.
   !important is required, not lazy: charite/style.css sets
   ".charite-blog-details h1 { font-size: 40px }" at (0,1,1), which outranks this
   single class, and that sheet is enqueued after brand.css. Without it the clamp
   was ignored and "Strangulation: why it is treated differently from other
   violence" ran to four lines at 40px on a 375px screen. */
.hb-article-head__title {
	margin: 0 0 16px !important;
	font-size: clamp(28px, 5.2vw, 54px) !important;
	line-height: 1.12 !important;
	color: var(--hbb-forest);   /* 12.71 on white */
}

.hb-article-head__standfirst {
	margin: 0 !important;
	font-size: clamp(17px, 1.6vw, 19px);
	line-height: 1.55;
	color: var(--hbb-ink-soft);
	max-width: 62ch;
}

/* The parent overlays a date badge here; it is not printed any more, so the
   image no longer needs the relative positioning context it required. */
.hb-article-figure {
	margin-bottom: 30px;
}

.hb-article-figure img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

@media (max-width: 600px) {
	.hb-article-head { margin-bottom: 26px; padding-bottom: 20px; }
	.hb-article-figure { margin-bottom: 22px; }
}