/*
Theme Name: CLC Ontario
Theme URI: https://clcontario.ca/
Author: Community Lactation Consultants
Description: The sister site to the Ontario Breastfeeding Clinic replica. Its own header, footer and
navigation, sharing the clinic's palette and components rather than copying them: the design system is
mounted in from the OBC theme, so a change to the palette reaches both sites and neither can drift.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: clc-ontario
*/

/* sprint 30 - the footer sits on deep green and was inheriting the body's ink: #1f2c31 on #294f4b,
   about 1.58:1, and unreadable. A band that sets a background must set its foreground in the same
   breath. This is the second time this project has shipped that bug, after the white-on-white offer
   card, so it is worth naming: the block editor's background colour does not bring a text colour.

   The first fix used var(--mv-cream) and did nothing, which is the more useful half of the lesson.
   Those tokens are declared on .obc-mv, which wraps page content, and the footer is outside it, so
   the variable was undefined and the whole declaration was dropped silently. WordPress builds its own
   custom properties from theme.json and puts them on the root, so they reach every part of the page
   including this one. Same palette, same single source, and it works where the theme's own does not. */
.clc-footer,
.clc-footer .clc-footer-line {
  color: var(--wp--preset--color--ivory, #f6efe6);
}
.clc-footer a {
  color: var(--wp--preset--color--warm-gold, #d7b47a);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.clc-footer a:hover { color: var(--wp--preset--color--paper, #fff); }
.clc-footer a:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 3px;
}

/* 7 October 2026 - the gold mark in the header, beside the site title.

   Sized in CSS rather than in the markup because the file is 256px for a 34px slot: it is the one
   picture on every page, it has to stay sharp on a two-times screen, and a flower at 34px with a
   gradient through it shows every pixel it is short of. The intrinsic width and height stay on the
   img so the header does not jump while it loads. */
.clc-brand {
  gap: 10px;
  align-items: center;
}
.clc-brand-mark {
  margin: 0;
  line-height: 0;
  flex: 0 0 auto;
}
/* 9 October 2026 — Amanda: "Let's make our logo the biggest thing in the header : )" It was 34px,
   which is smaller than the cap height of two stacked nav links put together. */
.clc-brand-mark img {
  display: block;
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
}
.clc-brand .wp-block-site-title a,
.clc-brand .wp-block-site-title {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  .clc-brand { gap: 10px; }
  .clc-brand-mark img { width: 42px; height: 42px; }
}

/* the page you are on, in the header. The underline carries it where colour alone would not: on a
   deep green band gold against ivory is a real difference, and it is still only a colour. */
.clc-nav-here,
.wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--warm-gold, #d7b47a) !important;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.clc-nav-go .clc-nav-here,
.clc-nav-go .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--deep-green, #294f4b) !important;
  text-decoration: none;
}

/* 7 October 2026 - and the band's own foreground, which is the bug the footer comment above names,
   in the other half of the page. The nav shell is the clinic's component and the clinic puts it on
   white, so its links are deep green; this site puts the same component on deep green, and the site
   title and every nav link were #5e5e5e on #294f4b - 1.4:1, against a 4.5:1 minimum. Readable on
   the laptop it was built on and not much else.

   The desktop nav and the title only. The mobile links live inside WordPress's own overlay, which
   opens on its own light background, and forcing ivory there would move the same bug rather than
   fix it.

   The doubled class on the nav link is not a flourish. WordPress ships
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit }`, which is three classes and beat the first version of this rule: the links
   went on inheriting #5e5e5e from the body and the fix looked applied while changing nothing. */
.clc-nav-shell .clc-mark a,
.clc-nav-shell .obc-desktop-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--paper, #fff);
}
/* 7 October 2026 — Amanda: "make the menu contrast more noticible." Ivory on deep green measured
   7.95:1, which passes and still read as a whisper against a dark band: the letters are small, wide
   apart and uppercase, and contrast at that size is carried by weight as much as by colour. Paper
   white at 500 is 9.6:1 and reads as a menu. */
.clc-nav-shell .obc-desktop-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-weight: 500;
}

/* and the one thing a family came for is a button rather than a word in a row of words */
.clc-nav-shell .clc-nav-go .wp-block-navigation-item__content.wp-block-navigation-item__content {
  padding: .5em 1.1em;
  border-radius: 999px;
  background: var(--wp--preset--color--warm-gold, #d7b47a);
  color: var(--wp--preset--color--deep-green, #294f4b);
  font-weight: 600;
}
.clc-nav-shell .clc-nav-go .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--paper, #fff);
  color: var(--wp--preset--color--deep-green, #294f4b);
}

/* the footer menu, which is the same three destinations for somebody at the bottom of a long page */
.clc-footer-menu {
  margin: 0 0 1.1rem;
  font-size: .95rem;
  letter-spacing: .01em;
}
.clc-footer-menu a {
  color: var(--wp--preset--color--paper, #fff);
  text-decoration: none;
  font-weight: 500;
}
.clc-footer-menu a:hover { color: var(--wp--preset--color--warm-gold, #d7b47a); text-decoration: underline; }
.clc-footer-menu span { opacity: .45; padding: 0 .35em; }
.clc-nav-shell .clc-mark a:hover,
.clc-nav-shell .obc-desktop-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--warm-gold, #d7b47a);
}
.clc-nav-shell .clc-mark a:focus-visible,
.clc-nav-shell .obc-desktop-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 3px;
}

/* 7 October 2026 - the listing form on /register/.

   Plain and wide-lipped on purpose. Every field carries its own note under it rather than a
   placeholder inside it: a placeholder disappears the moment somebody types, which is exactly when
   "the first three characters and nothing more" is the sentence they need. */
/* 7 October 2026 — Amanda: "The form seems to be justified to the Left and looks crowded, please
   centre it." Centred in its column and given room between the fields: it is fourteen questions and
   it was reading as one block of text with boxes in it. */
.clc-listing-form {
  max-width: 34em;
  margin: 34px auto 0;
}
.clc-field {
  margin: 0 0 28px;
}
.clc-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.clc-field-checkbox label {
  font-weight: 400;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
.clc-field-checkbox input {
  margin-top: 4px;
  flex: 0 0 auto;
}
.clc-field input[type="text"],
.clc-field input[type="email"],
.clc-field textarea,
.clc-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c9c2b8;
  border-radius: 4px;
  background: var(--wp--preset--color--paper, #fff);
  font: inherit;
  font-size: 16px;   /* anything under 16 makes an iPhone zoom the page on focus */
}
.clc-field input:focus-visible,
.clc-field textarea:focus-visible,
.clc-field select:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 2px;
}
.clc-note,
.clc-optional {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: #5e5e5e;
}
.clc-optional {
  display: inline;
  font-weight: 400;
  margin: 0;
}
/* the sentence that says pressing the button publishes nothing.
   8 October 2026 — under the button now, at Amanda's ask, and the margins swap with it: the gap it
   had above the button it now has below, so the button keeps its air on both sides and the sentence
   sits close enough to read as an answer to it rather than as small print at the end of the page. */
.clc-listing-gate {
  border-left: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  padding-left: 14px;
  margin: 18px 0 26px;
}
.clc-listing-problems {
  border-left: 3px solid #a4332c;
  padding: 2px 0 2px 14px;
  margin-bottom: 22px;
}
.clc-listing-said {
  border-left: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  padding: 2px 0 2px 14px;
  font-size: 18px;
  line-height: 1.6;
}
.clc-listing-said-more {
  margin-top: 14px;
  padding-left: 17px;
  font-size: 15px;
  line-height: 1.6;
  color: #5e5e5e;
}

/* 7 October 2026 - the three audiences on the front page are not a sequence.

   The clinic's card component numbers itself, which is right on its own pages: those cards are her
   five steps, in her order, and the numbering is in CSS so reordering the blocks renumbers them.
   Midwives, public health units and constituency offices are three kinds of reader, and 1-2-3 over
   them says there is an order to go in. The component is mounted read-only from the clinic's theme,
   so it is turned off here rather than changed there. */
.mv-clc-tiers .mv-who-card::before {
  content: none;
}
.mv-clc-tiers .mv-who-card-title {
  padding-right: 0;
}
/* and the sentence under the cards is a new thought, not the last card's footnote */
.mv-clc-tiers .mv-who-cards + .mv-body {
  margin-top: clamp(22px, 2.4vw, 34px);
}

/* 7 October 2026 — the photographs on the families page. A fixed band rather than the picture's own
   height: these are the clinic's hero images, shot wide, and at full width one of them is 900px of
   face with the page pushed off the screen behind it. object-position favours the upper middle,
   where a baby's head is in all of them. */
.clc-band-photo { margin: 0; }
.clc-band-photo img {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
  object-position: center 35%;
}
.clc-band-photo.is-short img { height: clamp(180px, 24vw, 300px); }

/* 7 October 2026 — both buttons in sentence case, at Amanda's eye: "Find an IBCLC near you is in
   sentence case and WHY THIS MATTERS is in capitals... it makes the buttons look unrelated."

   The clinic's own rule uppercases the whole button family, and on its pages that is right: those
   labels are two or three words of instruction. Here they are sentences — "Find an IBCLC near you",
   "Add yourself to the register" — and a sentence in capitals reads as shouting rather than as a
   label. Scoped to .mv-clc, so the clinic's pages are untouched, and one class more specific than
   the rule it overrides.

   The size goes up a point with the letter-spacing coming off: uppercase at 14px and wide tracking
   is as legible as sentence case at 15px and tight, and dropping one without the other leaves the
   labels looking shrunken. */
.obc-mv.mv-clc .mv-cta .wp-block-button__link,
.obc-mv.mv-clc .mv-cta-ghost .wp-block-button__link {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 15px;
}

/* the one link a field may carry, under its note. Sized like the note so it reads as part of the
   field rather than as a control competing with the button at the end of the form. */
.clc-field-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--deep-green, #294f4b);
  text-underline-offset: 3px;
}
.clc-field-link:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 3px;
}

/* 7 October 2026 — the line that cannot wait for a consultant's next opening.
   Muted Berry is the palette's own colour for red flags, and BRAND's rule for it is that the
   written label must carry the meaning: "Call your doctor or go to emergency today" says it in
   words, and the rule down the side only agrees with them. Somebody who cannot see the colour, or
   who is reading this in a screen reader at four in the morning, loses nothing. */
/* 9 October 2026 — a footnote. It was a bordered callout the size of the list above it, telling a
   mother something she already knows in the voice of somebody who doubts her. */
.clc-urgent {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.5;
  opacity: .7;
}

/* and the line that is now the loud one, because it is the line that gets somebody to ask */
.clc-dont-wait {
  margin: clamp(22px, 2.8vw, 32px) 0 0;
  max-width: 20ch;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* 7 October 2026 — the menu button, which was #5e5e5e on #294f4b: 1.4:1, and all but invisible.
   The same bug the nav links had an hour earlier and from the same cause — the clinic's component
   is built for a white bar and this site puts it on deep green. WordPress draws the icon as an SVG
   that inherits currentColor, so the colour goes on the button and the icon follows. */
.clc-nav-shell .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--paper, #fff);
  padding: 6px;
}
.clc-nav-shell .wp-block-navigation__responsive-container-open svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.clc-nav-shell .wp-block-navigation__responsive-container-open:hover {
  color: var(--wp--preset--color--warm-gold, #d7b47a);
}
.clc-nav-shell .wp-block-navigation__responsive-container-open:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 3px;
}
/* the close button sits on the overlay's own light ground, so it keeps the dark ink */
.clc-nav-shell .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--deep-green, #294f4b);
}

/* 7 October 2026 — the safety-net block, lifted out of the who-is-who list and given somewhere to
   go. Ivory with the gold rule the page already uses for a quoted list, rather than a fourth deep
   green band: the page is green, ivory, green, white, green, and a fifth band of colour would stop
   any of them meaning anything. */
.clc-net {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 34px);
  border-left: 4px solid var(--wp--preset--color--warm-gold, #d7b47a);
  background: var(--wp--preset--color--ivory, #f6efe6);
}
.clc-net-title {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.25;
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.clc-net .mv-body { margin-bottom: 0; }
.clc-net .mv-ref-actions { margin-top: clamp(16px, 2vw, 22px); }

/* 8 October 2026 — the sign-off at the end of "What is an IBCLC?". Set in the italic serif the
   headings use for their emphasised word (--mv-accent), which is the site's one borrowed gesture
   and the right one for a signature.

   The title line is quieter rather than grey: this sits on the deep green band, where grey is
   unreadable and a translucent paper is what "smaller print" looks like. Measured at 0.72 of the
   band's own ink, which holds above 4.5:1 against #294f4b. */
.clc-sign {
  margin-top: clamp(26px, 3vw, 38px);
  font-family: var(--mv-accent, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.5;
}
.clc-sign-title {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.68em;
  font-style: italic;
  color: rgba(246, 239, 230, 0.72);
}
/* on a light band the same line needs the ink's own muted, not the paper's */
.mv-section:not(.mv-dark) .clc-sign-title { color: rgba(31, 44, 49, 0.62); }

/* 8 October 2026 — the button out of the "For families" band. mv-ref-actions carries
   margin-top: auto, which is right in the hero's flex column and nothing at all here, so the gap is
   stated. It sits between the last line of the letter and the signature, so it needs air above and
   below rather than above only. */
.obc-mv.mv-clc .clc-what-actions.wp-block-buttons {
  margin-top: clamp(22px, 2.6vw, 32px);
  margin-bottom: clamp(4px, 0.6vw, 10px);
}


/* 8 October 2026 — the yearly numbers group on /register/.

   The intro sits over six boxes rather than under one of them, because the sentence that matters
   ("these are never shown on your listing") is about all six. Ivory behind the whole group so it
   reads as one question with parts, which is also what stops somebody answering the first box and
   missing the source question under it. */
.clc-group-intro {
  margin: 30px 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  background: var(--wp--preset--color--ivory, #f6efe6);
  font-size: 15px;
  line-height: 1.55;
}
.clc-field-ask {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
/* two answers side by side, wrapping to one each on a phone rather than being squeezed */
.clc-radios { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.clc-radio {
  display: flex; align-items: center; gap: 8px;
  font-weight: 400; line-height: 1.4;
}
.clc-radio input { flex: 0 0 auto; }
.clc-field input[type="number"] { width: 10em; }


/* 8 October 2026 — "What free means here" moved into the closing deep green band, and the bullets
   it brought with it were written for a white one. Amanda asked for this to be checked rather than
   assumed, and both halves were wrong:

   .mv-ref-steps sets color: var(--mv-ink) on itself, so the list kept dark ink on deep green
   however the band turned its own text over — the white-on-white bug in the other direction, and
   the second time this project has shipped it. A band that sets a background must set its
   foreground, and a component that sets its own foreground must be told again inside one.

   The markers are Clinical Teal, which is the one place BRAND gives that colour and is 1.6:1
   against #294f4b. Warm Gold reads at about 5.5:1 and is what every other marker on a dark band
   here already uses. The bold inside each bullet inherits, so it only needed the list fixed. */
.obc-mv .mv-section.mv-dark .mv-ref-steps,
.obc-mv .mv-section.mv-dark .mv-ref-steps li {
  color: var(--wp--preset--color--ivory, #f6efe6);
}
.obc-mv .mv-section.mv-dark .mv-ref-steps li::marker {
  color: var(--wp--preset--color--warm-gold, #d7b47a);
}
.obc-mv .mv-section.mv-dark .mv-ref-steps strong {
  color: var(--wp--preset--color--paper, #fff);
}


/* 8 October 2026 — the language statement in the footer. Smaller and narrower than the two lines
   above it: it is a note somebody reads once rather than a line they read every visit, and at the
   footer's own size a hundred words across the full width is a paragraph nobody finishes. */
/* 9 October 2026 — Amanda: "please help a note on language, it looks pinched. I think it could go
   wider to make it look shorter." Five lines of small centred text in a 62ch column is a tall grey
   box; at 88ch it is three lines and reads as a note rather than as a paragraph somebody has to get
   through. Wider than the reading measure is deliberate here, because this is text somebody scans
   once rather than reads. */
/* 9 October 2026 — the legal line. Smaller and quieter than the language note above it: it has to
   be on every page and it must not be the loudest thing at the bottom of one. */
.clc-footer-legal {
  max-width: 76ch;
  margin-left: auto;
  margin-right: auto;
  font-size: .78rem;
  line-height: 1.55;
  opacity: .78;
}
/* the terms page: headings a reader can scan to find the paragraph they came for */
.clc-terms-h {
  margin: clamp(26px, 3.4vw, 40px) 0 6px;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.clc-terms-h:first-of-type { margin-top: 0; }

.clc-footer-words {
  max-width: 88ch;
  margin-left: auto;
  margin-right: auto;
  font-size: .85rem;
  line-height: 1.6;
  opacity: .88;
}


/* 8 October 2026 — the two parts of the numbers group. Styled as a form label rather than as a
   heading, which is what it is: the question above four boxes, not a section of the page. Deep
   green and a hairline over it, so the eye finds the break without a second heading level
   competing with the page's own. */
.clc-part {
  margin: 30px 0 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(41, 79, 75, 0.18);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.clc-group-intro + .clc-part { margin-top: 18px; border-top: 0; padding-top: 0; }


/* 8 October 2026 — the registration form in four steps.

   EVERY RULE HERE IS BEHIND .is-stepped, which own/js/clc-form.js adds. Without the script the
   cards are four plain fieldsets in one long form, which is the state the markup is written in and
   the one somebody gets when the script is blocked. A card hidden by CSS and opened by script is
   the arrangement that leaves a form nobody can fill in; this is the other way round. */
.clc-card {
  border: 1px solid rgba(41, 79, 75, 0.16);
  border-radius: 10px;
  margin: 0 0 14px;
  background: var(--wp--preset--color--paper, #fff);
}
.clc-card-head { margin: 0; font-size: 1rem; }
.clc-card-go {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 16px 18px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600; text-align: left;
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.clc-card-go:focus-visible { outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a); outline-offset: -3px; }
/* the number is the progress bar: four of them, and the eye counts them without being told */
.clc-card-n {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wp--preset--color--ivory, #f6efe6);
  font-size: 14px; font-weight: 700;
}
.clc-card.is-open > .clc-card-head .clc-card-n {
  background: var(--wp--preset--color--warm-gold, #d7b47a);
}
.clc-card.is-done > .clc-card-head .clc-card-n {
  background: var(--wp--preset--color--deep-green, #294f4b);
  color: var(--wp--preset--color--paper, #fff);
}
/* a step not reached yet is plainly not available, and its button says so to a keyboard too */
.clc-card.is-waiting > .clc-card-head .clc-card-go { color: #8a8a8a; cursor: default; }
.clc-card-body { padding: 0 18px 18px; }
.clc-card-body > .clc-field:first-child { margin-top: 0; }
.clc-card-said {
  margin: -6px 0 0; padding: 0 18px 16px;
  font-size: 15px; color: #5e5e5e;
}
.clc-card-edit {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--wp--preset--color--deep-green, #294f4b);
  text-decoration: underline; text-underline-offset: 3px;
}
.clc-progress {
  margin: 0 0 12px;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: #5e5e5e;
}
.clc-card-next { margin: 22px 0 0; }
/* the form is centred and narrow already; the cards keep that measure */
.clc-listing.is-stepped .clc-listing-gate { margin-bottom: 0; }


/* 8 October 2026 — the two small labels inside "What is an IBCLC" on /for-advocates/. clc-part is
   the form's own subheading and it carries a rule meant for a form, so on a page it needs its own
   measure. Same weight and colour, more air. */
.mv-clc-what-is .clc-part {
  margin: 34px 0 16px;
  padding-top: 0;
  border-top: 0;
  font-size: 16px;
}
/* the two links under the section, side by side with the middot between them */
.clc-links-row a { text-decoration: underline; text-underline-offset: 3px; }


/* 8 October 2026 — the thank-you page.
   The two mount blocks are empty markers: clc-thanks.php appends its section AFTER each of them,
   because that is where render_block puts anything added to a group. So the markers themselves must
   take no room at all — left as sections they were a 340px band of nothing between the hero and the
   words, which is what the first render of this page looked like. */
.obc-mv .clc-thanks-mount,
.obc-mv .clc-count-mount { display: none; }
/* the form-only mount is a marker too */
.obc-mv .clc-projects-form:empty { display: none; }
.clc-thanks-note { display: block; margin-top: 26px; }
/* the share row is an ordinary buttons block in the page now, so it needs nothing of its own */


/* 8 October 2026 — the projects and studies carousel on /for-advocates/.

   It borrows the clinic's track mechanics (scroll-snap, and carousel.js for the arrows and the
   wrap) and none of its looks: .mv-lc-card is built around a portrait and a name, and these cards
   are a title, a line about who, and a sentence. So the class is there for the script and the
   appearance is set here. */
.clc-projects { padding-bottom: clamp(28px, 4vw, 48px); }
.clc-projects-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* the gutter, so the first card starts where the prose above it does and the last one can reach
     the middle of the screen rather than jamming against the edge */
  padding: 6px clamp(16px, 6vw, 96px) 18px;
  scrollbar-width: thin;
}
.clc-proj-card {
  flex: 0 0 min(320px, 78vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border: 1px solid rgba(41, 79, 75, 0.16);
  border-radius: 10px;
  background: var(--wp--preset--color--paper, #fff);
}
.clc-proj-kind {
  margin: 0 0 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #5e5e5e;
}
/* a favourite is said in words as well as in order, because "first on the carousel" is not a thing
   anybody can see on a card they arrived at by swiping */
.clc-proj-star {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px;
  background: var(--wp--preset--color--warm-gold, #d7b47a);
  color: var(--wp--preset--color--deep-green, #294f4b);
  letter-spacing: .04em;
}
.clc-proj-title {
  margin: 0 0 4px;
  font-size: 20px; line-height: 1.25;
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.clc-proj-who { margin: 0 0 10px; font-size: 15px; color: #5e5e5e; }
.clc-proj-said { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
/* the link sits at the foot of every card whatever length the sentence above it ran to, so a row of
   cards has one line of links rather than four scattered heights */
.clc-proj-go { margin: auto 0 0; font-weight: 600; }
.clc-proj-go a { text-decoration: underline; text-underline-offset: 3px; }

/* the form, shut until somebody asks for it: it is nine questions under a carousel most people are
   here to read rather than add to */
.clc-proj-fold { margin-top: clamp(22px, 3vw, 34px); }
.clc-proj-fold > summary {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--wp--preset--color--deep-green, #294f4b);
  border-radius: 999px;
  font-weight: 600;
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.clc-proj-fold > summary:hover { background: var(--wp--preset--color--ivory, #f6efe6); }
.clc-proj-fold[open] > summary { margin-bottom: 18px; }
.clc-proj-post { max-width: 34em; }


/* 8 October 2026 — the nearest La Leche League groups, under the two directories on /find/.
   Set apart from them with a rule rather than a box: they are a different kind of answer, not a
   third directory, and a card around them would make them look like another register. */
.clc-peers {
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid rgba(41, 79, 75, 0.16);
}
.clc-peers-lede { margin: 0 0 12px; max-width: 62ch; }


/* 8 October 2026 — the consult figure on /for-advocates/, ported from the clinic's own 17,000+.

   THE GOLD IS THE CLINIC'S, character for character: a fixed ramp with the abrupt steps real gold
   has, because a smooth blend reads as plastic, and a single specular band travelling across it. It
   is painted onto the letterforms rather than behind them, so the number is still text — retypable,
   readable by a screen reader, findable by search. The colour set on the element is what shows if a
   browser cannot clip a background to text.

   What is NOT ported is the clinic's firefly canvas: six hundred lines bound to clicking the
   number, which is their signature on their own page. The four drifting lights here are the CSS
   fallback that already sat underneath it. */
.clc-count { padding-block: clamp(44px, 6vw, 86px); }
.clc-count-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 860px) {
  .clc-count-split { grid-template-columns: minmax(0, 1fr); }
}
.clc-bignum { position: relative; padding: clamp(8px, 2vw, 24px) 0; }
.clc-bignum-figure {
  margin: 0 0 12px;
  font-size: clamp(64px, 10vw, 140px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--ivory, #f6efe6);
  position: relative;
}
.clc-bignum-plus { font-size: .62em; vertical-align: super; letter-spacing: 0; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .clc-bignum-figure {
    background-image:
      linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 252, 238, 0.92) 49%, rgba(255, 255, 255, 0) 59%),
      linear-gradient(177deg,
        #7a5312 0%, #b8842c 14%, #e9c471 30%, #fff4d2 46%, #f0d18d 52%,
        #b07f28 58%, #8a5f18 66%, #dcb45f 80%, #f6e2b0 90%, #a3741f 100%);
    background-repeat: no-repeat;
    background-size: 240% 100%, 100% 100%;
    background-position: 0% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .clc-bignum-figure { animation: clc-sheen 9s ease-in-out infinite; }
}
/* only the highlight moves; the metal underneath is fixed, because a polished face does not dim */
@keyframes clc-sheen {
  0%, 100% { background-position: 0% 0, 0 0; }
  50% { background-position: 100% 0, 0 0; }
}

.clc-bignum-label {
  max-width: 18ch;
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.35;
}
.clc-bignum-note {
  max-width: 38ch;
  margin: 0;
  opacity: 0.68;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.55;
}
.clc-count-words .mv-lede { margin-top: 0; }

/* the four lights, drifting out of the figure towards the sentence beside it — which is the order
   the section wants to be read in. Pseudo-elements on the number and its label, so there is nothing
   in the markup for anybody to trip over or delete by accident. Two rhythms each, on different
   periods, so no two are the same brightness at the same point twice; none goes fully dark, because
   a light that blinks out reads as a fault rather than as a firefly. */
@media (prefers-reduced-motion: no-preference) {
  .clc-bignum-figure::before, .clc-bignum-figure::after,
  .clc-bignum-label::before, .clc-bignum-label::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6e4 0%, #e8c68d 45%, rgba(226, 178, 110, 0.6) 100%);
    content: "";
    pointer-events: none;
  }
  .clc-bignum-figure::before { width: 7px; height: 7px; top: 22%; left: 6%; animation: clc-drift-a 13s ease-in-out infinite, clc-glow 3.1s ease-in-out infinite; }
  .clc-bignum-figure::after { width: 5px; height: 5px; top: 58%; left: 34%; animation: clc-drift-b 17s ease-in-out infinite, clc-glow 4.3s ease-in-out infinite; }
  .clc-bignum-label::before { width: 6px; height: 6px; top: 10%; left: 12%; animation: clc-drift-c 15s ease-in-out infinite, clc-glow 3.7s ease-in-out infinite; }
  .clc-bignum-label::after { width: 4px; height: 4px; top: 70%; left: 52%; animation: clc-drift-a 19s ease-in-out infinite reverse, clc-glow 5.1s ease-in-out infinite; }
}
@keyframes clc-drift-a {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(44px, -26px); }
  60% { transform: translate(96px, 14px); }
}
@keyframes clc-drift-b {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(-18px, -34px); }
  70% { transform: translate(62px, -8px); }
}
@keyframes clc-drift-c {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(70px, 18px); }
  65% { transform: translate(26px, -22px); }
}
@keyframes clc-glow {
  0%, 100% { opacity: .35; }
  50% { opacity: .95; }
}


/* 8 October 2026 — the citation marks on "What IBCLC care does".
   Small, quiet and still a real link target at 24px, because a superscript numeral is the easiest
   thing on a page to make unclickable by accident. While the hrefs are "#" they are deliberately
   plain: a mark that looks finished is a mark nobody chases. */
.clc-cite { font-size: .62em; line-height: 0; }
.clc-cite a {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .2em;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.clc-cite a:focus-visible { outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a); outline-offset: 2px; }

/* 9 October 2026 — Women's medicine: the stat tiles, the four things already built, and the
   three asks. Three small grids rather than three components, because each is a row of equals and
   the row is the thing that carries the meaning. */
.clc-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: clamp(24px, 3vw, 36px) 0 18px;
}
.clc-tile {
  padding: clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 20px);
  border-top: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  background: var(--wp--preset--color--ivory, #f6efe6);
}
.clc-tile-figure {
  margin: 0 0 6px;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.clc-tile-label { margin: 0; font-size: 14px; line-height: 1.45; }
@media (max-width: 860px) { .clc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .clc-tiles { grid-template-columns: 1fr; } }

/* the four things already built, on the dark band */
.clc-built {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(22px, 3vw, 34px) 0 0;
}
.clc-built-card {
  margin: 0;
  max-width: none;
  padding: clamp(16px, 2vw, 22px);
  border-left: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  background: rgba(255, 255, 255, 0.06);
  font-size: 15px;
  line-height: 1.55;
}
.clc-built-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--wp--preset--color--warm-gold, #d7b47a);
  font-weight: 600;
}
@media (max-width: 760px) { .clc-built { grid-template-columns: 1fr; } }

/* "What it needs now is fuel." — the one line on this page that is allowed to be loud.
   9 October 2026 — the selector carries .obc-mv.mv-clc because .obc-mv .mv-quote in the clinic's
   sheet sets this element's margins and outranked a single class: the line sat against the bottom
   of the cards, which Amanda saw as "jammed up". The links under it get their own room for the
   same reason, rather than inheriting a note's spacing. */
/* 10 October 2026 — left, like everything else in the band, and separated from the cards by a rule
   rather than by a gap. Centred under four left-aligned cards it read as a pull quote somebody had
   dropped in, and the links under it floated with nothing holding them. */
.obc-mv.mv-clc .clc-fuel {
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding-top: clamp(26px, 3.2vw, 38px);
  border-top: 1px solid rgba(215, 180, 122, 0.4);
  /* the clinic's .mv-quote holds a pull quote to a narrow column, which left the rule stopping
     three quarters of the way across the cards above it */
  max-width: none;
  text-align: left;
  font-size: clamp(24px, 3.4vw, 38px);
}
.obc-mv.mv-clc .mv-clc-wm-built .clc-links-row {
  margin-top: 14px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: flex-start;
}

/* the three asks, numbered, because they are a list somebody will refer back to by number */
.clc-asks { display: grid; gap: clamp(12px, 1.6vw, 18px); margin: clamp(22px, 3vw, 32px) 0; }
.clc-ask {
  position: relative;
  margin: 0;
  max-width: none;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 22px) 58px;
  background: var(--wp--preset--color--paper, #fff);
  border-radius: 3px;
  line-height: 1.55;
}
.clc-ask-n {
  position: absolute;
  top: clamp(14px, 2vw, 20px);
  left: 18px;
  width: 26px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--warm-gold, #d7b47a);
}
.clc-ask strong { display: block; margin-bottom: 2px; }

/* 9 October 2026 — WordPress's own flow-layout rule puts margin-block-start on every child but
   the first, and a grid item is still a child: the four stat tiles arrived with the first one
   sitting 24px above its neighbours and a different height. Three grids, one rule, and the
   selector is deliberately longer than core's so it wins without !important. */
.clc-tiles.wp-block-group > *:not(:first-child),
.clc-built.wp-block-group > *:not(:first-child),
.clc-asks.wp-block-group > *:not(:first-child) {
  margin-block-start: 0;
}

/* the criteria inside ask 1, and the empty tail paragraph that closes the card around them */
.clc-ask-list {
  margin: 10px 0 0;
  padding-left: 76px;
  padding-right: clamp(18px, 2.2vw, 26px);
  font-size: 15px;
  line-height: 1.5;
}
.clc-ask-list li { margin: 4px 0; }
.clc-ask-tail { margin: 0; height: clamp(14px, 2vw, 20px); }

/* the disclosure under the three asks. Ivory on ivory would disappear, so it takes paper and the
   gold rule every callout on this site uses. */
.clc-ready {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px);
  background: var(--wp--preset--color--paper, #fff);
  border-left: 4px solid var(--wp--preset--color--warm-gold, #d7b47a);
  border-radius: 3px;
}
.clc-ready .mv-body:last-of-type { margin-bottom: 0; }

/* the rally band's question, and its row of buttons */
.clc-rally-ask { max-width: 26ch; }
.clc-rally-go { margin-top: clamp(22px, 3vw, 30px); gap: 12px; flex-wrap: wrap; }

/* 9 October 2026 — the gendered half of the bill, inside the copay band rather than beside it.
   Deep green inside a white section, because Amanda asked for it to be very visible and because a
   band of its own would have put two ivory sections next to each other. The figures are set in the
   gold so the eye lands on them; everything else is ordinary body text, because a block where every
   sentence shouts is a block nobody finishes. */
.clc-cost {
  margin: clamp(28px, 4vw, 44px) auto;
  max-width: 44rem;
  padding: clamp(22px, 3.4vw, 34px) clamp(20px, 3.2vw, 36px);
  border-radius: 3px;
  border-left: 4px solid var(--wp--preset--color--warm-gold, #d7b47a);
  background: var(--wp--preset--color--deep-green, #294f4b);
  color: var(--wp--preset--color--ivory, #f6efe6);
}
.clc-cost .mv-kicker { color: var(--wp--preset--color--warm-gold, #d7b47a); }
.clc-cost .mv-lede { margin-top: 6px; color: var(--wp--preset--color--ivory, #f6efe6); }
.clc-cost .mv-body { color: var(--wp--preset--color--ivory, #f6efe6); }
.clc-cost strong { color: var(--wp--preset--color--warm-gold, #d7b47a); font-weight: 600; }
.clc-cost .mv-ref-note a { color: var(--wp--preset--color--warm-gold, #d7b47a); }
.clc-cost .mv-body:last-of-type { margin-bottom: 0; }

/* the pull quote in the copay section, which is the clinic's quote style on an ivory band */
.mv-clc-copay .mv-quote { margin-top: clamp(26px, 3vw, 40px); }


/* 9 October 2026 — every dark band states both of its own colours, here, once.
   Amanda: "help me with the contrast on this section unreadable to human eyes." The solution band
   on /womens-medicine/ rendered ivory text on an ivory ground: the foreground came from
   redesign.css and the background did not arrive, and the band was invisible rather than merely
   low contrast.
   This is the rule written at the top of this file, applied to the band rather than to a component
   inside it: anything that sets a background sets its foreground in the same place, so the two can
   never be separated by a stylesheet loading differently. The selector is deliberately long enough
   to win without !important. */
.obc-mv .wp-block-group.mv-section.mv-dark,
.wp-block-group.mv-section.mv-dark {
  /* !important because WordPress writes the preset background with !important of its own, and on
     this page every dark band except the first was arriving with no background at all: the hero
     painted #294F4B and the two below it painted #FAF6F1, the page showing through. Two bands of
     ivory text on ivory is not low contrast, it is invisible, and matching core's weapon is better
     than finding out next month which sheet won. */
  background-color: var(--wp--preset--color--deep-green, #294f4b) !important;
  background-image: none !important;
  color: var(--wp--preset--color--ivory, #f6efe6);
}
.obc-mv .wp-block-group.mv-section.mv-dark .mv-lede,
.obc-mv .wp-block-group.mv-section.mv-dark .mv-body,
.obc-mv .wp-block-group.mv-section.mv-dark .mv-ref-note,
.obc-mv .wp-block-group.mv-section.mv-dark .mv-ref-list,
.obc-mv .wp-block-group.mv-section.mv-dark .mv-ref-list li,
.obc-mv .wp-block-group.mv-section.mv-dark h1,
.obc-mv .wp-block-group.mv-section.mv-dark h2,
.obc-mv .wp-block-group.mv-section.mv-dark h3,
.obc-mv .wp-block-group.mv-section.mv-dark p {
  color: var(--wp--preset--color--ivory, #f6efe6);
}
.obc-mv .wp-block-group.mv-section.mv-dark .mv-kicker,
.obc-mv .wp-block-group.mv-section.mv-dark strong {
  color: var(--wp--preset--color--warm-gold, #d7b47a);
}
/* a link on a dark band is ivory and underlined: gold on deep green is about 3.4:1, which is under
   the 4.5:1 a body-sized link needs, and the underline is what carries it anyway. */
/* 9 October 2026 — not a button. This rule was written for links in prose on a dark band, and a
   button's label is an anchor too: it was turning every gold pill's lettering ivory and underlining
   it, which is the thing Amanda saw. */
.obc-mv .wp-block-group.mv-section.mv-dark a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--ivory, #f6efe6);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 9 October 2026 — the one number on a card, when a card is a finding rather than a project.
   Tabular so a column of them lines up, and above the kind line so the eye lands on it first. */
.clc-proj-figure {
  margin: 0 0 2px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--deep-green, #294f4b);
}

/* 8 October 2026 — a picture on a project card. Amanda: "The carousel should hold images
   (photos/text) and text."

   A fixed aspect ratio rather than whatever was uploaded, so a row of cards has one top edge and
   the text under each starts at the same height. object-fit crops rather than squashes, which is
   the one thing a poster must not have done to it. A card without a picture simply starts at its
   text: there is no placeholder, because an empty frame says a picture is missing. */
.clc-proj-image {
  display: block;
  width: calc(100% + 44px);
  margin: -20px -22px 16px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  background: var(--wp--preset--color--ivory, #f6efe6);
}
/* a cover, a poster, anything taller than it is wide: shown whole rather than cropped to fill. */
.clc-proj-image.is-tall {
  object-fit: contain;
  padding: 12px 0;
  box-sizing: border-box;
}


/* 8 October 2026 — the community supports directory.

   It borrows the register's card, field and accordion styling wholesale, so what is here is only
   what the register has no equivalent of: tick-box groups, the folded credential groups, and the
   public listing's own cards. */
.clc-checks { display: grid; gap: 8px; }
.clc-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 400; line-height: 1.45;
}
.clc-check input { margin-top: 4px; flex: 0 0 auto; }

/* a folded group of credentials, with the number ticked beside its name. A shut group that cannot
   say how many are in it is a group nobody can check their own work in. */
.clc-cred-group {
  border: 1px solid rgba(41, 79, 75, 0.16);
  border-radius: 8px;
  margin: 0 0 8px;
  background: var(--wp--preset--color--paper, #fff);
}
.clc-cred-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; cursor: pointer; font-weight: 600;
}
.clc-cred-group[open] > summary { border-bottom: 1px solid rgba(41, 79, 75, 0.12); }
.clc-cred-group > .clc-check { padding: 8px 14px; }
.clc-cred-group > .clc-check:last-child { padding-bottom: 12px; }
.clc-cred-count:not(:empty) {
  flex: 0 0 auto;
  min-width: 1.7em; padding: 1px 7px; border-radius: 999px;
  background: var(--wp--preset--color--deep-green, #294f4b);
  color: var(--wp--preset--color--paper, #fff);
  font-size: 12.5px; text-align: center;
}

/* the note that keeps this directory from reading as the register. Said once over the results and
   again under every card, because a card is what gets screenshotted without the page around it. */
.clc-supports-note {
  margin: 0 0 22px; padding: 12px 16px;
  border-left: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  background: var(--wp--preset--color--ivory, #f6efe6);
  font-size: 15px; line-height: 1.55;
}
.clc-supports-ask { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 18px; }
.clc-supports-ask label { flex: 1 0 100%; font-weight: 600; }
.clc-supports-ask input { flex: 0 1 11em; padding: 10px 12px; border: 1px solid #c9c2b8; border-radius: 4px; font: inherit; font-size: 16px; }
.clc-supports-count { margin: 0 0 16px; font-size: 14px; color: #5e6b6c; }
/* 9 October 2026 — the list holds four folded groups now rather than seventy-five cards, so it
   stacks. The two columns moved inside a group, where the cards still want them. */
/* 9 October 2026 — one column, at Amanda's ask: "list the peer support vertically for less
   visual". Two columns made sense when a card was a block of facts; a folded card is three lines,
   and forty-six of them in pairs reads as a grid to scan rather than a list to run down. */
.clc-supports-list { display: block; }
.clc-support-group-cards { display: grid; grid-template-columns: 1fr; gap: 8px; }

.clc-support-card {
  padding: 20px 22px;
  border: 1px solid rgba(41, 79, 75, 0.16);
  border-radius: 10px;
  background: var(--wp--preset--color--paper, #fff);
}
.clc-support-kind {
  margin: 0 0 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #5e6b6c;
}
.clc-support-name { margin: 0 0 4px; font-size: 20px; line-height: 1.25; color: var(--wp--preset--color--deep-green, #294f4b); }
.clc-support-area { margin: 0 0 14px; font-size: 15px; color: #5e6b6c; }
/* label above value rather than beside it: the values run to several words and a two-column grid
   would set eight of them on one line each at phone width anyway */
.clc-support-facts { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.clc-support-facts dt { font-weight: 700; margin-top: 10px; }
.clc-support-facts dd { margin: 2px 0 0; }
.clc-support-asreported { display: block; margin-top: 3px; font-size: 12.5px; font-style: italic; color: #5e6b6c; }
.clc-support-go { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.clc-support-contact { font-weight: 600; }

/* 9 October 2026 — every card gives its words less room around them.
   Amanda: "the cards take up too much visual space, make the boarder around the words smaller
   across the site." One block rather than eleven edits, so the next card added to this site is the
   same size as the rest without anybody having to remember a number. The shared .mv-ref-list and
   .mv-who-card come from the clinic's sheet and are narrowed here rather than there, because the
   clinic's own pages are not what she was looking at. */
.obc-mv.mv-clc .mv-ref-list {
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  border-radius: 0 10px 10px 0;
  /* 10 October 2026 — the shared sheet gives the card margin: 0, which left the paragraph under it
     sitting on its bottom edge. */
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.obc-mv.mv-clc .mv-who-card,
.obc-mv.mv-clc .mv-contact-row {
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
  border-radius: 12px;
}
.clc-tile { padding: clamp(12px, 1.5vw, 16px) clamp(12px, 1.4vw, 15px); }
.clc-built-card { padding: clamp(12px, 1.5vw, 16px); }
.clc-ask { padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.7vw, 20px) clamp(12px, 1.5vw, 16px) 50px; }
.clc-ask-n { top: clamp(10px, 1.4vw, 14px); left: 15px; }
.clc-ask-list { padding-left: 50px; padding-right: clamp(14px, 1.7vw, 20px); }
.clc-ready { padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 22px); }
.clc-cost { padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.2vw, 26px); }
.clc-proj-card { padding: clamp(14px, 1.8vw, 20px); }
.clc-proj-image { width: calc(100% + 28px); margin: -14px -14px 12px; }
.clc-card-body { padding: 0 14px 14px; }

/* 9 October 2026 — the whole site's rhythm, at Amanda's ask after seeing it on a monitor:
   "there is too much space on the sides and the text formatting doesn't change with the size of the
   screen... remove the white gaps between the sections... too much space between each section's
   contents and too much scrolling. Also the photo of the baby is ginormous."

   Four things, all of them the same thing: this is a site of words, and the clinic's rhythm was
   built for a site of photographs.

   THE WHITE GAPS ARE NOT A DESIGN. They are WordPress's own flow-layout rule, margin-block-start on
   every child but the first, applied to the full-width sections: a 24px strip of page showing
   between every band. The same rule staggered the stat tiles this morning. */
.obc-mv.mv-clc .wp-block-group.alignfull,
.obc-mv.mv-clc .wp-block-image.alignfull,
.obc-mv.mv-clc .entry-content > *,
.obc-mv.mv-clc .wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* a band is shorter, because the clinic's 148px of air on a 1440 screen is a screenful of nothing
   between two paragraphs */
.obc-mv.mv-clc .mv-section {
  padding-block: clamp(36px, 4.4vw, 64px);
}

/* and narrower, and centred. The measure stays at 62ch because that is what a person reads
   comfortably; what changes is that the column sits in the middle of the screen rather than against
   the left edge with half a monitor of cream beside it. */
.obc-mv.mv-clc .mv-inner {
  max-width: 980px;
}

/* the space between a heading and what follows it, which was built for a hero and reads as a gap
   in a page of prose */
.obc-mv.mv-clc .mv-kicker { margin-bottom: clamp(10px, 1.2vw, 16px); }
.obc-mv.mv-clc .mv-lede { margin-bottom: clamp(10px, 1.2vw, 16px); }
.obc-mv.mv-clc .mv-body { margin-bottom: 14px; }

/* the photograph. Full width is right; full height is not, and at 1440 it was most of a screen on
   the way to the next sentence. object-fit crops rather than squashes. */
.obc-mv.mv-clc .clc-band-photo img {
  display: block;
  width: 100%;
  max-height: clamp(260px, 34vh, 420px);
  object-fit: cover;
  object-position: center 40%;
}

/* THE FOOTER, which Amanda saw first: "it looks like words cutoff on the sides". Its paragraphs are
   direct children of a full-width group with no inner container at all, so every line ran to the
   edge of the window and the menu wrapped mid-word. One container, the site's own gutter, and the
   lines centre on whatever width they are given. */
.obc-mv.mv-clc .clc-footer {
  padding: clamp(28px, 3.4vw, 44px) var(--mv-gutter, clamp(20px, 5vw, 72px));
}
.obc-mv.mv-clc .clc-footer > * {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.obc-mv.mv-clc .clc-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.obc-mv.mv-clc .clc-footer-line { margin: 4px auto; }
.obc-mv.mv-clc .clc-footer-words { margin-top: clamp(14px, 1.8vw, 20px); }

/* 9 October 2026 — the clinic's button rule, applied at rest and not only on hover.
   Amanda: "any of the buttons that fill with milk are dark lettered so you can see the message. we
   also use dark colours on the gold pills too. these are already rules."
   buttons.css paints gold with Ink lettering on hover, focus and active. At rest a button here had
   no colour of its own, so it took WordPress's default, #fff on #32373c, and the fill underneath it
   was gold: ivory letters on Warm Gold is about 1.9:1. Gold means readiness and Ink is what you
   read on it, before the pointer arrives as well as after. */
.obc-mv.mv-clc .wp-block-button__link,
.obc-mv.mv-clc .wp-element-button,
.obc-mv.mv-clc button.wp-element-button {
  background-color: var(--wp--preset--color--warm-gold, #d7b47a);
  border-color: var(--wp--preset--color--warm-gold, #d7b47a);
  color: var(--wp--preset--color--ink, #1f2c31);
}
/* an outline button has no fill, so it takes the colour of the band it is standing on: ivory on
   deep green, ink on ivory or paper. One rule, because the alternative is a list of bands. */
/* the second button is the clinic's ghost: the same milk poured thinner, in a glass you can see.
   It keeps its rim and takes the colour of the band it stands on, so it is ivory on deep green and
   ink on ivory or paper. mv-cta-ghost is the clinic's own class and is named here beside
   is-style-outline, because this site uses both. */
/* 9 October 2026 — the ghost is left alone now that milk.js is loaded here. It was being forced
   transparent because without the script the fill sat there as a pale pill; with the script that
   fill is the milk, and overriding it empties the glass. is-style-outline is a different thing and
   keeps its own rule. */
.obc-mv.mv-clc .is-style-outline .wp-block-button__link {
  background: none !important;
  background-color: transparent !important;
  border: 1px solid currentColor;
  color: inherit;
}
.obc-mv.mv-clc .mv-section.mv-dark .is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--ivory, #f6efe6);
}

/* 9 October 2026 — the symptom finder on the home page. Native <details>, so it opens with no
   script and a screen reader already knows what it is. Closed is the resting state: six lines a
   mother reads in ten seconds, and the one that sounds like her week is the one she opens. */
.clc-symptom {
  border-bottom: 1px solid var(--wp--preset--color--ivory, #f6efe6);
}
.clc-symptom:first-of-type { border-top: 1px solid var(--wp--preset--color--ivory, #f6efe6); }
.clc-symptom > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.4;
}
.clc-symptom > summary::-webkit-details-marker { display: none; }
.clc-symptom > summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1em;
  color: var(--wp--preset--color--warm-gold, #d7b47a);
  font-weight: 600;
}
.clc-symptom[open] > summary::before { content: "\2013"; }
.clc-symptom > summary:hover { color: var(--wp--preset--color--deep-green, #294f4b); }
.clc-symptom > summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 2px;
}
.clc-symptom-body { padding: 0 4px 18px 28px; }
.clc-symptom-body p { margin: 0 0 12px; max-width: 62ch; line-height: 1.6; }
.clc-symptom-go { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 0 !important; }
.clc-symptom-find,
.clc-symptom-more {
  font-weight: 600;
  text-underline-offset: 3px;
}
.clc-symptom-find { color: var(--wp--preset--color--deep-green, #294f4b); }
.clc-symptom-more { color: var(--wp--preset--color--clinical-teal, #4F8F8B); }

/* 9 October 2026 — the two doors on the teal band. The band sets its own background inline, so its
   foreground is set here for the same reason every other band on this site states both: a band that
   paints a ground owes the words on it a colour. mv-dark is deliberately NOT used, because that
   class now forces deep green and would paint over the teal. */
.mv-clc-ways .mv-kicker { color: var(--wp--preset--color--ivory, #f6efe6); opacity: .85; }
.mv-clc-ways .mv-lede,
.mv-clc-ways .mv-body { color: var(--wp--preset--color--ivory, #f6efe6); }
.clc-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(18px, 2.4vw, 28px);
}
.clc-way {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 14px;
  background: var(--wp--preset--color--deep-green, #294f4b);
  color: var(--wp--preset--color--ivory, #f6efe6);
}
.clc-way h3 {
  /* stated, not inherited: a heading on this site has its own colour rule and it is Ink, which on
     deep green is 1.3:1 */
  color: var(--wp--preset--color--ivory, #f6efe6);
  margin: 0 0 4px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.clc-way p { margin: 0; color: var(--wp--preset--color--ivory, #f6efe6); opacity: .82; line-height: 1.5; }
/* the way out of a card: a link, because the glasses are in the hero and two pairs of them three
   inches apart is what Amanda did not like */
.clc-way-go { margin-top: clamp(14px, 1.8vw, 18px); opacity: 1 !important; }
.clc-way-go a {
  color: var(--wp--preset--color--warm-gold, #d7b47a);
  font-weight: 600;
  text-underline-offset: 4px;
}
.clc-wait-go { margin-top: clamp(16px, 2vw, 22px); }
.clc-ways .wp-block-column { display: flex; }
.clc-ways .clc-way { display: flex; flex-direction: column; width: 100%; }
.clc-ways .clc-way .clc-way-go { margin-top: auto; }
@media (max-width: 640px) { .clc-ways { grid-template-columns: 1fr; } }

/* 9 October 2026 — the three doors at the foot of the home page: the register, the community
   supports, and the case for funding. One card shape, so nobody reads one of the three as the main
   one; the difference between them is their sentence, not their size. */
/* four of them now, so two rows of two rather than four thin columns: the container is 980px and
   a quarter of that is a card nobody reads. */
.clc-doors {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(18px, 2.4vw, 28px);
}
.clc-doors .wp-block-column { display: flex; margin: 0 !important; flex-basis: auto !important; }
@media (max-width: 620px) { .clc-doors { grid-template-columns: 1fr; } }
.clc-door {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(16px, 2vw, 22px);
  border-top: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  background: var(--wp--preset--color--ivory, #f6efe6);
}
.clc-door h3 {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.clc-door p { margin: 0; font-size: 15px; line-height: 1.55; }
.clc-door-go { margin-top: auto !important; padding-top: 14px; }
.clc-door-go a {
  color: var(--wp--preset--color--deep-green, #294f4b);
  font-weight: 600;
  text-underline-offset: 4px;
}

/* 9 October 2026 — the hamburger at every width. The clinic hides its overlay nav above the mobile
   breakpoint because its desktop header carries the whole menu inline; this header carries one
   link, so the button is how everything else is reached and it has to be there on a monitor too. */
.obc-mv.mv-clc .obc-mobile-navigation {
  display: flex !important;
  flex: 0 0 auto;
}
/* the pill sits beside the button rather than halfway across the bar. The shell is space-between
   with three children, so the middle one floats; pushing it to the right with auto margin puts the
   two things you can press next to each other. */
.obc-mv.mv-clc .clc-nav-shell .obc-desktop-navigation {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: clamp(10px, 1.4vw, 18px);
}

/* 9 October 2026 — the supports list, in four folded groups. Native <details>, like the symptom
   list and the register's credential groups, so it opens with no script and a screen reader knows
   what it is. Shut is the resting state: four lines rather than seventy-five cards. */
.clc-support-group { border-bottom: 1px solid var(--wp--preset--color--ivory, #f6efe6); }
.clc-support-group:first-of-type { border-top: 1px solid var(--wp--preset--color--ivory, #f6efe6); }
.clc-support-group > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
}
.clc-support-group > summary::-webkit-details-marker { display: none; }
.clc-support-group > summary::before {
  content: "+";
  width: 1em;
  color: var(--wp--preset--color--warm-gold, #d7b47a);
}
.clc-support-group[open] > summary::before { content: "\2013"; }
.clc-support-group > summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 2px;
}
.clc-support-group-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--wp--preset--color--clinical-teal, #4F8F8B);
}
.clc-support-group-note {
  margin: 0 4px 12px 28px;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.5;
  opacity: .8;
}
.clc-support-group-cards { padding: 0 0 20px 28px; }
@media (max-width: 640px) {
  .clc-support-group-note, .clc-support-group-cards { margin-left: 0; padding-left: 0; }
}

/* 9 October 2026 — a folded support card. Shut it is three lines; open it is what it always was. */
.clc-support-card { padding: 0; border-radius: 8px; }
.clc-support-card > summary {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.clc-support-card > summary::-webkit-details-marker { display: none; }
.clc-support-card > summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 2px;
}
.clc-support-card .clc-support-kind,
.clc-support-card .clc-support-name,
.clc-support-card .clc-support-area { margin: 0; }
.clc-support-card .clc-support-name { font-size: 16px; font-weight: 600; line-height: 1.35; }
.clc-support-card .clc-support-area { font-size: 13px; opacity: .78; }
.clc-support-body { padding: 0 14px 14px; }

/* 9 October 2026 — the sentence the page is for. Heading-sized, with the gold rule the site uses
   to mark the one thing in a section worth stopping at, and a measure short enough that it reads
   as a statement rather than as a paragraph that happens to be large. */
.clc-point {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 4px solid var(--wp--preset--color--warm-gold, #d7b47a);
  max-width: 26ch;
  font-size: clamp(23px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* 10 October 2026 — a hospital listing Amanda compiled rather than one a programme sent in. The
   label is small and plain: it is a fact about where the row came from, not a warning about the
   hospital. */
.clc-support-unconfirmed {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: .72;
}

/* 10 October 2026 — the uncited list on the evidence page was ivory on paper.

   Amanda: "can't see it." The block above turns everything inside a dark band ivory, which is
   right for text sitting on the deep green and wrong for this one thing: .mv-ref-list is a paper
   card, so on a dark band it is a white card on green rather than words on green. Its body text
   came out ivory on near-white and its leads came out warm gold on near-white, which is about
   1.9:1.

   One list on this whole site is in that position, the four things we say without a citation. It
   is the list a reader goes to the page to find, so it is the worst one to lose. The lead is deep
   green rather than gold for the same contrast reason the link rule above gives. */
.obc-mv.mv-clc .wp-block-group.mv-section.mv-dark .mv-ref-list,
.obc-mv.mv-clc .wp-block-group.mv-section.mv-dark .mv-ref-list li {
  color: var(--wp--preset--color--ink, #1f2c31);
}

.obc-mv.mv-clc .wp-block-group.mv-section.mv-dark .mv-ref-list strong {
  color: var(--wp--preset--color--deep-green, #294f4b);
}

.obc-mv.mv-clc .wp-block-group.mv-section.mv-dark .mv-ref-list a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--deep-green, #294f4b);
}

/* 10 October 2026 — the vision reads as one sentence again.

   Amanda: "this heading is formatted weirdly." It is one sentence set as a heading and two
   paragraphs, and the clinic's sheet holds the heading to 20ch, which is right for the clinic's
   shorter quote and wrong for this one: it put "net," alone on a second line and left the rest of
   the sentence sitting a paragraph's gap below in body type, so the three parts read as three
   fragments rather than as one statement.

   The words are not touched — this is the settled vision statement. The heading is given room and
   told to balance its lines, and the two clauses that finish it are pulled up under it at a size
   between the heading and body, so the eye carries from one to the next. */
.obc-mv.mv-clc .mv-mission-vision .mv-mission-quote {
  max-width: 26ch;
  margin-bottom: 14px;
  text-wrap: balance;
}

.obc-mv.mv-clc .mv-mission-vision .mv-inner > p:not(.mv-kicker) {
  max-width: 52ch;
  margin: 0 auto;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  text-wrap: balance;
}

.obc-mv.mv-clc .mv-mission-vision .mv-inner > p:not(.mv-kicker) + p {
  margin-top: 4px;
}

/* 10 October 2026 — "Near L6H": the answer to her postal code, above the directory.
   Four panes, because the four are different kinds of answer rather than one ranked list: her
   health unit is hers by boundary, an IBCLC is somebody who can see her, and the other two are the
   nearest of their kind. */
.clc-near {
  margin: 0 0 clamp(22px, 2.8vw, 32px);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px) clamp(6px, 1vw, 10px);
  border: 1px solid rgba(41, 79, 75, 0.16);
  border-radius: 12px;
  background: var(--wp--preset--color--paper, #fffdfa);
}
.clc-near-title {
  margin: 0 0 4px;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.2;
}
.clc-near-pane { margin: 0 0 clamp(14px, 1.8vw, 20px); }
.clc-near-kind {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.clc-near-list { margin: 0; padding: 0; list-style: none; }
.clc-near-one {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(41, 79, 75, 0.1);
}
.clc-near-one:last-child { border-bottom: 0; }
.clc-near-name { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* her place of work, never a distance: rule 1 of the register is that no number is printed for a
   person, because an FSA centroid is roughest exactly where a rural family needs it right */
.clc-near-where { font-size: 14px; opacity: .72; }
.clc-near-none, .clc-near-note { margin: 6px 0 0; font-size: 14px; line-height: 1.5; opacity: .78; }
.clc-near-all { margin: 10px 0 0; font-size: 14px; }
.clc-near-all a { text-decoration: underline; text-underline-offset: 3px; }
.clc-near .clc-support-card { margin: 0; }

/* the distance slider, under the postal box */
.clc-reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 12px;
}
.clc-reach-label { font-size: 14px; }
.clc-reach-range { flex: 1 1 200px; min-width: 160px; accent-color: var(--wp--preset--color--deep-green, #294f4b); }
.clc-reach-said { font-size: 14px; font-weight: 600; min-width: 13ch; }

/* 10 October 2026 — what /find/ shows before a postal code: the question, rather than the whole
   register. */
.clc-start {
  margin: clamp(18px, 2.2vw, 26px) 0 clamp(22px, 2.6vw, 30px);
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px);
  border: 1px solid rgba(41, 79, 75, 0.16);
  border-radius: 12px;
  background: var(--wp--preset--color--paper, #fffdfa);
}
.clc-start-title { margin: 0 0 8px; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2; }
.clc-start-note { margin: 0 0 8px; font-size: 15px; line-height: 1.6; max-width: 62ch; }
.clc-start-note:last-child { margin-bottom: 0; opacity: .78; font-size: 14px; }

/* 10 October 2026 — the same three panes under the register on /find/, where there is no directory
   under them to separate them from the next band. */
.clc-near-mount { margin: clamp(22px, 2.8vw, 34px) 0 0; }
.clc-near-mount .clc-near { margin-bottom: 0; }

/* 11 October 2026 — the three supports, condensed to three buttons. Amanda: "There should be 3
   buttons; Your public health unit, the closest peer support group, the closest hospital program.
   each link should disclose the corresponding support, and what type of support they are
   (volunteer, ask)."

   Shut, a row is a title, a tag and the name it turns out to be. The tag is the kind of help
   rather than a status, so it is quiet rather than coloured in. */
.clc-near-fold {
  border-top: 1px solid rgba(41, 79, 75, 0.12);
}
.clc-near-fold:first-of-type { border-top: 0; }
.clc-near-fold > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 12px 26px 12px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.clc-near-fold > summary::-webkit-details-marker { display: none; }
/* the chevron, drawn rather than typed so it turns with the row */
.clc-near-fold > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  transition: transform .18s ease;
}
.clc-near-fold[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.clc-near-fold > summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  outline-offset: 2px;
}
.clc-near-fold .clc-near-kind { margin: 0; }
.clc-near-tag {
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid rgba(41, 79, 75, 0.28);
  border-radius: 999px;
  opacity: .75;
}
.clc-near-who {
  flex: 1 1 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.clc-near-fold > .clc-support-card,
.clc-near-fold > .clc-near-none { margin: 0 0 8px; }
.clc-near-fold > .clc-near-note { margin: 0 0 14px; }
.clc-near { padding-bottom: clamp(10px, 1.4vw, 14px); }

/* the programme inside an open button: its name has just been said by the row above it, and its
   own toggle would be a second thing to open to read one thing */
.clc-near-fold .clc-support-card > summary { cursor: default; padding-right: 0; }
.clc-near-fold .clc-support-card > summary .clc-support-name { display: none; }
.clc-near-fold .clc-support-card > summary::after { display: none; }

/* 13 October 2026 — "Ask who you will be seeing: an IBCLC is not always on the team."
   Amanda asked for it to be highly visible and before the link, so it is its own line with the
   band's gold against it rather than a note under a link somebody has already clicked past. Said
   once per kind of community help, not once per listing: three times on a screen is a warning, and
   this is a question to ask at the door. */
.obc-mv.mv-clc .clc-ask-who {
  margin: 10px 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--wp--preset--color--warm-gold, #d7b47a);
  background: rgba(215, 180, 122, 0.12);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.obc-mv.mv-clc .clc-hosp-more { margin-top: 10px; }
.obc-mv.mv-clc .clc-hosp-more a { text-decoration: underline; text-underline-offset: 3px; }

/* 13 October 2026 — what happens to each answer, said under the field rather than in a policy.
   Beth: "I think you'll have to disclose below each field whether the field will be visible on the
   registry. Some of your questions are valid for research but would stop me from completing the
   registry." So it is small, constant and impossible to miss once you are looking for it: a
   register nobody finishes is worth nothing, and the fix is telling people rather than asking less. */
.obc-mv.mv-clc .clc-shown {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(79, 143, 139, 0.14);
  color: var(--wp--preset--color--deep-green, #294f4b);
}
.obc-mv.mv-clc .clc-shown.is-private {
  background: rgba(31, 44, 49, 0.08);
  opacity: .8;
}
.obc-mv.mv-clc .clc-shown + .clc-note { display: block; }