/* Blue Door Holistic Counselling - overrides on the Calmind template.
 * ---------------------------------------------------------------------------
 * Loaded last, so it wins without editing the vendor stylesheets. Keeping the
 * template's own CSS untouched means a Calmind update can be dropped in and
 * this file re-applied, rather than the changes having to be found again.
 *
 * Everything here exists for one of three reasons:
 *   1. Motion - replacing plugin-driven movement with static layout
 *   2. Contrast - the template ships text that does not meet WCAG AA
 *   3. Readability - measure, line height, focus states
 */

/* ===========================================================================
 * 1. MOTION
 * ======================================================================== */

/* The parallax sections. jarallax used to position .jarallax-img with JS and
 * transform it on scroll; the plugin is stubbed, so the positioning has to be
 * declared here or the image would render inline, full width, above the text
 * it is supposed to sit behind. */
.jarallax { position: relative; overflow: hidden; }

.jarallax > .jarallax-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* These sections put white text over a photograph, which is a contrast gamble
 * that depends entirely on the photograph. A scrim makes it a known quantity:
 * at 0.62 over a mid-tone image the composited text clears 4.5:1. */
.jarallax.bg-dark::after,
.jarallax.text-light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 45, 0.62);
  z-index: 1;
}
.jarallax > .container,
.jarallax > .container-fluid { position: relative; z-index: 2; }

/* The three marquees. jQuery.marquee is stubbed, so the lists never start
 * scrolling - but .marquee expects the plugin to have wrapped and measured
 * them. Laid out as a static wrapping row instead, so the content still reads. */
[class*="de-marquee-list"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: center;
  animation: none !important;
  transform: none !important;
  white-space: normal !important;
  width: auto !important;
}
[class*="de-marquee-list"] > * { flex: 0 0 auto; }

/* The template duplicates marquee content so the loop looks seamless. With no
 * loop, the duplicate is just the same words twice. */
[class*="de-marquee-list"] .js-marquee:nth-child(n+2),
[class*="de-marquee-list"] > [aria-hidden="true"] { display: none; }

/* Belt and braces. The reveal classes are stripped from the markup and the
 * libraries are stubbed, so nothing should reach this - but an element that
 * animates its opacity from 0 and never arrives is invisible content, and that
 * is worth spending a blunt rule to prevent. */
[class*="fadeIn"], [class*="zoomIn"], [class*="slideIn"], .animated, .wow {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Nothing here should hijack scrolling. */
html, body {
  scroll-behavior: auto !important;
  overflow-x: hidden;
}

/* Honoured, but not relied on - most people never set it. The site holds still
 * for everybody; this just catches any transition the template adds later. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
 * 2. THE CORAL
 * ======================================================================== */

/* Kept, because it is the warmth in the palette - but at 2.03:1 on white it
 * cannot carry text and cannot sit behind it. So it is used only where it is
 * shape rather than information: rules, underlines, small marks. Anywhere the
 * coral is the only thing distinguishing two states, colour is not doing the
 * work alone. */
.accent-rule {
  border: 0;
  border-top: 3px solid var(--accent-coral);
  width: 3rem;
  margin: 1.25rem 0;
  opacity: 1;
}
.accent-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent-coral);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.18em;
}

/* ===========================================================================
 * 3. READABILITY
 * ======================================================================== */

body {
  line-height: 1.7;              /* template ships tighter than is kind here */
  -webkit-font-smoothing: antialiased;
}

/* A comfortable measure. Long lines are hard to track back from, which costs
 * more for some readers than others.
 *
 * Deliberately not set in ch. The ch unit is the advance of the "0" glyph,
 * and this typeface has a wide zero: 68ch measured out at 815px, which is 87
 * characters a line, not 68. Measured on the rendered page, 35rem gives about 68
 * 68 characters a line once the partly-filled last line is accounted for, so the
 * number in the CSS and the text on screen finally agree. */
main p, main li { max-width: 35rem; }

/* The lead paragraph runs larger, so the same width gives it fewer characters,
 * which is what you want from an opening paragraph. */
main p.lead { max-width: 37rem; }

h1, h2, h3, h4 { text-wrap: balance; line-height: 1.25; }

/* Plain-language pages have a lot of short paragraphs; give them air. */
main p { margin-bottom: 1.15rem; }

/* Focus has to be visible. The template relies on the browser default, which
 * several of its components then remove. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Links in running text should be identifiable without relying on colour. */
main p a:not(.btn), main li a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Tap targets. 44px is the floor, and this site will be read on phones.
 *
 * .btn-main is listed explicitly: it is the template's own button class and
 * does not carry .btn, so a rule written for .btn alone misses every actual
 * button on the site. Measured at 38px and 40px before this was added. */
.btn, .btn-main, .btn-line, button, .nav-link, header a { min-height: 44px; }
.btn, .btn-main, .btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Skip link - first thing in the tab order, invisible until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ===========================================================================
 * 4. THE PRELOADER
 * ======================================================================== */

/* The template covers the page with a spinner until load, then hides it. On a
 * static site behind a CDN that is a flash of spinning motion rather than
 * reassurance - the page is usually there before the spinner is. Hidden
 * outright, and its animation stopped: the eight divs keep rotating inside the
 * hidden container otherwise, which is pure battery cost.
 *
 * The element stays in the DOM because designesia.js hides it on load and
 * removing it risks a null reference. */
#de-loader { display: none !important; }
.lds-roller, .lds-roller div, .lds-roller div::after { animation: none !important; }

/* ===========================================================================
 * 5. PENDING MARKERS
 * ======================================================================== */

/* Everywhere the template invented a detail - an address, a phone number, an
 * email - it has been replaced with one of these rather than a plausible
 * guess. They are loud on purpose. This is a health practice: a wrong phone
 * number rings a real stranger, and a made-up trading address is a false
 * statement about where a practitioner works.
 *
 * Nothing goes live with one of these still on the page. The build script
 * refuses to package a site that contains any. */
.pending {
  display: inline-block;
  background: #FFF3CD;
  color: #6B4A00;
  border: 1px dashed #B8860B;
  border-radius: 3px;
  padding: 0.05em 0.45em;
  font-size: 0.92em;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  white-space: normal;
}
.pending::before { content: "⚠ "; }

/* ===========================================================================
 * 6. COMPONENTS ADDED FOR BLUE DOOR
 * ======================================================================== */

/* Block-level pending markers, for whole sections Irna has to supply rather
 * than single values. Same amber as the inline ones, same purpose: it should
 * be impossible to publish this site without noticing them. */
.pending-block {
  background: #FFF8E6;
  border: 1px dashed #B8860B;
  border-left: 4px solid #B8860B;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  color: #4A3500;
  max-width: 40rem;
}
.pending-block strong { display: block; margin-bottom: 0.35rem; color: #6B4A00; }
.pending-block p { margin: 0; font-size: 0.95em; }

/* Inside a .text-light or .bg-dark section the block inherited white text and
 * printed cream on cream - the warning was invisible in exactly the places it
 * mattered. Colour is forced rather than inherited. */
.text-light .pending-block,
.bg-dark .pending-block,
.bg-dark-1 .pending-block,
.text-light .pending-block p,
.bg-dark .pending-block p,
.bg-dark-1 .pending-block p { color: #4A3500 !important; }

.text-light .pending-block strong,
.bg-dark .pending-block strong,
.bg-dark-1 .pending-block strong { color: #6B4A00 !important; }

/* Numbered steps. The number is information here - it is a sequence, and the
 * order is the thing the reader needs - so it is rendered, not decorative. */
.ol-steps { list-style: none; counter-reset: step; padding-left: 0; margin-top: 1.5rem; }
.ol-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.75rem;
}
.ol-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ol-steps h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.ol-steps p  { margin: 0; }

/* A quiet ground for alternating sections, tinted towards the door blue
 * rather than a neutral grey, so it reads as chosen. */
.bg-light { background: #F4F7FA; }

/* Checked lists carry real content on these pages, so give them room. */
.ul-check > li { margin-bottom: 0.65rem; }

/* ===========================================================================
 * 7. THE HERO SCRIM
 * ======================================================================== */

/* The template puts white text straight onto a photograph with nothing
 * between them. Measured against the actual pixels of images/slider/b1.webp,
 * that gave:
 *
 *     eyebrow   1.85:1   (WCAG wants 4.5:1 for text this size)
 *     headline  2.04:1   (WCAG wants 3:1 for text this large)
 *     worst     1.22:1
 *
 * It reads acceptably to a sighted reader in good light because the eye
 * compensates. The measurement is what counts, and the measurement fails.
 *
 * At 0.60 the worst pixel in the headline band gives 5.12:1 and the eyebrow
 * 6.28:1, so both pass even where the photograph is at its brightest. Tuned
 * against the image, not guessed - if the hero photograph changes, re-measure
 * rather than assuming this number still holds.
 *
 * Sits on .swiper-inner, which carries the background image, and below
 * .sw-caption, which carries the text. */
.swiper-inner { position: relative; }

.swiper-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 45, 0.60);
  z-index: 1;
  pointer-events: none;
}

.swiper-inner > .sw-caption { position: relative; z-index: 2; }

/* ===========================================================================
 * 8. MOBILE
 * ======================================================================== */

/* The menu button is a 32x32 <span>, so the earlier tap-target rule - which
 * covers .btn, button, .nav-link and header links - did not reach it. 44px is
 * the accepted floor, and this is the control every phone visitor has to hit
 * before they can go anywhere. */
#menu-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Same floor for the menu links once the drawer is open. Generous rather than
 * minimal: a mis-tap on a small link is a small frustration for most people
 * and a much larger one for someone with a motor difficulty. */
@media (max-width: 992px) {
  #mainmenu > li > a {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    display: block;
  }
}

/* The hero headline is 48px on a 375px screen, which is about seven
 * characters a line. Bring it down so it reads as a sentence rather than a
 * column of words. */
@media (max-width: 576px) {
  .sw-text-wrapper h1 { font-size: 2rem; line-height: 1.2; }
  .sw-caption .subtitle { font-size: 0.75rem; letter-spacing: 1.5px; }

  /* Stacked buttons, full width, with room between them - two side-by-side
     pills at this width leaves each one too narrow to read or hit. */
  .sw-caption .btn-main { display: block; width: 100%; margin-left: 0 !important; }
  .sw-caption .btn-main + .btn-main { margin-top: 0.75rem; }
}

/* ===========================================================================
 * 9. THE SUB-PAGE BANNER
 * ======================================================================== */

/* The breadcrumb was being dimmed twice over.
 *
 * .crumb-wrapper carries z-index:1 and the scrim is a ::after with z-index:1
 * too - and a generated ::after paints after its siblings, so the scrim was
 * sitting on top of the breadcrumb rather than behind it. On top of that the
 * template sets opacity:0.6 on the links. White text, dimmed to 60%, then
 * covered by a 62% scrim.
 *
 * The scrim exists to sit behind text, never over it. */
#subheader .crumb-wrapper { z-index: 2; }

/* 0.85 rather than 1.0 keeps the breadcrumb visibly secondary to the heading
 * without pushing it under the contrast floor. The current page stays at full
 * white, so the two are still distinguishable by more than position. */
#subheader .crumb a { opacity: 0.85; }
#subheader .crumb a:hover,
#subheader .crumb a:focus-visible { opacity: 1; }

/* The header is position:fixed over the banner, so the banner's top padding
 * has to clear it or the heading renders underneath the navigation. An
 * earlier 112px put both the eyebrow and the h1 behind it.
 *
 * Measured on a correctly-loaded 1280px page, the header is 132px. 13rem is
 * 208px, leaving about 80px of clearance.
 *
 * A warning for whoever measures this next: designesia.js decides at load
 * whether to add the header-mobile class, based on the window width at that
 * moment. A page loaded in a zero-width or very narrow window keeps that
 * class afterwards even when the window is widened, which reports the header
 * as 242px and #mainmenu as carrying 100px of padding it does not really
 * have. Both are artifacts. Reload at the width you mean to measure. */
/* 480px, not the template's 395. The header is position:fixed over this
 * banner and covers its top 132px, so only 263px of a 395px banner is
 * actually looked at - not enough vertical room for a face without cropping
 * it. The taller banner leaves 348px below the header, and the photographs
 * are cut to match this box exactly so the browser does not crop them a
 * second time on top of the crop already made. */
#subheader { padding-top: 13rem; padding-bottom: 5rem; min-height: 480px; }

@media (max-width: 991px) {
  #subheader { padding-top: 9rem; padding-bottom: 3.5rem; }
}

@media (max-width: 576px) {
  #subheader { padding-top: 7.5rem; padding-bottom: 3rem; }
  #subheader h1 { font-size: 2rem; }
}


/* ===========================================================================
 * 10. THE CLOSING BANNER
 * ======================================================================== */

/* One banner, identical on every page, flush against the footer.
 *
 * Built on the template's own closing section - heading, paragraph and
 * buttons on the left, a picture on the right - rather than a centred
 * full-bleed block, because that is the shape the rest of the site is
 * already using and it does not need a second idiom at the very bottom.
 *
 * What changes is the background: the template shipped an abstract wave, and
 * this uses one of Irna's photographs. A blue door, for a practice called
 * Blue Door, and the only landscape door among them - the other sixteen are
 * portrait, and a portrait door cropped to a banner stops reading as a door. */
.closing-banner {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background-image: url("../images/background/banner.webp");
  background-size: cover;
  background-position: center;
}

/* The mask: white, near-opaque, so the door survives as texture rather than
 * as a picture competing with the words.
 *
 * Measured against the actual pixels of banner.webp. Dark ink on a white mask
 * fails on the DARKEST composited pixel, which is the opposite of the dark-
 * mask case, so the number was measured that way round:
 *
 * With the picture card gone, the text sits alone in the left 55% - so the
 * wash only has to carry contrast there, and the photograph can come through
 * much more strongly on the right where nothing sits on it. Measured over
 * that left band, as flat wash plus a left-weighted gradient:
 *
 *     0.62 + 0.20   4.21:1   fails
 *     0.65 + 0.18   4.49:1   fails, and by almost nothing
 *     0.68 + 0.15   4.74:1   <- chosen
 *     0.72 + 0.10   5.04:1
 *
 * 0.68 is the lightest wash that still clears 4.5:1 on the darkest pixel
 * under the text. The photograph reads at about a third of its strength on
 * the right-hand side, which was the point of lightening it.
 *
 * Re-measure if the picture changes: this number belongs to this image. */
.closing-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 80%),
    rgba(255, 255, 255, 0.68);
}

/* A hairline of the coral along the top edge - the one place the accent runs
 * at full strength. It also separates the banner from the section above
 * without needing a margin, which is what keeps the whole thing flush. */
.closing-banner::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-coral);
  z-index: 2;
}

.closing-banner > .container { position: relative; z-index: 1; }

.closing-banner h2 {
  color: var(--primary-color);
  margin: 0 0 0.9rem;
  text-wrap: balance;
}

.closing-banner p {
  color: #3F4A52;
  max-width: 32rem;
}

/* The section still carries the template's .text-light in places, and the
 * outline button draws itself white. Both would vanish on a white ground.
 *
 * The heading rule below is written as `.container h2` deliberately: the
 * blanket `.container *` above is two classes to `.closing-banner h2`'s one,
 * so it wins on specificity no matter which is written last. The heading came
 * out slate instead of navy until this was matched. */
.closing-banner,
.closing-banner .container,
.closing-banner .container * { color: #3F4A52; }
.closing-banner .container h2 { color: var(--primary-color); }

.closing-banner .btn-main.btn-line {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.closing-banner .btn-main.btn-line span { color: var(--primary-color); }
.closing-banner .btn-main:not(.btn-line) span { color: #fff; }

/* The picture on the right sits slightly proud of the band, the way the
 * template's did, so the banner reads as one object rather than a photograph
 * dropped into a coloured box. */
.closing-banner .banner-figure {
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  display: block;
  width: 100%;
}

/* Flush means flush. */
.closing-banner + footer { margin-top: 0; padding-top: 0; }

@media (max-width: 991px) {
  .closing-banner .banner-figure { max-width: 420px; margin: 0 auto; }
  .closing-banner p { max-width: none; }
}

@media (max-width: 576px) {
  .closing-banner .btn-main { display: block; width: 100%; margin: 0 0 0.75rem; }
  .closing-banner::before {
    background: rgba(255, 255, 255, 0.90);
  }
}

/* ===========================================================================
 * 11. GUTTERS
 * ======================================================================== */

/* The template's container is 1200px wide with 12px of padding, so at a 1280px
 * window the text began 45px from the edge of the screen. That is tight on a
 * site whose readers include people who find dense edges hard going, and it
 * was inconsistent besides: sections whose row carried justify-content-center
 * started at 245px, and the two that did not started at 45px.
 *
 * The rows are matched up in the markup; this widens the gutter for
 * everything so nothing ever runs to the edge of the glass. */
main .container,
footer .container,
.closing-banner .container {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

/* The banner's text is deliberately left-aligned rather than centred, so it
 * needs its own indent or it sits closer to the edge than the page above it. */
.closing-banner .container > .row { margin-left: 0; margin-right: 0; }
.closing-banner .col-lg-8 { padding-left: 0.5rem; }

@media (max-width: 767px) {
  main .container,
  footer .container,
  .closing-banner .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ===========================================================================
 * 12. VERTICAL RHYTHM
 * ======================================================================== */

/* The template gives every section 100px of padding top and bottom, so two
 * sections in a row put 200px of nothing between their content. On pages that
 * are mostly short blocks - which these are - that reads as the page having
 * lost its place rather than as generous spacing.
 *
 * 3.5rem each side gives 112px between sections instead of 200px. Still airy,
 * which matters here: the brief asks for room to breathe, and cramming this
 * audience is worse than sprawling. It is the sprawl that was the problem. */
main > section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

/* The banner sets its own spacing and must stay flush. */
main > section.closing-banner { padding-top: 0; padding-bottom: 0; }

/* The page banner clears the fixed header, so its top padding is not rhythm
 * and must not be overwritten here. */
main > section/* 480px, not the template's 395. The header is position:fixed over this
 * banner and covers its top 132px, so only 263px of a 395px banner is
 * actually looked at - not enough vertical room for a face without cropping
 * it. The taller banner leaves 348px below the header, and the photographs
 * are cut to match this box exactly so the browser does not crop them a
 * second time on top of the crop already made. */
#subheader { padding-top: 13rem; padding-bottom: 5rem; min-height: 480px; }

@media (max-width: 991px) {
  main > section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  main > section#subheader { padding-top: 9rem; padding-bottom: 3.5rem; }
}

@media (max-width: 576px) {
  main > section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  main > section#subheader { padding-top: 7.5rem; padding-bottom: 3rem; }
}






/* ===========================================================================
 * 13. THE FOOTER
 * ======================================================================== */

/* Back to the dark footer: white type on the door, darkened by multiply.
 *
 * The light version went as far as it could - deep blue lift, black ink,
 * 4.84:1 - and was still not dark enough. Dark type needs a light ground,
 * which caps how dark the footer can be; white type does not.
 *
 * Multiply rather than a translucent wash, because a flat scrim mixes every
 * pixel toward the scrim's own colour and greys the blue out, where multiply
 * scales each channel and keeps it. Measured, white on the worst pixel:
 *
 *     0.50   3.36:1   fails
 *     0.65   5.28:1   <- chosen
 *     0.75   7.33:1
 */
footer {
  position: relative;
  background-image: url("../images/background/footer.webp");
  background-color: #0B2338;
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  border-top: 3px solid var(--accent-coral);
}

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 35, 56, 0.35);
  pointer-events: none;
}

footer > * { position: relative; z-index: 1; }

/* Full white rather than the template's inherited 75% - a footer link is
 * navigation, not fine print. */
footer,
footer p,
footer a,
footer h2,
footer h3,
footer .widget a,
footer .subfooter,
footer .subfooter a { color: #FFFFFF; }

footer a:hover,
footer a:focus-visible { color: var(--accent-coral); }

footer hr,
footer .subfooter { border-color: rgba(255, 255, 255, 0.22); }

/* On a phone the footer is tall and narrow and a cover-crop shows one plank,
 * so anchor to the top where the arch is. */
@media (max-width: 767px) {
  footer { background-position: center top; }
  footer::before { background: rgba(11, 35, 56, 0.48); }
}

/* ===========================================================================
 * 14. THE LIGHT PAGE BANNER
 * ======================================================================== */

/* A pale wash over the photograph instead of the dark scrim, for banners that
 * want to feel lighter. Used on the Writing page.
 *
 * It is not a smaller number - it is the other scheme. A light ground cannot
 * carry white type, so the heading, eyebrow and breadcrumb all go dark, and
 * the ink has to be deep: measured over this photograph, the site's usual
 * navy #144C73 only reaches 4.09:1 even at a 0.66 wash, where #0B2338 clears
 * 4.5:1 by 0.50.
 *
 *     wash    #144C73   #0B2338
 *     0.50     2.56:1    4.50:1
 *     0.58     3.26:1    5.75:1   <- chosen
 *     0.66     4.09:1    7.21:1
 *
 * 0.58 leaves the photograph at about 42 per cent, which is light enough to
 * read as a wash rather than a veil. Re-measure if the picture changes. */
#subheader.subheader-light::after {
  background: rgba(255, 255, 255, 0.58);
}

#subheader.subheader-light,
#subheader.subheader-light h1,
#subheader.subheader-light .subtitle,
#subheader.subheader-light .crumb,
#subheader.subheader-light .crumb a,
#subheader.subheader-light .crumb .active { color: #0B2338; }

/* The breadcrumb's own pill sits on a dark tint by default. */
#subheader.subheader-light .crumb-wrapper { background: rgba(255, 255, 255, 0.45); }
#subheader.subheader-light .crumb a { opacity: 0.85; }
#subheader.subheader-light .crumb a:hover { opacity: 1; }

/* The header is transparent and position:fixed over the page banner, so a
 * light banner leaves white navigation on a pale sky. Measured over the
 * header band of the washed photograph:
 *
 *     white (the default)   2.69:1   fails
 *     navy #144C73          3.38:1   fails
 *     deep navy #0B2338     5.96:1   <- chosen
 *
 * Note the site's usual navy is not dark enough here either; this wants the
 * deep one. The logo swaps to the navy variant for the same reason - the
 * white SVG simply disappears. */
body.light-banner header:not(.smaller) #mainmenu > li > a,
body.light-banner header:not(.smaller) .menu-item,
body.light-banner header:not(.smaller) #menu-btn { color: #0B2338; }

body.light-banner header:not(.smaller) #logo img[src*="logo-white"] {
  content: url("../images/blue-door-logo.svg");
}

/* The burger's bars are drawn with background-color, not colour. */
body.light-banner header:not(.smaller) #menu-btn span,
body.light-banner header:not(.smaller) #menu-btn::before,
body.light-banner header:not(.smaller) #menu-btn::after { background-color: #0B2338; }

/* Once the header goes sticky it has its own solid ground again, so all of
 * this must stop applying - hence the :not(.smaller) on each rule above. */

/* ===========================================================================
 * 15. MOBILE, MEASURED
 * ======================================================================== */

/* Audited at 375px across every page. No horizontal overflow, nothing
 * animating, no image wider than the screen - but the tap targets failed in
 * three places, all of them measured rather than guessed.
 *
 * 44x44 is the floor. Below it people miss, and a miss costs more for someone
 * with a motor difficulty or a tremor than the extra pixels cost anyone. */

@media (max-width: 991px) {

  /* The drawer's links measured 20px tall - the anchor was hugging its own
   * text with no padding. They are the whole navigation on a phone. */
  #mainmenu > li > a,
  #mainmenu > li > .menu-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  /* Separators, so the rows read as distinct targets rather than a block. */
  #mainmenu > li + li > a { border-top: 1px solid rgba(255,255,255,0.12); }

  /* btn-text links - 'What happens in a session', 'All writing' - measured
   * 27px. They sit in section headers where nothing else is tappable. */
  .btn-text {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Inline links inside running text keep their natural size on purpose:
   * padding them to 44px would break the line rhythm of a paragraph, and
   * they are not the primary way to reach anything on this site. */
}

@media (max-width: 767px) {
  /* The feature tiles are square photographs; at phone width they stack, and
   * a full-height square eats most of a screen each. */
  .h-100[data-bgimage] { min-height: 220px; }

  /* Four circles in a row become four in a column - cap them so the page does
   * not become a very long gallery. */
  .circle { max-width: 260px; margin-left: auto; margin-right: auto; }

  /* The amber markers wrap onto two lines at this width and were running
   * into the text around them. */
  .pending { display: inline-block; margin: 0.15em 0; }
}

/* ===========================================================================
 * 16. CENTRED TEXT BLOCKS
 * ======================================================================== */

/* A max-width paragraph inside a .text-center parent centres its TEXT but
 * leaves the box itself hard against the left edge of the column, so the
 * lines look centred on the wrong axis. The measure rule in section 3 caps
 * these at 35-37rem, which is exactly what exposes it.
 *
 * Centring the box is the fix; the text-align was never the problem. */
.text-center > p,
.text-center > .lead,
.text-center p.lead {
  margin-left: auto;
  margin-right: auto;
}