/* ================================
   Shepherd Heritage – Theme (Shared)
   Palette: navy + oxblood primaries; fuchsia, purple, lilac accents
   Fonts: Poppins (headings), Inter (body)
   Reused classes across pages:
   .top-bar, .top-bar-container, .top-bar-left, .top-bar-right, .social-icon,
   .header, .navbar, .nav-container, .logo, .logo-icon, .logo-text,
   .nav-links, .mobile-menu-btn,
   .container, .section, .section-title,
   .btn, .btn-primary, .btn-secondary,
   .footer, .footer-grid, .footer-section, .footer-bottom, .social-links
   ================================ */

/* Reset & base */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,"Helvetica Neue",sans-serif;
  color:#0f1222;
  background:#fbfbfe;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{ color:inherit; }

/* Tokens */
:root{
  --navy:#0b1d36;
  --navy-900:#09152a;
  --navy-800:#0c2345;
  --oxblood:#5a0a14;
  --oxblood-800:#4a0c11;
  --fuchsia:#ff2bb3;
  --purple:#7a3ef0;
  --lilac:#e6d6ff;
  --ink:#0f1222;
  --muted:#5f6783;
  --surface:#fff;
  --shadow:0 8px 30px rgba(11,29,54,.15);
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:8px;
  --container:1200px;
  --gradient-brand:linear-gradient(135deg,var(--navy) 0%,var(--oxblood) 100%);
  --gradient-accent:linear-gradient(135deg,var(--purple),var(--fuchsia));
}

/* Typography & layout utilities */
h1,h2,h3,h4{
  font-family:"Poppins","Inter",Arial,sans-serif;
  line-height:1.2;
  margin:0 0 .6rem;
  color:var(--navy-800);
}
.section{ padding: clamp(3rem,6vw,6rem) 0; }
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto; }
.section-title{
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight:700;
  position:relative;
  display:inline-block;
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:-10px; width:56%; height:4px; border-radius:3px;
  background:var(--gradient-accent);
}

/* ===== Top Bar (no wrap) ===== */
.top-bar{ background:var(--navy); color:#e5ecff; font-size:.9rem; }
.top-bar-container{
  width:min(100% - 2rem, var(--container));
  display:flex; align-items:center; justify-content:space-between;
  margin-inline:auto; padding:.45rem 0;
  white-space:nowrap; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; contain:content;
}
.top-bar-container::-webkit-scrollbar{ display:none; }
.top-bar-left,.top-bar-right{ display:inline-flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.top-bar a{ color:#dfe7ff; text-decoration:none; opacity:.95; }
.top-bar a:hover{ opacity:1; text-decoration:underline; }
.top-bar .divider{ opacity:.4; margin:0 .4rem; }

/* Social icon chip + SVG sizing */
.social-icon{
  margin-left:.1rem; display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:8px; flex:0 0 auto;
  background:rgba(255,255,255,.07); transition:transform .25s ease, background .25s ease;
}
.social-icon:hover{ transform:translateY(-2px); background:rgba(255,255,255,.15); }
.social-icon svg{ width:16px; height:16px; color:#fff; }

/* ===== Header / Navigation ===== */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 24px rgba(9,21,42,.06);
}
.navbar .nav-container{
  width:min(100% - 2rem,var(--container));
  display:flex; align-items:center; justify-content:space-between;
  margin-inline:auto; padding:.85rem 0;
}
.logo{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.logo-icon{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; font-weight:800; color:#fff; letter-spacing:.5px;
  background:var(--gradient-accent); box-shadow:0 6px 18px rgba(122,62,240,.35);
}
.logo-text{ font-weight:800; color:var(--navy-800); letter-spacing:.2px; }

.nav-links{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; padding:.6rem .9rem; border-radius:10px; font-weight:600; color:var(--navy-800);
  transition:background .2s ease, transform .2s ease;
}
.nav-links a:hover{ background:var(--lilac); transform:translateY(-1px); }
.nav-links a.active{ background:rgba(122,62,240,.12); }

.mobile-menu-btn{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.mobile-menu-btn span{
  display:block; width:26px; height:3px; margin:5px 0; background:var(--navy-800); border-radius:3px;
  transition: transform .3s ease, opacity .3s ease;
}
.mobile-menu-btn.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.mobile-menu-btn.is-open span:nth-child(2){ opacity:0; }
.mobile-menu-btn.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none; font-weight:700; padding:.85rem 1.1rem; border-radius:14px;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  box-shadow: 0 10px 24px rgba(11,29,54,.12);
}
.btn-primary{ background:var(--gradient-accent); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(122,62,240,.28); }
.btn-secondary{ background:#fff; color:var(--oxblood); border:2px solid transparent; }
.btn-secondary:hover{ border-color:rgba(255,255,255,.7); transform:translateY(-2px); }

/* ===== Footer ===== */
.footer{
  color:#eef3ff;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(122,62,240,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,43,179,.20), transparent 60%),
    var(--gradient-brand);
  padding-top:2.5rem;
}
.footer .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:1.2rem; }
.footer h3,.footer h4{ color:#fff; }
.footer a{ color:#fff; text-decoration:none; opacity:.95; }
.footer a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{
  margin-top:1.3rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer .social-links a{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.12); transition:transform .25s ease, background .25s ease;
}
.footer .social-links a + a{ margin-left:.6rem; }
.footer .social-links a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.22); }
.footer .social-links svg{ width:18px; height:18px; color:#fff; }

/* Animations (CSS-only) */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }

/* Responsive */
@media (max-width:1024px){
  .footer .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .navbar .nav-container{ padding:.75rem 0; }
  .mobile-menu-btn{ display:block; }
  .nav-links{
    position:fixed; inset:64px 0 auto 0; display:grid; gap:.25rem; padding:.6rem;
    background:#fff; border-bottom:1px solid #eef; box-shadow:0 20px 40px rgba(9,21,42,.12);
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition: transform .35s cubic-bezier(.21,1,.21,1), opacity .3s ease, visibility .3s ease;
    z-index:40;
  }
  .nav-links.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav-links a{ padding:.85rem 1rem; border-radius:12px; background:#f7f7ff; }
}
@media (max-width:560px){
  .footer .footer-grid{ grid-template-columns:1fr; }
}

/* Accessibility focus */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--fuchsia);
  outline-offset:2px;
}