/* ============================================================
   SHARED STYLES — Orava brand, nav, responsive
   Used by manifesto.html and contact.html
   ============================================================ */

:root {
  --warm-stone: #A39585;
  --moss-green: #6B7F5E;
  --deep-forest: #2B3D2F;
  --dark: #08080c;
  --cream: #F5F0EB;
  --brown: #2C2825;
  --copper: rgba(181,105,58,0.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; color: var(--cream); }
html { scroll-behavior: smooth; }

/* ---- SITE NAV ---- */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 28px 40px; pointer-events: none;
  background: none;
}
#site-nav > * { pointer-events: auto; }

#nav-logo {
  position: absolute; left: 40px; top: 28px;
  width: 36px; height: auto;
  opacity: 1; transform: translateY(0);
  transition: opacity 0.3s ease;
  text-decoration: none; display: block;
}
#nav-logo svg { width: 36px; height: auto; }

.nav-links {
  display: flex; align-items: center; gap: 36px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 400;
}
.nav-link {
  color: var(--cream); text-decoration: none; letter-spacing: 0.02em;
  opacity: 0.75; transition: opacity 0.3s ease; cursor: pointer;
  background: none; border: none; font: inherit; padding: 0;
}
.nav-link:hover { opacity: 1; }
.nav-link.active { opacity: 1; }

.nav-contact {
  color: var(--cream); text-decoration: none; letter-spacing: 0.02em;
  opacity: 0.75; transition: opacity 0.3s ease; cursor: pointer;
  background: none; border: none; font-size: 15px; font-weight: 400;
  font-family: inherit; padding: 0;
}
.nav-contact:hover { opacity: 1; }
.nav-contact.active { opacity: 1; }

/* Product dropdown */
.nav-product-wrap { position: relative; }
#product-dropdown {
  position: absolute; top: calc(100% + 16px); right: -20px;
  width: 380px; background: rgba(44,40,37,0.95); backdrop-filter: blur(16px);
  border: 1px solid rgba(245,240,235,0.08); border-radius: 8px;
  padding: 20px 0; opacity: 0; pointer-events: none;
  transform: translateY(-8px); transition: all 0.3s ease;
}
#product-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dropdown-item {
  display: block; padding: 14px 28px; text-decoration: none;
  transition: background 0.2s ease; cursor: pointer;
}
.dropdown-item:hover { background: rgba(245,240,235,0.05); }
.dropdown-item-name {
  font-family: 'Lora', serif; font-size: 16px; color: var(--cream);
  font-weight: 500; margin-bottom: 3px;
}
.dropdown-item-desc {
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--warm-stone);
  letter-spacing: 0.02em;
}

/* ---- HAMBURGER BUTTON ---- */
#hamburger-btn {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; z-index: 201;
}
#hamburger-btn svg { width: 24px; height: 24px; }

/* ---- MOBILE MENU OVERLAY ---- */
#mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(8,8,12,0.96); backdrop-filter: blur(16px);
  flex-direction: column; align-items: center; justify-content: center; gap: 40px;
}
#mobile-menu.open { display: flex; }
#mobile-menu-close {
  position: absolute; top: 28px; right: 28px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
#mobile-menu-close svg { width: 24px; height: 24px; }
.mobile-menu-link {
  font-family: 'DM Sans', sans-serif; font-size: 24px; color: var(--cream);
  text-decoration: none; letter-spacing: 0.02em; opacity: 0.85;
  background: none; border: none; cursor: pointer; font-weight: 400;
}
.mobile-menu-link:hover { opacity: 1; }
.mobile-menu-link.active { opacity: 1; }

/* ---- FOOTER ---- */
.site-footer {
  padding: 48px 40px; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 13px;
  color: rgba(245,240,235,0.4); letter-spacing: 0.02em;
}
.site-footer svg { width: 28px; height: auto; margin-bottom: 12px; opacity: 0.3; }

/* ---- PAGE CONTENT FADE-IN ---- */
.page-content { opacity: 0; transition: opacity 0.6s ease 0.2s; }
.page-content.visible { opacity: 1; }

/* ---- RESPONSIVE: PORTRAIT ---- */
.layout-portrait .nav-links { display: none; }
.layout-portrait #hamburger-btn { display: block; }
.layout-portrait #site-nav { padding: 20px 24px; }
.layout-portrait #nav-logo { left: 24px; top: 20px; }