/*
Theme Name: Clarity Care
Theme URI: https://claritycare.com.au/
Author: Clarity Care
Description: Lightweight, accessible WordPress theme for Clarity Care — NDIS and DVA community nursing provider, Mandurah WA. Built to WCAG 2.1 AA. No page builder, no bloat.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: Proprietary — Clarity Care
Text Domain: claritycare
*/

/* =====================================================================
   1. DESIGN TOKENS
   Change brand colours here and nowhere else.
   All pairings below are checked against WCAG 2.1 AA (4.5:1 body text).
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     BRAND PALETTE — from Clarity Care brand-guide.md (July 2026),
     colours sampled from logo 300.png. Every pairing below is checked
     against WCAG 2.1 AA on the CREAM page background.

     The guide's orange (#F09030, 2.25:1) and magenta (#E03070, 4.07:1)
     both FAIL as text. They are kept as decorative tokens only. Where
     they must carry text, use the darkened -text / accent variants.
     --------------------------------------------------------------- */

  /* Navy — the primary. Wordmark, headlines, body text, buttons. */
  --cc-ink:            #202040;  /* body text        — 14.64:1 on cream */
  --cc-navy:           #202040;  /* primary buttons  — 15.65:1 with white */
  --cc-navy-dark:      #15152B;  /* hover / active */

  /* Magenta — secondary accent. Darkened from the brand value for text. */
  --cc-magenta:        #B32659;  /* links, CTAs      — 5.89:1 on cream */
  --cc-magenta-brand:  #E03070;  /* DECORATIVE ONLY — 4.07:1, fails text */
  --cc-magenta-light:  #FBEDF2;

  /* Orange — decorative only. Never text, never a text background. */
  --cc-orange:         #F09030;  /* DECORATIVE ONLY — 2.25:1 */
  --cc-orange-text:    #A76421;  /* only if orange must carry text — 4.68:1 */

  /* Neutrals. Cream is the page background — the guide says never pure
     white behind the logo swirl. */
  --cc-cream:          #FAF7F2;  /* page background */
  --cc-cream-deep:     #F3EBDE;  /* alternating section tint */
  --cc-tint:           #EFEDF5;  /* cool navy-tinted panel */
  --cc-white:          #FFFFFF;  /* cards sitting on cream */
  --cc-muted:          #54546B;  /* secondary text   — 6.88:1 on cream */
  --cc-border:         #E0DAD0;
  --cc-crisis:         #8A1C1C;  /* crisis bar       — 9.28:1 with white */
  --cc-focus:          #B32659;  /* focus ring       — 5.89:1 on cream */

  /* Type scale */
  --cc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --cc-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --cc-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
  --cc-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --cc-body: 1.0625rem;

  /* Layout */
  --cc-max: 1240px;
  --cc-narrow: 720px;
  --cc-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --cc-radius: 10px;
  --cc-shadow: 0 2px 4px rgba(32,32,64,.06), 0 8px 24px rgba(32,32,64,.07);
}

/* =====================================================================
   2. RESET & BASE
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--cc-font);
  font-size: var(--cc-body);
  line-height: 1.65;
  color: var(--cc-ink);
  background: var(--cc-cream);
  -webkit-font-smoothing: antialiased;
}

/* Headings: sized by CSS, never by choosing the wrong level.
   Heading LEVEL is document structure — screen readers depend on it. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  line-height: 1.25;
  font-weight: 700;
  color: var(--cc-ink);
  text-wrap: balance;
}
h1 { font-size: var(--cc-h1); letter-spacing: -.02em; }
h2 { font-size: var(--cc-h2); letter-spacing: -.01em; }
h3 { font-size: var(--cc-h3); }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1.05rem; }

p, ul, ol { margin: 0 0 1.15em; }
p { max-width: 68ch; text-wrap: pretty; }

a { color: var(--cc-magenta); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cc-navy); }

img { max-width: 100%; height: auto; display: block; }

/* Visible focus for every interactive element — WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Screen-reader-only utility */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip link — WCAG 2.4.1 */
.skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 999;
  background: var(--cc-ink); color: var(--cc-white);
  padding: .75rem 1.25rem; border-radius: 0 0 6px 6px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--cc-white); }

/* =====================================================================
   3. LAYOUT
   ===================================================================== */

.cc-wrap { width: 100%; max-width: var(--cc-max); margin-inline: auto; padding-inline: 1.25rem; }
.cc-narrow { max-width: var(--cc-narrow); margin-inline: auto; }
.cc-section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.cc-section--tint { background: var(--cc-cream-deep); }
.cc-section--lilac,
.cc-section--teal { background: var(--cc-tint); } /* --lilac/--teal kept as aliases for already-published content */

.cc-grid { display: grid; gap: var(--cc-gap); }
@media (min-width: 700px)  { .cc-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .cc-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .cc-grid--split { grid-template-columns: 1fr 1fr; align-items: center; } }

/* =====================================================================
   4. CRISIS BAR
   Persistent, on every page. Duty of care, not decoration.
   ===================================================================== */

.cc-crisis {
  background: var(--cc-crisis);
  color: var(--cc-white);
  font-size: .925rem;
  padding: .6rem 0;
}
.cc-crisis a { color: var(--cc-white); font-weight: 700; }
.cc-crisis p { margin: 0; max-width: none; }
.cc-crisis__inner { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-items: center; }

/* =====================================================================
   5. HEADER & NAVIGATION
   ===================================================================== */

.cc-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cc-cream);
  border-bottom: 1px solid var(--cc-border);
}
.cc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .75rem;
}
/* align-items:flex-start stops the logo card stretching to the width of the
   tagline underneath it — a flex column stretches children by default. */
.cc-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }

/* The master logo (logo 300.png) has an opaque white background — no alpha
   channel, despite the brand guide describing it as RGBA. Rather than key the
   white out and risk halos on the swirl's antialiased edges, it sits on a
   deliberate white card. The guide already prescribes exactly this treatment
   on dark backgrounds, so it reads as intentional rather than as a mistake.

   REPLACE THIS when a transparent PNG or SVG exists: delete the background,
   padding, border-radius and shadow below and the logo will sit directly on
   the cream. A horizontal lockup would also let the header be much shorter. */
.cc-logo {
  display: inline-block;
  background: var(--cc-white);
  padding: .3rem .5rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(32,32,64,.08);
}
.cc-logo img {
  max-height: 74px;   /* the wordmark is stacked under the emblem and becomes
                         illegible below roughly 70px */
  width: auto;
}
@media (max-width: 979px) {
  .cc-logo img { max-height: 54px; }
  .cc-logo { padding: .25rem .4rem; }
}

/* Tagline sits under the logo. Hidden on narrow screens where the header
   needs the room for navigation and the call button. */
.cc-tagline {
  margin: 0;
  max-width: none;
  white-space: nowrap;   /* must never wrap — it widens the brand block and
                            squeezes the navigation */
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--cc-navy-dark);
}
/* Hidden until there is genuinely room for it alongside the full nav. */
@media (max-width: 1180px) { .cc-tagline { display: none; } }

.cc-footer__tagline {
  color: var(--cc-white);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .6rem;
}

.cc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.cc-nav a {
  display: block; padding: .6rem .55rem; border-radius: 6px;
  color: var(--cc-ink); text-decoration: none; font-weight: 600; font-size: .92rem;
  white-space: nowrap;   /* menu labels must sit on one line */
}
.cc-nav a:hover, .cc-nav a:focus-visible { background: var(--cc-tint); color: var(--cc-navy-dark); }
.cc-nav .current-menu-item > a { color: var(--cc-magenta); box-shadow: inset 0 -3px 0 var(--cc-navy); }

/* Submenu — keyboard accessible, opens on focus-within not just hover */
.cc-nav li { position: relative; }
.cc-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 270px;
  flex-direction: column; gap: 0;
  background: var(--cc-white); border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius); box-shadow: var(--cc-shadow);
  padding: .4rem; display: none;
}
.cc-nav li:hover > .sub-menu,
.cc-nav li:focus-within > .sub-menu { display: flex; }
.cc-nav .sub-menu a { font-weight: 500; }

.cc-header__cta { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.cc-header__cta .cc-btn { white-space: nowrap; padding-inline: 1rem; }

/* Below this the phone number is dropped from the header — it is already in
   the crisis bar and the footer, and the Refer button is the priority. */
@media (max-width: 1080px) { .cc-header__cta .cc-btn--ghost { display: none; } }

/* Mobile */
.cc-nav-toggle {
  display: none; background: var(--cc-navy); color: var(--cc-white);
  border: 0; border-radius: 6px; padding: .6rem .9rem;
  font-size: .95rem; font-weight: 600; cursor: pointer;
}
@media (max-width: 979px) {
  .cc-nav-toggle { display: inline-flex; align-items: center; gap: .5rem; }
  .cc-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cc-white); border-bottom: 1px solid var(--cc-border);
    box-shadow: var(--cc-shadow); padding: .75rem 1.25rem 1.25rem;
    max-height: 75vh; overflow-y: auto;
  }
  .cc-nav.is-open { display: block; }
  .cc-nav ul { flex-direction: column; gap: 0; }
  .cc-nav .sub-menu {
    position: static; display: flex; border: 0; box-shadow: none;
    padding: 0 0 0 1rem; min-width: 0;
  }
  .cc-header__cta .cc-btn--ghost { display: none; }
}

/* =====================================================================
   6. BUTTONS
   ===================================================================== */

.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--cc-radius);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  min-height: 44px; /* WCAG 2.5.5 target size */
}
.cc-btn--primary { background: var(--cc-navy); color: var(--cc-white); }
.cc-btn--primary:hover, .cc-btn--primary:focus-visible { background: var(--cc-navy-dark); color: var(--cc-white); }
.cc-btn--accent { background: var(--cc-magenta); color: var(--cc-white); }
.cc-btn--accent:hover, .cc-btn--accent:focus-visible { background: #8E1E47; color: var(--cc-white); }
.cc-btn--ghost { background: transparent; color: var(--cc-navy-dark); border-color: var(--cc-navy); }
.cc-btn--ghost:hover, .cc-btn--ghost:focus-visible { background: var(--cc-tint); }
.cc-btn--lg { padding: 1rem 1.75rem; font-size: 1.075rem; }

.cc-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* =====================================================================
   7. HERO
   ===================================================================== */

.cc-hero { background: linear-gradient(160deg, var(--cc-tint) 0%, var(--cc-cream) 100%); padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); }
.cc-hero h1 { margin-bottom: .35em; }
.cc-hero__lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--cc-ink); max-width: 60ch; }
.cc-hero__eyebrow {
  display: inline-block; margin-bottom: 1rem;
  background: var(--cc-white); border: 1px solid var(--cc-navy);
  color: var(--cc-navy-dark); border-radius: 999px;
  padding: .35rem 1rem; font-size: .875rem; font-weight: 700;
}

/* =====================================================================
   8. CARDS
   ===================================================================== */

.cc-card {
  background: var(--cc-white); border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius); padding: 1.6rem;
  display: flex; flex-direction: column;
}
.cc-card h3 { margin-bottom: .4em; }
.cc-card p { flex: 1; }
.cc-card__link { font-weight: 700; text-decoration: none; }
.cc-card__link::after { content: " \2192"; }
.cc-card__link:hover { text-decoration: underline; }
.cc-card--tint { background: var(--cc-cream); }

/* Service card image */
.cc-card__media { margin: -1.6rem -1.6rem 1.2rem; border-radius: var(--cc-radius) var(--cc-radius) 0 0; overflow: hidden; }
.cc-card__media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* "Ideal for" line inside service cards */
.cc-ideal {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cc-border);
  font-size: .925rem; color: var(--cc-muted);
}
.cc-ideal strong { color: var(--cc-ink); }

/* =====================================================================
   9. TICK LISTS
   Real list semantics, no emoji. Screen readers announce "list, 6 items"
   instead of "trophy trophy trophy".
   ===================================================================== */

.cc-ticks { list-style: none; padding: 0; margin: 0; }
.cc-ticks li {
  position: relative; padding-left: 2rem; margin-bottom: .8rem;
}
.cc-ticks li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--cc-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E") center/.85rem no-repeat;
}

/* =====================================================================
   10. STEPS
   ===================================================================== */

.cc-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.cc-steps > li { counter-increment: step; position: relative; padding-left: 3.5rem; margin-bottom: 2rem; }
.cc-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--cc-navy); color: var(--cc-white);
  display: grid; place-items: center; font-weight: 700; font-size: 1.15rem;
}

/* =====================================================================
   11. STORY / QUOTE
   ===================================================================== */

.cc-story {
  background: var(--cc-white); border-left: 5px solid var(--cc-navy);
  border-radius: 0 var(--cc-radius) var(--cc-radius) 0;
  padding: 1.75rem; box-shadow: var(--cc-shadow);
}
.cc-story blockquote { margin: 0; font-size: 1.1rem; }
.cc-story figcaption { margin-top: 1rem; font-size: .9rem; color: var(--cc-muted); }

/* =====================================================================
   11b. FIGURES / PHOTOGRAPHY
   ===================================================================== */

.cc-figure {
  margin: 0 0 1.5rem;
  border-radius: var(--cc-radius);
  overflow: hidden;
}
.cc-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.cc-figure figcaption {
  margin-top: .6rem;
  font-size: .9rem;
  color: var(--cc-muted);
}

/* Inside a story panel the figure should bleed to the panel edges */
.cc-story > .cc-figure:first-child {
  margin: -1.75rem -1.75rem 1.5rem;
  border-radius: 0 var(--cc-radius) 0 0;
}

/* =====================================================================
   12. TABLES
   ===================================================================== */

.cc-table-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: .975rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--cc-border); vertical-align: top; }
th { background: var(--cc-cream); font-weight: 700; }
caption { text-align: left; font-weight: 700; padding-bottom: .6rem; }

/* =====================================================================
   13. FORMS
   ===================================================================== */

.cc-form-embed {
  background: var(--cc-white); border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius); padding: clamp(1rem, .5rem + 2vw, 2rem);
  box-shadow: var(--cc-shadow);
}
.cc-form-embed iframe { width: 100%; border: 0; min-height: 900px; display: block; }

.cc-form-fallback {
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  background: var(--cc-magenta-light); border-radius: var(--cc-radius);
  font-size: .95rem;
}
.cc-form-fallback p { margin: 0; max-width: none; }

/* =====================================================================
   14. FOOTER
   ===================================================================== */

.cc-footer { background: var(--cc-ink); color: #DAD9E6; padding-block: 3rem 1.5rem; margin-top: 0; }
.cc-footer h2, .cc-footer h3 { color: var(--cc-white); font-size: 1.05rem; margin-bottom: .8rem; }
.cc-footer a { color: #DAD9E6; }
.cc-footer a:hover { color: var(--cc-white); }
.cc-footer ul { list-style: none; padding: 0; margin: 0; }
.cc-footer li { margin-bottom: .45rem; }
.cc-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .cc-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.cc-footer__ack {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .95rem; max-width: 80ch;
}
.cc-footer__badges {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Fixed height, automatic width — works for the square, short and long
   variants of the NDIS badge without distorting any of them. The white card
   is needed because the badge artwork has no transparent background and the
   footer is navy. */
.cc-footer__badges img {
  height: 58px;
  width: auto;
  max-width: 100%;
  background: var(--cc-white);
  padding: .4rem .6rem;
  border-radius: 8px;
}
.cc-footer__badges p { margin: 0; font-size: .925rem; max-width: 46ch; }

.cc-footer__legal {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .875rem; color: #B2B1C6;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.cc-footer__legal p { margin: 0; max-width: none; }

/* =====================================================================
   15. CONTENT (blog / editor output)
   ===================================================================== */

.cc-content > * + * { margin-top: 1.15em; }
.cc-content h2 { margin-top: 2em; }
.cc-content h3 { margin-top: 1.6em; }
.cc-content ul, .cc-content ol { padding-left: 1.35rem; }
.cc-content li { margin-bottom: .5rem; }
.cc-content blockquote {
  margin: 1.5em 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 4px solid var(--cc-navy); color: var(--cc-muted); font-style: italic;
}

.cc-meta { color: var(--cc-muted); font-size: .925rem; margin-bottom: 1.5rem; }

.cc-pagination { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2.5rem; }
.cc-pagination .page-numbers {
  padding: .55rem .9rem; border: 1px solid var(--cc-border);
  border-radius: 6px; text-decoration: none;
}
.cc-pagination .current { background: var(--cc-navy); color: var(--cc-white); border-color: var(--cc-navy); }

/* =====================================================================
   16. PRINT
   ===================================================================== */

@media print {
  .cc-header, .cc-footer, .cc-crisis, .cc-btn-row, .cc-nav-toggle { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}