/* =========================
   The Orchard House — site.css
   ========================= */

/* ===== Global tokens ===== */
:root {
  --orchard-red: #a00000;
  --text-light: #f8f9fa;
  --gold: #f3d173;

  /* Easy tweaks */
  --nav-mobile-gap: .45rem;   /* vertical space between mobile buttons */
  --nav-mobile-pad-x: 1rem;   /* side padding of the mobile panel */
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #121212;
  color: var(--text-light);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ===== Links ===== */
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Navbar (shared) ===== */
.orchard-navbar {
  background-color: var(--orchard-red);
  min-height: 100px;          /* header bar height */
  position: relative;
  z-index: 1100;
}

/* Logo sizing */
.orchard-logo {
  width: 240px;
  height: auto;
  max-height: 160px;
}
@media (max-width: 992px) {
  .orchard-logo { width: 180px; max-height: 120px; }
}
@media (max-width: 576px) {
  .orchard-logo { width: 140px; max-height: 90px; }
}

/* Desktop nav buttons */
.orchard-navbar .navbar-nav .btn {
  border-radius: .5rem;
  margin: 0 .25rem;
  padding: .75rem 1.25rem;
}

/* Bootstrap collapse animation baseline */
.collapsing {
  transition: height .22s ease;   /* smooth + quick */
  overflow: hidden;               /* avoid flicker */
}

/* ===== Mobile behavior (<= lg breakpoint) ===== */
@media (max-width: 991.98px) {

  /* Keep the collapse in normal flow so it pushes content down. 
     IMPORTANT: no padding/margin on the collapsing container
     so height can animate without layout ‘nudges’. */
  .orchard-navbar .navbar-collapse {
    position: static !important;
    inset: auto !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;              /* fixed: never changes */
    background-color: var(--orchard-red);
    box-shadow: none !important;
    overflow: hidden;                   /* prevents stray pixels at end */
  }

  /* During animation & when open, keep padding at 0 on the container. */
  .orchard-navbar .navbar-collapse.collapsing,
  .orchard-navbar .navbar-collapse.show {
    padding: 0 !important;
    margin-top: 0 !important;
  }

  /* Put the visual spacing on the inner list instead (stable element). */
  .orchard-navbar .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--nav-mobile-gap);         /* button spacing */
    width: 100%;
    margin: 0;
    padding: .5rem var(--nav-mobile-pad-x);
    background: transparent;
  }

  /* Full-width stacked buttons */
  .orchard-navbar .navbar-nav .btn {
    display: block;
    width: 100%;
    margin: 0;                          /* gap handles spacing */
    padding: 1rem 1.1rem;
    border: 0;
  }
}

/* Reduced motion: remove height animation */
@media (prefers-reduced-motion: reduce) {
  .collapsing { transition: none !important; }
}

/* ===== Footer ===== */
footer {
  background-color: #222;
  color: #aaa;
  text-align: center;
  border-top: 1px solid #444;
  padding: 1rem 0;
}