/* ===========================================================================
   Whitehills Care — brand mark, lockup and colourway
   ---------------------------------------------------------------------------
   Two sources, deliberately. The artwork and the gold come from the press
   advert (brand/whitehills-press-advert-2026-09.png, September 2026). The
   teal, the navy footer and the cream are the website's own and were kept when
   the logo changed, so the advert's darker #013F41 teal is not used here.

   The artwork is outlines traced from that advert and lives in
   whitehills/partials/_brand_mark.html and _brand_lockup.html. Those files
   carry geometry only. Every colour is set here, and the whole lockup flips
   between light and dark backgrounds through three custom properties:
   --brand-ink, --brand-mark-ink and --brand-rule.

   Load after style.css and before header.css.
   =========================================================================== */

:root {
  --brand-teal: #006D77;

  /* Measured off the advert. Darker than the #C9AA71 it replaced, so gold on
     white improved (2.87:1) and gold on the teal went the other way (2.12:1).
     Check small gold on the teal with scripts/check-contrast.py rather than
     assuming. --brand-gold-light is the advert's own lighter gold, used for the
     mark on teal and navy: 3.29:1 on the nav, 6.71:1 on the footer. */
  --brand-gold: #C09041;
  --brand-gold-light: #E0B978;

  --brand-cream: #FCF8EC;
  --brand-navy: #1F3350;

  --brand-ink: var(--brand-teal);        /* wordmark and CARE */
  --brand-mark-ink: var(--brand-teal);   /* hill, trees, swoosh */
  --brand-rule: var(--brand-gold);       /* the two rules flanking CARE */
}

/* --- Artwork ------------------------------------------------------------- */

.brand-art__mark { fill: var(--brand-mark-ink); }
.brand-art__word { fill: var(--brand-ink); }
.brand-art__rule { fill: var(--brand-rule); }

.brand-mark { display: block; flex: 0 0 auto; width: auto; }

/* On teal and on the dark footer. The mark goes gold and the wordmark cream,
   which is the reversed treatment the advert already shows on the uniform. */
.brand-mark--reversed,
.brand-lockup--reversed {
  --brand-ink: #FCFAF2;
  --brand-mark-ink: var(--brand-gold-light);
  --brand-rule: var(--brand-gold-light);
}

/* --- Lockup -------------------------------------------------------------- */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-lockup:hover,
.brand-lockup:focus-visible { text-decoration: none; }

.brand-lockup:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.brand-lockup__art { display: block; width: auto; }

/* --- Small screens ------------------------------------------------------- */
/* The row lockup is 6.3 times as wide as it is tall, so it is the width that
   runs out first. Scaling it down keeps CARE and its rules rather than
   dropping half the lockup, and at 30px the wordmark is still 18px tall. */

@media (max-width: 575.98px) {
  .brand-lockup:not(.brand-lockup--stacked) .brand-lockup__art { height: 34px; }
}

@media (max-width: 400px) {
  .brand-lockup:not(.brand-lockup--stacked) .brand-lockup__art { height: 28px; }
}