/* PHOENIX RECOVERY HUB - main stylesheet */

/* FONTS, served from our own server.
   These used to come from fonts.googleapis.com, which meant every visitor's IP
   address went to Google on every page load, whether they wanted it to or not.
   The privacy policy had promised to stop that for over a year. Files are in
   assets/fonts/. Inter is a variable font, so one file covers 400 to 700.
   latin-ext is only fetched if a page actually uses a character from it. */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bebas-neue-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;
}
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bebas-neue-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: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-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;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-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;
}

:root {
    --phx-primary: #F26B1F;
    --phx-primary-dark: #C9530F;
    --phx-primary-light: #FF8A3D;
    --phx-primary-glow: rgba(242, 107, 31, 0.28);
    --phx-bg-dark: #0F1116;
    --phx-bg-darker: #07080B;
    --phx-bg-section: #15171D;
    --phx-bg-card: #1C1F26;
    --phx-bg-card-hover: #232730;
    --phx-text: #FFFFFF;
    --phx-text-muted: #C9CCD2;
    --phx-text-faint: #8B919B;
    --phx-border: rgba(255,255,255,0.08);
    --phx-border-light: rgba(255,255,255,0.16);
    --phx-crisis: #DC2626;
    --phx-crisis-dark: #991B1B;
    --phx-success: #047857; /* was #10B981: white on it measured 2.54:1 */

    --phx-font-display: 'Bebas Neue', system-ui, -apple-system, sans-serif;
    --phx-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --phx-w-content: 1200px;
    --phx-radius: 8px;
    --phx-radius-sm: 4px;
    --phx-shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --phx-shadow-glow: 0 0 28px var(--phx-primary-glow);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Floor for the sticky offsets so they are right before main.js runs, and
   right if it never does. The bar wraps to two lines on a narrow screen. */
:root { --phx-crisis-h: 38px; --phx-header-h: 74px; }
@media (max-width: 700px) { :root { --phx-crisis-h: 70px; } }

/* Anchor targets must clear BOTH sticky bars. Without this, every in-page link
   lands with its own heading hidden behind the header: 10 quick links on Get
   Help, 9 on Family Support, and /get-help/#safety, which is how the family page
   sends somebody to the overdose instructions. Both heights are measured in
   main.js, because the crisis bar wraps on narrow screens and the header grows
   with the logo. */
[id] { scroll-margin-top: calc(var(--phx-crisis-h, 38px) + var(--phx-header-h, 74px) + 1rem); }

/* An 800px smooth scroll is genuinely disorienting for somebody drunk, high or
   just motion-sensitive, and a good share of this audience is the first two. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
    margin: 0;
    font-family: var(--phx-font-body);
    background: var(--phx-bg-dark);
    color: var(--phx-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--phx-primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--phx-primary-light); }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4 {
    font-family: var(--phx-font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.0625rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--phx-text); margin-bottom: 0.875rem; }
p { margin: 0 0 1em; }

.phx-container { max-width: var(--phx-w-content); margin: 0 auto; padding: 0 1.5rem; }

/* CRISIS BAR (sticky top) */
/* Sticky, at last. The comment above has claimed "sticky top" since this file was
   written but there was never a position rule, so once anybody scrolled, 999 left
   the screen. On a signposting site for people in crisis that is the wrong default.
   The header sticks BELOW it, offset by the bar's real height, which main.js keeps
   in --phx-crisis-h because the bar wraps to two lines on a narrow screen. */
.phx-crisis-bar {
    background: var(--phx-crisis-dark);
    color: white;
    font-size: 0.875rem;
    position: sticky;
    top: 0;
    z-index: 101;
}
.phx-crisis-bar__inner { display: flex; align-items: center; gap: 0.5rem 1.25rem; flex-wrap: wrap; padding: 0.5rem 1.5rem; justify-content: center; }
.phx-crisis-bar__label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.phx-crisis-bar__link { color: white; padding: 0.5rem 0.625rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--phx-radius-sm); white-space: nowrap; }
.phx-crisis-bar__link:hover { background: rgba(255,255,255,0.15); color: white; }
.phx-crisis-bar__link--999 { background: rgba(0,0,0,0.3); }
.phx-crisis-bar__link--999:hover { background: black; }

@media (max-height: 460px) {
    .phx-crisis-bar { position: static; }
    .phx-header { top: 0; }
}

/* HEADER */
.phx-header {
    background: rgba(7,8,11,0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--phx-border);
    padding: 0.875rem 0;
    position: sticky;
    top: var(--phx-crisis-h, 38px);
    z-index: 100;
}
.phx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.phx-header__brand img,
.phx-header__brand .phx-logo { height: 72px; width: 72px; display: block; }
.phx-logo--header { height: 72px; width: 72px; }
.phx-logo--footer { height: 110px; width: 110px; display: block; }
@media (max-width: 880px) {
    .phx-header__brand img,
    .phx-header__brand .phx-logo,
    .phx-logo--header { height: 64px; width: 64px; }
}
.phx-nav__menu { display: flex; gap: 0.25rem; list-style: none; padding: 0; margin: 0; }
.phx-nav__menu a {
    display: block;
    padding: 0.625rem 1rem;
    color: var(--phx-text);
    font-weight: 500;
    border-radius: var(--phx-radius-sm);
    transition: background 0.15s, color 0.15s;
}
.phx-nav__menu a:hover,
.phx-nav__menu .current-menu-item a,
.phx-nav__menu .current_page_item a {
    color: var(--phx-primary);
    background: rgba(242,107,31,0.08);
}
.phx-nav-toggle { display: none; padding: 0.5rem; border-radius: var(--phx-radius-sm); }
.phx-nav-toggle:hover { background: rgba(255,255,255,0.05); }
.phx-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--phx-text); margin: 5px 0; transition: transform 0.2s; }

/* Dropdown submenu (e.g. Get Involved) */
.phx-nav__menu li { position: relative; }
.phx-nav__menu .menu-item-has-children > a::after,
.phx-nav__menu .phx-has-children > a::after {
    content: ' ▾';
    font-size: 0.75em;
    opacity: 0.7;
    margin-left: 0.25em;
}
.phx-nav__menu .sub-menu,
.phx-nav__menu .phx-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: var(--phx-bg-darker);
    border: 1px solid var(--phx-border);
    border-radius: var(--phx-radius-sm);
    padding: 0.375rem;
    list-style: none;
    margin: 0.25rem 0 0;
    box-shadow: var(--phx-shadow-md);
    z-index: 50;
}
/* Bridge the gap between the menu item and the dropdown.

   The 0.25rem margin above leaves a strip where neither the parent nor the
   submenu is hovered, so the menu closes while the mouse is still travelling
   towards it. It bites hardest on a diagonal move, which is the normal way
   somebody reaches an item that is not directly below the one they started on.

   An invisible pseudo-element spanning that strip keeps hover unbroken while
   leaving the gap visible, so it still looks the way it was designed to.

   Its height matches the margin EXACTLY, deliberately. Making it taller would
   overlap the bottom of the parent link, whose vertical padding is only 0.625rem,
   and that strip would stop being clickable whenever the menu was open. Local
   Services is a real link, so that would swap this bug for a quieter one. Exactly
   contiguous is all hover needs. */
.phx-nav__menu .sub-menu::before,
.phx-nav__menu .phx-submenu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.25rem; /* must equal the submenu's margin-top above */
}
.phx-nav__menu .sub-menu a,
.phx-nav__menu .phx-submenu a { white-space: nowrap; padding: 0.5rem 0.875rem; }
.phx-nav__menu li:hover > .sub-menu,
.phx-nav__menu li:hover > .phx-submenu,
.phx-nav__menu li.is-open > .sub-menu,
.phx-nav__menu li.is-open > .phx-submenu {
    display: block;
}

@media (max-width: 880px) {
    .phx-nav-toggle { display: block; }
    .phx-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--phx-bg-darker); border-top: 1px solid var(--phx-border); padding: 0.5rem; }
    .phx-nav.is-open { display: block; }
    .phx-nav__menu { flex-direction: column; }
    .phx-nav__menu a { padding: 0.875rem 1rem; border-bottom: 1px solid var(--phx-border); border-radius: 0; }
    .phx-nav__menu li:last-child a { border-bottom: 0; }
    /* Submenus: render as inline accordions on mobile. No hover on a touch screen,
       so the desktop hover bridge is switched off rather than left floating over a
       tappable link. */
    .phx-nav__menu .sub-menu::before,
    .phx-nav__menu .phx-submenu::before { content: none; }
    .phx-nav__menu .sub-menu,
    .phx-nav__menu .phx-submenu {
        position: static;
        display: none;
        background: rgba(0,0,0,0.35);
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;
        box-shadow: none;
    }
    .phx-nav__menu li.is-open > .sub-menu,
    .phx-nav__menu li.is-open > .phx-submenu { display: block; }
    .phx-nav__menu .sub-menu a,
    .phx-nav__menu .phx-submenu a { padding-left: 2rem; font-size: 0.95rem; }
}

/* HERO */
.phx-hero { background: var(--phx-bg-darker); padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; overflow: hidden; }
.phx-hero::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -15%;
    width: 70%;
    height: 150%;
    background: radial-gradient(circle, var(--phx-primary-glow) 0%, transparent 65%);
    pointer-events: none;
}
.phx-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.12) 0%, transparent 60%);
    pointer-events: none;
}
.phx-hero__inner { position: relative; text-align: center; z-index: 1; }
.phx-hero__title { color: var(--phx-text); margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.phx-hero__subtitle { font-size: clamp(1.0625rem, 2vw, 1.375rem); color: var(--phx-text-muted); max-width: 720px; margin: 0 auto 2.25rem; }
.phx-hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* BUTTONS */
.phx-btn {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    font-family: var(--phx-font-display);
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    border-radius: var(--phx-radius-sm);
    transition: all 0.15s;
    border: 2px solid transparent;
    text-align: center;
}
/* Dark text, not white. White on #F26B1F measures 3.06:1 and WCAG AA wants 4.5:1
   for text this size, so every primary button on the site was failing. #0F1116
   measures 6.1:1. The hover lightens rather than darkens for the same reason:
   white on the dark orange was 4.4:1, dark on the light orange is 8:1. */
.phx-btn--primary { background: var(--phx-primary); color: #0F1116; box-shadow: var(--phx-shadow-glow); }
.phx-btn--primary:hover { background: var(--phx-primary-light); color: #0F1116; transform: translateY(-1px); }
.phx-btn--ghost { color: var(--phx-text); border-color: var(--phx-border-light); }
.phx-btn--ghost:hover { background: rgba(255,255,255,0.05); color: var(--phx-primary); border-color: var(--phx-primary); }
.phx-btn--lg { padding: 1.125rem 2.25rem; font-size: 1.25rem; }

/* SECTIONS */
.phx-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.phx-section--alt { background: var(--phx-bg-section); }
.phx-section--dark { background: var(--phx-bg-darker); }
.phx-section__title { text-align: center; }
.phx-section__title--crisis { color: var(--phx-crisis); }
.phx-section__lead { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; color: var(--phx-text-muted); font-size: 1.0625rem; }
.phx-section__centered { text-align: center; }
.phx-section__body { max-width: 720px; margin-left: auto; margin-right: auto; color: var(--phx-text-muted); }

/* CRISIS GRID */
.phx-crisis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.phx-crisis-card {
    background: var(--phx-bg-card);
    padding: 1.5rem;
    border-radius: var(--phx-radius);
    border: 1px solid var(--phx-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s;
}
.phx-crisis-card:hover { border-color: var(--phx-crisis); background: var(--phx-bg-card-hover); transform: translateY(-2px); }
.phx-crisis-card__label { color: var(--phx-text-muted); font-size: 0.875rem; }
.phx-crisis-card__number { color: var(--phx-text); font-family: var(--phx-font-display); font-size: 2rem; letter-spacing: 0.02em; }
.phx-crisis-card--emergency { background: var(--phx-crisis-dark); border-color: var(--phx-crisis); }
.phx-crisis-card--emergency .phx-crisis-card__label,
.phx-crisis-card--emergency .phx-crisis-card__number { color: white; }
.phx-crisis-card--emergency:hover { background: var(--phx-crisis); border-color: white; }

/* CARDS GRID */
.phx-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.phx-card {
    background: var(--phx-bg-card);
    padding: 1.75rem;
    border-radius: var(--phx-radius);
    border: 1px solid var(--phx-border);
    transition: all 0.2s;
}
.phx-card:hover { border-color: var(--phx-primary); transform: translateY(-2px); box-shadow: var(--phx-shadow-md); }
.phx-card__title { color: var(--phx-text); margin-bottom: 0.75rem; }
.phx-card__desc { color: var(--phx-text-muted); margin-bottom: 1rem; font-size: 0.9375rem; }
.phx-card__link { font-weight: 600; }

/* MAIN */
.phx-main { min-height: 50vh; }

/* PAGE */
.phx-page { padding: 3rem 0 4rem; }
.phx-page__hero { background: var(--phx-bg-section); padding: 3rem 0 2.25rem; text-align: center; border-bottom: 1px solid var(--phx-border); }
.phx-page__hero--directory { background: linear-gradient(180deg, var(--phx-bg-darker) 0%, var(--phx-bg-section) 100%); }
.phx-page__title { color: var(--phx-text); margin-bottom: 0.5rem; }
.phx-page__lead { color: var(--phx-text-muted); font-size: 1.125rem; max-width: 720px; margin: 0 auto; }
.phx-page__content { max-width: 720px; margin: 0 auto; color: var(--phx-text-muted); font-size: 1.0625rem; }
.phx-page__content h2, .phx-page__content h3 { color: var(--phx-text); margin-top: 2rem; }

/* DIRECTORY */
.phx-directory { padding: 2.5rem 0 4rem; background: var(--phx-bg-dark); }
.phx-directory__inner { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 880px) { .phx-directory__inner { grid-template-columns: 1fr; } }

.phx-directory__sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: calc(var(--phx-crisis-h, 38px) + var(--phx-header-h, 74px) + 1rem); }
@media (max-width: 880px) { .phx-directory__sidebar { position: static; } }

.phx-filter { background: var(--phx-bg-card); padding: 1.25rem; border-radius: var(--phx-radius); border: 1px solid var(--phx-border); }
.phx-filter__label { display: block; font-family: var(--phx-font-display); font-size: 1.125rem; letter-spacing: 0.04em; margin-bottom: 0.75rem; color: var(--phx-text); }
.phx-filter__input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--phx-border-light); background: var(--phx-bg-darker); color: var(--phx-text); border-radius: var(--phx-radius-sm); }
.phx-filter__input:focus { outline: 2px solid var(--phx-primary); outline-offset: 1px; border-color: var(--phx-primary); }
.phx-filter__check { display: flex; align-items: center; gap: 0.5rem; color: var(--phx-text-muted); padding: 0.375rem 0; cursor: pointer; }
.phx-filter__check input { accent-color: var(--phx-primary); }
.phx-filter__cats { list-style: none; padding: 0; margin: 0; max-height: 380px; overflow-y: auto; }
.phx-filter__cat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.625rem;
    color: var(--phx-text-muted);
    border-radius: var(--phx-radius-sm);
    transition: all 0.15s;
    font-size: 0.9375rem;
}
.phx-filter__cat:hover { background: rgba(255,255,255,0.04); color: var(--phx-text); }
.phx-filter__cat.is-active { background: var(--phx-primary); color: #0F1116; font-weight: 600; }
.phx-filter__cat span { font-size: 0.75rem; opacity: 0.85; background: rgba(0,0,0,0.25); padding: 0.125rem 0.5rem; border-radius: 999px; }

.phx-directory__count { color: var(--phx-text-muted); margin-bottom: 1rem; font-size: 0.9375rem; }
.phx-directory__list { display: grid; gap: 1rem; }
.phx-directory__empty { padding: 3rem 1rem; text-align: center; color: var(--phx-text-faint); background: var(--phx-bg-card); border-radius: var(--phx-radius); border: 1px solid var(--phx-border); }

/* SERVICE CARD */
.phx-service-card {
    background: var(--phx-bg-card);
    border: 1px solid var(--phx-border);
    border-radius: var(--phx-radius);
    padding: 1.5rem;
    transition: all 0.15s;
}
.phx-service-card.is-hidden { display: none; }
.phx-service-card:hover { border-color: var(--phx-primary); }
.phx-service-card__title { margin-bottom: 0.5rem; font-size: 1.375rem; }
.phx-service-card__title a { color: var(--phx-text); }
.phx-service-card__title a:hover { color: var(--phx-primary); }
.phx-service-card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }
.phx-tag {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    background: rgba(255,255,255,0.06);
    color: var(--phx-text-muted);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
a.phx-tag:hover { background: var(--phx-primary); color: #0F1116; }
.phx-tag--247 { background: var(--phx-success); color: white; }
.phx-tag--crisis { background: var(--phx-crisis); color: white; }
.phx-service-card__desc { color: var(--phx-text-muted); font-size: 0.9375rem; margin-bottom: 1rem; }
.phx-service-card__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: 0.875rem; color: var(--phx-text-muted); }
.phx-service-card__meta div { display: flex; gap: 0.5rem; }
.phx-service-card__meta dt { font-weight: 600; color: var(--phx-text-faint); margin: 0; }
.phx-service-card__meta dd { margin: 0; }
.phx-service-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--phx-border); }
.phx-action { min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(242,107,31,0.08);
    color: var(--phx-primary);
    border-radius: var(--phx-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.15s;
    line-height: 1;
}
.phx-action:hover { background: var(--phx-primary); color: #0F1116; }
.phx-action--more { background: transparent; padding-left: 0.375rem; }
.phx-action--more:hover { background: transparent; color: var(--phx-primary-light); }
.phx-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.phx-icon--arrow { margin-left: 0.125rem; }

/* SINGLE SERVICE */
.phx-back { display: inline-block; margin-bottom: 1rem; color: var(--phx-text-muted); font-size: 0.875rem; }
.phx-back:hover { color: var(--phx-primary); }
.phx-service__hero { background: var(--phx-bg-section); padding: 3rem 0 2rem; border-bottom: 1px solid var(--phx-border); }
.phx-service__title { color: var(--phx-text); margin-bottom: 1rem; }
.phx-service__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.phx-service__body { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; padding: 3rem 0 5rem; }
@media (max-width: 880px) {
    .phx-service__body { grid-template-columns: 1fr; }
    /* Phone number above the article on a phone. The sidebar is second in the
       DOM for good reasons on desktop, but on mobile it put the number a
       thousand words down on the Aspire page, which is the one thing a service
       page exists to do. */
    .phx-service__sidebar { order: -1; position: static; }
}
.phx-service__content { color: var(--phx-text-muted); font-size: 1.0625rem; line-height: 1.7; }
.phx-service__sidebar { background: var(--phx-bg-card); padding: 1.75rem; border-radius: var(--phx-radius); border: 1px solid var(--phx-border); align-self: start; position: sticky; top: calc(var(--phx-crisis-h, 38px) + var(--phx-header-h, 74px) + 1rem); }
.phx-service__sidebar h3 { color: var(--phx-text); margin-bottom: 1rem; }
.phx-service__meta-list { margin: 0; }
.phx-service__meta-list > div { padding: 0.75rem 0; border-bottom: 1px solid var(--phx-border); }
.phx-service__meta-list > div:last-child { border-bottom: 0; }
.phx-service__meta-list dt { color: var(--phx-text-faint); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; font-weight: 600; }
.phx-service__meta-list dd { margin: 0; color: var(--phx-text); word-break: break-word; }
.phx-service__meta-list a { word-break: break-word; }

/* SERVICE LOGO (featured image) */
.phx-service__head.has-logo { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.phx-service__headings { flex: 1 1 280px; }
.phx-service__logo { width: 88px; height: 88px; flex-shrink: 0; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.phx-service__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.phx-service-card__header.has-logo { display: grid; grid-template-columns: 56px 1fr; column-gap: 0.875rem; align-items: center; }
.phx-service-card__header.has-logo .phx-service-card__logo { grid-row: span 2; }
.phx-service-card__logo { width: 56px; height: 56px; background: #fff; border-radius: 10px; padding: 5px; }
.phx-service-card__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* FOOTER */
.phx-footer { background: var(--phx-bg-darker); border-top: 1px solid var(--phx-border); margin-top: 3rem; }
.phx-footer__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; padding: 3rem 1.5rem 2rem; max-width: var(--phx-w-content); margin: 0 auto; align-items: start; }
@media (max-width: 960px) { .phx-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
@media (max-width: 540px) { .phx-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; } }
.phx-footer__brand img,
.phx-footer__brand .phx-logo { height: 110px; width: 110px; display: block; }
.phx-tagline { color: var(--phx-primary); font-family: var(--phx-font-display); font-size: 1.25rem; letter-spacing: 0.05em; margin: 0; }
/* Doncaster Recovery Council membership, under the Hub's own badge. */
.phx-footer__member { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.phx-footer__member img { width: 64px; height: 64px; flex: 0 0 64px; display: block; }
.phx-footer__member p { margin: 0; color: var(--phx-text-muted); font-size: 0.875rem; line-height: 1.4; }
.phx-footer__member strong { color: var(--phx-text); }
.phx-footer__menu { list-style: none; padding: 0; margin: 0; }
.phx-footer__menu a { display: block; padding: 0.375rem 0; color: var(--phx-text-muted); }
.phx-footer__menu a:hover { color: var(--phx-primary); }
.phx-footer__crisis p { color: var(--phx-text-muted); font-size: 0.9375rem; margin: 0.375rem 0; }
.phx-footer__crisis a { color: var(--phx-text); font-weight: 600; }
.phx-footer__crisis a:hover { color: var(--phx-primary); }
.phx-footer__bottom { background: var(--phx-bg-darker); border-top: 1px solid var(--phx-border); padding: 1.25rem 0; }
.phx-footer__disclaimer { color: var(--phx-text-faint); font-size: 0.8125rem; max-width: 920px; margin: 0 0 0.5rem; }
.phx-footer__copy { color: var(--phx-text-faint); font-size: 0.8125rem; margin: 0; }

/* =============== FORMS =============== */
.phx-form { max-width: 720px; }
.phx-form__field { margin-bottom: 1.5rem; }
.phx-form__field > label,
.phx-form__label { display: block; font-weight: 600; color: var(--phx-text); margin-bottom: 0.5rem; font-size: 0.9375rem; }
.phx-form__req { color: var(--phx-primary); margin-left: 0.125rem; }
.phx-form__field input[type="text"],
.phx-form__field input[type="email"],
.phx-form__field input[type="tel"],
.phx-form__field input[type="url"],
.phx-form__field select,
.phx-form__field textarea {
    display: block; width: 100%; padding: 0.75rem 1rem;
    border: 1px solid var(--phx-border-light); background: var(--phx-bg-card); color: var(--phx-text);
    border-radius: var(--phx-radius-sm); font-size: 1rem; font-family: inherit;
}
.phx-form__field textarea { resize: vertical; min-height: 140px; }
.phx-form__field input:focus,
.phx-form__field select:focus,
.phx-form__field textarea:focus {
    outline: 2px solid var(--phx-primary); outline-offset: 1px; border-color: var(--phx-primary);
}
.phx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .phx-form__row { grid-template-columns: 1fr; } }
.phx-form__radio,
.phx-form__check {
    display: flex; align-items: flex-start; gap: 0.625rem;
    color: var(--phx-text-muted); cursor: pointer; font-weight: 400;
    margin-bottom: 0.5rem; font-size: 0.9375rem;
}
.phx-form__radio input,
.phx-form__check input { accent-color: var(--phx-primary); margin-top: 0.25rem; flex-shrink: 0; }
.phx-form__hint { color: var(--phx-text-faint); font-size: 0.8125rem; margin: 0.375rem 0 0 1.625rem; }
.phx-form__privacy { color: var(--phx-text-faint); font-size: 0.8125rem; line-height: 1.55; margin: 0 0 1.25rem; }
.phx-form__privacy a { color: var(--phx-primary); }
.phx-form__field--error input,
.phx-form__field--error select,
.phx-form__field--error textarea { border-color: var(--phx-crisis); }
.phx-form__honeypot { position: absolute; left: -9999px; top: -9999px; }

.phx-form-message {
    padding: 1rem 1.25rem; border-radius: var(--phx-radius);
    margin-bottom: 1.5rem; font-size: 0.9375rem;
}
.phx-form-message--success { background: rgba(16,185,129,0.12); border: 1px solid var(--phx-success); color: var(--phx-text); }
.phx-form-message--error { background: rgba(220,38,38,0.12); border: 1px solid var(--phx-crisis); color: var(--phx-text); }
.phx-form-message--warn { background: rgba(242,107,31,0.12); border: 1px solid var(--phx-primary); color: var(--phx-text); }

/* =============== CONTACT PAGE =============== */
.phx-contact { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; padding: 1rem 0; }
@media (max-width: 880px) { .phx-contact { grid-template-columns: 1fr; } }
.phx-contact__sidebar { background: var(--phx-bg-card); padding: 1.5rem; border-radius: var(--phx-radius); border: 1px solid var(--phx-border); }
.phx-contact__sidebar h3 { color: var(--phx-text); margin-bottom: 1rem; }
.phx-contact__sidebar p { color: var(--phx-text-muted); font-size: 0.9375rem; }
.phx-contact__crisis-list { list-style: none; padding: 0; margin: 0; }
.phx-contact__crisis-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--phx-border); color: var(--phx-text-muted); font-size: 0.9375rem; }
.phx-contact__crisis-list li:last-child { border-bottom: 0; }
.phx-contact__crisis-list a { color: var(--phx-text); font-weight: 600; }

/* =============== COMMUNITY PAGE =============== */
/* Donation appeal (poster graphic + contact CTA + inline letter) */
.phx-appeal__poster { margin: 0 auto 2rem; max-width: 660px; text-align: center; }
.phx-appeal__poster a { display: block; }
.phx-appeal__poster img { width: 100%; height: auto; border-radius: var(--phx-radius); border: 1px solid var(--phx-border); box-shadow: var(--phx-shadow-md); }
.phx-appeal__poster-cap { margin: 0.625rem 0 0; color: var(--phx-text-faint); font-size: 0.8125rem; }
.phx-appeal__cta { text-align: center; max-width: 760px; margin: 0 auto; }
.phx-appeal__cta-text { color: var(--phx-text-muted); font-size: 1.0625rem; margin: 0 0 1.5rem; }
.phx-appeal__cta-text strong { color: var(--phx-text); }
.phx-appeal__business { margin: 2.5rem auto 0; padding-top: 2.5rem; border-top: 1px solid var(--phx-border); text-align: center; max-width: 720px; }
.phx-appeal__business-title { font-size: 1.375rem; margin: 0 0 0.75rem; color: var(--phx-text); }
.phx-appeal__business-text { color: var(--phx-text-muted); font-size: 1rem; margin: 0 0 1.5rem; }
/* Inline letter (native details/summary, no JS) */
.phx-letter { max-width: 720px; margin: 0 auto; text-align: left; background: var(--phx-bg-card); border: 1px solid var(--phx-border); border-radius: var(--phx-radius); }
.phx-letter__toggle { display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; padding: 1rem 1.25rem; font-family: var(--phx-font-display); font-size: 1.125rem; letter-spacing: 0.04em; color: var(--phx-primary); list-style: none; }
.phx-letter__toggle::-webkit-details-marker { display: none; }
.phx-letter__toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; margin-left: 0.25rem; }
.phx-letter[open] .phx-letter__toggle::after { transform: rotate(-135deg); }
.phx-letter__toggle:hover { color: var(--phx-primary-light); }
.phx-letter__body { padding: 0 1.5rem 1.75rem; color: var(--phx-text-muted); border-top: 1px solid var(--phx-border); }
.phx-letter__body p { margin: 1rem 0; line-height: 1.65; }
.phx-letter__heading { font-family: var(--phx-font-display); font-size: 1.5rem; letter-spacing: 0.03em; color: var(--phx-text); margin: 1.5rem 0 1rem; }
.phx-letter__list { margin: 1rem 0; padding-left: 1.25rem; }
.phx-letter__list li { margin: 0.375rem 0; line-height: 1.5; }
.phx-letter__signoff { color: var(--phx-text); }
.phx-letter__contact { font-size: 0.9375rem; color: var(--phx-text-faint); border-top: 1px solid var(--phx-border); padding-top: 1rem; }
.phx-letter__contact a { color: var(--phx-primary); }
.phx-letter__actions { margin-top: 1.5rem; }
.phx-letter__actions .phx-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; }

.phx-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.phx-event-card { background: var(--phx-bg-card); padding: 1.5rem; border-radius: var(--phx-radius); border: 1px solid var(--phx-border); transition: border-color 0.15s; }
.phx-event-card:hover { border-color: var(--phx-primary); }
.phx-event-card__date { font-family: var(--phx-font-display); font-size: 1.125rem; color: var(--phx-primary); letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.phx-event-card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.phx-event-card__title a { color: var(--phx-text); }
.phx-event-card__title a:hover { color: var(--phx-primary); }
.phx-event-card__loc { color: var(--phx-text-muted); font-size: 0.875rem; margin-bottom: 0.5rem; }
.phx-event-card__excerpt { color: var(--phx-text-muted); font-size: 0.9375rem; margin: 0; }

.phx-news-list { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; }
.phx-news-item { padding: 1.25rem 0; border-bottom: 1px solid var(--phx-border); }
.phx-news-item:last-child { border-bottom: 0; }
.phx-news-item__meta { display: flex; gap: 0.75rem; font-size: 0.8125rem; color: var(--phx-text-faint); margin-bottom: 0.375rem; flex-wrap: wrap; align-items: center; }
.phx-news-item__source { background: rgba(242,107,31,0.12); color: var(--phx-primary); padding: 0.125rem 0.625rem; border-radius: 999px; font-weight: 600; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; }
.phx-news-item__title { font-family: var(--phx-font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.375rem; }
.phx-news-item__title a { color: var(--phx-text); }
.phx-news-item__title a:hover { color: var(--phx-primary); }
.phx-news-item__desc { color: var(--phx-text-muted); font-size: 0.9375rem; margin: 0; }

/* =============== SOCIAL =============== */
.phx-footer__social { margin: 0; }
.phx-social {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(242,107,31,0.08);
    color: var(--phx-primary);
    border-radius: var(--phx-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.15s;
}
.phx-social:hover { background: var(--phx-primary); color: #0F1116; }
.phx-about-social { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--phx-border); }
.phx-about-social .phx-social { font-size: 1rem; padding: 0.625rem 1.125rem; }

/* =============== FOUNDER PORTRAIT (About page) =============== */
.phx-founder {
    float: right;
    margin: 0 0 1.5rem 2rem;
    max-width: 280px;
    text-align: center;
}
.phx-founder img {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%; /* anchor face higher in the circle so chin sits comfortably */
    border: 4px solid var(--phx-primary);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--phx-border-light);
    display: block;
    margin: 0 auto 0.75rem;
}
.phx-founder figcaption {
    color: var(--phx-text-muted);
    font-size: 0.875rem;
    font-style: italic;
}
@media (max-width: 720px) {
    .phx-founder { float: none; margin: 0 auto 1.5rem; }
    .phx-founder img { width: 220px; height: 220px; }
}

/* =============== FUNDRAISER BANNER (site-wide) =============== */
.phx-fund-bar {
    background: linear-gradient(90deg, var(--phx-primary-dark) 0%, var(--phx-primary) 60%, var(--phx-primary-light) 100%);
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.phx-fund-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    padding: 0.625rem 1.5rem;
    justify-content: center;
    text-align: center;
}
.phx-fund-bar__copy { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.phx-fund-bar__tag {
    font-family: var(--phx-font-display);
    letter-spacing: 0.08em;
    background: rgba(0,0,0,0.25);
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.875rem;
    text-transform: uppercase;
}
.phx-fund-bar__title { color: #fff; font-weight: 600; text-decoration: none; }
.phx-fund-bar__title:hover { color: #fff; text-decoration: underline; }
.phx-fund-bar__for { font-weight: 400; opacity: 0.92; }
.phx-fund-bar__total { background: rgba(0,0,0,0.22); padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.phx-fund-bar__actions { display: flex; align-items: center; gap: 0.875rem; }
.phx-fund-bar__btn {
    background: #fff; color: var(--phx-primary-dark); font-weight: 700;
    padding: 0.4rem 0.95rem; border-radius: var(--phx-radius-sm);
    text-decoration: none;
}
.phx-fund-bar__btn:hover { background: var(--phx-bg-darker); color: #fff; }
.phx-fund-bar__more { color: #fff; font-size: 0.9rem; text-decoration: underline; }
.phx-fund-bar__more:hover { color: #fff; opacity: 0.85; }
@media (max-width: 720px) {
    .phx-fund-bar__inner {
        padding: 0.625rem 1rem;
        gap: 0.5rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .phx-fund-bar__copy { justify-content: center; }
    .phx-fund-bar__total { display: none; }
    .phx-fund-bar__more { display: none; }
}

/* =============== EVENT BANNER (site-wide, sits below fundraiser bar) =============== */
.phx-event-bar {
    background: linear-gradient(90deg, #0E7490 0%, #0891B2 60%, #06B6D4 100%);
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.phx-event-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 1.5rem;
    justify-content: center;
    text-align: center;
}
.phx-event-bar__copy { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.phx-event-bar__tag {
    font-family: var(--phx-font-display); letter-spacing: 0.08em;
    background: rgba(0,0,0,0.25); padding: 0.125rem 0.625rem; border-radius: 999px;
    font-size: 0.875rem; text-transform: uppercase;
}
.phx-event-bar__title { color: #fff; font-weight: 600; text-decoration: none; }
.phx-event-bar__title:hover { color: #fff; text-decoration: underline; }
.phx-event-bar__when, .phx-event-bar__where {
    background: rgba(0,0,0,0.18); padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.875rem;
}
.phx-event-bar__btn {
    background: #fff; color: #0E7490; font-weight: 700;
    padding: 0.35rem 0.95rem; border-radius: var(--phx-radius-sm); text-decoration: none;
}
.phx-event-bar__btn:hover { background: var(--phx-bg-darker); color: #fff; }
@media (max-width: 720px) {
    .phx-event-bar__inner {
        padding: 0.5rem 1rem; gap: 0.5rem;
        flex-direction: column; align-items: center; text-align: center; justify-content: center;
    }
    .phx-event-bar__copy { justify-content: center; }
    .phx-event-bar__where { display: none; }
}

/* =============== HOMEPAGE FUNDRAISER FEATURE CARD =============== */
.phx-fund-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    background: var(--phx-bg-card);
    border: 1px solid var(--phx-border-light);
    border-radius: var(--phx-radius);
    overflow: hidden;
    color: var(--phx-text);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: var(--phx-shadow-md);
}
.phx-fund-feature:hover {
    transform: translateY(-2px);
    border-color: var(--phx-primary);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--phx-shadow-glow);
    color: var(--phx-text);
}
.phx-fund-feature__media {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
    min-height: 380px;
}
.phx-fund-feature__body { padding: 2rem 2.25rem; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.phx-fund-feature__tag {
    align-self: flex-start;
    font-family: var(--phx-font-display);
    letter-spacing: 0.1em;
    color: var(--phx-primary-light);
    background: rgba(242,107,31,0.12);
    border: 1px solid rgba(242,107,31,0.4);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    text-transform: uppercase;
}
.phx-fund-feature__title { margin: 0; }
.phx-fund-feature__charity { color: var(--phx-text-muted); margin: 0; }
.phx-fund-feature__charity strong { color: var(--phx-text); }
.phx-fund-feature__bar {
    height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden;
    margin: 0.25rem 0;
}
.phx-fund-feature__bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--phx-primary), var(--phx-primary-light));
    border-radius: 999px;
}
.phx-fund-feature__numbers { color: var(--phx-text-muted); margin: 0; font-variant-numeric: tabular-nums; }
.phx-fund-feature__numbers strong { color: var(--phx-text); }
.phx-fund-feature__cta { margin-top: 0.5rem; color: var(--phx-primary-light); font-weight: 600; }
@media (max-width: 880px) {
    .phx-fund-feature { grid-template-columns: 1fr; }
    .phx-fund-feature__media { min-height: 280px; }
    .phx-fund-feature__body { padding: 1.5rem; }
}

/* =============== HOMEPAGE EVENT FEATURE CARD (teal accent) =============== */
.phx-event-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    background: var(--phx-bg-card);
    border: 1px solid var(--phx-border-light);
    border-radius: var(--phx-radius);
    overflow: hidden;
    color: var(--phx-text);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: var(--phx-shadow-md);
}
.phx-event-feature:hover {
    transform: translateY(-2px);
    border-color: #0891B2;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 28px rgba(8,145,178,0.32);
    color: var(--phx-text);
}
.phx-event-feature__media {
    background-size: cover;
    background-position: center;
    background-color: #0E7490;
    min-height: 320px;
}
.phx-event-feature__media--no-img {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0E7490, #06B6D4);
}
.phx-event-feature__date-block {
    display: flex; flex-direction: column; align-items: center;
    color: #fff; line-height: 1;
}
.phx-event-feature__date-day { font-family: var(--phx-font-display); font-size: 5rem; }
.phx-event-feature__date-mon { font-family: var(--phx-font-display); font-size: 1.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.25rem; }
.phx-event-feature__body { padding: 2rem 2.25rem; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.phx-event-feature__tag {
    align-self: flex-start;
    font-family: var(--phx-font-display); letter-spacing: 0.1em;
    color: #67E8F9; background: rgba(8,145,178,0.14); border: 1px solid rgba(8,145,178,0.5);
    padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.875rem; text-transform: uppercase;
}
.phx-event-feature__title { margin: 0; }
.phx-event-feature__when { color: var(--phx-text); margin: 0; }
.phx-event-feature__when strong { color: var(--phx-text); }
.phx-event-feature__loc { color: var(--phx-text-muted); font-size: 0.95rem; }
.phx-event-feature__excerpt { color: var(--phx-text-muted); margin: 0; }
.phx-event-feature__cta { margin-top: 0.5rem; color: #67E8F9; font-weight: 600; }
@media (max-width: 880px) {
    .phx-event-feature { grid-template-columns: 1fr; }
    .phx-event-feature__media { min-height: 220px; }
    .phx-event-feature__body { padding: 1.5rem; }
    .phx-event-feature__date-day { font-size: 3.5rem; }
    .phx-event-feature__date-mon { font-size: 1.25rem; }
}

/* =============== /fundraiser/ PAGE =============== */
.phx-fund {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem;
    align-items: start;
}
.phx-fund__hero {
    position: sticky; top: 1.5rem;
}
.phx-fund__hero-img {
    width: 100%;
    border-radius: var(--phx-radius);
    border: 1px solid var(--phx-border-light);
    box-shadow: var(--phx-shadow-md);
}
.phx-fund__body { display: flex; flex-direction: column; gap: 1.5rem; }
.phx-fund__title { margin: 0; }
.phx-fund__charity { color: var(--phx-text-muted); margin: 0.25rem 0 0; font-size: 1.1rem; }
.phx-fund__charity strong { color: var(--phx-primary-light); }
.phx-fund__progress { background: var(--phx-bg-card); border: 1px solid var(--phx-border); padding: 1.25rem 1.5rem; border-radius: var(--phx-radius); }
.phx-fund__bar { height: 14px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin-bottom: 0.875rem; }
.phx-fund__bar-fill { height: 100%; background: linear-gradient(90deg, var(--phx-primary), var(--phx-primary-light)); border-radius: 999px; transition: width 0.6s ease; }
.phx-fund__numbers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.phx-fund__raised { font-family: var(--phx-font-display); font-size: 2rem; color: var(--phx-text); letter-spacing: 0.02em; }
.phx-fund__of { color: var(--phx-text-muted); }
.phx-fund__target { color: var(--phx-text); font-weight: 600; }
.phx-fund__pct { margin-left: auto; color: var(--phx-primary-light); font-weight: 700; font-size: 1.125rem; }
.phx-fund__giftaid { color: var(--phx-primary-light); font-size: 0.95rem; font-weight: 600; }
.phx-fund__deadline { margin: 0.625rem 0 0; color: var(--phx-text-muted); font-size: 0.9rem; }
.phx-fund__cta .phx-btn { width: 100%; text-align: center; }
.phx-fund__story p { color: var(--phx-text-muted); line-height: 1.7; }
.phx-fund__story p:first-child { color: var(--phx-text); font-size: 1.0625rem; }

.phx-fund__about {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--phx-border);
}
.phx-fund__about-heading {
    font-family: var(--phx-font-display);
    letter-spacing: 0.04em;
    font-size: 1.25rem;
    color: var(--phx-primary-light);
    margin: 0 0 0.75rem;
}
.phx-fund__about p { color: var(--phx-text-muted); line-height: 1.65; }

/* =============== THREE PEAKS JOURNEY GRID (fundraiser page) =============== */
.phx-peaks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.phx-peak {
    display: flex;
    flex-direction: column;
    background: var(--phx-bg-card);
    border: 1px solid var(--phx-border-light);
    border-radius: var(--phx-radius);
    overflow: hidden;
    color: var(--phx-text);
    text-decoration: none;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.phx-peak:hover {
    transform: translateY(-3px);
    border-color: var(--phx-primary);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4), var(--phx-shadow-glow);
    color: var(--phx-text);
}
.phx-peak--done { opacity: 0.85; }
.phx-peak--done .phx-peak__media img { filter: grayscale(0.4); }
.phx-peak__media { background: #000; aspect-ratio: 2 / 3; overflow: hidden; }
.phx-peak__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phx-peak__media--placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--phx-primary-dark), var(--phx-primary));
    color: #fff;
    aspect-ratio: 2 / 3;
    padding: 1rem;
    text-align: center;
}
.phx-peak__placeholder-name { font-family: var(--phx-font-display); font-size: 2.5rem; line-height: 1; }
.phx-peak__placeholder-tick { font-size: 5rem; line-height: 1; margin-top: 1rem; }
.phx-peak__body { padding: 1rem 1.125rem; flex: 1; }
.phx-peak__status {
    display: inline-block;
    font-family: var(--phx-font-display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.875rem;
    padding: 0.125rem 0.625rem; border-radius: 999px;
    background: rgba(242,107,31,0.14); color: var(--phx-primary-light);
    margin-bottom: 0.5rem;
}
.phx-peak--done .phx-peak__status {
    background: rgba(16,185,129,0.18); color: var(--phx-success);
}
.phx-peak__name { margin: 0 0 0.25rem; font-size: 1.5rem; }
.phx-peak__meta { margin: 0; color: var(--phx-text-muted); font-size: 0.95rem; }
@media (max-width: 880px) {
    .phx-peaks-grid { grid-template-columns: 1fr; gap: 1rem; }
    .phx-peak { flex-direction: row; }
    .phx-peak__media, .phx-peak__media--placeholder { width: 40%; aspect-ratio: 2 / 3; flex-shrink: 0; }
    .phx-peak__body { flex: 1; padding: 1rem 1.25rem; align-self: center; }
    .phx-peak__placeholder-name { font-size: 1.5rem; }
    .phx-peak__placeholder-tick { font-size: 3rem; }
}

/* =============== EVENT SINGLE + ARCHIVE =============== */
.phx-page__eyebrow { margin: 0 0 0.5rem; }
.phx-page__eyebrow a { color: var(--phx-text-muted); font-size: 0.95rem; }
.phx-page__eyebrow a:hover { color: var(--phx-primary); }

.phx-event-single { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; }
.phx-event-single__hero img { width: 100%; border-radius: var(--phx-radius); border: 1px solid var(--phx-border-light); display: block; }
.phx-event-single__meta {
    background: var(--phx-bg-card); border: 1px solid var(--phx-border); border-radius: var(--phx-radius);
    padding: 1.25rem 1.5rem; margin-top: 1rem;
}
.phx-event-single__meta p { margin: 0 0 0.5rem; color: var(--phx-text-muted); }
.phx-event-single__meta p:last-child { margin-bottom: 0; }
.phx-event-single__meta strong { color: var(--phx-text); }
.phx-event-single__body { color: var(--phx-text-muted); line-height: 1.7; }
.phx-event-single__body p { color: var(--phx-text-muted); }
.phx-event-single__past {
    display: inline-block; margin-top: 0.5rem;
    background: rgba(255,255,255,0.08); padding: 0.4rem 0.875rem; border-radius: 999px; color: var(--phx-text-muted); font-size: 0.95rem;
}
@media (max-width: 880px) {
    .phx-event-single { grid-template-columns: 1fr; gap: 1rem; }
}

.phx-event-card__more { display: inline-block; margin-top: 0.5rem; color: var(--phx-primary); font-weight: 600; font-size: 0.95rem; }
.phx-event-card--past { opacity: 0.7; }
.phx-event-card--past:hover { opacity: 1; }

/* =============== REFERRAL FORM (Reflections + future) =============== */
.phx-form--referral { display: flex; flex-direction: column; gap: 1.5rem; max-width: 760px; }
.phx-form--referral .phx-form__group {
    background: var(--phx-bg-card);
    border: 1px solid var(--phx-border);
    border-radius: var(--phx-radius);
    padding: 1.25rem 1.5rem;
    margin: 0;
}
.phx-form--referral legend {
    font-family: var(--phx-font-display);
    letter-spacing: 0.04em;
    color: var(--phx-primary-light);
    font-size: 1.25rem;
    padding: 0 0.5rem;
}
.phx-form--referral .phx-form__row { margin: 1rem 0 0; }
.phx-form--referral .phx-form__row:first-of-type { margin-top: 0.5rem; }
.phx-form--referral label { display: block; margin-bottom: 0.375rem; font-weight: 600; color: var(--phx-text); }
.phx-form--referral label small { font-weight: 400; color: var(--phx-text-muted); }
.phx-form--referral input[type="text"],
.phx-form--referral input[type="email"],
.phx-form--referral input[type="tel"],
.phx-form--referral input[type="number"],
.phx-form--referral select,
.phx-form--referral textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--phx-bg-darker);
    border: 1px solid var(--phx-border-light);
    border-radius: var(--phx-radius-sm);
    color: var(--phx-text);
    font: inherit;
}
.phx-form--referral textarea { min-height: 4rem; resize: vertical; }
.phx-form--referral input:focus,
.phx-form--referral select:focus,
.phx-form--referral textarea:focus {
    outline: 0; border-color: var(--phx-primary);
    box-shadow: 0 0 0 3px rgba(242,107,31,0.18);
}
.phx-form--referral .phx-form__hint { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--phx-text-muted); font-weight: 400; }
.phx-form--referral .phx-form__hint--small { font-size: 0.8rem; }
.phx-form--referral .phx-form__checks {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.25rem;
}
.phx-form--referral .phx-form__check {
    display: inline-flex; align-items: flex-start; gap: 0.5rem;
    background: var(--phx-bg-darker);
    border: 1px solid var(--phx-border-light);
    padding: 0.5rem 0.875rem;
    border-radius: var(--phx-radius-sm);
    cursor: pointer;
    font-weight: 400; color: var(--phx-text-muted);
    margin-bottom: 0;
}
.phx-form--referral .phx-form__check:has(input:checked) {
    border-color: var(--phx-primary);
    background: rgba(242,107,31,0.08);
    color: var(--phx-text);
}
.phx-form--referral .phx-form__check input[type="checkbox"] { margin-top: 0.2rem; }
.phx-form--referral .phx-form__field--error input,
.phx-form--referral .phx-form__field--error select,
.phx-form--referral .phx-form__field--error textarea,
.phx-form--referral .phx-form__field--error .phx-form__check {
    border-color: var(--phx-crisis);
    box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
}
.phx-form--referral .phx-form__honeypot {
    position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden;
}
.phx-form--referral .phx-form__actions { margin-top: 0.5rem; }
.phx-form--referral .phx-form__actions .phx-btn { display: inline-block; }

/* Callouts inside the form */
.phx-callout--success {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.5);
}
.phx-callout--success .phx-callout__eyebrow,
.phx-callout--success h3 { color: var(--phx-success); margin-top: 0; }
.phx-callout--error {
    background: rgba(220,38,38,0.12);
    border-color: rgba(220,38,38,0.5);
}
.phx-callout--error h3 { color: var(--phx-crisis); margin-top: 0; }

/* Reflections key-facts list in the page body */
.phx-page__content ul.phx-keyfacts {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.875rem;
    margin: 1.5rem 0;
}
.phx-page__content ul.phx-keyfacts li {
    background: var(--phx-bg-card); border: 1px solid var(--phx-border); border-radius: var(--phx-radius);
    padding: 0.875rem 1rem; color: var(--phx-text-muted);
}
.phx-page__content ul.phx-keyfacts strong { color: var(--phx-text); display: block; margin-bottom: 0.25rem; }

@media (max-width: 880px) {
    .phx-fund { grid-template-columns: 1fr; gap: 1.5rem; }
    .phx-fund__hero { position: static; }
}

/* =============== CALLOUT BLOCK (Donate page etc.) =============== */
.phx-callout {
    background: linear-gradient(135deg, rgba(242,107,31,0.12), rgba(242,107,31,0.04));
    border: 1px solid rgba(242,107,31,0.45);
    border-radius: var(--phx-radius);
    padding: 1.75rem 1.875rem;
    margin: 0 0 2.5rem;
}
.phx-callout__eyebrow {
    margin: 0 0 0.25rem;
    color: var(--phx-primary-light);
    font-family: var(--phx-font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
}
.phx-callout__title { margin: 0 0 0.5rem; }
.phx-callout p { margin: 0 0 0.875rem; }
.phx-callout p:last-child { margin-bottom: 0; }

/* =============== FUNDRAISER: LATEST UPDATE + SHARE =============== */
/* Reuses the framed-poster pattern (.phx-appeal__poster) for the graphic. */
.phx-update__poster { max-width: 640px; }
.phx-update__post { max-width: 680px; margin: 2rem auto 0; text-align: left; }
.phx-update__post p { color: var(--phx-text-muted); line-height: 1.75; margin: 1.1rem 0; }
.phx-update__post .phx-update__lead-line,
.phx-update__post .phx-update__signoff {
    font-family: var(--phx-font-display);
    letter-spacing: 0.03em;
    color: var(--phx-text);
    font-size: 1.6rem;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}
.phx-update__post .phx-update__signoff { margin: 1.75rem 0 0.25rem; color: var(--phx-primary-light); }
.phx-update__post .phx-update__quote,
.phx-update__post blockquote {
    font-family: var(--phx-font-display);
    letter-spacing: 0.03em;
    color: var(--phx-text);
    font-size: 2rem;
    line-height: 1.1;
    text-align: center;
    margin: 2rem 0;
    padding: 0.5rem 0;
    border: 0;
}
.phx-update__post .phx-update__byline { color: var(--phx-text-faint); font-size: 0.9375rem; margin: 0.25rem 0 0; }
.phx-update__cta { margin-top: 2rem; text-align: center; }
.phx-update__cta-text { color: var(--phx-text-muted); font-size: 1.0625rem; max-width: 560px; margin: 0 auto 1.5rem; }
.phx-update__cta .phx-btn { display: inline-block; }

/* Share buttons */
.phx-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 auto 0.5rem; }
.phx-share__btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.25rem; border-radius: var(--phx-radius-sm);
    font-family: var(--phx-font-display); font-size: 1.0625rem; letter-spacing: 0.04em;
    border: 2px solid var(--phx-border-light); color: var(--phx-text);
    background: var(--phx-bg-card); cursor: pointer; transition: all 0.15s;
}
.phx-share__btn:hover { transform: translateY(-1px); border-color: var(--phx-primary); color: var(--phx-primary); }
.phx-share__btn--fb:hover { border-color: #1877F2; color: #1877F2; }
.phx-share__btn--wa:hover { border-color: #25D366; color: #25D366; }
.phx-share__btn.is-copied { border-color: var(--phx-success); color: var(--phx-success); }
.phx-share__btn .phx-icon { flex-shrink: 0; }

/* Focus-visible ring (previously only defined on form inputs) */
/* WordPress core emits .screen-reader-text spans because the theme declares
   html5 support, and nothing in this stylesheet was hiding them, so that text
   was rendering visibly. Standard hiding rule, plus a skip link that reveals
   itself on focus. <main id="content"> already existed and was unused. */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}
.phx-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--phx-bg-card);
    color: var(--phx-text);
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--phx-border-light);
    border-radius: var(--phx-radius-sm);
}
.phx-main:focus { outline: none; }
.phx-skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
}

.phx-btn:focus-visible,
.phx-share__btn:focus-visible,
.phx-skip-link:focus-visible,
.phx-appeal__poster a:focus-visible,
.phx-peak:focus-visible {
    outline: 2px solid var(--phx-primary-light);
    outline-offset: 2px;
}

@media (max-width: 880px) {
    .phx-update__post .phx-update__quote,
    .phx-update__post blockquote { font-size: 1.6rem; }
    .phx-update__post .phx-update__lead-line,
    .phx-update__post .phx-update__signoff { font-size: 1.4rem; }
}

/* =============== IMAGE LIGHTBOX (click .phx-zoom to view full image inline) =============== */
.phx-zoom { cursor: zoom-in; display: block; }
.phx-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 4vw;
    background: rgba(7, 8, 11, 0.92);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.phx-lightbox.is-open { opacity: 1; }
.phx-lightbox__img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: var(--phx-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    cursor: default;
}
.phx-lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--phx-border-light);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.phx-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.phx-lightbox__close:focus-visible { outline: 2px solid var(--phx-primary-light); outline-offset: 2px; }

/* FRESH START COMMUNITY HUB (page-fresh-start-hub.php) */
.phx-hub { max-width: 860px; }
.phx-hub__photo { max-width: 100%; }

.phx-hub__appeal {
    background: var(--phx-bg-card);
    border: 1px solid var(--phx-primary);
    border-radius: var(--phx-radius);
    padding: 1.5rem;
    margin: 0 0 2.5rem;
    box-shadow: var(--phx-shadow-glow);
}
.phx-hub__appeal--closed { border-color: var(--phx-border-light); box-shadow: none; }
.phx-hub__appeal-tag {
    display: inline-block;
    font-family: var(--phx-font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.875rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: rgba(242, 107, 31, 0.14);
    color: var(--phx-primary-light);
    margin-bottom: 1rem;
}
.phx-hub__appeal--closed .phx-hub__appeal-tag { background: rgba(255, 255, 255, 0.08); color: var(--phx-text-faint); }
.phx-hub__appeal .phx-fund__progress { background: transparent; border: 0; padding: 0; }
.phx-hub__appeal .phx-fund__cta { margin-top: 1.25rem; }
.phx-hub__appeal-note { margin: 1.25rem 0 0; color: var(--phx-text-faint); font-size: 0.875rem; line-height: 1.6; }

.phx-hub__intro p { color: var(--phx-text-muted); line-height: 1.7; margin: 0 0 1.125rem; }
.phx-hub__intro p:last-child { margin-bottom: 0; }
.phx-hub__intro strong { color: var(--phx-text); }
.phx-hub__intro--wide { max-width: 860px; margin: 0 auto; }

.phx-hub__subhead {
    font-size: 1.0625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--phx-text);
    margin: 2rem 0 0.875rem;
}

.phx-hub__list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
}
.phx-hub__list li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--phx-text-muted);
    line-height: 1.5;
}
.phx-hub__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.5rem;
    height: 0.85rem;
    border-right: 2px solid var(--phx-primary);
    border-bottom: 2px solid var(--phx-primary);
    transform: rotate(45deg);
}
.phx-hub__list--tight { margin-top: 0; }

.phx-hub__aside {
    margin: 2rem 0 0;
    color: var(--phx-text-muted);
    line-height: 1.7;
    max-width: 820px;
}

.phx-hub__partners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.phx-hub__partner {
    background: var(--phx-bg-card);
    border: 1px solid var(--phx-border);
    border-radius: var(--phx-radius);
    padding: 1.5rem;
}
.phx-hub__partner-name { margin: 0 0 0.75rem; font-size: 1.5rem; color: var(--phx-primary-light); }
.phx-hub__partner p { color: var(--phx-text-muted); line-height: 1.65; margin: 0 0 0.875rem; }
.phx-hub__partner p:last-child { margin-bottom: 0; }
.phx-hub__partner-link { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; }

.phx-hub__budget { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.phx-hub__budget-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--phx-border);
}
.phx-hub__budget-row:last-child { border-bottom: 0; }
.phx-hub__budget-amount {
    font-family: var(--phx-font-display);
    font-size: 1.5rem;
    color: var(--phx-primary-light);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.phx-hub__budget-body strong { display: block; color: var(--phx-text); font-weight: 600; }
.phx-hub__budget-detail { display: block; color: var(--phx-text-faint); font-size: 0.9375rem; line-height: 1.5; margin-top: 0.125rem; }

.phx-hub__stretch { margin-top: 2.5rem; }
.phx-hub__stretch .phx-callout__title { font-size: 2.5rem; color: var(--phx-primary-light); }

.phx-hub__ways {
    list-style: none;
    margin: 1.5rem auto 0;
    padding: 0;
    max-width: 720px;
    text-align: left;
    display: grid;
    gap: 0.875rem;
}
.phx-hub__ways li {
    background: var(--phx-bg-card);
    border: 1px solid var(--phx-border);
    border-radius: var(--phx-radius);
    padding: 0.875rem 1.125rem;
    color: var(--phx-text-muted);
    line-height: 1.55;
}
.phx-hub__ways strong { color: var(--phx-text); }

@media (max-width: 880px) {
    .phx-hub__list { grid-template-columns: 1fr; }
    .phx-hub__partners { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .phx-hub__appeal { padding: 1.125rem; }
    .phx-hub__budget-row { grid-template-columns: 4.5rem 1fr; gap: 0.75rem; }
    .phx-hub__budget-amount { font-size: 1.25rem; }
}

/* Directory sidebar: links to the category guides, above the instant filters.
   Deliberately styled as links rather than as more filter buttons, because
   "read the guide" and "filter this list" are different actions. */
.phx-filter__guides { list-style: none; margin: 0 0 .5rem; padding: 0; }
.phx-filter__guides li { margin: 0 0 .35rem; }
.phx-filter__guides a {
    display: block;
    padding: .4rem .6rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
}
.phx-filter__guides a:hover,
.phx-filter__guides a:focus-visible { background: rgba(255, 255, 255, 0.06); text-decoration: underline; }
.phx-filter__hint { margin: 0; font-size: .8rem; opacity: .75; line-height: 1.4; }
/* A category tag that links somewhere should look clickable without becoming a
   second kind of button. */
a.phx-tag { text-decoration: none; }
a.phx-tag:hover, a.phx-tag:focus-visible { text-decoration: underline; }

/* =============== GIVE DIRECTLY TO PHOENIX (Donate page) =============== */
/* Deliberately quiet: bordered and typographic, no big primary button. While
   the Fresh Start Crowdfunder is live on the same page with a progress bar and
   a deadline, giving this block the same visual shout would read as Phoenix
   competing with its own partner appeal. It still converts, because anyone
   reading a donate page this far down has already decided. */
.phx-give {
    border: 1px solid var(--phx-border-light);
    border-left: 3px solid var(--phx-primary);
    border-radius: var(--phx-radius);
    background: var(--phx-bg-card);
    padding: 2rem 2rem 1.75rem;
    margin: 0 0 2.5rem;
}
.phx-give p { margin: 0 0 1rem; }
.phx-give__eyebrow {
    margin: 0 0 0.25rem;
    color: var(--phx-primary-light);
    font-family: var(--phx-font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
}
.phx-give__title { margin: 0 0 1rem; }

/* The affordability guard. Set apart so it reads as a stop, not as small print,
   because the people it is written for are the ones most likely to skim past. */
.phx-give__whofor {
    border-left: 2px solid var(--phx-border-light);
    padding-left: 1rem;
    color: var(--phx-text-muted);
}
.phx-give__whofor strong { color: var(--phx-text); }

.phx-give__ask { color: var(--phx-text); }

.phx-give__details {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--phx-bg-darker);
    border-radius: var(--phx-radius-sm);
    border: 1px solid var(--phx-border);
}
.phx-give__row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
}
.phx-give__row + .phx-give__row { border-top: 1px solid var(--phx-border); }
.phx-give__label {
    flex: 0 0 9rem;
    color: var(--phx-text-faint);
    font-size: 0.9375rem;
}
.phx-give__value {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* user-select:all means one click or tap selects the whole number. That is the
   bit that matters on a phone, and it works with JavaScript off, so the copy
   button below is a bonus rather than the mechanism. */
.phx-give__number {
    -webkit-user-select: all;
    user-select: all;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--phx-text);
    font-variant-numeric: tabular-nums;
}
.phx-give__copy {
    background: none;
    border: 1px solid var(--phx-border-light);
    border-radius: var(--phx-radius-sm);
    color: var(--phx-text-faint);
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.phx-give__copy:hover { color: var(--phx-primary); border-color: var(--phx-primary); }
.phx-give__copy.is-copied { color: var(--phx-success); border-color: var(--phx-success); }

.phx-give__check {
    background: rgba(242,107,31,0.08);
    border-radius: var(--phx-radius-sm);
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
}
.phx-give__note { color: var(--phx-text-muted); font-size: 0.9375rem; }

.phx-give__honest {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--phx-border);
}
.phx-give__honest h3 {
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--phx-text-faint);
    margin-bottom: 1rem;
}
.phx-give__honest ul { list-style: none; margin: 0; padding: 0; }
.phx-give__honest li {
    color: var(--phx-text-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
    padding: 0.5rem 0;
}
.phx-give__honest li strong { color: var(--phx-text); }

@media (max-width: 560px) {
    .phx-give { padding: 1.5rem 1.25rem; }
    .phx-give__details { padding: 1rem; }
    /* Stack, or a 9rem label plus an 8 digit number will not fit a 320px screen. */
    .phx-give__row { flex-direction: column; gap: 0.25rem; align-items: flex-start; }
    .phx-give__label { flex: none; font-size: 0.875rem; }
}

/* Sourcing line under safety content. Quieter than body copy because it is
   provenance, not instruction, but it has to stay readable: it is what turns
   "Phoenix says do this" into "this is what NHS and resuscitation guidance say",
   which is the difference between signposting and giving medical advice. */
.phx-source-note {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--phx-border);
    color: var(--phx-text-faint);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* Footer: the independence claim is the one thing no lead-generation competitor
   can copy, and until now it only existed inside the structured data, where
   Google could read it and a person could not. */
.phx-footer__independence { color: var(--phx-text-muted); font-size: 0.9375rem; max-width: 68ch; margin: 0 auto 0.75rem; }
.phx-footer__independence strong { color: var(--phx-text); }
.phx-footer__expect { color: var(--phx-text-faint); font-size: 0.875rem; max-width: 68ch; margin: 0 auto 0.75rem; }
.phx-footer__give { color: var(--phx-text-faint); font-size: 0.875rem; max-width: 68ch; margin: 1rem auto 0.5rem; }

/* Donate: the spelling warning has to sit where the name is read, not three
   paragraphs below it. A phone will autocorrect "Pheonix" in a payee field and
   the donor then gets a full screen bank fraud warning at the worst moment. */
.phx-give__spelling { background: rgba(242,107,31,0.08); border-left: 3px solid var(--phx-primary); padding: 0.875rem 1rem; border-radius: var(--phx-radius-sm); font-size: 0.9375rem; color: var(--phx-text-muted); }
.phx-give__spelling strong { color: var(--phx-text); }
.phx-give__copyall-wrap { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.25rem 0; }
.phx-give__copyall { align-self: flex-start; min-height: 44px; }
.phx-give__copyall-hint { font-size: 0.8125rem; color: var(--phx-text-faint); max-width: 60ch; }
.phx-give__copy { min-height: 44px; }