/* Shared across index.html, privacy-policy.html, and terms-and-conditions.html.
   Previously duplicated in each page's own <style> block — every fix here
   (mobile nav, cookie bar sizing, navbar height) had to be made three times
   by hand, and drifted out of sync more than once. Each page still keeps its
   own page-specific rules (hero, masonry, lightbox, body padding, etc.) locally. */

:root {
  --brand-color: #8b5a2b;
  --brand-dark: #6f4722;
  --nav-height: 76px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

.text-brand { color: var(--brand-color); }

.btn-brand {
  background-color: var(--brand-color);
  color: #fff;
  border: none;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
}
.btn-brand:hover {
  background-color: var(--brand-dark);
  color: #fff;
}

/* Navbar */
.navbar {
  height: var(--nav-height);
  backdrop-filter: blur(10px);
  background-color: rgba(33, 37, 41, 0.95);
}

/* Fixed Mobile Navbar with Smooth Collapse Transition */
@media (max-width: 991.98px) {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
  }

  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0; /* Removed direct padding so height collapses cleanly to 0px */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
    z-index: 1050;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }

  /* Padding moved inside so container height can animate smoothly */
  .navbar-collapse .navbar-nav {
    padding: 1rem 1.5rem;
  }

  /* Ensures overflow is hidden during Bootstrap's height animation */
  .navbar-collapse.collapsing {
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden !important;
  }

  .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 0.65rem;
    font-size: 1.1rem;
  }

  .navbar-toggler:focus,
  .navbar-toggler:active {
    box-shadow: none !important;
    outline: none !important;
  }

  .nav-item {
    text-align: center !important;
  }
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--brand-color);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  z-index: 1040;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--brand-dark);
}

/* Cookie Notice */
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1090;
  background: rgba(33, 37, 41, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}