/* =========================================================================
   IBD Resources Hub — design 1b "Soft Cards" (warm, rounded, human).
   Single consolidated stylesheet. Fonts, icons and flags are self-hosted
   (docs/ASSETS.md); nothing is pulled in via @import. Keep one definition
   per component; do not re-split into multiple files.
   ========================================================================= */

/*! Font: Hanken Grotesk, (c) The Hanken Grotesk Project Authors, SIL OFL 1.1
    (static/fonts/hanken-grotesk/v12/OFL.txt). Self-hosted variable font; see docs/ASSETS.md. */
/* One variable file per subset covers weights 400-800. unicode-range means a
   browser downloads latin-ext only if a page contains those characters. The
   latin file is preloaded in baseof.html. */
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/fonts/hanken-grotesk/v12/latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/fonts/hanken-grotesk/v12/latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Colour tokens (design handoff, final) */
    --purple-700: #6B3AA0;      /* primary: buttons, links, tags, gradient start */
    --purple-900: #3B2350;      /* headings, dark text on light */
    --purple-500: #7545AA;      /* hero gradient end (darkened from #8A56C0 so small white text on it passes 4.5:1) */
    --purple-100: #F0E7F8;      /* tag pill background */
    --purple-50:  #F6F1FB;      /* callout background */
    --bg-page:    #F4EEFA;      /* page background (lavender tint) */
    --bg-card:    #FFFFFF;      /* cards, header bar */
    --text-body:  #34303A;
    --text-secondary: #54505C;  /* card body copy */
    --text-muted: #6C6572;      /* meta lines (darker than mockup for AA) */

    /* On-purple text. Checked against the lightest point of the hero
       gradient (--purple-500): intro and captions 5.5:1, pills (white on
       the 14% white wash) 4.8:1. */
    --on-purple-intro: #F1E6FA;
    --on-purple-caption: #F1E6FA;
    --on-purple-pill: #FFFFFF;

    /* Semantic tokens — these flip in dark mode; the raw purple fills above
       (brand mark, filled pills, hero gradient) stay the same in both themes. */
    --color-heading: #3B2350;
    --color-link: #6B3AA0;
    --callout-text: #5A4A68;
    --border-soft: #EFE8F5;
    --row-alt: #FBF9FD;

    color-scheme: light;

    /* Shape & elevation */
    --radius-card: 20px;
    --radius-hero: 22px;
    --radius-callout: 12px;
    --shadow-card: 0 12px 30px -18px rgba(60, 35, 80, .4);
    --shadow-card-hover: 0 16px 34px -16px rgba(60, 35, 80, .5);

    /* Layout */
    --container: 1200px;
    --gutter: 20px;

    --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark theme. Applied by theme.js as <html data-theme="dark"> (stored
   preference, falling back to the system setting); toggled from the header. */
[data-theme="dark"] {
    --bg-page: #171221;
    --bg-card: #231A32;
    --text-body: #E8E2F0;
    --text-secondary: #C6BDD2;
    --text-muted: #9F95AD;
    --purple-100: #3B2C54;      /* pill / tag backgrounds */
    --purple-50: #2E2343;       /* callout background */
    --color-heading: #EDE4F8;
    --color-link: #C9A9F0;
    --callout-text: #D3C4E6;
    --border-soft: #3A2E50;
    --row-alt: #281F39;
    --shadow-card: 0 12px 30px -18px rgba(0, 0, 0, .75);
    --shadow-card-hover: 0 16px 34px -16px rgba(0, 0, 0, .85);

    color-scheme: dark;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
    background-color: var(--bg-page);
}

.shell {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%); /* clip is deprecated; kept for older browsers */
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--purple-700);
    color: #fff;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 0 0 12px 0;
}
.skip-link:focus {
    left: 0;
}

/* Visible focus everywhere. The white ring is only for elements inside the
   purple hero: the ring is drawn outside the element (outline-offset), so on
   the purple header pills and the skip link it would land on the white header
   bar and vanish. Those keep the default purple ring. */
:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}
.hero__panel :focus-visible {
    outline-color: #fff;
}

a {
    color: var(--color-link);
}
/* Keep phone numbers on one line ("1800 138 / 029" was hard to read) */
a[href^="tel:"] {
    white-space: nowrap;
}

/* =========================================================================
   Header — white bar, brand mark, pill nav
   ========================================================================= */
.site-header {
    background: var(--bg-card);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 22px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0; /* let the name wrap so the tools never get pushed off-screen */
    text-decoration: none;
}
.brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--purple-700);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.brand__name {
    font-weight: 800;
    font-size: 19px;
    color: var(--color-heading);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}
.nav-pill {
    white-space: nowrap;
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
/* Primary destinations (What is IBD? / Global): filled, most prominent */
.nav-pill--primary {
    background: var(--purple-700);
    color: #fff;
    padding: 8px 16px;
}
.nav-pill--primary:hover {
    background: #5C3189;
    color: #fff;
}
.nav-pill--primary.is-active {
    background: #5C3189;
    /* A white ring enclosed by a 2px purple edge, so it shows on the white
       light-theme header as well as the dark one (a white ring alone
       merged with the white header). */
    box-shadow: inset 0 0 0 2px #5C3189, inset 0 0 0 4px #fff;
}
.nav-pill--primary .icon--globe {
    margin-right: 4px;
}
/* Secondary action (Submit Content): soft pastel */
.nav-pill--soft {
    background: var(--purple-100);
    color: var(--color-link);
}
.nav-pill--soft:hover {
    background: #E5D6F3;
    color: var(--color-link);
}
.nav-pill--soft.is-active {
    box-shadow: inset 0 0 0 2px var(--color-link);
}
[data-theme="dark"] .nav-pill--soft:hover {
    background: #493866;
}

/* Rotating "What is IBD?/Crohn's?/Colitis?" term: all candidates stacked as
   hidden bold ghosts in one grid cell so the pill never changes width. */
.ibd-term {
    display: inline-grid;
    align-items: baseline;
    justify-items: start;
    margin-left: .35em;
}
.ibd-term > * {
    grid-area: 1 / 1;
    white-space: nowrap;
}
.ibd-term__ghost::before {
    content: attr(data-term);
}
.ibd-term__ghost {
    visibility: hidden;
    font-weight: 800;
    pointer-events: none;
    user-select: none;
}
.ibd-term__value {
    transition: opacity .5s ease-in-out, font-weight .2s ease-in-out;
}
/* Pause button for the rotating word (WCAG 2.2.2). A 24px badge on the
   pill's top-right corner, shown while the pill or the button is hovered or
   focused. It stays in the tab order and the accessibility tree when not
   shown (opacity, not display), so keyboard and screen-reader users reach
   it right after the link. [hidden] (JavaScript off, reduced motion) wins. */
.nav-term {
    position: relative;
    display: inline-flex;
}
.nav-term__pause {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    background: var(--text-body); /* dark disc on the light header, light disc on the dark one */
    color: var(--bg-card);
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease-out;
}
.nav-term__pause[hidden] {
    display: none;
}
.nav-term:hover .nav-term__pause,
.nav-term:focus-within .nav-term__pause {
    opacity: 1;
}
/* No hover on touch screens (e.g. a tablet in landscape, at desktop
   width), so the badge would never appear: always show it there. */
@media (hover: none), (pointer: coarse) {
    .nav-term__pause {
        opacity: 1;
    }
}
.nav-term__pause .nav-term__icon-play,
.nav-term__pause[data-paused] .nav-term__icon-pause {
    display: none;
}
.nav-term__pause[data-paused] .nav-term__icon-play {
    display: inline;
}

.site-header__tools {
    display: flex;
    flex: none; /* the theme toggle and Menu button keep their size; the brand gives way */
    align-items: center;
    gap: 6px;
}

/* Dark-mode toggle */
/* theme.js sets data-theme whenever JavaScript runs, so a missing attribute
   means JS is off and the toggle would do nothing: hide it. */
html:not([data-theme]) .theme-toggle {
    display: none;
}
.theme-toggle {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease-out, color .15s ease-out;
}
.theme-toggle:hover {
    background: var(--purple-100);
    color: var(--color-heading);
}
.theme-toggle__light {
    display: none;
}
[data-theme="dark"] .theme-toggle__dark {
    display: none;
}
[data-theme="dark"] .theme-toggle__light {
    display: inline-block;
}

/* Mobile disclosure (shown <880px) */
.nav-disclosure {
    display: none;
    position: relative;
}
.nav-disclosure__button {
    list-style: none;
    cursor: pointer;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-heading);
    font-size: 18px;
}
/* Visible "Menu" word beside the icon: an icon-only button hid "Find help",
   the main entry point, from people who don't recognise the hamburger. */
.nav-disclosure__label {
    font-size: 14px;
    font-weight: 700;
}
.nav-disclosure__button::-webkit-details-marker {
    display: none;
}
.nav-disclosure[open] .nav-disclosure__button {
    background: var(--purple-100);
}
.nav-disclosure__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    min-width: 210px;
    background: var(--bg-card);
    border: 1px solid transparent; /* invisible normally; drawn in forced colours */
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-disclosure__panel a {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}
.nav-disclosure__panel a:hover {
    background: var(--purple-100);
    color: var(--color-heading);
}
.nav-disclosure__panel a.is-primary {
    color: var(--color-link);
    font-weight: 700;
}
.nav-disclosure__panel a[aria-current="page"] {
    /* Current page: tint plus a left bar, not colour alone */
    background: var(--purple-100);
    color: var(--color-heading);
    box-shadow: inset 3px 0 0 var(--color-link);
}

/* =========================================================================
   Hero — rounded gradient panel
   ========================================================================= */
.hero {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 28px var(--gutter) 8px;
}
.hero__panel {
    background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
    border-radius: var(--radius-hero);
    padding: 40px;
    color: #fff;
}

.hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--on-purple-pill);
    background: rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
/* "Showing resources for <country>" line above the pills (country-pills.html) */
.hero__context {
    font-size: 13px;
    color: var(--on-purple-caption);
    margin: 0 0 10px;
}
.hero-pill .fi {
    width: 1.25em;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
/* Label steps down with viewport width: full name -> ISO-3 -> ISO-2.
   The short codes come from data-a3/data-a2 via ::after, so only the full
   name is in the markup. The full name is hidden visually, not with
   font-size:0, which a browser minimum-font-size setting can override and
   overlap. It is clipped (the .sr-only pattern), not display:none, so it
   stays in the accessible name alongside the visible code. */
@media (max-width: 767.98px) {
    .hero-pill__name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .hero-pill__label::after { content: attr(data-a3); }
}
@media (max-width: 479.98px) {
    .hero-pill__label::after { content: attr(data-a2); }
}
.hero-pill:hover {
    /* darken rather than lighten: a lighter wash drops white text below 4.5:1 */
    background: rgba(0, 0, 0, .18);
    color: #fff;
}
.hero-pill.is-active {
    background: #fff;
    color: #3B2350;   /* literal: white pill in both themes */
    font-weight: 700;
    padding: 6px 16px;
}

.hero__title {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
    /* no width cap: let the title use the panel (the mockup's 20ch cap left
       the right half of the hero empty at desktop widths) */
    color: #fff;
}
.hero__intro {
    font-size: 17px;
    line-height: 1.65;
    margin: 0;
    color: var(--on-purple-intro);
    max-width: 80ch;
}
/* Donate call to action (country pages with a donate sub-page). A
   secondary, outlined button: it is the first action on the page, and for a
   newly diagnosed reader the helpline card below matters more, so it
   shouldn't read as the main thing to do. White on the hero gradient. */
.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .75);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
}
.hero__cta .icon {
    color: #fff;
}
.hero__cta:hover {
    background: rgba(0, 0, 0, .18);
}
.hero__cta:hover,
.hero__cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
}
.hero__intro a {
    color: #fff;
    text-decoration: underline;
}

.hero__stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin: 28px 0 0;
    padding: 0;
}
.hero__stat {
    display: flex;
    flex-direction: column;
}
.hero__stat-number {
    font-size: 34px;
    font-weight: 800;
}
.hero__stat-caption {
    font-size: 13px;
    color: var(--on-purple-caption);
}


/* =========================================================================
   Resource pages — section headings + card grid
   Direct children of .content-grid span the full row; org cards flow into
   the responsive columns.
   ========================================================================= */
.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 8px 0 52px;
}
.content-grid > * {
    grid-column: 1 / -1;
    min-width: 0;
}
.content-grid > .entity {
    grid-column: auto;
}
.content-grid > h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-heading);
    margin-top: 14px;
}
.content-grid > h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-heading);
}
/* Prose paragraphs become soft cards that sit in the SAME grid track as the org
   cards, so a section's text blocks wrap across the columns exactly as the org
   cards do (AU's two intro paragraphs sit side by side at >=768px) and every card
   on the page shares one width. Text is not split into newspaper columns: the
   card is already a comfortable measure, and column-splitting inside a card made
   short paragraphs leave half the card empty. */
.content-grid > p {
    grid-column: auto;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 26px 30px;
    line-height: 1.7;
}
/* Prose card with a content icon ({{< card >}} shortcode): same card surface and
   grid track as a plain prose paragraph. The icon tile floats left so the text wraps beside it and then underneath,
   rather than the tile taking a row of its own; flow-root contains the float. */
.content-grid > .info-card {
    grid-column: auto;
    /* Size to its own text instead of stretching to the tallest card in the
       row (a two-line intro next to a long org card became a mostly empty box). */
    align-self: start;
    display: flow-root;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    line-height: 1.7;
}
.info-card__icon {
    float: left;
    width: 96px;
    height: 96px;
    border-radius: 14px;
    margin: 4px 14px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--purple-100);
    color: var(--color-link);
    /* Glyph fills most of the tile (~18px of tint around it), so the icon
       reads at a similar visual weight to an org logo without a wide empty
       margin inside the tile. */
    font-size: 60px;
}
/* Full-row variant for one-line lead-ins (card shortcode `wide="true"`): the
   tile and text sit in one compact band instead of a half-empty grid cell.
   A column, so a lead-in followed by a list (the /global/ "Start here" card)
   stacks instead of sitting side by side; short text stays centred. */
.content-grid > .info-card--wide {
    grid-column: 1 / -1;
}
.info-card--wide .info-card__body {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.info-card__body > p + p,
.info-card__body > h3 + p,
.info-card__body > ul + p {
    margin-top: 1em;
}
/* A short list inside a card (e.g. the /help/ carers tile) */
.info-card__body > ul {
    margin: .4em 0 0;
    padding-left: 1.2em;
}
/* Tile titles on /help/ are h3s, so screen-reader users can jump between
   them; they look like the bold lead-in line they replaced. */
.info-card__body > h3 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
    color: inherit;
}
.info-card__body a {
    text-decoration: underline;
}
.content-grid > ul,
.content-grid > ol {
    line-height: 1.65;
}
.content-grid > p a,
.content-grid > ul a,
.content-grid > ol a {
    text-decoration: underline;
}
.content-grid > ul {
    padding-left: 22px;
}
.content-grid > hr {
    border: 0;
    border-top: 1px solid var(--border-soft);
}

/* Collapsed org-card list ({{< collapse >}} shortcode): sections most
   patients can skip. The summary is a soft pill button; the nested
   .content-grid keeps the page's card columns. */
.entity-group__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-link);
    background: var(--purple-100);
    padding: 8px 16px;
    border-radius: 999px;
}
.entity-group__toggle::-webkit-details-marker {
    display: none;
}
.entity-group__toggle::after {
    content: "";
    width: .45em;
    height: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease-out;
}
.entity-group[open] > .entity-group__toggle::after {
    transform: translateY(2px) rotate(-135deg);
}
.entity-group__toggle:hover {
    background: #E5D6F3;
}
[data-theme="dark"] .entity-group__toggle:hover {
    background: #493866;
}
.entity-group__hide,
.entity-group[open] .entity-group__show {
    display: none;
}
.entity-group[open] .entity-group__hide {
    display: inline;
}
.content-grid.entity-group__body {
    padding: 22px 0 0;
}

/* "More detail" fold on prose pages ({{< more >}} shortcode). Reuses the
   collapse toggle's pill; the opened text sits behind a purple rule so it
   reads as an aside to the section above. */
.prose-card .more-detail {
    margin: 4px 0 24px;
}
.more-detail__body {
    margin-top: 16px;
    padding-left: 18px;
    border-left: 3px solid var(--purple-100);
}
.more-detail__body > :last-child {
    margin-bottom: 0;
}

/*! Icons: Font Awesome Free 6.4.0 by @fontawesome, https://fontawesome.com
    License: CC BY 4.0 (icons). Self-hosted as inline SVG; see docs/ASSETS.md. */
/* Inline SVG icons (partials/icon.html). 1em tall like the old icon font, width
   from each icon's viewBox, coloured by the surrounding text. */
.icon {
    /* No `display` here: components toggle icons with display:none (e.g. the
       theme toggle), and a later display rule would override them. */
    height: 1em;
    width: auto;
    vertical-align: -0.125em;
    fill: currentColor;
    overflow: visible;
}

/*! Flags: flag-icons 7.3.2 by lipis, https://github.com/lipis/flag-icons (MIT).
    Self-hosted; only the flags the site uses are shipped (docs/ASSETS.md). */
/* Country flags: <span class="fi fi-xx">. The image is a CSS background, so a
   browser only downloads the flags present on the page it is viewing. To add
   a flag: copy flags/4x3/<code>.svg to static/flags/<version>/ and add one
   .fi-<code> line below. */
.fi {
    position: relative;
    display: inline-block;
    width: 1.333333em;
    line-height: 1em;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}
.fi::before {
    content: "\00a0";  /* non-breaking space gives the empty span its 1em height */
}
.fi-au { background-image: url(/flags/7.3.2/au.svg); }
.fi-ca { background-image: url(/flags/7.3.2/ca.svg); }
.fi-eu { background-image: url(/flags/7.3.2/eu.svg); }
.fi-gb { background-image: url(/flags/7.3.2/gb.svg); }
.fi-mx { background-image: url(/flags/7.3.2/mx.svg); }
.fi-nz { background-image: url(/flags/7.3.2/nz.svg); }
.fi-us { background-image: url(/flags/7.3.2/us.svg); }

/* Flags / icons inside content headings */
h1 .fi, h2 .fi, h3 .fi {
    width: 1.1em;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    margin-right: 6px;
}
h2 .icon--globe, h1 .icon--globe {
    color: var(--color-link);
    margin-right: 6px;
}

/* =========================================================================
   Org card ("Soft Card")
   ========================================================================= */
.entity {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: 28px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.entity:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.entity__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.entity__logo {
    width: 112px;
    height: 112px;
    border-radius: 14px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* no background: several logos have a baked-in white background that
       clashed with the old pastel slot */
}
/* Logo link (cards with a url) fills the box, so the logo sizes as before */
.entity__logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.entity__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Theme-specific logo variants (entity `logo_dark` param) */
.logo--dark {
    display: none;
}
[data-theme="dark"] .logo--light {
    display: none;
}
[data-theme="dark"] .logo--dark {
    display: block;
}
/* Logos without a dark variant sit on a light chip in dark mode, so
   white-background artwork doesn't glare and dark artwork stays legible.
   Logos that supply a logo_dark variant are made for dark and keep the bare
   slot. Degrades safely: browsers without :has() just show the bare logo. */
[data-theme="dark"] .entity__logo:not(:has(.logo--dark)) {
    background: #EFEAF5;
    padding: 8px;
}
.entity__name {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-heading);
    margin: 0;
}
.entity__name a {
    color: inherit;
    text-decoration: none;
}
.entity__name a:hover,
.entity__name a:focus {
    color: var(--color-link);
    text-decoration: underline;
}
.entity__meta {
    font-size: 13px;
    color: var(--text-muted);
    margin: 3px 0 0;
}
.entity__scope + .entity__location::before {
    content: " · ";
}
.entity__meta .fi {
    width: 1.1em;
    border-radius: 2px;
    margin-right: 2px;
}
.entity__meta .icon--globe {
    color: var(--color-link);
}

.entity__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
}
.entity-tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-link);
    background: var(--purple-100);
    padding: 4px 11px;
    border-radius: 999px;
}

.entity__callout {
    background: var(--purple-50);
    border-radius: var(--radius-callout);
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--callout-text);
    margin-bottom: 14px;
}
.entity__callout a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 2px;
}
.entity__callout a:hover,
.entity__callout a:focus-visible {
    text-decoration-color: currentColor;
}

/* Org-card spend figure (entity `financials`): a small muted footnote, not a
   callout box. The donate page keeps the .entity__callout treatment. */
.entity__financials {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}
.entity__financials-label {
    font-weight: 700;
}
.entity__financials a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 2px;
}
.entity__financials a:hover,
.entity__financials a:focus-visible {
    text-decoration-color: currentColor;
}

.entity__body {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.entity__body p {
    margin: 0 0 12px;
}
.entity__body ul,
.entity__body ol {
    margin: 0 0 12px;
    padding-left: 20px;
}
.entity__body li {
    margin-bottom: 4px;
}
.entity__body a {
    color: var(--color-link);
    text-decoration: underline;
}
.entity__body > :last-child {
    margin-bottom: 0;
}

.entity__more {
    margin-top: auto;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-link);
    text-decoration: none;
    align-self: flex-start;
}
.entity__more:hover,
.entity__more:focus {
    text-decoration: underline;
}

/* =========================================================================
   Educational prose page ("What is IBD?") — white rounded card
   ========================================================================= */
.prose-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 44px;
    margin: 8px auto 52px;
    max-width: calc(72ch + 88px);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.prose-card h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-heading);
    margin: 36px 0 14px;
}
.prose-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-heading);
    margin: 28px 0 12px;
}
.prose-card > :first-child {
    margin-top: 0;
}
.prose-card p {
    margin: 0 0 16px;
}
.prose-card ul,
.prose-card ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
.prose-card li {
    margin-bottom: 6px;
}
.prose-card a {
    text-decoration: underline;
}
.prose-card strong {
    color: var(--text-body);
}
.prose-card hr {
    border: 0;
    border-top: 1px solid var(--border-soft);
    margin: 32px 0;
}

/* "On this page" contents box and back links (`toc: true`,
   partials/page-toc.html). Sections are listed in two columns on wide
   screens; a section's subsections stay with it (break-inside: avoid). */
.page-toc {
    background: var(--purple-50);
    border-radius: var(--radius-callout);
    padding: 20px 24px;
    margin: 8px 0 28px;
    font-size: 15.5px;
    line-height: 1.5;
}
.page-toc__title {
    font-size: 16px;
    margin: 0 0 10px;
}
.page-toc__list {
    margin: 0;
    padding-left: 22px;
}
.page-toc__list li {
    margin-bottom: 4px;
    break-inside: avoid;
}
.page-toc__list ol {
    list-style: lower-alpha;
    margin: 4px 0 6px;
    padding-left: 20px;
}
.page-toc__list a {
    text-decoration: none;
}
.page-toc__list a:hover,
.page-toc__list a:focus-visible {
    text-decoration: underline;
}
@media (min-width: 720px) {
    .page-toc__list {
        columns: 2;
        column-gap: 32px;
    }
}
/* On resource pages the box and back links sit in the card grid: the box
   is a full-width white card, and back links are plain lines, not the soft
   cards that .content-grid > p makes of prose paragraphs. */
.content-grid > .page-toc {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin: 0;
    padding: 22px 30px;
}
.content-grid > .page-toc__back {
    grid-column: 1 / -1;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 -10px;
}
.page-toc__back {
    margin: 20px 0 0;
    font-size: 14px;
}
.page-toc__back a {
    font-weight: 600;
    text-decoration: none;
}
.page-toc__back a:hover,
.page-toc__back a:focus-visible {
    text-decoration: underline;
}
/* "Back to citation" link after each reference (_default/single.html).
   U+FE0E keeps the arrow a text glyph, not an emoji. */
.reference-back {
    /* At least 24x24px (WCAG 2.5.8): the bare arrow was 11x18px, right
       after the DOI link, and easy to miss or mis-tap. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    margin-left: 4px;
    text-decoration: none;
}
/* Safety line at the top of a prose page (e.g. "Feeling very unwell?") */
.prose-card .prose-alert {
    border-left: 4px solid var(--color-link);
    background: var(--purple-50);
    border-radius: 0 var(--radius-callout) var(--radius-callout) 0;
    padding: 12px 16px;
}
/* Headings reached from the contents keep a little space above them. */
.prose-card h2[id],
.prose-card h3[id] {
    scroll-margin-top: 16px;
}

/* =========================================================================
   Donate page (/<country>/donate/) — priority picker + reorderable org cards
   ========================================================================= */
.donate-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 8px 0 52px;
}
.donate-page .donate-intro,
.donate-page .prose-card {
    margin: 0;
    max-width: none;
}
.donate-page .content-grid {
    padding: 0;
}

.priority-picker {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 26px 30px;
}
.priority-picker h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-heading);
    margin: 0 0 6px;
}
.priority-picker__hint {
    color: var(--text-secondary);
    margin: 0 0 18px;
    font-size: 14.5px;
}
/* Without JavaScript the checkboxes can be ticked but reorder nothing, so
   hide them (and the instruction) and leave the <noscript> note. theme.js
   sets data-theme on <html> whenever JS runs. */
html:not([data-theme]) .priority-picker__hint,
html:not([data-theme]) .priority-picker__status,
html:not([data-theme]) .priority-picker__fieldset {
    display: none;
}
/* Starts with a default line (not empty) and returns to it when nothing
   is selected, so its height is reserved and the options never jump.
   Never display:none while JS runs: a live region hidden on load may not
   be registered, and its later updates not announced (it is hidden only
   with JS off, above, where it would never update). */
.priority-picker__status {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 14px;
}
/* On narrow screens the default line and the messages wrap to different
   numbers of lines; reserve the most any of them takes at that width so
   the options below don't jump as the message changes: two lines up to
   600px, three up to 400px (em = lines x the inherited 1.6 line-height,
   where lh is unsupported). */
@media (max-width: 600px) {
    .priority-picker__status {
        min-height: 3.2em;
        min-height: 2lh;
    }
}
@media (max-width: 400px) {
    .priority-picker__status {
        min-height: 4.8em;
        min-height: 3lh;
    }
}
.priority-picker__noscript {
    color: var(--text-muted);
    font-size: 13px;
    margin: 14px 0 0;
}
.priority-picker__fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.priority-picker__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.priority-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-callout);
    background: var(--purple-50);
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}
.priority-option:has(input:checked) {
    border-color: var(--purple-700);
    background: var(--purple-100);
}
.priority-option__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--color-heading);
}
.priority-option input[type="checkbox"] {
    accent-color: var(--purple-700);
    width: 16px;
    height: 16px;
    flex: none;
}
.priority-option__description {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.donate-card {
    transition: opacity .15s ease-out, transform .15s ease-out, box-shadow .15s ease-out;
}
/* Dim only the logo and flatten the card: fading the whole card put its
   text and Donate link below 4.5:1 contrast, though they still work. The
   "No overlap" line and the order already say it doesn't match. */
.donate-card--nomatch {
    box-shadow: none;
}
.donate-card--nomatch .entity__logo {
    opacity: .5;
}
.entity-tag.is-selected {
    outline: 2px solid var(--color-link);
    outline-offset: -1px;
    font-weight: 800;
}
.donate-card__match {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-link);
    margin: 0 0 14px;
}
.donate-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--purple-700);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
}
.donate-cta:hover,
.donate-cta:focus-visible {
    background: #5C3189;
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}

@media (max-width: 719.98px) {
    .priority-picker {
        padding: 20px 22px;
    }
}

/* Comparison table */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 15px;
    border-radius: var(--radius-callout);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border-soft);
}
/* On narrow screens the table scrolls sideways inside a wrapper instead of
   widening the whole page (it forced page scrolling at 320px, WCAG 1.4.10).
   The wrapper is added by _default/single.html; the table itself keeps
   display:table, since display:block can strip its row/column semantics
   for screen readers. */
.table-scroll__hint {
    display: none;
    margin: 22px 0 -14px;
    font-size: 14px;
    color: var(--text-muted);
}
@media (max-width: 479.98px) {
    .table-scroll {
        overflow-x: auto;
        max-width: 100%;
    }
    .table-scroll__hint {
        display: block;
    }
}
.custom-table th {
    background: var(--purple-100);
    color: var(--color-heading);
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
}
.custom-table td,
.custom-table tbody th {
    vertical-align: top; /* tall rows (Surgery is ~1000px at 320px) read from the top */
    padding: 12px 14px;
    border-top: 1px solid var(--border-soft);
}
/* Row headers (Location, Pattern, ...) look like the old first-column cells,
   in bold, rather than taking the header row's tinted background. */
.custom-table tbody th {
    background: transparent;
    color: var(--color-heading);
}
.custom-table tr:nth-child(even) td,
.custom-table tr:nth-child(even) th[scope="row"] {
    background: var(--row-alt);
}

/* References */
ol.references {
    padding-left: 20px;
    margin-top: 22px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
}
ol.references li {
    margin-bottom: 8px;
}
.reference-link {
    color: var(--color-link);
    text-decoration: none;
}
.reference-link:hover {
    text-decoration: underline;
}

/* =========================================================================
   Homepage — hero + country cards
   ========================================================================= */
.error-actions {
    padding: 8px 0 52px;
    font-size: 17px;
    font-weight: 700;
}
.error-actions a {
    text-decoration: underline;
}
/* 50x: urgent numbers written out (the rest of the site may be down) */
.error-urgent {
    max-width: 70ch;
    margin: 0 0 14px;
}
.error-urgent:first-child {
    margin-top: 24px;
}
.home-picker__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-heading);
    margin: 28px 0 20px;
}
/* "Not sure where to start?" link under the home-page picker. The grid
   carries its own 52px bottom padding, so pull the line up into it. */
.home-picker__help {
    margin: -28px 0 52px;
    color: var(--text-secondary);
}
.home-picker__help a {
    font-weight: 700;
}
.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding-bottom: 52px;
}
.country-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: 20px 24px;
    box-shadow: var(--shadow-card);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-heading);
    text-decoration: none;
    transition: transform .15s ease-out, box-shadow .15s ease-out, color .15s ease-out;
}
.country-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    color: var(--color-link);
}
.country-card .fi {
    font-size: 22px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.country-card--global {
    grid-column: 1 / -1;
    justify-content: center;
    background: var(--purple-50);
}
.country-card--global .icon {
    color: var(--color-link);
    font-size: 18px;
}

/* List/taxonomy pages (rare) */
.list-content,
.terms-content,
.taxonomy-content {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 28px var(--gutter) 52px;
}
.list-content h1,
.terms-content h1,
.taxonomy-content h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-heading);
    margin-bottom: 16px;
}
.list-content ul,
.terms-content ul,
.taxonomy-content ul {
    padding-left: 22px;
    line-height: 1.8;
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
    padding: 20px 0 44px;
    color: var(--color-heading);
}
.site-footer__inner {
    text-align: center;
    display: grid;
    gap: 8px;
}
.site-footer__global {
    font-size: 15px;
}
.site-footer__global a {
    font-weight: 700;
    text-decoration: underline;
}
/* Site-wide "not medical advice" line + About link */
.site-footer__note {
    font-size: 13.5px;
    color: var(--text-secondary);
    max-width: 70ch;
    margin: 0 auto;
}
.site-footer__note a {
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}
.site-footer__meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width: 720px) {
    :root {
        --gutter: 44px;
    }
}

/* The header pills need about 880px (four pills plus the brand); below
   that the menu button replaces them. Wider than the 720px layout
   breakpoint, so tablets get the menu rather than wrapped pills. */
@media (max-width: 879.98px) {
    .site-nav {
        display: none;   /* replaced by the disclosure; also hidden from AT */
    }
    .nav-disclosure {
        display: block;
    }
}

@media (max-width: 719.98px) {
    .site-header__inner {
        padding-block: 16px;
    }
    .hero__panel {
        padding: 28px 22px;
    }
    .hero__stats {
        gap: 14px 28px;
    }
    .prose-card {
        padding: 26px 20px;
    }
    .entity {
        padding: 22px;
    }
    .entity__logo {
        width: 88px;
        height: 88px;
    }
    /* Smaller than the mobile logo slot: floated beside text on a ~350px card,
       a 64px tile keeps a readable text column next to it. */
    .info-card__icon {
        width: 64px;
        height: 64px;
        border-radius: 12px;
        margin: 4px 12px 2px 0;
        font-size: 40px;
    }
    .content-grid > .info-card {
        padding: 18px 20px;
    }
    /* On a phone a wide card is as narrow as any other, so drop the flex
       band and let the text wrap under the floated icon like the other
       cards (a flex body never flows under a float, which left a ~164px
       column beside the icon at 320px). */
    .info-card--wide .info-card__body {
        display: block;
        min-height: 0;
    }
    /* A list starts below the icon, so its bullets line up (the first item
       would otherwise sit beside the float, out of line with the rest). */
    .info-card--wide .info-card__body > ul,
    .info-card--wide .info-card__body > ol {
        clear: left;
    }
    .content-grid > p {
        padding: 20px 22px;
    }
}

@media (min-width: 768px) {
    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1600px) {
    :root {
        --container: 1500px;
    }
    .content-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Very narrow phones: stack the card header */
@media (max-width: 360px) {
    /* WCAG text spacing (1.4.12) at 320px pushed the Menu button 8px off-screen */
    .site-header__inner {
        gap: 8px;
    }
    .brand {
        gap: 8px;
    }
    .brand__name {
        font-size: 17px;
    }
    .nav-disclosure__button {
        padding: 0 8px;
        gap: 6px;
    }
    .entity__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Print: bundle.js opens every "More detail" fold and collapsed list before
   printing (people print /whatis/ to take to appointments), so show their
   titles rather than "Hide detail"/"Hide list", and drop controls that do
   nothing on paper. */
@media print {
    .entity-group[open] .entity-group__show {
        display: inline;
    }
    .entity-group[open] .entity-group__hide,
    .entity-group:not(.more-detail) > summary, /* "Show list (N)": the list is printed open */
    .site-header__tools,
    .site-nav,
    .skip-link,
    .table-scroll__hint,
    .hero__context,
    .hero__pills,
    .hero__cta,
    .page-toc__back,
    .entity__more /* "Visit website": a link that does nothing on paper */ {
        display: none;
    }
    /* Web references on /whatis/ link their title, so on paper print the
       address after it (people take this page to appointments). DOI
       references already print their DOI as text. */
    .references a[href^="http"]:not([href^="https://doi.org/"])::after {
        content: " (" attr(href) ")";
        overflow-wrap: anywhere;
    }
    /* The /whatis/ crisis lines are the list people print for the fridge:
       print the address of web-only options ("chat online", Find A
       Helpline). tel:/sms: links already print their number. */
    #crisis-lines + ul a[href^="https://www.lifeline.org.au/chat"]::after,
    #crisis-lines + ul a[href^="https://findahelpline.com"]::after {
        content: " (" attr(href) ")";
        overflow-wrap: anywhere;
    }
}

/* Forced colours (Windows high contrast) drop backgrounds and box-shadows,
   which is how the header and hero mark the current page; use an outline. */
@media (forced-colors: active) {
    .nav-pill[aria-current="page"],
    .hero-pill[aria-current="page"],
    .nav-disclosure__panel a[aria-current="page"] {
        outline: 2px solid CanvasText;
        outline-offset: -2px;
        text-decoration: underline;
    }
    /* The current-page outline above would otherwise replace the focus
       ring, leaving keyboard focus invisible on those items. */
    .nav-pill[aria-current="page"]:focus-visible,
    .hero-pill[aria-current="page"]:focus-visible,
    .nav-disclosure__panel a[aria-current="page"]:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    .entity:hover,
    .country-card:hover {
        transform: none;
    }
}