/* ==========================================
   EQUINE.GUIDE — LUXURY HERITAGE SYSTEM
   Controlled Estate Width Edition
========================================== */

/* ---------- Root Palette ---------- */

:root {
  --eg-black: #0c0c0c;
  --eg-deep:  #141414;
  --eg-paper: #f4f1ea;        /* unified estate tone */
  --eg-gold:  #bfa15a;
  --eg-gold-soft: #d4b76a;
  --eg-muted: #6e6e6e;
  --eg-rule:  rgba(191,161,90,.25);
}

/* ==========================================
   BASE TYPOGRAPHY
========================================== */

html { font-size: 18px; }

body {
  background: var(--eg-paper);
  color: var(--eg-deep);
  font-size: 1.05rem;
  line-height: 1.65;
  letter-spacing: .2px;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; }

h1 { font-size: 3.4rem; line-height: 1.15; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.65rem; }

/* Controlled Estate Width (site-wide) */

.eg-wrap {
  max-width: 1700px;
  padding-left: 4rem;
  padding-right: 4rem;
}

/* ==========================================
   NAVIGATION — Luxury Underline + Tight Fit
========================================== */

.navbar {
  background: var(--eg-black);
  border-bottom: 1px solid var(--eg-gold);
}

/* Reduce container padding INSIDE the navbar to prevent overflow */
.navbar .eg-wrap {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Pull nav group left (we removed ms-auto in HTML) */
.navbar .navbar-collapse {
  justify-content: flex-start;
}

/* Brand: statement, but responsive so it won’t shove links off-screen */
.eg-brand {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1vw + 1rem, 2.05rem);
  letter-spacing: .08em;
  color: var(--eg-gold) !important;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  padding-right: 1.15rem;
  margin-right: .5rem;
}

/* Heritage divider after the brand */
.eg-brand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  width: 1px;
  background: rgba(191,161,90,.40);
}

/* Tight, no-wrap nav links */
.eg-nav.navbar-nav {
  column-gap: .15rem;
}

.eg-nav .nav-link {
  position: relative;
  color: #ffffff !important;
  opacity: .92;
  font-size: .90rem;
  letter-spacing: .18px;
  padding: .35rem .60rem;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .2s ease;
}

.eg-nav .nav-link:hover {
  opacity: 1;
  color: #ffffff !important;
}

/* Luxury gold underline (animated) */
.eg-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .60rem;
  right: .60rem;
  bottom: -8px;
  height: 2px;
  background: var(--eg-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.eg-nav .nav-link:hover::after {
  transform: scaleX(1);
}

/* Toggler polish */
.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon { filter: brightness(0) invert(1); }

/* Mobile / collapsed menu refinement */
@media (max-width: 991.98px) {
  .navbar .eg-wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .eg-brand::after { display: none; }

  .eg-nav .nav-link {
    padding: .75rem 0;
  }

  .eg-nav .nav-link::after {
    left: 0;
    right: 0;
    bottom: 6px;
  }

  .navbar .navbar-collapse {
    padding-top: .75rem;
  }
}

@media (max-width: 1400px) {
  .eg-nav .nav-link {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

/* ==========================================
   HERO
========================================== */

.eg-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.eg-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/images/background.jpg');
  background-size: cover;
  background-position: 60% center;
  background-repeat: no-repeat;
  filter: saturate(95%) contrast(100%) brightness(110%);
  z-index: 0;
}



.eg-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.25) 65%,
    rgba(0,0,0,0.05) 100%
  );
  z-index: 1;
}

.eg-hero .container { position: relative; z-index: 2; }

.eg-hero h1 {
  font-size: 3.6rem;
  line-height: 1.1;
}

.eg-hero p.lead { font-size: 1.25rem; }

.eg-kicker {
  color: var(--eg-gold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

/* Vision Page Hero */
.eg-hero-vision .eg-hero-bg {
  background-image: url('/images/vision.jpg');
}

/* ==========================================
   BUTTONS
========================================== */

.btn-gold {
  background: var(--eg-gold);
  color: #000;
  border: none;
  padding: .7rem 1.5rem;
  font-size: 1rem;
}

.btn-gold:hover {
  background: var(--eg-gold-soft);
  color: #000;
}

.btn-outline-gold {
  border: 1px solid var(--eg-gold);
  color: var(--eg-gold);
  background: transparent;
  padding: .7rem 1.5rem;
  font-size: 1rem;
}

.btn-outline-gold:hover {
  background: var(--eg-gold);
  color: #000;
}

/* ==========================================
   MAIN SURFACE
========================================== */

main {
  background: transparent;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* ==========================================
   HERITAGE EDITORIAL PANELS
========================================== */

.bg-white {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 2.75rem !important;
  border-radius: 8px !important;
  position: relative;
  transition: border-color .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.bg-white:hover { border-color: var(--eg-gold); }

.bg-white::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 85px;
  height: 4px;
  background: var(--eg-gold);
  border-top-left-radius: 8px;
}

.bg-white h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  letter-spacing: .2px;
}

.bg-white h3::after { display: none; }

.bg-white p {
  font-size: 1.1rem;
  color: #4a4a4a;
  line-height: 1.75;
  margin-bottom: 2rem;
}

/* Panel button */
.bg-white .btn-outline-dark {
  border: 1px solid #222;
  color: #222;
  background: transparent;
  padding: .55rem 1.25rem;
  font-size: .85rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.bg-white .btn-outline-dark:hover {
  background: var(--eg-gold);
  border-color: var(--eg-gold);
  color: #000;
}

/* ==========================================
   SECTION RULE
========================================== */

.eg-rule {
  border-top: 1px solid var(--eg-gold);
  opacity: .35;
}

/* ==========================================
   FOOTER (Centered, wraps gracefully)
========================================== */

.eg-footer {
  background: var(--eg-black);
  color: #ffffff;
  border-top: 1px solid var(--eg-gold);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.eg-footer a {
  color: #ffffff;
  opacity: .8;
  text-decoration: none;
}

.eg-footer a:hover {
  color: var(--eg-gold-soft);
  opacity: 1;
}

/* Center + spacing without relying on me-3 */
.eg-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.eg-footer-links a {
  font-size: .85rem;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* ==========================================
   ULTRA-WIDE REFINEMENT
========================================== */

@media (min-width: 1600px) {
  .eg-wrap { max-width: 1850px; }

  /* Give nav a touch more air on truly wide screens */
  .navbar .eg-wrap {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .eg-hero { min-height: 95vh; }

  .eg-hero h1 {
    font-size: 4.2rem;
    line-height: 1.05;
  }

  .eg-hero p.lead { font-size: 1.35rem; }

  .eg-hero .container { margin-left: 8%; }
}

/* Reduce site padding slightly on medium screens (prevents “boxed stripe” feel) */
@media (max-width: 1399.98px) {
  .eg-wrap {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}