/* =========================================================
   BuildingPlaque.com — Master Stylesheet
   Bootstrap 5 Compatible (NO GRID OVERRIDES)
   ========================================================= */

/* ================= ROOT VARIABLES ================= */
:root {
  --brand-navy: #2E4F8F;
  --brand-blue: #6B8FD6;
  --brand-gold: #D4A348;
  --brand-gold-dark: #b38732;

  --text-dark: #1e1e1e;
  --text-muted: #6c757d;

  --radius-sm: 4px;
  --radius-md: 8px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.12);
}

/* ================= GLOBAL ================= */
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: #ffffff;
}

/* ================= TYPOGRAPHY ================= */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

p {
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.15rem;
  color: #333;
}

/* ================= LINKS ================= */
a {
  color: var(--brand-navy);
  text-decoration: none;
}

a:hover {
  color: var(--brand-blue);
  text-decoration: underline;
}

/* ================= BUTTONS ================= */
.btn-gold {
  background-color: var(--brand-gold);
  color: #000;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-gold:hover {
  background-color: var(--brand-gold-dark);
  color: #000;
  box-shadow: var(--shadow-sm);
}

/* ================= HERO SECTIONS ================= */
.hero-building {
  background: linear-gradient(
    135deg,
    #EEF2FA,
    #DCE6F6
  );
  padding: 90px 0;
  color: var(--text-dark);
}

.hero-building .lead {
  max-width: 720px;
}

/* ================= SECTIONS ================= */
section {
  position: relative;
}

.bg-light {
  background-color: #f8f9fb !important;
}

/* ================= IMAGE GRID ================= */
.building-grid picture {
  display: block;
}

.building-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* ================= NAVBAR (SAFE OVERRIDES ONLY) ================= */
/* These DO NOT touch grid or collapse behavior */
.navbar {
  box-shadow: var(--shadow-sm);
}

.navbar-nav .nav-link {
  font-weight: 500;
  padding: 0.75rem 1rem;
}

/* ================= FOOTER ================= */
footer {
  background-color: #f1f3f6;
  color: #333;
  padding: 40px 0;
  font-size: 0.9rem;
}

/* ================= UTILITIES ================= */
.text-muted {
  color: var(--text-muted) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
  box-shadow: var(--shadow-md) !important;
}

/* ================= IMPORTANT RULE ================= */
/*
  This stylesheet intentionally DOES NOT:
  - Override .row
  - Override .col-*
  - Override Bootstrap breakpoints
  - Override container widths

  Bootstrap 5 OWNS the grid.
*/