/* ============================================================
   CASA NOVA — GLOBAL BRAND DESIGN SYSTEM & STYLESHEET
   ------------------------------------------------------------
   Centralized source for:
     1. Brand Fonts (@font-face "Vintage Goods", Google Fonts)
     2. Global Design Tokens & Unified Fluid Typography Scale
     3. Global Typography & 3-Tier Text Hierarchy (.cn-lead, p, small)
     4. Global Button System (.cn-btn, .cnc-btn, .cnh-btn, .wpcf7-submit)
     5. Shared Container & Section Helpers (.cn-container, .cnc-container)
     6. Shared Locations Section ("Five Homes, One Family")
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap');

/* ============================================================
   1. BRAND FONTS
   ============================================================ */
@font-face {
  font-family: "Vintage Goods";
  src: url("../fonts/VintageGoods-Regular.woff2") format("woff2"),
    url("../fonts/VintageGoods-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. GLOBAL DESIGN TOKENS & TYPOGRAPHY SCALE
   ============================================================ */
:root {
  /* ---- Official Brand Colours ---- */
  --cn-accent: #C74C05;
  /* Primary Terracotta / Burnt Orange */
  --cn-accent-deep: #A63F04;
  /* Hover / Active State */
  --cn-secondary: #F9CEB3;
  /* Soft Peach Accent */
  --cn-peach-soft: #FBE7D8;
  /* Soft Peach Tint for Badges/Fills */
  --cn-ink: #2D2D2D;
  /* Dark Brand Ink / Headings */
  --cn-ink-soft: #5B5B53;
  /* Secondary / Paragraph Body Text */
  --cn-text: #5B5B53;
  /* Standard Body Text */
  --cn-muted: #9C968C;
  /* Muted / Caption Text */
  --cn-line: #E6DDCF;
  /* Warm Hairline Border */
  --cn-surface: #F3ECE2;
  /* Warm Surface Background */
  --cn-bg: #FAF6F0;
  /* Warm Cream Page Background */
  --cn-white: #FFFFFF;
  --cn-gold: #A98A4B;
  /* Club Luxury Gold */
  --cn-gold-light: #C4A86A;
  --cn-dark-section: #2c3819;
  /* Deep Italian Olive backdrop for dark sections */

  /* ---- Typography Font Families ---- */
  --cn-font-head: "Bebas Neue", sans-serif;
  --cn-font-display: "Bebas Neue", sans-serif;
  --cn-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cn-font-script: "Vintage Goods", "Brush Script MT", cursive;

  /* ---- Unified Fluid Typography Scale (Identical Across All Templates) ---- */
  --cn-fs-hero: clamp(2.8rem, 6.5vw, 5rem);
  --cn-fs-h1: clamp(2.2rem, 4.5vw, 3.6rem);
  --cn-fs-h2: clamp(1.8rem, 3.6vw, 2.7rem);
  --cn-fs-h3: clamp(1.25rem, 2.2vw, 1.5rem);
  --cn-fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);
  --cn-fs-body: 1rem;
  --cn-fs-small: 0.85rem;
  --cn-fs-eyebrow: clamp(1.35rem, 2.4vw, 28px);

  /* ---- Scale & Rhythm ---- */
  --cn-max: 1200px;
  --cn-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --cn-section-pad: clamp(4rem, 8vw, 7.5rem);

  /* ---- Explicit Border Radii Rules ---- */
  --cn-radius-btn: 3px;
  /* All buttons strictly 3px */
  --cn-radius-box: 10px;
  /* All content cards/boxes strictly 10px */
  --cn-radius-pill: 999px;

  /* ---- Motion & Shadows ---- */
  --cn-shadow-sm: 0 6px 18px rgba(45, 45, 45, 0.05);
  --cn-shadow-md: 0 18px 46px rgba(45, 45, 45, 0.10);
  --cn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cn-t-fast: 0.25s;

  /* ---- Backward-compatible Aliases (for .cnc-) ---- */
  --cnc-accent: var(--cn-accent);
  --cnc-accent-deep: var(--cn-accent-deep);
  --cnc-secondary: var(--cn-secondary);
  --cnc-peach-soft: var(--cn-peach-soft);
  --cnc-ink: var(--cn-ink);
  --cnc-ink-soft: var(--cn-ink-soft);
  --cnc-text: var(--cn-ink-soft);
  --cnc-muted: var(--cn-muted);
  --cnc-line: var(--cn-line);
  --cnc-surface: var(--cn-surface);
  --cnc-bg: var(--cn-bg);
  --cnc-white: var(--cn-white);
  --cnc-gold: var(--cn-gold);
  --cnc-gold-light: var(--cn-gold-light);
  --cnc-font-display: var(--cn-font-display);
  --cnc-font-body: var(--cn-font-body);
  --cnc-font-script: var(--cn-font-script);
  --cnc-fs-hero: var(--cn-fs-hero);
  --cnc-fs-h1: var(--cn-fs-h1);
  --cnc-fs-h2: var(--cn-fs-h2);
  --cnc-fs-h3: var(--cn-fs-h3);
  --cnc-fs-lead: var(--cn-fs-lead);
  --cnc-fs-body: var(--cn-fs-body);
  --cnc-fs-small: var(--cn-fs-small);
  --cnc-fs-eyebrow: var(--cn-fs-eyebrow);
  --cnc-max: var(--cn-max);
  --cnc-gutter: var(--cn-gutter);
  --cnc-section-pad: var(--cn-section-pad);
  --cnc-radius-btn: var(--cn-radius-btn);
  --cnc-radius-box: var(--cn-radius-box);
  --cnc-radius: var(--cn-radius-box);
  --cnc-ease: var(--cn-ease);
}

/* ============================================================
   3. GLOBAL TYPOGRAPHY & 3-TIER TEXT HIERARCHY
   ============================================================ */

/* ---- Eyebrows (Vintage Goods 28px Script) ---- */
.cn-eyebrow,
.cnc-eyebrow,
.cnh-hero__eyebrow,
.section-head__eyebrow,
.cn-homes__eyebrow,
.cnc-homes__eyebrow,
.cn-vhero__eyebrow {
  display: inline-block;
  font-family: var(--cn-font-script, "Vintage Goods", cursive);
  font-size: var(--cn-fs-eyebrow, clamp(1.35rem, 2.4vw, 28px));
  line-height: 1.25;
  color: var(--cn-accent, #C74C05);
  margin-bottom: 0.5rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Eyebrows on Dark Sections */
.cnc-hero .cnc-hero__eyebrow,
.cnc-join .cnc-eyebrow,
.cn-perks .cn-eyebrow,
.cn-apply .cn-eyebrow,
.cn-vhero .cn-vhero__eyebrow {
  color: var(--cn-secondary, #F9CEB3) !important;
}

.cnh-hero .cnh-hero__eyebrow {
  color: #ffffff !important;
}

.cn-eyebrow--plain {
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cn-accent, #C74C05);
  margin-bottom: 0.75rem;
}

.cn-perk__no,
.cnc-reward__occasion {
  display: block;
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cn-accent, #C74C05);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.cn-perks .cn-perk__no {
  color: var(--cn-secondary, #F9CEB3);
}

/* ---- Headings (Bebas Neue Display) ---- */
.cn-hero__title,
.cnc-hero__title,
.cnh-hero__title,
.cn-vhero__title {
  font-family: var(--cn-font-head, "Bebas Neue", sans-serif);
  font-size: var(--cn-fs-hero, clamp(2.8rem, 6.5vw, 5rem));
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #ffffff !important;
}

.cn-hero__title em,
.cnc-hero__title em,
.cnh-hero__title em,
.cn-vhero__title em {
  font-style: normal;
  color: var(--cn-secondary, #F9CEB3) !important;
}

.cn-h1,
.cnc-h1 {
  font-family: var(--cn-font-head, "Bebas Neue", sans-serif);
  font-size: var(--cn-fs-h1, clamp(2.2rem, 4.5vw, 3.6rem));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--cn-ink, #2D2D2D);
}

.cn-h2,
.cnc-h2,
.cn-title,
.section-head__title {
  font-family: var(--cn-font-head, "Bebas Neue", sans-serif);
  font-size: var(--cn-fs-h2, clamp(1.8rem, 3.6vw, 2.7rem));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--cn-ink, #2D2D2D);
}

.cn-h3,
.cnc-h3,
.cnc-reward__title,
.cn-terms__title,
.promo-card__title {
  font-family: var(--cn-font-head, "Bebas Neue", sans-serif);
  font-size: var(--cn-fs-h3, clamp(1.25rem, 2.2vw, 1.5rem));
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--cn-ink, #2D2D2D);
}

.cn-h1 em,
.cn-h2 em,
.cn-h3 em,
.cnc-h1 em,
.cnc-h2 em,
.cnc-h3 em,
.cn-title em,
.section-head__title em {
  font-style: normal;
  color: #F76A0C;
}

/* ---- Tier 1: Lead Subheads (.cn-lead) ---- */
.cn-lead,
.cnc-lead,
.cnc-hero__lede,
.section-head__lede,
.cn-report-sub,
.cn-vhero__sub,
.cn-feedback__lede {
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: var(--cn-fs-lead, clamp(1.05rem, 1.4vw, 1.2rem));
  line-height: 1.6;
  color: var(--cn-ink-soft, #5B5B53);
}

/* ---- Tier 2: Standard Body Paragraphs (p) ---- */
.cn-careers p:not(.cn-eyebrow):not(.cn-homes__eyebrow),
.cnc-page p:not(.cnc-eyebrow):not(.cnc-homes__eyebrow),
.menu-page-main p:not(.cn-eyebrow),
.whatson p:not(.section-head__eyebrow),
.cn-feedback p:not(.cn-eyebrow),
.cn-main p:not(.cn-eyebrow) {
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: var(--cn-fs-body, 1rem);
  line-height: 1.65;
  color: var(--cn-ink-soft, #5B5B53);
}

/* Paragraphs & Subheads on Dark Sections / Heroes must ALWAYS be White */
.cn-perks p,
.cn-perk p,
.cn-apply p,
.cn-apply__intro p,
.cnc-hero p,
.cnc-hero__lede,
.cnc-join p,
.cnc-join__intro p,
.cnh-hero p,
.cnh-hero .cnh-hero__lede,
.cn-vhero p,
.cn-vhero__sub,
.cn-careers .cnh-hero p,
.menu-page-main .cnh-hero p,
.whatson .cnh-hero p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ---- Tier 3: Small / Fineprint / Captions (small, figcaption) ---- */
small,
.cn-fineprint,
.cnc-fineprint,
.cn-meta,
.cnc-reward__terms,
.cn-apply__fineprint,
.cn-notice-small,
figcaption {
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: var(--cn-fs-small, 0.85rem);
  line-height: 1.5;
  color: var(--cn-muted, #9C968C);
}

/* ============================================================
   4. GLOBAL CONTAINERS & SECTION PRIMITIVES
   ============================================================ */
.cn-container,
.cnc-container {
  width: min(var(--cn-max, 1200px), calc(100% - (clamp(1.25rem, 4vw, 2.5rem) * 2)));
  max-width: var(--cn-max, 1200px);
  margin-inline: auto;
  box-sizing: border-box;
}

.cn-section,
.cnc-section {
  padding-block: clamp(4rem, 8vw, 7.5rem);
  box-sizing: border-box;
}

/* ============================================================
   5. GLOBAL BUTTON SYSTEM (Strict 3px Radius Standard)
   ============================================================ */
.cn-btn,
.cnc-btn,
.cnh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border-radius: var(--cn-radius-btn, 3px);
  /* 3px */
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  transition: background var(--cn-t-fast, 0.25s) var(--cn-ease),
    color var(--cn-t-fast, 0.25s) var(--cn-ease),
    border-color var(--cn-t-fast, 0.25s) var(--cn-ease),
    transform var(--cn-t-fast, 0.25s) var(--cn-ease),
    box-shadow var(--cn-t-fast, 0.25s) var(--cn-ease);
}

.cn-btn:hover,
.cnc-btn:hover,
.cnh-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.cn-btn:active,
.cnc-btn:active,
.cnh-btn:active {
  transform: translateY(0);
}

/* Solid Terracotta Button */
.cn-btn--solid,
.cnc-btn--solid {
  background: var(--cn-accent, #C74C05);
  color: #ffffff !important;
  border-color: var(--cn-accent, #C74C05);
  box-shadow: var(--cn-shadow-sm, 0 6px 18px rgba(45, 45, 45, 0.05));
}

.cn-btn--solid:hover,
.cnc-btn--solid:hover {
  background: var(--cn-accent-deep, #A63F04);
  border-color: var(--cn-accent-deep, #A63F04);
  color: #ffffff !important;
  box-shadow: var(--cn-shadow-md, 0 18px 46px rgba(45, 45, 45, 0.10));
}

/* Ghost / Transparent Button (White border for dark heroes) */
.cn-btn--ghost,
.cnc-btn--ghost,
.cnh-btn--ghost {
  background: transparent;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.85);
}

.cn-btn--ghost:hover,
.cnc-btn--ghost:hover,
.cnh-btn--ghost:hover {
  background: #ffffff;
  color: var(--cn-accent, #C74C05) !important;
  border-color: #ffffff;
}

/* Outline Button (Terracotta border for light surfaces) */
.cn-btn--outline,
.cnc-btn--outline {
  background: transparent;
  color: var(--cn-accent, #C74C05);
  border-color: var(--cn-accent, #C74C05);
}

.cn-btn--outline:hover,
.cnc-btn--outline:hover {
  background: var(--cn-accent, #C74C05);
  color: #ffffff !important;
  border-color: var(--cn-accent, #C74C05);
}

/* Light / White Button */
.cn-btn--light,
.cnc-btn--light {
  background: #ffffff;
  color: var(--cn-accent, #C74C05);
  border-color: #ffffff;
}

.cn-btn--light:hover,
.cnc-btn--light:hover {
  background: var(--cn-peach-soft, #FBE7D8);
  border-color: var(--cn-peach-soft, #FBE7D8);
  color: var(--cn-accent-deep, #A63F04);
}

/* Form Submit Buttons */
.wpcf7-submit,
.cn-form__submit,
.cnc-form__submit,
input[type="submit"].cn-form__submit,
input[type="submit"].cnc-form__submit,
.cnc-page input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border-radius: var(--cn-radius-btn, 3px);
  /* 3px */
  border: 2px solid var(--cn-accent, #C74C05);
  background: var(--cn-accent, #C74C05);
  color: #ffffff !important;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  box-shadow: var(--cn-shadow-sm, 0 6px 18px rgba(45, 45, 45, 0.05));
  transition: background var(--cn-t-fast, 0.25s) var(--cn-ease),
    color var(--cn-t-fast, 0.25s) var(--cn-ease),
    border-color var(--cn-t-fast, 0.25s) var(--cn-ease),
    transform var(--cn-t-fast, 0.25s) var(--cn-ease),
    box-shadow var(--cn-t-fast, 0.25s) var(--cn-ease);
}

.wpcf7-submit:hover,
.cn-form__submit:hover,
.cnc-form__submit:hover,
input[type="submit"].cn-form__submit:hover,
input[type="submit"].cnc-form__submit:hover,
.cnc-page input[type="submit"]:hover {
  background: var(--cn-accent-deep, #A63F04);
  border-color: var(--cn-accent-deep, #A63F04);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--cn-shadow-md, 0 18px 46px rgba(45, 45, 45, 0.10));
}

/* ============================================================
   6. SHARED LOCATION SECTION ("Five Homes, One Family")
   ============================================================ */
.cn-homes,
.cnc-homes {
  background: var(--cn-secondary, #F9CEB3);
  padding-block: clamp(3.5rem, 8vw, 120px);
}

.cn-homes__head,
.cnc-homes__head {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.cn-homes__eyebrow,
.cnc-homes__eyebrow {
  margin: 0;
  font-family: var(--cn-font-script, "Vintage Goods", cursive);
  font-size: var(--cn-fs-eyebrow, clamp(1.35rem, 2.4vw, 28px));
  font-weight: 400;
  line-height: 1.5;
  color: var(--cn-accent, #C74C05);
  text-transform: none;
  letter-spacing: normal;
}

.cn-homes__title,
.cnc-homes__title {
  margin: 0;
  font-family: var(--cn-font-head, "Bebas Neue", sans-serif);
  font-size: clamp(2rem, 4vw, 42px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--cn-ink, #2D2D2D);
}

.cn-homes__title mark,
.cnc-homes__title mark {
  background: none;
  color: #F76A0C;
}

/* Five across on desktop */
.cn-homes__row,
.cnc-homes__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

@media (max-width: 1100px) {

  .cn-homes__row,
  .cnc-homes__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {

  .cn-homes__row,
  .cnc-homes__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

  .cn-homes__row,
  .cnc-homes__row {
    grid-template-columns: 1fr;
  }
}

.cn-homes__box-inner,
.cnc-homes__box-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: var(--cn-radius-box, 10px);
  /* 10px */
  box-sizing: border-box;
  transition: transform var(--cn-t-fast, 0.25s) var(--cn-ease), box-shadow var(--cn-t-fast, 0.25s) var(--cn-ease);
  justify-content: space-between;
}

.cn-homes__box:hover .cn-homes__box-inner,
.cnc-homes__box:hover .cnc-homes__box-inner {
  transform: translateY(-4px);
  box-shadow: var(--cn-shadow-md, 0 18px 46px rgba(45, 45, 45, 0.10));
}

.cn-homes__name,
.cnc-homes__name {
  margin: 5px 0 10px;
  font-family: var(--cn-font-head, "Bebas Neue", sans-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  color: var(--cn-ink, #2D2D2D);
}

.cn-homes__text,
.cnc-homes__text {
  margin: 0;
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cn-ink, #2D2D2D);
}

.cn-homes__cta,
.cnc-homes__cta {
  margin-top: auto;
  padding-top: 1.6rem;
}

.cn-homes__link,
.cnc-homes__link {
  display: inline-block;
  margin: 10px 0;
  padding: 4px 8px;
  background: var(--cn-accent, #C74C05);
  border: 1px solid var(--cn-accent, #C74C05);
  border-radius: var(--cn-radius-btn, 3px);
  /* 3px */
  color: #ffffff !important;
  font-family: var(--cn-font-body, "Montserrat", sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--cn-t-fast, 0.25s) var(--cn-ease), border-color var(--cn-t-fast, 0.25s) var(--cn-ease);
}

.cn-homes__link:hover,
.cn-homes__link:focus-visible,
.cnc-homes__link:hover,
.cnc-homes__link:focus-visible {
  background: var(--cn-accent-deep, #A63F04);
  border-color: var(--cn-accent-deep, #A63F04);
  color: #ffffff !important;
  text-decoration: none;
}