/* ============================================================
   Home Office OS LLC — Brick Red Theme Overrides
   ────────────────────────────────────────────────
   Visually distinguishes the LLC company site (homeofficeosllc.com)
   from the product site (homeofficeos.com) which uses blue/gold.

   Load AFTER page CSS so these overrides take precedence.
   ============================================================ */

:root {
  /* ── LLC Brand Colors — Brick Red ── */
  --color-primary: #C0392B;
  --color-primary-dark: #962217;
  --color-primary-light: #E74C3C;

  /* Warm amber replaces teal for text-gradient second stop */
  --color-teal: #E67E22;
  --color-teal-dark: #D35400;
  --color-teal-light: #F39C12;

  /* ── Adjusted borders ── */
  --border-highlight: rgba(192, 57, 43, 0.4);

  /* ── Adjusted shadows ── */
  --shadow-glow-blue: 0 0 30px rgba(192, 57, 43, 0.15);
}

/* ════════════════════════════════════════
   HEADER — Brick red accent bar
   ════════════════════════════════════════ */

.site-header {
  border-bottom: 1px solid rgba(192, 57, 43, 0.15);
}

.site-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #962217, #C0392B, #E74C3C, #E67E22);
  z-index: 101;
}

/* Header logo icon uses brick red */
.header-logo svg {
  color: #E74C3C !important;
}

/* Nav download button — brick red instead of gold */
.nav-download {
  background: linear-gradient(135deg, #C0392B, #962217) !important;
  box-shadow: 0 4px 15px rgba(192, 57, 43, 0.3) !important;
}

.nav-download:hover {
  box-shadow: 0 6px 20px rgba(192, 57, 43, 0.45) !important;
}

/* ════════════════════════════════════════
   SECTION DIVIDERS — Brick red gradient
   ════════════════════════════════════════ */

.section-divider {
  background: linear-gradient(90deg, transparent, #C0392B, transparent);
}

/* ════════════════════════════════════════
   CARDS — Left accent border
   ════════════════════════════════════════ */

.category-card {
  border-left: 3px solid rgba(192, 57, 43, 0.4);
}

.category-card:hover {
  border-left-color: #C0392B;
}

.value-card {
  border-top: 2px solid rgba(192, 57, 43, 0.3);
}

.value-card:hover {
  border-top-color: #C0392B;
}

.contact-card {
  border-top: 2px solid rgba(192, 57, 43, 0.3);
}

/* ════════════════════════════════════════
   BADGES — Brick red tints
   ════════════════════════════════════════ */

.badge-live {
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(192, 57, 43, 0.3);
  color: #E74C3C;
}

/* ════════════════════════════════════════
   FOOTER — Top accent line
   ════════════════════════════════════════ */

.site-footer {
  border-top: 2px solid rgba(192, 57, 43, 0.3);
}

.site-footer svg {
  color: #E74C3C !important;
}

/* ════════════════════════════════════════
   LANDSCAPE.CSS OVERRIDES
   (landscape.css is shared with product site,
    so LLC-specific color overrides go here)
   ════════════════════════════════════════ */

.landscape-hero::before {
  background: radial-gradient(ellipse, rgba(192, 57, 43, 0.08) 0%, transparent 65%);
}

/* Score bar backgrounds in landscape page */
.score-fill-high {
  background: rgba(192, 57, 43, 0.2);
}

.score-fill-mid {
  background: rgba(192, 57, 43, 0.08);
}

.score-fill-low {
  background: rgba(192, 57, 43, 0.15);
}

/* ════════════════════════════════════════
   ARCHITECTURE CTA — Brick red outline
   ════════════════════════════════════════ */

.architecture-cta .btn-outline-gold {
  border-color: rgba(192, 57, 43, 0.4) !important;
  color: #E74C3C !important;
  background: rgba(192, 57, 43, 0.06) !important;
}