/* ==========================================================================
   Phoenix Consulting — corrections and new components
   --------------------------------------------------------------------------
   Loaded after site.css. Everything here either fixes something the
   palette change broke, or styles a component this site added. Keeping
   it in its own file makes it obvious which rules are Phoenix's own and
   which came from the shared practice foundation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contrast corrections forced by the new palette

   The old palette's accent was a mid green that could carry white text.
   The flame yellow cannot — it is 1.8:1 against white. Every place the
   base stylesheet put white on the accent colour has to be re-pointed at
   the charcoal instead, or it becomes unreadable.
   -------------------------------------------------------------------------- */

/* Link underlines were tinted with the old teal. */
a { text-decoration-color: rgba(200, 37, 42, .35); }

/* The eyebrow was accent-coloured. Yellow on white is illegible, so on
   light grounds it takes the red; on the dark red hero it takes the
   flame, which is where yellow actually earns its keep. */
.eyebrow { color: var(--red); }
.section-teal .eyebrow,
.hero .eyebrow { color: var(--flame); }

/* Accent buttons: dark text on flame, never white. */
.btn-green,
.btn-accent {
  background: var(--flame);
  color: var(--charcoal);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.btn-green:hover,
.btn-accent:hover {
  background: var(--flame-dark);
  color: var(--charcoal);
}

/* Warm the cool greys left over from the blue palette. */
.topbar { color: #F2D9D6; }
.topbar a { color: #FFF1EF; }
.hero { color: #F6E4E1; }
.section-teal { color: #F4DFDC; }

/* --------------------------------------------------------------------------
   2. Small aliases used by newer pages
   -------------------------------------------------------------------------- */
.card-pad { padding: clamp(1.4rem, 3vw, 2rem); }
.lead { font-size: 1.12rem; color: var(--muted); }
.lede-block { font-size: 1.1rem; }
.page-gap { margin-top: clamp(2rem, 4vw, 3rem); }
.muted { color: var(--muted); }
.breadcrumbs-standalone { margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   3. Language switcher

   Sits in the top bar. The language a visitor is NOT currently reading
   is the one that has to be findable, so both stay legible rather than
   the current one being highlighted and the other dimmed away.
   -------------------------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
}
.lang-opt {
  display: inline-block;
  padding: .18em .7em;
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
.lang-opt.is-current {
  background: #fff;
  color: var(--red-darker) !important;
  font-weight: 700;
}
.lang-opt:not(.is-current):hover {
  background: rgba(255, 255, 255, .2);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. App install and offline strips
   -------------------------------------------------------------------------- */
.install-bar {
  position: sticky;
  bottom: 0;
  z-index: 90;
  background: var(--charcoal);
  color: #F6ECE9;
  padding: .75rem 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .18);
}
.install-bar .wrap { display: flex; align-items: center; gap: 1rem; }
.install-icon { color: var(--flame); display: inline-flex; }
.install-text { margin: 0; font-size: .92rem; line-height: 1.4; flex: 1 1 auto; min-width: 0; }
.install-text strong { color: #fff; display: block; }
.install-text span { color: #D8C8C4; font-size: .86rem; }
.install-dismiss {
  background: none; border: 0; color: #C9B6B1; font-size: 1.5rem;
  line-height: 1; cursor: pointer; padding: 0 .3rem;
}
.install-dismiss:hover { color: #fff; }

.offline-bar {
  position: sticky; bottom: 0; z-index: 91;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-top: 2px solid var(--warn-line);
  padding: .6rem 0;
  font-size: .9rem;
}
.offline-bar .wrap { display: flex; align-items: center; gap: .55rem; }

@media (max-width: 560px) {
  .install-bar .wrap { flex-wrap: wrap; }
  .install-text { flex-basis: 100%; order: -1; }
}

/* Once the site is running as an installed app, stop offering to install it. */
.is-app .install-bar { display: none !important; }

/* --------------------------------------------------------------------------
   5. Songs
   -------------------------------------------------------------------------- */
.track-card { display: flex; flex-direction: column; }
.track-cover {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--red-pale);
  overflow: hidden;
}
.track-cover img { width: 100%; height: 100%; object-fit: cover; }
.track-cover-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--red);
  background: linear-gradient(150deg, var(--flame-pale), var(--red-pale));
}
.track-cover-large { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
.track-title { font-size: 1.22rem; margin-bottom: .25rem; }
.track-title a { text-decoration: none; }
.track-title a:hover { text-decoration: underline; }
.track-sub { color: var(--muted); font-style: italic; margin-bottom: .6rem; }

.platform-label {
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 .5rem;
}
.platform-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.platform-link {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .3em .7em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}
.platform-link:hover { border-color: var(--red); color: var(--red); }

.track-detail {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.track-detail-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.track-detail-body h1 { margin-top: .3rem; }

@media (max-width: 720px) {
  .track-detail { grid-template-columns: minmax(0, 1fr); }
  .track-detail-media { max-width: 260px; }
}

.listen-block { margin: 1.8rem 0; }
.listen-heading {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); font-family: var(--head); margin-bottom: .7rem;
}

/* Lyrics keep their line breaks — the lines of a song are not a paragraph. */
.lyrics { white-space: pre-line; font-size: 1.02rem; line-height: 1.9; }
.lyrics p { margin-bottom: 1.2em; }

/* --------------------------------------------------------------------------
   6. Click-to-load embeds
   -------------------------------------------------------------------------- */
.embed-consent {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-align: center;
  background: var(--bg-alt);
  margin: 1.5rem 0;
}
.embed-consent.is-loaded { border-style: solid; padding: 0; background: none; }
.embed-consent-btn {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--red); color: #fff; border: 0;
  padding: .7em 1.3em; border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.embed-consent-btn:hover { background: var(--red-dark); }
.embed-consent-note { margin: .7rem 0 0; }

/* --------------------------------------------------------------------------
   7. Questions and answers

   Built on <details>, so it opens with JavaScript off and the browser's
   own find-in-page can reach the answers inside it.
   -------------------------------------------------------------------------- */
.faq-list { display: grid; gap: .75rem; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--red-light); box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--red-darker);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--red-wash); }
.faq-item summary svg { transition: transform .18s ease; color: var(--red); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-answer { padding: 0 1.25rem 1.25rem; }

/* --------------------------------------------------------------------------
   8. Asian communities page
   -------------------------------------------------------------------------- */
.language-offer { margin: 2rem 0; }
.panel-teal { background: var(--sky-pale); border: 1px solid #BDE3F5; }
.panel-teal h2 { color: var(--red-darker); }

/* Chinese sets better with a little more line height and a font stack
   that prefers a real Traditional face over a Simplified fallback. */
:root:lang(zh-Hant) body,
[lang="zh-Hant"] {
  line-height: 1.85;
}
[lang="zh-Hant"], :lang(zh-Hant) {
  font-family: "Noto Sans TC", "PingFang TC", "Hiragino Sans CNS",
               "Microsoft JhengHei", var(--sans);
}

/* --------------------------------------------------------------------------
   9. Offline page
   -------------------------------------------------------------------------- */
.offline-call { margin: 1.2rem 0 .5rem; }
.card-alert { border-left: 4px solid var(--red); background: var(--red-wash); }
.crisis-list { list-style: none; padding: 0; margin: 1rem 0; }
.crisis-list li { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
.crisis-list li:last-child { border-bottom: 0; }
.crisis-list a { font-size: 1.08rem; text-decoration: none; }
.crisis-list a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   10. Filters and saved state
   -------------------------------------------------------------------------- */
.filter-chip.is-current {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

[data-save-offline].is-saved {
  color: var(--red-darker);
  background: var(--flame-pale);
  border-color: var(--flame);
}

/* --------------------------------------------------------------------------
   11. Courses and projects
   -------------------------------------------------------------------------- */
.course-card { display: flex; flex-direction: column; height: 100%; }
.course-meta {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: .35rem; font-size: .9rem;
}
.course-meta li { display: flex; gap: .5em; align-items: baseline; }
.course-meta dt, .course-meta .k {
  color: var(--muted); min-width: 6.5em; flex: 0 0 auto;
}
.course-date {
  display: inline-flex; align-items: center; gap: .4em;
  background: var(--flame-pale); color: var(--red-darker);
  border: 1px solid var(--flame);
  padding: .25em .7em; border-radius: 999px;
  font-size: .84rem; font-weight: 600;
}
.course-date.is-past { background: var(--bg-alt); border-color: var(--line); color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Main-plus-sidebar layout

   .split is a two-up grid of equal columns. Course and project pages
   need a wide body with a narrow detail rail beside it, which is a
   different shape.
   -------------------------------------------------------------------------- */
.split-main { min-width: 0; }
.split-side { min-width: 0; }

@media (min-width: 900px) {
  .split:has(> .split-side) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Grid and flex children default to min-width:auto, which lets a long
   email address or URL set a floor wider than the phone. */
.grid > *, .split > *, .form-grid > * { min-width: 0; }

/* --------------------------------------------------------------------------
   13. Narrow-screen masthead

   The header is a single non-wrapping flex row: brand, menu button, Book
   button. Each was flex-shrink:0, so together they set a hard 380px
   floor and every page scrolled sideways on a 320 or 360px phone —
   which is a lot of the phones this practice's clients are using.

   Measured, not guessed: scrollWidth exceeded clientWidth by 60px at
   320, 20px at 360 and 5px at 375, and was clean from 380 up.

   The fix lets the brand give way first, because the logo is the one
   element that still reads when it is smaller. The Book button never
   shrinks — on a psychology site that is the whole point of the header.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .site-header .wrap { gap: .7rem; }

  /* Allow the brand to shrink. min-width:0 is required as well: flex
     items default to min-width:auto, which pins them to their content
     and quietly cancels flex-shrink. */
  .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .brand img, .brand .brand-mark { height: 40px; }
  .brand-text { font-size: .72rem; }
}

@media (max-width: 430px) {
  /* Drop the word, keep the bars. The button keeps its accessible name
     from aria-label in header.php. */
  .nav-toggle-text { display: none; }
  .nav-toggle { padding: .55rem .65rem; }
  .brand img, .brand .brand-mark { height: 34px; }
  .site-header .wrap { min-height: 68px; gap: .5rem; }
  .nav-cta .btn { padding-inline: .8rem; }
}

@media (max-width: 360px) {
  .brand-text { display: none; }
  .topbar { font-size: .76rem; }
  .topbar .wrap { gap: .5rem; }
}

/* Belt and braces. If a future banner, table or long URL overflows, it
   clips rather than scrolling the whole page sideways. `clip` and not
   `hidden`, because `hidden` on the body silently kills position:sticky
   for the header. */
body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   14. Grid track floors

   The layout grids are declared as repeat(auto-fit, minmax(320px, 1fr))
   and similar. That 320px is a hard floor: on a 320px-wide phone the
   container is only 288px after page padding, so the track is wider than
   the space it sits in and the page scrolls sideways.

   minmax(min(320px, 100%), 1fr) keeps the intended two-up behaviour on
   anything roomy, and lets the track collapse to the container when
   there is less room than the floor asks for.
   -------------------------------------------------------------------------- */
.split  { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* The main-plus-sidebar override from section 12 must still win. */
@media (min-width: 900px) {
  .split:has(> .split-side) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   15. Long words that will not break

   A single unbreakable token — an email address or a URL — sets a
   min-content floor that nothing above it can shrink below. Measured on
   the contact page: damien@phoenixconsulting.com.au alone forced a 316px
   floor on a 320px screen.

   Browsers will not break inside a word without being told to, so this
   has to be explicit. `anywhere` rather than `break-word` because only
   `anywhere` also lowers the min-content size, which is the part that
   actually stops the overflow.
   -------------------------------------------------------------------------- */
.contact-list li,
.footer-contact li,
.profile-facts li,
.course-meta li { min-width: 0; }

a[href^="mailto:"],
a[href^="http"],
.contact-list a,
.footer-contact a,
.crisis-list a { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   16. Colours the variable aliasing could not reach

   Section 1 re-pointed the --teal*/--green* variables at the Phoenix
   palette, which fixed everything that referenced them. These did not:
   they are hardcoded rgba()/hex values from the original teal-and-green
   design, so they survived the rebrand untouched.

   Two were invisible until now because no banner had an image yet —
   the scrims below are painted OVER a banner photo, and were still the
   old teal. Attaching photos without this would have put a blue-green
   wash across every page header.

   The rest have been quietly wrong since the rebrand: green tick icons
   in the hero, green figures in the story panel, and a bluish-grey
   footer sitting on dark red.
   -------------------------------------------------------------------------- */

/* Scrims over banner and hero photography. The image needs to stay
   readable underneath, so these keep the original opacities and only
   change hue. */
.hero-media::after {
  background: linear-gradient(105deg,
    rgba(120, 22, 26, .94) 0%,
    rgba(120, 22, 26, .86) 45%,
    rgba(160, 29, 34, .62) 100%);
}
.page-banner-media::after {
  background: linear-gradient(100deg,
    rgba(120, 22, 26, .93),
    rgba(160, 29, 34, .78));
}

/* Text on the dark red grounds — warmed off the old blue-greys. */
.page-banner { color: #F2DEDB; }
.page-banner p { color: #EBD2CE; }
.hero-assurance { color: #EBD2CE; }
.site-footer { color: #E3CDC9; }
.section-teal .stat-label { color: #EBD2CE; }
.story-number-label { color: #EBD2CE; }

/* The old accent green, still showing on icons and figures. */
.hero-assurance svg,
.footer-contact svg,
.section-teal .stat-num,
.story-number { color: var(--flame); }

/* Play button on video cards. */
.video-play { background: rgba(120, 22, 26, .34); }
.video-card:hover .video-play { background: rgba(200, 37, 42, .55); }

/* --------------------------------------------------------------------------
   17. Staff photos that are too small for the frame

   The portrait frames assume a decent 4:5 photograph. Given a small
   landscape snapshot they do the worst of both things: crop about a
   quarter off the sides to reach the aspect ratio, then scale what is
   left past its own resolution to fill the column.

   `is-small` is added by the template (see image_is_small()) when that
   would happen. It shows the picture at its natural size on the brand
   ground instead, centred, with the frame keeping its shape so the
   page layout does not shift. A modest photo shown honestly reads far
   better than a modest photo stretched.

   This is a holding pattern, not a substitute for a real headshot —
   remove nothing when one arrives, it simply stops applying.
   -------------------------------------------------------------------------- */
.profile-photo.is-small,
.staff-photo.is-small {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--red-pale), var(--flame-pale));
}

.profile-photo.is-small img,
.staff-photo.is-small img {
  /* auto + max-width:100% renders at the file's own size and no larger,
     whatever that size happens to be — nothing here is tied to one
     particular photo. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* The card version has a badge pinned over the photo; keep it clear of
   the artwork now that the picture no longer bleeds to the edges. */
.staff-photo.is-small .staff-badge { bottom: .6rem; left: .6rem; }