/* ------------------------------------------------------------------
   BCH Resource Directory

   Layout and state only. No colours, no font families, no type sizes
   beyond the scale tokens — those come from the theme's compiled UIkit,
   so the directory tracks BCHC's design and any re-skin without a
   change here.
   ------------------------------------------------------------------ */

/* ---- Font scale (shared contract — see FONT-SCALE.md) ------------- */

:root {
  --alpha11y-font-scale: 1;
}

.bch-directory,
.bch-stories {
  --bch-base:    calc(1rem * var(--alpha11y-font-scale, 1));
  --bch-text-s:  calc(var(--bch-base) * 0.875);
  --bch-text-m:  var(--bch-base);
  --bch-text-l:  calc(var(--bch-base) * 1.25);
  --bch-text-xl: calc(var(--bch-base) * 1.5);

  /* One measure for all prose, expressed as a multiple of the base rather
     than in ch. A ch is the width of a zero IN THE LOCAL FONT, so 62ch on a
     quote set at 1.125x bought a visibly wider box than 62ch on the intro —
     same declared width, different right edge. 38.75 x base matches what
     62ch gave at body size, and now holds whatever size the text is set in. */
  --bch-measure: var(--bch-intro-width, calc(var(--bch-base) * 38.75));

  /* Buttons were 1px outlines on nothing, which read as thinner than the
     theme's own filled inputs sitting right next to them. A tint mixed from
     currentColor gives them a surface without introducing a colour of our
     own — and browsers without color-mix just fall back to transparent,
     which is exactly how it looked before. */
  --bch-surface: color-mix(in srgb, currentColor 7%, transparent);
  --bch-surface-strong: color-mix(in srgb, currentColor 18%, transparent);

  font-size: var(--bch-text-m);
}

/* An external accessibility widget scales the root font size itself, so rem
   already carries the multiplier. Multiplying again would compound. */
:root[data-scale-owner="external"] .bch-directory {
  --bch-base: 1rem;
}

/* ---- Controls ----------------------------------------------------

   Staged: search, then category chips, then everything else behind one
   disclosure. The resting state is a search box, eight chips and a
   toggle — not seventy-nine checkboxes.
   ------------------------------------------------------------------ */

.bch-controls {
  margin-block-end: 1.5rem;
}

/* Search does most of the work, so it gets the weight. */
.bch-controls__search {
  height: 56px;
  font-size: var(--bch-text-m);
  margin-block-end: 1rem;
}

.bch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bch-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 48px;
  padding-inline: 1.125rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: var(--bch-surface);
  cursor: pointer;
  /* Interactive labels were 14px against 16px body text — smaller than the
     prose, for an audience largely in their seventies. */
  font-size: var(--bch-text-m);
  font-weight: 500;
  line-height: 1.2;
}

.bch-chip--small {
  min-block-size: 44px;
  padding-inline: 0.875rem;
  font-size: var(--bch-text-s);
}

/* The native checkbox is redundant once the chip itself reads as pressed,
   and it was the main source of visual noise in the old bank. */
.bch-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Weight and a doubled border, not colour alone, so the selected state
   survives a monochrome or colour-blind read. */
.bch-chip:has(input:checked) {
  background: var(--bch-surface-strong);
  font-weight: 700;
  box-shadow: inset 0 0 0 3px currentColor;
}

.bch-chip:has(input:focus-visible) {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.bch-chip__count {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.9em;
}

/* ---- Refine disclosure ------------------------------------------

   This is the only route to the type, place and access filters, so it
   has to read as a control. Styled as an underlined text link it sat
   below the chips looking like a footnote and got missed.

   A dashed border rather than solid: it distinguishes "opens something"
   from the solid-bordered chips, which select. Same 44px target.
   ------------------------------------------------------------------ */

.bch-refine__toggle {
  display: inline-flex;
  /* Centre, not baseline. The caret is a zero-height triangle built from
     borders, so it has no baseline of its own and hung low against the text. */
  align-items: center;
  gap: 0.5rem;
  min-block-size: 48px;
  margin-block-start: 1.25rem;
  padding-inline: 1.25rem;
  border: 2px dashed currentColor;
  border-radius: 999px;
  background: var(--bch-surface);
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.bch-refine__label {
  font-size: var(--bch-text-m);
  font-weight: 700;
}

/* Says what's behind the disclosure. Without it the label is an
   instruction with no indication of what you'd get. */
.bch-refine__hint {
  font-size: var(--bch-text-s);
  opacity: 0.7;
}

.bch-refine__toggle[aria-expanded="true"] {
  border-style: solid;
}

.bch-refine__toggle:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.bch-refine__caret {
  border-inline: 5px solid transparent;
  border-block-start: 6px solid currentColor;
  transition: transform 0.15s ease;
}

.bch-refine__toggle[aria-expanded="true"] .bch-refine__caret {
  transform: rotate(180deg);
}

/* How many refinements are applied while the panel is shut. */
.bch-refine__toggle[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.5em;
  min-block-size: 1.5em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px currentColor;
  font-size: var(--bch-text-s);
  font-weight: 700;
}

/* The hint is redundant once you can see what's inside. */
.bch-refine__toggle[aria-expanded="true"] .bch-refine__hint {
  display: none;
}

@media (max-width: 480px) {
  .bch-refine__toggle { inline-size: 100%; justify-content: center; }
  .bch-refine__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bch-refine__caret { transition: none; }
}

.bch-refine {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-block-start: 0.75rem;
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.bch-refine[hidden] { display: none; }

.bch-refine__field {
  flex: 1 1 220px;
  margin: 0;
  min-inline-size: 0;
}

.bch-refine__field > label,
.bch-refine__legend {
  display: block;
  margin-block-end: 0.35rem;
  font-size: var(--bch-text-s);
  font-weight: 700;
}

/* Thirty-odd options is a list, not a button bank — and on a phone the
   native select is one tap rather than five rows of scrolling. */
.bch-refine select {
  height: 48px;
  font-size: var(--bch-text-s);
  max-inline-size: 100%;
}

/* ---- Active filters ---------------------------------------------- */

.bch-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 1rem;
}

.bch-active[hidden] { display: none; }

.bch-active__label {
  font-size: var(--bch-text-s);
  opacity: 0.75;
}

.bch-active__pills {
  display: contents;
}

.bch-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 44px;
  padding-inline: 0.875rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: var(--bch-surface);
  color: inherit;
  font: inherit;
  font-size: var(--bch-text-s);
  cursor: pointer;
}

.bch-pill b {
  font-size: 1.2em;
  line-height: 1;
  opacity: 0.7;
}

.bch-pill:focus-visible,
.bch-active__clear:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.bch-active__clear {
  min-block-size: 44px;
  font-weight: 700;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--bch-text-s);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- Suggestion card ---------------------------------------------

   Below the search and filters, above the results — the original
   complaint was that it pushed the search off a phone screen, which was
   a positioning problem rather than a size one.
   ------------------------------------------------------------------ */

.bch-suggestion[hidden] { display: none; }

/**
 * Full width on a phone, a third of it on desktop.
 *
 * Full width made a single suggestion read as a banner across the top of the
 * results; at a third it reads as one thing among the others, which is what
 * it is. Set --bch-suggest-width on the element to change it — 50% lines its
 * right edge up with a two-column grid, 33.333% with three.
 */
@media (min-width: 960px) {
  .bch-suggestion {
    inline-size: var(--bch-suggest-width, 33.333%);
    /* Floor the card at roughly its common maximum so most Suggest presses
       don't resize it at all. Deliberately a floor and not a fixed height:
       clamping the title would truncate names like "Department of Families,
       Fairness & Housing (Ballarat)", and losing part of a resource's name is
       a worse fault than an occasional taller card. */
    min-block-size: 22rem;
  }
}

.bch-suggestion__summary {
  font-size: var(--bch-text-m);
  margin-block: 0.25rem 0.5rem;
  /* Reserve three lines. Summaries vary from four words to a full sentence,
     so without this the card resizes on every Suggest press — the page stays
     visually still thanks to scroll anchoring, but the card itself jitters
     and everything below it shuffles. */
  min-block-size: calc(var(--bch-text-m) * 1.5 * 3);
}

.bch-suggestion__btn {
  min-block-size: 48px;
  padding-inline: 1.5rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: var(--bch-surface-strong);
  color: inherit;
  font: inherit;
  /* The only control here that acts rather than filters, so it carries the
     most weight of anything in the element. */
  font-size: var(--bch-text-m);
  font-weight: 700;
  cursor: pointer;
}

.bch-suggestion__btn:hover {
  background: color-mix(in srgb, currentColor 28%, transparent);
}

.bch-suggestion__btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Announced to screen readers; visually redundant next to the highlighted
   card, so it stays out of the layout. */
.bch-suggestion__said {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The picked card. Ring plus offset rather than a background change, so it
   reads on any theme colour and doesn't depend on hue alone. */
.bch-card--picked {
  box-shadow: 0 0 0 3px currentColor;
}

.bch-card--picked:focus {
  outline: none; /* the ring above already marks it */
}

@media (prefers-reduced-motion: no-preference) {
  .bch-card--picked {
    animation: bch-picked 1.4s ease-out;
  }
}

@keyframes bch-picked {
  0%   { box-shadow: 0 0 0 8px currentColor; }
  100% { box-shadow: 0 0 0 3px currentColor; }
}

/* ---- Results ----------------------------------------------------- */

/* The shuffle is driven by the Web Animations API in JS, not by CSS
   transitions — a transition on transform would fight the FLIP inversion.
   All CSS does here is keep the animated cards on their own layer while
   they move, and stay out of the way when motion is turned down. */
.bch-directory__results > li {
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .bch-directory__results > li {
    animation: none !important;
    transition: none !important;
  }
}

.bch-card {
  min-inline-size: 0; /* type scales, the grid does not */
}

.bch-card__title  { font-size: var(--bch-text-l); }
.bch-card__notes,
.bch-card__meta   { font-size: var(--bch-text-s); }

.bch-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0.75rem 0 0;
}

.bch-card__meta dt { font-weight: 700; }

.bch-card__meta dd {
  margin: 0;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .bch-card__meta {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bch-card__meta dd { margin-block-end: 0.5rem; }
}

/* ---- Layout variants --------------------------------------------- */

.bch-directory-list .bch-card,
.bch-directory-compact .bch-card {
  border: 0;
  box-shadow: none;
  padding-inline: 0;
}

.bch-directory-compact .bch-card__summary,
.bch-directory-compact .bch-card__notes {
  display: none;
}

/* ---- Suggestion -------------------------------------------------- */

.bch-suggestion__title { font-size: var(--bch-text-l); }
.bch-suggestion__meta,
.bch-suggestion__eyebrow { font-size: var(--bch-text-s); }

/* ---- Text size control ------------------------------------------- */

.a11y-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 1.5rem;
}

.a11y-scale[hidden] { display: none; }

.a11y-scale__label {
  font-size: 0.9375rem;
  opacity: 0.75;
}

/* Fixed rem on purpose: the size switch shouldn't resize itself, or the
   buttons shift under the pointer as they're clicked. */
.a11y-scale__btn {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: 1rem;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1;
  color: inherit;
  background: var(--bch-surface);
  border: 2px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}

.a11y-scale__btn[aria-pressed="true"] {
  background: var(--bch-surface-strong);
  font-weight: 700;
  box-shadow: inset 0 0 0 3px currentColor;
}

.a11y-scale__btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}


/* ---- Intro copy ---------------------------------------------------

   The results grid wants the full container; prose does not. At 1200px
   an intro paragraph runs to roughly 150 characters a line, which is
   about twice a comfortable measure and hard work for exactly the
   readers this directory is for.

   Measured in ch so the measure stays constant as the text scales,
   rather than a fixed pixel width that would tighten at the largest
   setting. Note ch is the width of a zero, which is narrower than the
   average lowercase letter — 62ch lands at roughly 76 real characters,
   which is where it wants to be. Override with --bch-intro-width on the
   element if a page genuinely wants it full width.
   ------------------------------------------------------------------ */

.bch-directory__intro,
.bch-stories__intro {
  max-inline-size: var(--bch-measure);
  /* uk-panel carries no margin and neither does the paragraph inside it, so
     the intro's last line sat flush against whatever followed — which here is
     the crisis line and then a row of buttons. Prose running straight into
     controls with no air reads as one block rather than two. */
  margin-block-end: 2rem;
}

/* A heading needs less air below it than a paragraph does, because it
   belongs to what follows rather than sitting apart from it. */
.bch-directory__heading {
  margin-block-end: 0.75rem;
}

/* Capped on the figure, not the quote, so the border and indent sit INSIDE
   the measure — that way the quote's right edge lands on the intro's right
   edge, and only the left is indented, which is the point of a quote. */
.bch-story {
  max-inline-size: var(--bch-measure);
  /* Without this the 1.25rem indent and the 3px rule are added OUTSIDE the
     measure, pushing the quote's right edge 23px past the intro's. */
  box-sizing: border-box;
}

/* The crisis line and the heading are short enough to look after
   themselves, but a long heading benefits from the same ceiling. */
.bch-directory__heading {
  max-inline-size: var(--bch-measure);
}

/* ---- Result bar: count and the print button ---------------------- */

.bch-resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  /* The bar carried no space of its own — the suggestion card underneath was
     providing it by accident, so the moment a filter hid the card the print
     button sat flush against the first result. Adjacent vertical margins
     collapse, so this doesn't double up when the card is back. */
  margin-block-end: 1.5rem;
}

.bch-resultbar .bch-directory__count { margin-block-end: 0; }

.bch-directory__print {
  min-block-size: 44px;
  padding-inline: 1rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: var(--bch-surface);
  color: inherit;
  font: inherit;
  font-size: var(--bch-text-s);
  cursor: pointer;
}

.bch-directory__print[hidden] { display: none; }

.bch-directory__print:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* A map link sits inside the Where value, so it needs separating from the
   address without becoming a second block.

   display:inline, not inline-block. An inline-block's vertical padding adds
   to the line box's ascent, which pushed the whole Where value down 5.6px —
   exactly the padding — and knocked it out of line with its label while
   every other row stayed put. An inline element's vertical padding is still
   part of the hit area but contributes nothing to layout. */
.bch-card__map {
  display: inline;
  margin-inline-start: 0.5rem;
  padding-block: 0.5rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---- Crisis line --------------------------------------------------

   Always present, never filtered away, above the controls so it doesn't
   depend on scrolling. Quiet on purpose — this is a page about community
   groups, and a red banner would make it read like an intervention.
   ------------------------------------------------------------------ */

.bch-crisis {
  margin-block: 0 1rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--bch-surface-strong, currentColor);
  font-size: var(--bch-text-s);
}

.bch-crisis__link {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Comfortably tappable without becoming a button. */
.bch-crisis__link {
  display: inline-block;
  padding-block: 0.5rem;
}

/* ---- Print --------------------------------------------------------

   Someone will print a filtered list to take to a friend, or to put on a
   noticeboard. Controls, filters and the suggestion are interface, not
   content, so they come off the page — and hidden results must stay
   hidden or the printout ignores the filtering entirely.
   ------------------------------------------------------------------ */

@media print {
  .bch-controls,
  .bch-directory__print,
  .bch-suggestion,
  .a11y-scale,
  .bch-active,
  .bch-refine__toggle,
  .bch-directory__empty {
    display: none !important;
  }

  .bch-directory__results > li[hidden] {
    display: none !important;
  }

  .bch-directory {
    font-size: 11pt;
  }

  /* One column reads better on paper than a squeezed grid. */
  .bch-directory__results {
    display: block !important;
    margin: 0 !important;
  }

  .bch-directory__results > li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .bch-card {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0.6cm 0 !important;
    background: none !important;
  }

  /* The crisis line is the one piece of interface worth keeping. */
  .bch-crisis {
    border-block-end: 1pt solid #000;
  }

  .bch-card__map { display: none !important; }

  /* A bare "Wendouree Walkers" tells a reader nothing on paper. */
  .bch-card__title a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    font-weight: 400;
    word-break: break-all;
  }
}

/* ---- Real Stories -------------------------------------------------

   Quotes from the BCH focus group. Sized larger than body copy because
   they're meant to be read, not skimmed past — and indented rather than
   boxed, so they read as someone speaking rather than as a callout.
   ------------------------------------------------------------------ */

.bch-story {
  margin: 0 0 2rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--bch-surface-strong, currentColor);
}

.bch-story__theme {
  margin-block-end: 0.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bch-story__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: calc(var(--bch-base, 1rem) * 1.125);
  line-height: 1.55;
}

.bch-story__quote p:last-child { margin-block-end: 0; }

.bch-story__who {
  margin-block-start: 0.5rem;
  font-size: var(--bch-text-s, 0.875rem);
  opacity: 0.75;
}

/* Stories are content, so they print — unlike the interface around them. */
@media print {
  .bch-story { break-inside: avoid; page-break-inside: avoid; }
}