/* ============================================================
   Perennial Property Group — Static Site CSS
   Extracted from captured rendered DOM 2026-05-09
   @font-face blocks replaced with Google Fonts CDN import
   Brand foundations preserved verbatim from brand-system v1.2
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&display=swap");

/* ============================================================
   Perennial Property Group — Brand Foundations
   Colors & Typography (v1.2)
   ------------------------------------------------------------
   60/30/10 ratio is law: 60% white, 30% black, 10% gold.
   Single-font system: Verajja Serif (Roboto Slab fallback).
   ============================================================ */

:root {
  /* ── BRAND CORE ─────────────────────────────── */
  --ppg-black: #000000;
  --ppg-white: #FFFFFF;
  --ppg-gold:  #D3AF2D;
  --ppg-gold-hover: #BC9C20;

  /* ── NEUTRALS (use sparingly — never replace black) ── */
  --ppg-ink:        #0A0A0A;        /* near-black for body text on white */
  --ppg-graphite:   #2A2A2A;        /* secondary text, dark surfaces */
  --ppg-charcoal:   #1A1A1A;        /* premium dark surface alt */
  --ppg-stone-900:  #1F1F1F;
  --ppg-stone-700:  #4A4A4A;        /* muted body */
  --ppg-stone-500:  #7A7A7A;        /* captions, meta */
  --ppg-stone-300:  #C9C9C9;        /* hairline dividers */
  --ppg-stone-200:  #E5E5E0;        /* card surfaces on white */
  --ppg-stone-100:  #F4F2EC;        /* warm off-white surface */
  --ppg-cream:      #FAF8F2;        /* premium off-white background */

  /* ── GOLD TINTS (for backgrounds only, NEVER text) ── */
  --ppg-gold-tint:  rgba(211, 175, 45, 0.10);
  --ppg-gold-rule:  rgba(211, 175, 45, 0.35);

  /* ── SEMANTIC FOREGROUND ─────────────────────── */
  --fg-primary:    var(--ppg-ink);
  --fg-secondary:  var(--ppg-stone-700);
  --fg-muted:      var(--ppg-stone-500);
  --fg-inverse:    var(--ppg-white);
  --fg-accent:     var(--ppg-gold);

  /* ── SEMANTIC BACKGROUND ─────────────────────── */
  --bg-page:       var(--ppg-white);
  --bg-cream:      var(--ppg-cream);
  --bg-surface:    var(--ppg-stone-100);
  --bg-dark:       var(--ppg-black);
  --bg-dark-soft:  var(--ppg-charcoal);

  /* ── BORDERS / RULES ─────────────────────────── */
  --rule-hairline: var(--ppg-stone-300);
  --rule-strong:   var(--ppg-black);
  --rule-gold:     var(--ppg-gold);
  --rule-gold-soft: var(--ppg-gold-rule);

  /* ── TYPOGRAPHY: family ─────────────────────── */
  /* Verajja Serif loads first when licensed; Roboto Slab is the active fallback today. */
  --font-serif: 'Verajja Serif', 'Roboto Slab', Georgia, 'Times New Roman', serif;

  /* ── TYPE SCALE (1.250 modular, anchored at 16px) ── */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   60px;
  --text-6xl:   76px;

  /* ── LINE HEIGHT ─────────────────────────────── */
  --lh-tight:   1.10;   /* H1, display */
  --lh-snug:    1.20;   /* H2, H3 */
  --lh-normal:  1.35;   /* H4, subhead */
  --lh-body:    1.70;   /* MANDATED for body slab serif */
  --lh-loose:   1.85;   /* long-form body */

  /* ── LETTER SPACING ──────────────────────────── */
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;   /* uppercase eyebrow labels */

  /* ── WEIGHT ──────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── SPACING (8pt grid) ──────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── RADIUS (restrained — premium = sharp) ──── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;       /* max for cards; never go softer */
  --radius-pill: 999px;     /* for badges/pills only */

  /* ── BORDER WEIGHTS ──────────────────────────── */
  --border-hairline: 1px;
  --border-strong:   2px;
  --border-heavy:    3px;

  /* ── SHADOWS (use rarely — premium = flat) ──── */
  --shadow-none:  none;
  --shadow-card:  0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lift:  0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.20);
  /* NO gold shadows. NO drop shadows on the gold mark. */

  /* ── MOTION ──────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0, 1.05);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ── LAYOUT ──────────────────────────────────── */
  --max-prose:    640px;
  --max-content:  1080px;
  --max-page:     1280px;

  /* ── CLEAR-SPACE TOKEN (logo) ────────────────── */
  --logo-clear:   1em;  /* equal to triangle mark height */
}

/* ============================================================
   BASE RESETS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */

/* Display — only for hero headlines */
.t-display, h1.display {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: clamp(48px, 6vw, var(--text-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5) 0;
  text-wrap: balance;
}

h1, .t-h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: clamp(38px, 4.5vw, var(--text-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5) 0;
  text-wrap: balance;
}

h2, .t-h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: clamp(30px, 3.2vw, var(--text-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}

h3, .t-h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3) 0;
}

h4, .t-h4 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-3) 0;
}

p, .t-body {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4) 0;
  max-width: var(--max-prose);
}

.t-lead {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}

.t-caption, small {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-eyebrow {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Italic — RESERVED for tagline + pull-quotes ONLY */
.t-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
}

.t-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  border-left: 3px solid var(--ppg-gold);
  padding-left: var(--space-5);
  max-width: var(--max-prose);
}

/* Numerical pop — for "24 hours", "7 days".
   Restrained emphasis: bold + italic in body color. NO gold pill — that competes
   with the single gold accent each layout earns. */
.t-pop {
  font-weight: var(--weight-bold);
  font-style: italic;
  color: inherit;
  white-space: nowrap;
}

/* Inverse: ONLY on dark surfaces (CTA bands, footer) where body color is light
   and gold gives legibility. Plain gold text, no box. */
.t-pop--inverse {
  color: var(--ppg-gold);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* Links */
a {
  color: var(--ppg-black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--ppg-gold-hover); }

/* Selection */
::selection { background: var(--ppg-gold); color: var(--ppg-black); }




/* HOVER STATES — restored from React Button component logic */
/* Reads from JSX Brand.jsx Button component:
   primary (gold): hover bg = #BC9C20 (PPG_GOLD_HOVER)
   secondary (black border): hover bg = #000, hover color = #fff
   outline-light (white border): hover bg = #fff, hover color = #000  */

/* Primary gold buttons — darker gold on hover */
a[role="button"][style*="background: rgb(211, 175, 45)"]:hover,
button[type="submit"][style*="background: rgb(211, 175, 45)"]:hover,
a[style*="background: rgb(211, 175, 45)"][style*="padding: 8px 12px"]:hover {
  background: rgb(188, 156, 32) !important;
}

/* Secondary black-bordered transparent buttons — flip to solid black on hover */
a[role="button"][style*="border: 2px solid rgb(0, 0, 0)"]:hover {
  background: rgb(0, 0, 0) !important;
  color: rgb(255, 255, 255) !important;
}

/* Outline-light white-bordered buttons (on black sections) — flip to solid white on hover */
a[role="button"][style*="border: 2px solid rgb(255, 255, 255)"]:hover {
  background: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
}

/* Nav text links — gold underline on hover */
nav a[style*="color: rgb(0, 0, 0)"]:hover {
  color: rgb(211, 175, 45) !important;
}

/* Footer links — gold on hover */
footer a:hover {
  color: rgb(211, 175, 45) !important;
  opacity: 1 !important;
}

/* FAQ buttons — subtle background tint on hover */
#faq button:hover {
  background: rgba(211, 175, 45, 0.04) !important;
}


/* DESKTOP / MOBILE VERSION SWAP — dual-rendering hybrid */
/* Default: show desktop version, hide mobile */
.desktop-version { display: block; }
.mobile-version  { display: none; }

/* At <=768px viewport: swap to mobile version */
@media (max-width: 768px) {
  .desktop-version { display: none; }
  .mobile-version  { display: block; }
}


/* PHONE-LINK HOVER STATES — contact page tel: text links */
/* All tel: text-links (NOT styled as buttons) get gold color on hover.
   This catches the (825) 963-CASH in the Phone section and the
   (825) 963-2274 in the "Scheduling by appointment only" section. */
a[href^="tel:"]:not([role="button"]):hover {
  color: rgb(211, 175, 45) !important;
}

/* For the underlined (825) 963-2274 link — thicken the gold underline on hover for extra emphasis */
a[href^="tel:"][style*="border-bottom: 2px solid rgb(211, 175, 45)"]:hover {
  border-bottom-color: rgb(188, 156, 32) !important;
  border-bottom-width: 3px !important;
}

/* Email tel: equivalent — info@perennialpropertygroup.ca link in contact section also gets gold on hover */
a[href^="mailto:"]:not([role="button"]):hover {
  color: rgb(211, 175, 45) !important;
}