/* ===================================================== */
/* site/brand.css — THIS SITE'S BRAND (The World Can Be Yours) */
/* ===================================================== */
/* The only styling that differs between our sites:        */
/* colours and background images. Every site has the same  */
/* variable names here; only the values change.            */
/* Everything else (css/globals.css and all other CSS) is  */
/* shared: it comes from Syndesi's theme (the master).     */
/* On the server this file lives in WCBW's                 */
/* wp-content/site/ and is mounted over the theme's site/  */
/* folder (WCBW's docker-compose.yml).                     */
/* Values taken from WCBW's own css/globals.css and        */
/* css/post_print.css on 2026-09-30.                       */
/* ===================================================== */
:root {
  /* Primary Brand */
  --color-primary: #446344;
  --color-primary-dark: #2C3E2C;

  /* Secondary / Supporting Green */
  --color-secondary: #A3C586;
  --color-secondary-light: #E8ECE7;

  /* Accent / Signature Gold */
  --color-accent: #FFCC33;
  --color-accent-hover: #e6b800;

  /* Highlight / Energy (Orange) — 2026-09-30 (Anthony): burnt orange, was
     #f57c00 (too light for text: 2.7:1 on white; this is 4.8:1). */
  --color-highlight: #B85700;

  /* Text */
  --color-text: #666866;
  --color-text-dark: #333;

  /* Backgrounds & Borders */
  --color-bg-light: #E0E0E0;
  --color-border-light: #e2e2e2;

  /* Links */
  --color-link: #1976d2;
  --color-link-alt: #0275BD;

  /* Admonition / Special */
  --color-admonition-bg: rgba(228, 255, 188, 0.7);
  --color-admonition-border: #B6D7A8;

  /* Tokens used by the shared shortcode / brochure CSS */
  --color-brochure-block-bg: #f3f6fc;
  --color-admonition-surface: #f9f9f9;
  --color-white: #ffffff;
  --color-border: #dddddd;
  --color-border-input: #cccccc;
  --color-primary-hover: #385536;

  --brochure-ink:        var(--color-text-dark);
  --brochure-olive:      var(--color-primary-dark);
  --brochure-olive-dark: #1E2B1E;
  --brochure-orange:     var(--color-highlight);
  --brochure-terracotta: #A8532E;
  --brochure-sage-bg:    #F2F0E8;
  --brochure-cream:      #FBFAF6;
  --brochure-hairline:   #DDD6C8;

  /* More colours used by the shared CSS (same values WCBW's own CSS used) */
  --color-text-muted:   #666;     /* FAQ references list */
  --color-text-soft:    #6B6D65;  /* printed brochure copyright line */
  --color-dark-surface: #1c1c1c;  /* photo slider backdrop */
  --brochure-paper:     #f6f4ee;  /* teaser card "Learn more" bar */
  /* Same colours as R, G, B numbers, for see-through versions:
     rgba(var(--color-shadow-rgb), 0.1) */
  --color-shadow-rgb:   0, 0, 0;        /* shadows and dark overlays */
  --color-white-rgb:    255, 255, 255;  /* see-through white */
  --brochure-cream-rgb: 251, 250, 246;  /* see-through --brochure-cream */
  --color-primary-rgb:   68, 99, 68;    /* = --color-primary; keep in step */
  --color-highlight-rgb: 184, 87, 0;    /* = --color-highlight; keep in step */

  /* ---- Background images ---- */
  /* Printed / PDF brochure page background (post_print.css #brochure-background).
     post-print.php reads this line to check whether the image is landscape.
     Site-relative: the file must be in this site's uploads. */
  --brochure-bg-image: url('/wp-content/uploads/brand-kit/wcbw-brochure-background.png');

  /* ---- Photo tone (2026-09-30, per Anthony) ---- */
  /* Teaser card photos (web + brochure) get a light peach tone, matching the
     peach wash of the brochure background (#F0D2A9), so every card looks
     like one set. A filter (the photo's own colours are shifted), not an
     overlay. 'none' = photos as they are. */
  --card-photo-filter: sepia(0.3) saturate(0.9) brightness(1.03);
}

/* Legal-page intro paragraph (2026-10-01, Anthony): the burnt orange
   (--color-highlight #B85700) 20% lighter = #C67933 (80% highlight + 20% white),
   instead of the light --color-secondary that [post_section_standalone] text
   uses. More specific than the shared rule, so it wins whatever the load order. */
.legal-policy .legal-intro > .section-content .paragraph {
  color: color-mix(in srgb, var(--color-highlight) 80%, #ffffff) !important;
}