/*
Theme Name: Imani
Template: rehab-parent
Description: Imani Treatment / imanitreatment.nl — Dutch-language eating-disorder clinic in Wynberg, Cape Town. Teal-blue and rose palette with Montserrat headings and Lora reading copy.
Version: 0.2.0
Author: Rehab Platform
License: GPL-2.0+
*/

/* ==========================================================================
   Brand fonts (REH-316)

   Lora + Montserrat, as in Darko's Lovable prototype (design-reference/imani).
   Self-hosted rather than loaded from fonts.googleapis.com: embedding Google
   Fonts sends every visitor's IP to Google, which Dutch and German regulators
   treat as a GDPR transfer. Both faces are OFL, so self-hosting is allowed.

   Variable fonts, latin subset only (covers Dutch ë/é/ï); one file per style
   carries every weight the design uses.
   ========================================================================== */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/Montserrat-Variable.woff2") format("woff2");
}

@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/Lora-Variable.woff2") format("woff2");
}

@font-face {
	font-family: "Lora";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/Lora-Italic-Variable.woff2") format("woff2");
}

/* ==========================================================================
   Brand tokens

   Read off the prototype's src/styles.css, not invented:

     #2E6E88  --cta          primary action teal-blue (5.6:1 on white)
     #1E4B5D  --cta-hover
     #7EADC1  --blue         soft brand blue — SURFACE/BORDER ONLY, 2.5:1 on
                             white, must never carry text
     #EAF3F7  --blue-tint    secondary surface
     #E6B9B8  --rose         decorative rose — surface/border only
     #9E5A58  --rose-deep    rose that can carry text (5.5:1)
     #FFF5F4  --rose-tint    CTA-band surface
     #434F5B  --slate        secondary text, footer band
     #1E1E1E  --text         ink
     #DCE4EA  --line         hairlines

   The parent names its brand-hue tokens "sage" after Diamond. Here "sage"
   means the teal-blue, and every "sage" token that is used as a TEXT colour
   (19 rules use --rehab-sage as `color:`) gets the text-safe #2E6E88, never
   the soft #7EADC1.
   ========================================================================== */

:root {
	/* The prototype's .container-ah measure, same as Anker's. */
	--rehab-container-max:    78rem;
	--rehab-container-narrow: 78rem;

	/* --- Typography ---------------------------------------------------- */
	/* Headings AND interface text are Montserrat; only reading copy (<p>) is
	   Lora — see the rule below the token block. --rehab-font-serif is the
	   parent's alias that articles-index/treatment use for headings, so it
	   stays on the heading face. */
	--rehab-font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rehab-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rehab-font-serif:   var(--rehab-font-display);
	--imani-font-reading: "Lora", Georgia, "Times New Roman", serif;

	/* --- Core surfaces and text ---------------------------------------- */
	--rehab-color-bg:     #FFFFFF;
	--rehab-color-cream:  #FFF5F4;   /* rose-tint — the CTA-band surface */
	--rehab-color-fg:     #1E1E1E;

	/* --- Brand hue (the parent's "sage" family) ------------------------ */
	--rehab-sage:           #2E6E88;
	--rehab-sage-dark:      #2E6E88;   /* primary buttons */
	--rehab-sage-text:      #2E6E88;
	--rehab-sage-light:     #7EADC1;
	--rehab-ethereal-sage:  #EAF3F7;   /* blue-tint */
	--rehab-tan:            #7EADC1;   /* dividers, soft accents */

	--rehab-warm-charcoal:  #1E1E1E;   /* heading ink */
	--rehab-soft-charcoal:  #1E1E1E;   /* body ink — keep the -rgb below in step */
	--rehab-deep-charcoal:  #1E4B5D;

	/* --- Imani palette, by prototype role ------------------------------ */
	--imani-cta:        #2E6E88;
	--imani-cta-hover:  #1E4B5D;
	--imani-cta-active: #173C4A;
	--imani-blue:       #7EADC1;
	--imani-blue-tint:  #EAF3F7;
	--imani-rose:       #E6B9B8;
	--imani-rose-deep:  #9E5A58;
	--imani-rose-tint:  #FFF5F4;
	--imani-slate:      #434F5B;

	/* Translucent borders and overlays read the -rgb triplets via
	   rgba(var(--rehab-*-rgb), .x). Miss one and that surface keeps the
	   previous brand's colour (REH-50). Change each with its hex. */
	--rehab-sage-rgb:           46, 110, 136;
	--rehab-sage-dark-rgb:      46, 110, 136;
	--rehab-sage-text-rgb:      46, 110, 136;
	--rehab-tan-rgb:            126, 173, 193;
	--rehab-warm-charcoal-rgb:  30, 30, 30;
	--rehab-soft-charcoal-rgb:  30, 30, 30;
	--rehab-cream-warm-rgb:     255, 245, 244;

	/* --- Secondary surfaces -------------------------------------------- */
	--rehab-cream-warm:     #FFF5F4;   /* rose-tint */
	--rehab-sage-mist:      #EAF3F7;   /* blue-tint */
	--rehab-sage-mist-2:    #F4F9FB;   /* half-step to blue-tint */
	--rehab-surface-tint:   #EAF3F7;
	--rehab-surface-muted:  #FFF5F4;
	--rehab-divider-warm:   #DCE4EA;

	--rehab-color-accent:     #2E6E88;
	--rehab-color-sage:       #2E6E88;
	--rehab-color-sage-deep:  #1E4B5D;
	--rehab-color-line:       #DCE4EA;
	--rehab-color-ink:        #1E1E1E;
	--rehab-color-ink-soft:   #434F5B;   /* slate, 8.6:1 */

	/* .rehab-bg-dark bands and the footer: the prototype's slate. */
	--rehab-color-dark:       #434F5B;

	/* The parent's gold accent becomes the text-safe rose. --rehab-gold-star
	   stays un-overridden: review stars are yellow for every brand. */
	--rehab-luxury-gold:      #9E5A58;

	/* Article hairlines and muted body text, declared on :root in article.css. */
	--rehab-article-line-sage: rgba(46, 110, 136, 0.30);
	--rehab-article-line-tan:  rgba(126, 173, 193, 0.30);
	--rehab-article-line-soft: rgba(126, 173, 193, 0.15);
	--rehab-article-fg-3:      rgba(30, 30, 30, 0.7);

	/* --- Page Reimagined layer (REH-323) ------------------------------- */
	/* The prototype's CTA bands sit on rose-tint (Lovable --cta-surface). */
	--rehab-surface-warm:     #FFF5F4;
	/* Form-field boundary, 3:1 on white (WCAG 1.4.11); slate-blue to sit with
	   the palette. #7EADC1 would be 2.4:1. */
	--rehab-color-field-line: #7B8F9C;

	/* --- Shape: the prototype's --radius is 0.625rem (10px) ------------- */
	--rehab-radius-sm: 6px;
	--rehab-radius-md: 8px;
	--rehab-radius-lg: 10px;
}

/* Reading copy is Lora, exactly as the prototype's base layer does it
   (styles.css: `p { font-family: var(--font-serif) }`). Headings, buttons,
   navigation and labels stay on Montserrat via --rehab-font-body. */
p {
	font-family: var(--imani-font-reading);
}

/* ---------------------------------------------------------------------------
   Primary buttons: white on teal, as in the prototype (.btn-cta: bg-brand,
   text-primary-foreground). The parent pairs its "sage" fill with charcoal
   text, which suits Diamond's pale sage but measures ~3:1 on #2E6E88.
   White on #2E6E88 is 5.6:1; hover darkens to #1E4B5D (9.3:1).
   Same fix Anker carries in its child theme.
   ------------------------------------------------------------------------- */
.rehab-btn--luxury,
.wp-block-button__link.wp-element-button {
	background-color: var(--imani-cta);
	color: #FFFFFF;
}

.rehab-btn--luxury:hover,
.rehab-btn--luxury:focus-visible,
.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--imani-cta-hover);
	color: #FFFFFF;
}

.rehab-btn--luxury:active,
.wp-block-button__link.wp-element-button:active {
	background-color: var(--imani-cta-active);
}

/* ---------------------------------------------------------------------------
   Footer band is the prototype's slate (Footer.tsx: bg-slate), not the heading
   ink the parent paints it with. The parent colours several footer details
   with --rehab-sage, which is the teal here (1.6:1 on slate), so rebind it to
   a light tone inside the footer rather than chasing each selector (the same
   approach as anker-child).
   ------------------------------------------------------------------------- */
.rehab-site-footer {
	background: var(--imani-slate);
	--rehab-sage: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------------------------
   Article sidebar CTA photo ("Spreek met ons opnameteam").

   article.css hardcodes a Diamond upload
   (/uploads/2025/07/team-and-staff-7-7-2025-768x512.jpg) behind this card,
   under an olive (122,133,106) wash. The file does not exist on Imani — it
   404'd on every article, leaving the white title on a pale olive gradient.
   Same fix as Anker's REH-269: this brand's own photo (the About page's
   hands), washed in the brand teal. The parent hardcode is tracked in REH-323.
   ------------------------------------------------------------------------- */
.rehab-article__cta--photo .rehab-article__cta-media {
	background-image:
		linear-gradient(135deg, rgba(46, 110, 136, 0.55), rgba(46, 110, 136, 0.2) 60%, transparent),
		url("/wp-content/uploads/2020/09/imani-about-hands-768x512.jpg");
}

.rehab-article__cta-media::after {
	background: linear-gradient(to top, rgba(30, 75, 93, 0.75), rgba(30, 75, 93, 0.15) 55%, transparent);
}

/* ---------------------------------------------------------------------------
   Contact-method values may be a long unbreakable string (this brand shows its
   e-mail address, info@imanitreatment.nl). At 360px it set the rail's
   min-content width and pushed the page 39px wide. Let the value wrap and the
   flex body shrink. Brand-neutral block bug — belongs in rehab-blocks' own
   contact-methods/style.scss (REH-323).
   ------------------------------------------------------------------------- */
.rehab-contact-method__body {
	min-width: 0;
}

.rehab-contact-method__value {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   The dark button is the brand teal, not near-black (Anker's REH-284 answer,
   this brand's colours). rehab-blocks' cta-band ships .rehab-btn--dark as
   --rehab-warm-charcoal with a hardcoded #1b1b1b hover — on Imani that is the
   #1E1E1E heading ink, a black slab in every CTA break. The prototype's
   buttons are all teal (Lovable .btn-cta).
   ------------------------------------------------------------------------- */
.rehab-btn--dark {
	background: var(--imani-cta);
	color: #FFFFFF;
}

.rehab-btn--dark:hover,
.rehab-btn--dark:focus-visible {
	background: var(--imani-cta-hover);
	color: #FFFFFF;
}

/* Card descriptions are not truncated (Anker REH-257): the prototype's cards
   show their full copy, and a clamp hid the last line of "Klinische zorg". */
.rehab-card__description {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* "Ook behandeld: …" under the eating-disorder cards sits on the card grid's
   measure, in the sans like the prototype's small print. */
.rehab-page-content > p.imani-also-treated {
	max-width: calc(var(--rehab-container-max) - 3rem);
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Team carousel portraits as in the prototype (TeamGrid.tsx): greyscale at
   rest, a light rose tint on hover (mix-blend "color", 18%). Names and roles
   appear on hover over the dark scrim — the shared layer already does that,
   as on Anker.
   ------------------------------------------------------------------------- */
.rehab-team-grid--carousel .rehab-team-card__photo img {
	filter: grayscale(1) contrast(0.9) brightness(1.06);
}

.rehab-team-grid--carousel .rehab-team-card__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--imani-rose);
	mix-blend-mode: color;
	opacity: 0;
	transition: opacity 220ms ease;
	pointer-events: none;
}

.rehab-team-grid--carousel .rehab-team-card:hover .rehab-team-card__photo::after,
.rehab-team-grid--carousel .rehab-team-card:focus-visible .rehab-team-card__photo::after {
	opacity: 0.18;
}

/* Current / hovered page number: the parent fills it with --rehab-sage and
   keeps the charcoal text (a Diamond pale-sage pairing) — 2.9:1 on this
   brand's teal. White on #2E6E88 is 5.6:1. Search and blog pagination. */
.rehab-search__pagination .page-numbers.current,
.rehab-search__pagination .page-numbers:hover,
.rehab-articles-index__pagination .page-numbers.current,
.rehab-articles-index__pagination .page-numbers:hover {
	background: var(--imani-cta);
	border-color: var(--imani-cta);
	color: #FFFFFF;
}

/* Active team filter chip: the block fills it with --rehab-sage and keeps the
   dark label (Diamond's pale-sage pairing) — 2.9:1 on this brand's teal. */
.rehab-team-grid__filter button.on,
.rehab-team-grid__filter button:hover {
	background: var(--imani-cta);
	border-color: var(--imani-cta);
	color: #FFFFFF;
}

/* Filled buttons inside article prose (the CTA bands on the treatment pages,
   REH-321): `.rehab-article__body a` paints every link teal and outranks the
   button's own white label — teal on teal. */
.rehab-article__body .rehab-btn--dark,
.rehab-article__body .rehab-btn--luxury,
.rehab-article__body .rehab-btn--dark:hover,
.rehab-article__body .rehab-btn--luxury:hover {
	color: #FFFFFF;
}