:root {
  --primary: #7b2f18;
  --accent: #fce6c8;
  --white: #ffffff;
  --text: #333333;
  --header-h: 80px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Open Sans", sans-serif; color: var(--text); }

a { text-decoration: none; color: var(--primary); }
button { border: none; cursor: pointer; font-family: "Poppins", sans-serif; background: none; }

/* HEADER BASE */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: var(--white);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  z-index: 3000;
}
.header-content {
  display: flex; justify-content: space-between; align-items: center;
  height: var(--header-h); max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.site-logo {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.5rem;
  color: var(--primary); display:flex; align-items:center; gap:8px;
}

/* DESKTOP NAV */
.nav-primary { display:flex; align-items:center; gap:20px; }
.nav-list { list-style:none; display:flex; gap:24px; margin:0; padding:0; }
.nav-item-link { color:var(--text); font-weight:500; position:relative; }
.nav-item-link:hover { color:var(--primary); }
.nav-dropdown { position:relative; }

.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  list-style: none;
  margin: 0; padding: 6px 0;
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  min-width: 210px;
}
.nav-dropdown.show-dropdown .dropdown-menu {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.dropdown-item { padding: 8px 16px; }
.dropdown-item a {
  color: var(--text); display:block; font-weight:500; font-size:0.95rem;
}
.dropdown-item a:hover {
  color: var(--primary);
  background: rgba(123,47,24,0.05);
}

/* CTA BUTTON */
.cta-primary {
  background: var(--primary);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
}
.cta-primary:hover { background: #5d2514; }

/* HAMBURGER BUTTON */
.mobile-menu-toggle {
  font-size: 1.8rem;
  color: var(--primary);
  display: none;
  transition: transform .2s;
}
.mobile-menu-toggle:hover { transform: scale(1.05); }

/* MOBILE MENU */
.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: none; z-index: 1500;
}
.mobile-overlay.is-open { display:block; }

.mobile-nav-panel {
  position: fixed;
  top: var(--header-h); left: 0;
  width: 100vw; height: calc(100vh - var(--header-h));
  background: var(--white);
  z-index: 2000;
  display:flex; flex-direction: column;
  padding: 0 20px 30px;
  transform: translateX(100vw);
  transition: transform .35s ease;
  overflow-y: auto;
}
.mobile-nav-panel.is-open { transform: translateX(0); }

.mobile-nav-list { list-style:none; padding: 6px 0; margin:0; flex:1; }
.mobile-nav-item { border-bottom: 1px solid rgba(123,47,24,0.15); padding: 14px 0; }
.mobile-nav-item > a {
  display:flex; justify-content:space-between; align-items:center;
  color:var(--primary); font-weight:600; font-family:"Poppins",sans-serif;
}
.mobile-submenu {
  list-style:none; padding-left:20px; margin-top:6px;
  display:none; border-left:2px solid rgba(123,47,24,0.2);
}
.mobile-nav-item.active .mobile-submenu { display:block; animation: slideDown .28s ease; }
.mobile-submenu li { padding:8px 0; border-bottom:1px dashed rgba(123,47,24,0.08); }
.mobile-submenu a { color:var(--primary); font-weight:500; font-size:0.95rem; }

@keyframes slideDown {
  from {opacity:0; transform:translateY(-8px);}
  to {opacity:1; transform:translateY(0);}
}

/* MOBILE FOOTER */
.mobile-nav-footer {
  position: sticky;
  bottom: 40px; /* raised higher from bottom to stay visible */
  margin-top: 20px;
  padding-top: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%);
  z-index: 3001; /* keep it above any background overlays */
}
.mobile-nav-footer .cta-primary {
  width: 100%;
  text-align: center;
  padding: 14px 0;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* RESPONSIVE */
@media (max-width: 1023px) {
  .nav-primary { display: none; }
  .mobile-menu-toggle { display: block; }
}
@media (min-width: 1024px) {
  .mobile-nav-panel, .mobile-overlay { display:none !important; }
}
/* Prevent header from overlapping page content */

/* Desktop spacing (reduced gap) */
/* Desktop and large screens */
body {
  padding-top: calc(var(--header-h) - 70px);
}

/* Mobile: taller header, add more space */
@media (max-width: 767px) {
  body {
    padding-top: 50px; /* adjust this value until content clears header */
  }
}



/* auto adjustment nav footer small phone*/

@media (max-height: 700px) {
  .mobile-nav-footer {
    bottom: 20px;
  }
}

/* logo alignmnet*/

.site-logo img {
  height: 45px; /* adjust height to fit your header nicely */
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  .site-logo img {
    height: 40px; /* slightly smaller for mobile */
  }
}
/* --- Remove underline on hover for header links and logo --- */
.site-header a:hover {
  text-decoration: none !important;
}
.site-logo:hover {
  text-decoration: none !important;
}

