/* ==========================================================================
   BCR Stays — brand correction layer
   Conforms to BCR Brand Identity Guidelines v3.0 Final, July 2026
   Generated 30 July 2026

   HOW TO USE — this matters:

   Add this ONE line to each page, immediately before </head>, i.e. AFTER
   the page's existing inline <style> block:

       <link rel="stylesheet" href="/css/bcr-brand.css">

   Placement is deliberate. Your pages define their colour tokens in an inline
   <style>, and inline styles later in the document win over earlier ones at
   equal specificity. Loading this file last lets it redefine those tokens
   without you editing a single line of the existing CSS. Every var() reference
   in your pages then picks up the corrected value automatically.

   WHAT THIS FILE FIXES ON ITS OWN (no HTML edits needed):
     - All tokenised colours -> exact v3.0 Final palette values (p10, p11)
     - The three retired colours, remapped to sanctioned equivalents (p11)
     - Deep Navy no longer used as body text (p11)
     - Cormorant Garamond / Dancing Script -> Playfair Display + Inter (p14)
     - Body measure, line spacing and left-alignment (p15)
     - Functional colours and form validation states (p13)
     - Logo minimum size (p08)

   WHAT STILL NEEDS HTML EDITS:
     - The Playfair Display font <link>          -> see README, step 2
     - Heading and label casing                  -> see FIND-REPLACE.md
     - Canonicals, meta descriptions, OG tags    -> see HEAD-SNIPPETS.html
     - Hardcoded (non-token) hex values          -> see FIND-REPLACE.md
     - Copyright year, group slogan, hero full stop
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BRAND PALETTE — p10
   Navy, gold and cream. The working palette for everything we make.
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand palette (p10) --- */
  --navy:         #1A2639;  /* was #162344 — Brand Navy */
  --gold:         #B8975A;  /* was #C4973F — Brand Gold. Accent, not a fill */
  --cream:        #F8F5F0;  /* already correct */

  /* --- Neutrals & tints (p11) --- */
  --deep-navy:    #0C1A35;  /* hero + Luxe Black + covers ONLY */
  --gold-light:   #D4B07A;  /* was #DBB96A */
  --gold-pale:    #F5EAD6;  /* already correct */
  --border:       #E5DDD5;  /* Warm Border — was rgba(12,26,53,.1) */
  --text-mid:     #4A5568;  /* already correct */
  --text-light:   #8A9AB5;  /* already correct */

  /* Body text is Brand Navy, NOT Deep Navy.
     p11: "Do not use it as a general body-text colour; Brand Navy is
     easier to read at small sizes." */
  --text-dark:    #1A2639;  /* was #0C1A35 */

  /* --- Functional colours (p13) — status and data only --- */
  --error:        #C13030;
  --success:      #639922;
  --warning:      #BA7517;

  /* --- Typography (p14) --- */
  --serif:        'Playfair Display', Georgia, serif;
  --sans:         'Inter', Arial, sans-serif;
}


/* --------------------------------------------------------------------------
   2. RETIRED COLOURS — remapped rather than deleted
   p11 retires the two near-blacks and the bright gold by name, and identifies
   the Stays site as where they came from. Rather than making you hunt them
   down in the CSS, these tokens are remapped to their sanctioned equivalents.
   Existing var(--obsidian) etc. calls keep working and become compliant.
   -------------------------------------------------------------------------- */

:root {
  --obsidian:     #0C1A35;  /* was #06090F — RETIRED near-black -> Deep Navy */
  --ink:          #0C1A35;  /* was #080D1A — RETIRED near-black -> Deep Navy */
  --gold-bright:  #D4B07A;  /* was #F0C56A — RETIRED bright gold -> Gold Light */
  --navy-light:   #2A3B5C;  /* was #1E3060 — off-palette -> Brand Navy tint */
  --navy-mid:     #1A2639;  /* was #162344 -> Brand Navy */
  --cream-bg:     #F8F5F0;  /* was #FAF8F4 — duplicate cream -> Cream */

  /* Glass and glow: p11 permits these as website styling but NOT as brand
     assets. Left functional here; do not carry them into decks or print. */
}

/* The Planit partner colour stays, but only inside the partner lockup.
   p12: the bright logo orange is never a layout colour — and #F5A21C is
   two digits off BCR Property's logo orange, so it must not read as a
   BCR accent. Scope it tightly. */
.planit-lockup,
.planit-lockup * {
  --planit: #F5A21C;
}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY — p14, p15
   Playfair Display for headings. Inter for everything else.
   Montserrat and Cormorant Garamond are both retired; Dancing Script is
   removed because p14 forbids recreating the logotypes by typing, and the
   BCR Stays logo IS a script.

   These selectors override hardcoded font-family declarations in your
   inline CSS, which is why they name elements rather than only tokens.
   -------------------------------------------------------------------------- */

html,
body {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;               /* p15: line spacing 1.5x */
  text-align: left;               /* p15: never justify */
  color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3,
.hero-title, .section-title, .offer-title,
.coll-title, .stay-title, .exp-title,
.footer-brand .logo-sub,
.stat-value, .exp-stat .num, .offer-num {
  font-family: var(--serif);
}

h1, .h1, .hero-title { font-weight: 700; }   /* Playfair Bold 24pt */
h2, .h2               { font-weight: 700; }   /* Playfair Bold 17pt */

/* H3 is the caps style — Inter SemiBold, not Playfair. p15. */
h3, .h3 {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Quote — Playfair Italic 14pt. p15. This is the sanctioned expressive
   style, and the correct replacement for anything that was Dancing Script. */
blockquote,
.quote,
.testi-quote,
.script,
.accent-script {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;      /* undo any uppercase inherited from .script */
  letter-spacing: normal;
}

/* Subtitle — Inter Medium. Caption — Inter Regular, smaller. p15. */
.subtitle, .lede, .section-sub { font-family: var(--sans); font-weight: 500; }
.caption, figcaption, .meta, .fine-print,
.offer-terms, .stat-label, .exp-stat .lbl {
  font-family: var(--sans);
  font-weight: 400;
}

/* Tag — Inter Bold, all caps. p15. */
.tag, .badge, .coll-tag, .stay-tag, .luxe-badge, .luxe-perk, .chip, .pill {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
}

/* Menu — the existing uppercase treatment is correct and is left alone,
   but the family is pinned to Inter. */
.nav-links a, .nav-drawer a { font-family: var(--sans); }


/* --------------------------------------------------------------------------
   4. BODY SETTING — p15
   "Left-align body copy — never justify. Line length 60–75 characters.
    Line spacing 1.5x. One blank line between paragraphs, no first-line
    indents."

   Measure is capped at 75ch on running text only. Deliberately NOT applied
   to headings, cards, tables or grid children, which would break layout.
   -------------------------------------------------------------------------- */

p,
li,
.rich-text,
.faq-answer,
.policy-body {
  max-width: 75ch;
  text-indent: 0;
}

/* Centred body blocks keep their centring while gaining the measure cap */
.text-center p,
.section-head p,
[style*="text-align:center"] p,
[style*="text-align: center"] p {
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed contexts opt out of the measure cap */
.hero p,
.card p,
.coll-card p,
.stay-card p,
.offer-card p,
.testi-card p,
td p, th p,
.footer-col p,
.footer-col li {
  max-width: none;
}

/* Body copy colour on navy grounds — p15: "white or Text Light on navy" */
.on-navy, .on-navy p,
.hero p,
.footer p, .footer li,
.book-section p {
  color: var(--text-light);
}


/* --------------------------------------------------------------------------
   5. FUNCTIONAL COLOURS AND FORM VALIDATION — p13
   The contact form currently has no defined error state, so a mistyped
   email gets browser-default styling.

   p13: "Always pair them with a label or icon so the meaning survives in
   mono print and for colour-blind readers." Colour alone is not sufficient
   here, and is also a WCAG failure — hence the ::before marker and the
   visible message, not just a red border.
   -------------------------------------------------------------------------- */

.form-group input:user-invalid,
.form-group textarea:user-invalid,
.form-group select:user-invalid,
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
.form-group.is-error input,
.form-group.is-error textarea,
.form-group.is-error select {
  border-color: var(--error);
  outline-color: var(--error);
}

.form-error,
.form-group .error-message {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  color: var(--error);
}

/* Icon marker so the error reads without colour */
.form-error::before,
.form-group .error-message::before {
  content: "⚠ ";
  font-weight: 700;
}

.form-success {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  color: var(--success);
}

.form-success::before { content: "✓ "; font-weight: 700; }

.form-warning {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  color: var(--warning);
}

.form-warning::before { content: "! "; font-weight: 700; }

/* Visible keyboard focus — not in the guidelines, but the gold accent is
   the natural focus colour and the site currently relies on browser default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   6. LOGO MINIMUM SIZE — p08
   "BCR Stays logo — 30 mm print / 110 px screen. Pin mark alone — 25 px."
   Clear space of 0.3 x logo height is also required; the padding below is a
   floor, not a substitute for checking it at each breakpoint.
   -------------------------------------------------------------------------- */

.logo img,
.nav-logo img,
.footer-brand img,
img[src*="bcr-stays-logo"],
img[alt="BCR Stays"] {
  /* No min-width floor: these logos set a fixed height + width:auto inline, so a
     min-width was stretching them past their aspect ratio (horizontal squash). */
  min-width: 0;
}

.logo,
.nav-logo,
.footer-brand > a:first-child {
  padding: 0.3em;   /* floor for the 0.3 x height clear-space rule */
}

/* Favicon / avatar use of the pin alone */
img[src*="bcr-pin"] { min-width: 25px; height: auto; }


/* --------------------------------------------------------------------------
   7. GOLD BUDGET — p10
   "Gold is an accent, not a fill... no more than about 10% of any layout."
   Large gold surfaces are demoted to Gold Pale so true gold stays with
   rules, numerals and calls to action. Remove any rule below that you
   disagree with after eyeballing the page — this is a judgement call, not
   a measurement.
   -------------------------------------------------------------------------- */

.section-label,
.offer-eyebrow {
  color: var(--gold);      /* small caps labels — legitimate accent use */
}

/* The hero eyebrow sits over a bright photographic sky — muted gold with no
   shadow was unreadable there. Restore the original near-white + add a shadow
   so it reads on any part of the hero image. */
.hero-eyebrow {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.45);
}

/* Decorative fills move to the pale tint */
.ticker,
.offer-code,
.callout,
.panel-gold {
  background: var(--gold-pale);
  color: var(--text-dark);
}


/* --------------------------------------------------------------------------
   8. PRINT
   p11: the near-blacks "print muddy against navy". Since they are remapped
   above, print inherits the correction. Cream backgrounds are dropped to
   white to save ink.
   -------------------------------------------------------------------------- */

@media print {
  body { background: #FFFFFF; color: var(--text-dark); }
  .hero, .book-section, .footer { background: #FFFFFF !important; color: var(--text-dark) !important; }
  a { color: var(--text-dark); text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: var(--text-mid); }
  .nav, .nav-drawer, .ticker, .hero-scroll-indicator { display: none !important; }
}