/* ═══════════════════════════════════════════════════════════════════
   theme.css — the design system. One source of truth for the site.

   Everything here used to live in a <style> block inside
   templates/layout/default.php. That made it invisible to the ~15 pages
   that call disableAutoLayout() - every admin dashboard page and the
   intake form - which is why templates/Availability/add.php could
   reference var(--nb-teal) and render an invalid background.

   In a file, every page can load it. Link it AFTER styles.css: several
   rules below deliberately override the Clean Blog vendor theme.

   Rule for this file: it is the only place in the project that may
   contain a brand colour literal. Everything else references a token.

   The comments below are the original author's and are kept verbatim -
   they record why each value is what it is, which is worth more than
   the values themselves.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Type ────────────────────────────────────────────────────────────
   Two families, both SIL Open Font License, both served from this
   project. Nothing is fetched from Google Fonts or any other host.

   Kulim Park throughout: humanist, calm, low contrast, and it holds up
   at small sizes - which matters on a site where the important text is
   a form label and a session price. Headings are the same family at
   700, separated from body copy by weight, size and a slightly tighter
   track rather than by a second typeface.

   Matamata was the first choice for headings and was rejected after
   seeing it set: it draws the ampersand as a reversed epsilon, so
   "Anxiety & Depression" read as "Anxiety E Depression" across all six
   service cards, the six service pages, the footer links and the
   business's own name in the hero. The glyph is present - a coverage
   check passes - but present is not the same as legible, and the copy
   is the client's, not ours to edit around a typeface.

   Four faces, 92 KB total. Kulim Park ships eleven weights; the seven
   not declared here are a real network cost for a page that never asks
   for them - add one when a design actually calls for it.

   font-display: swap - the fallback renders immediately and is replaced
   when the face arrives. On a page someone opens while distressed,
   text that is readable late is better than text that is invisible
   early. Structured after webroot/css/fonts.css, which already does
   this correctly for Raleway on the error pages. */

@font-face {
    font-family: 'Kulim Park';
    src: url('../font/kulimpark-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kulim Park';
    src: url('../font/kulimpark-regularitalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Kulim Park';
    src: url('../font/kulimpark-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kulim Park';
    src: url('../font/kulimpark-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ── The palette ─────────────────────────────────────────────────────
   Dimitra's choice, 10 Sep 2026: mint, cornflower, ice and charcoal.

   Three light tones and one near-black, which decides the whole design.
   White text measures 1.49:1 on the mint, 2.23:1 on the cornflower and
   1.32:1 on the ice - all far below the 4.5:1 minimum. Charcoal on those
   same three measures 9.29, 6.19 and 10.44.

   So the site inverts. Where it used to be white-on-teal - the nav, the
   footer, every button - it is now charcoal carrying light text, and the
   three light tones become accent surfaces that carry charcoal. That is
   not a stylistic reading of the palette; it is the only arrangement of
   it that is legible.

   Derived tones below are the minimum needed to make it work: the
   palette contains nothing that can be read as text on a light ground,
   and nothing that can signal an error. */
:root{
    /* The four, as chosen */
    --nb-mint:      #92E2DA;
    --nb-blue:      #8FB0DC;
    --nb-ice:       #D4E1F3;
    --nb-char:      #2A2D32;

    /* Mint, deepened until it can be read. --deep clears 4.5:1 on white
       (5.96) and on ice (4.50), so links and small print can use it.
       --mid clears 3:1 on the page AND on the charcoal chrome - the only
       tone in the whole palette that does both, which is why it is the
       focus ring. */
    --nb-mint-deep: #1E6F67;
    --nb-mint-mid:  #268E84;
    --nb-mint-tint: #CEF2EE;

    /* Mint, saturated for button fills only. The chosen mint is a pastel
       and reads washed-out as a fill, especially over the hero photo and
       on a phone screen. Same hue, more colour; charcoal on it is 9.11:1. */
    --nb-mint-bright: #4FE8D6;

    /* Cornflower, same treatment, for secondary accents */
    --nb-blue-deep: #3464A5;   /* 5.98 on white, 4.52 on ice */
    --nb-blue-tint: #CDDBEF;

    /* Ice, lightened for the page itself. Full-strength ice is a section
       band; a whole page of it is too saturated to read against. */
    --nb-ice-soft:  #E8EFF9;

    /* Charcoal, lightened. Body copy sits a step off full black so long
       paragraphs do not glare; -3 and -4 are for placeholders and
       borders and must never carry body text on a light ground. */
    --nb-char-body: #40454E;   /* 8.33 on page, 9.64 on card, 7.28 on ice */
    --nb-char-2:    #5A606B;   /* 5.47 / 6.32 / 4.78 - captions, meta */
    --nb-char-3:    #7B8390;   /* placeholders, large text only */
    --nb-char-4:    #A9AEB6;   /* borders, disabled. AA (6.20) on charcoal */

    /* ── Legacy names ────────────────────────────────────────────────
       Nothing outside this file references these any more; they are kept
       only so a teammate's in-flight branch does not break on merge.
       Safe to delete once everyone has rebased. */
    --nb-cream:     var(--nb-ice-soft);
    --nb-teal:      var(--nb-mint);
    --nb-teal-dark: var(--nb-mint-deep);
    --nb-ink:       var(--nb-char);

    /* Text scale. The public pages were running ELEVEN ad-hoc greys for
       body copy, several failing contrast outright (#9ca3af was ~2.6:1).
       Three steps, each checked against BOTH backgrounds this site uses:
       white cards and the page ground. */
    --nb-body:  var(--nb-char-body);
    --nb-muted: var(--nb-char-2);

    /* One radius scale. Cards were running 6/10/12/15/20/30px -
       six different values for the same kind of surface, which is
       what reads as unfinished more than any single choice. */
    --nb-r-sm:8px;           /* inputs, small chips */
    --nb-r-card:16px;        /* every card surface */
    --nb-r-pill:999px;       /* buttons, tags */

    /* Type. Real fallback stacks, chosen for x-height rather than
       alphabetical proximity, so the swap when the woff2 lands is a
       shift rather than a jolt. */
    --nb-font-heading: 'Kulim Park', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --nb-font-body:    'Kulim Park', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

    /* One easing, one pair of durations. */
    --nb-ease:cubic-bezier(.22,.61,.36,1);
    --nb-fast:200ms;
    --nb-slow:900ms;   /* reveal only - matches the trading journal */
    --nb-reveal-ease:cubic-bezier(.16,1,.3,1);  /* the journal curve: fast start, long settle */
}


/* ── Semantic layer ──────────────────────────────────────────────────
   The tokens above name COLOURS. The tokens below name JOBS.

   That distinction is the whole reason this layer exists. `--nb-teal`
   was being used for two incompatible things at once: about 25 sites use
   it as a solid fill sitting behind white text (the footer, .btn-primary,
   .about-cta, the service-card buttons), and the rest use it as a
   hairline, a border, or small accent text on a light background.

   Those two jobs need different colours in the new palette. White on the
   client's mint measures 1.49:1 - unreadable - so every "fill behind
   white text" site has to become something dark, while every "accent on
   white" site becomes a deepened mint. A single find-and-replace cannot
   tell them apart. Naming the job can.

   So: nothing outside this file should reference --nb-teal or a hex
   value again. Reference the job, and the palette flip becomes an edit
   to the block above rather than a hunt through 14 files.

   This is where the inversion actually happens. Note --nb-action-bg and
   --nb-accent, which used to be the same teal, now point at opposite
   ends of the palette: a button is charcoal because it carries text, an
   accent rule is mint because nothing sits on it. */
:root{
    /* Surfaces */
    --nb-surface:          var(--nb-ice-soft);   /* the page itself */
    --nb-surface-raised:   #ffffff;              /* cards, modals, form panels */
    --nb-surface-sunken:   var(--nb-ice);        /* section bands, table stripes */
    --nb-surface-accent:   var(--nb-mint);       /* callouts, active steps, chips */
    --nb-surface-accent-2: var(--nb-blue);       /* the secondary of the above */
    --nb-surface-inverse:  var(--nb-char);       /* nav, footer, primary button */

    /* Ink */
    --nb-ink-heading:      var(--nb-char);       /* h1-h3 */
    --nb-ink-body:         var(--nb-char-body);  /* paragraphs */
    --nb-ink-muted:        var(--nb-char-2);     /* captions, meta */
    --nb-ink-faint:        var(--nb-char-3);     /* placeholders - never body copy */
    --nb-ink-inverse:      #ffffff;              /* text on --nb-surface-inverse */

    /* Text on a mint/cornflower/ice surface. This one line is the
       inversion: it was #ffffff, which measured 1.49:1 on the mint. */
    --nb-ink-on-accent:    var(--nb-char);

    /* Action - the primary button. Bright mint, carrying CHARCOAL text at
       9.11:1. This is the one place the brand colour has to lead: a
       palette that only shows up in hairlines is not the palette the
       client chose. The pairing is the point - the fill and the text
       colour are two halves of one decision, which is why every button
       in the project now reads --nb-action-fg rather than hardcoding
       white next to it.

       Hover deepens rather than lightens, so the control still reads as
       pressed-into rather than washed-out. */
    --nb-action-bg:        var(--nb-mint-bright);
    --nb-action-bg-hover:  var(--nb-mint-mid);
    --nb-action-fg:        var(--nb-char);

    /* The quiet button: charcoal chrome carrying light text, for
       secondary actions and anything sitting on a mint surface where a
       mint button would vanish. */
    --nb-action-2-bg:      var(--nb-char);
    --nb-action-2-bg-hover:var(--nb-mint-deep);
    --nb-action-2-fg:      #ffffff;

    /* Accent - decorative fills, rules, dots, card top-borders. Nothing
       reads on these, so they stay at full brand strength. */
    --nb-accent:           var(--nb-mint);
    --nb-accent-hover:     var(--nb-mint-mid);
    --nb-accent-2:         var(--nb-blue);

    /* Accent as TEXT: the deepened mint, 5.96:1 on white and 4.50:1 on
       ice. The brand mint itself is 1.4:1 on white and can never be text. */
    --nb-accent-text:      var(--nb-mint-deep);
    --nb-accent-text-2:    var(--nb-blue-deep);

    /* Lines */
    --nb-border:           #BCCDE6;              /* input and card borders */
    --nb-border-strong:    #8FA5C6;              /* dividers, table rules */
    --nb-border-inverse:   rgba(255,255,255,.14);/* rules on the charcoal chrome */

    /* Focus. --nb-mint-mid is the only tone in the palette that clears
       3:1 against BOTH the page (3.43) and the charcoal chrome (3.48),
       so one ring works everywhere - which is what WCAG 1.4.11 wants and
       what five files writing their own rgba() at .15 / .2 / .25 was
       never going to give. */
    --nb-focus-ring:       var(--nb-mint-mid);
    --nb-focus-glow:       rgba(38,142,132,.30);

    /* Status. Form validation only - never decoration. Both clear 4.5:1
       on the page, on a white card and on ice. */
    --nb-error:            #A3323F;              /* 6.81 white, 5.14 ice */
    --nb-success:          #26694C;              /* 6.55 white, 4.95 ice */
}

/* page background */
body{ background-color:var(--nb-surface) !important; }

/* headings a touch deeper for contrast */
h1,h2,h3,.section-heading{ color:var(--nb-ink-heading); }

/* primary buttons: solid rich green, drop the neon-cyan glow */
.btn-primary{
    background-color:var(--nb-action-bg) !important;
    border-color:var(--nb-action-bg) !important;
    color:var(--nb-action-fg) !important;
}
.btn-primary:after{ background:var(--nb-action-bg) !important; }
.btn-primary:before{ display:none !important; }   /* removes the cyan glow */
.btn-primary{
    transition:background-color var(--nb-fast) var(--nb-ease), color var(--nb-fast) var(--nb-ease),
               transform var(--nb-fast) var(--nb-ease), box-shadow var(--nb-fast) var(--nb-ease);
}
/* styles.css turns a clicked (focused) .btn-primary cyan and lifts it 4px */
.btn-primary:focus{
    background-color:var(--nb-action-bg) !important;
    color:var(--nb-action-fg) !important;
    transform:none;
}
.btn-primary:hover,
.btn-primary:focus-visible{
    background-color:var(--nb-action-bg-hover) !important;
    color:var(--nb-action-fg) !important;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(42,45,50,.14);
}
.btn-primary:active{ transform:translateY(0) scale(.98); box-shadow:none; }
.btn-primary:focus-visible{ outline:3px solid var(--nb-focus-ring); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
    .btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active{ transform:none; }
}
.btn-primary:hover:after{ background:var(--nb-action-bg-hover) !important; }

/* green accents across About / Support / CTA sections */
.section-label{ color:var(--nb-accent-text) !important; }
.approach-card{ border-top-color:var(--nb-accent) !important; }
.support-card li::before{ background-color:var(--nb-accent) !important; }
.credential-card,
.specialist-note,
.qualification-item{ border-left-color:var(--nb-accent) !important; }
.about-cta{ background-color:var(--nb-action-bg) !important; }
.dropdown-item:hover{ background-color:var(--nb-action-bg) !important; }
/* ── Team 106 — larger, more readable type ───────────────── */
/* 17px. Was 1.35rem (21.6px), which is close to a low-vision
   accessibility setting - generous type and readable type are not the
   same thing, and long lines at that size are harder to scan, not
   easier. Changed 28 Aug with Yash; tell the team it was deliberate. */
/* Lets block-size:auto be animated - what makes the FAQ panels ease
   open rather than snap. Ignored by browsers without it. */
:root { interpolate-size: allow-keywords; }

/* Bootstrap feeds #212529 through --bs-body-color into everything
   downstream, so redirecting the variable is the root fix - setting it on
   body alone left ~38 elements still on the vendor value. Anything on a
   dark background sets its own colour and still wins. */
:root {
    --bs-body-color: var(--nb-ink-body);
    --bs-dropdown-color: var(--nb-ink-body);   /* the Services menu */
    --bs-secondary-color: var(--nb-ink-muted); /* .text-muted helpers */

    /* Same reasoning for type. Clean Blog feeds Lora and Open Sans through
       these two variables into everything downstream, so redirecting them
       is the root fix rather than chasing selectors. */
    --bs-body-font-family: var(--nb-font-body);
    --bs-btn-font-family:  var(--nb-font-body);
}

/* The handful of places Clean Blog writes the family literally rather
   than through a variable, so the redirect above cannot reach them.
   Listed explicitly instead of reinstating a `*` selector - if a new one
   turns up, it belongs on this list, not in a universal rule. */
#mainNav,
header.masthead .site-heading .subheading,
header.masthead .post-heading .subheading,
header.masthead .post-heading .meta,
.tooltip,
.popover {
    font-family: var(--nb-font-body);
}
/* Headings are the body face at 700 with the track pulled in slightly.
   With one family doing both jobs, that tightening is what separates a
   heading from a bold sentence - Kulim Park is generously spaced by
   default, which reads open and calm in a paragraph and slack in a
   headline. Scaled by size: the bigger the type, the less air it needs. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.section-heading, .section-title, .post-title {
    font-family: var(--nb-font-heading);
    font-weight: 700;
}
h1, .h1, .post-title      { letter-spacing: -0.022em; }
h2, .h2, .section-heading { letter-spacing: -0.018em; }
h3, .h3                   { letter-spacing: -0.014em; }
h4, .h4, h5, .h5, h6, .h6 { letter-spacing: -0.008em; }

/* Bootstrap 5 declares its component variables INSIDE the component
   rule, not on :root - so `.btn { --bs-btn-font-family: ... }` beats
   anything :root says. Override where it is set. */
.btn,
.form-control,
.form-select,
.dropdown-menu {
    --bs-btn-font-family: var(--nb-font-body);
    font-family: var(--nb-font-body);
}
/* styles.css:105 puts `animation: fadeIn 1.5s` on BODY itself, and that
   keyframe's from-state is `translateY(20px)`. So for the first 1.5s of
   EVERY page load the whole document sat 20px low and the cream canvas
   showed as a gap above the hero - visible on every navigation.

   A transform on body also makes body the containing block for
   `position: fixed` descendants, which is very likely the real cause of
   the note in docs/design/README.md about fixed resolving against the
   document rather than the viewport.

   The page title/subtitle entrance now covers the arrival properly, so
   nothing is lost by dropping it. */
body { animation: none !important; }

body { font-size: 1.0625rem !important; color: var(--nb-ink-body); }

/* nav links were tiny (0.75rem) — bump them up */
#mainNav .nav-link { font-size: 0.95rem !important; }

/* keep the discreet login link smaller than the main links */
#mainNav .nav-login { font-size: 0.85rem !important; }