/* ============================================================
   WOOD&HOME – Shared styles (nav + responsive)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #1a1a1a;
  margin: 0; padding: 0;
}

/* ── NAV ── */
.nav-bar {
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 20px;
  display: flex; align-items: center;
  justify-content: space-between;
  height: 62px;
}

a.nav-logo,
a.nav-logo:link,
a.nav-logo:visited,
a.nav-logo:hover {
  display: flex; align-items: center;
  text-decoration: none; color: inherit;
  flex-shrink: 0;
}
a.nav-logo img { height: 44px; width: auto; display: block; }
a.nav-logo .logo-name { display: none; }

/* Desktop nav links */
.nav-links {
  display: none;
  list-style: none; margin: 0; padding: 0; gap: 32px;
}
.nav-links a {
  font-size: 14px; font-weight: 500;
  color: #444; text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: #2ea84f; }

/* Hamburger */
.nav-hamburger {
  background: none; border: none; padding: 6px;
  cursor: pointer; display: flex; flex-direction: column;
  gap: 5px; border-radius: 6px;
  transition: background .2s;
}
.nav-hamburger:hover { background: #f5f5f5; }
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #1a1a1a; border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown overlay */
.nav-dropdown {
  position: fixed; top: 62px; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  z-index: 999;
}
.nav-dropdown.open { opacity: 1; pointer-events: all; }

.nav-dropdown-panel {
  background: #fff;
  padding: 8px 0 20px;
  transform: translateY(-8px);
  transition: transform .25s;
}
.nav-dropdown.open .nav-dropdown-panel { transform: translateY(0); }

.nav-dropdown-panel a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  font-size: 16px; font-weight: 500;
  color: #1a1a1a; text-decoration: none;
  border-bottom: 1px solid #f5f5f5;
  transition: background .15s;
}
.nav-dropdown-panel a:hover { background: #f9f9f9; }
.nav-dropdown-panel a.active { color: #2ea84f; font-weight: 600; }
.nav-dropdown-panel a .menu-icon {
  width: 36px; height: 36px;
  background: rgba(46,168,79,.1);
  border-radius: 8px; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── RESPONSIVE BREAKPOINTS ── */

/* Page wrapper */
.page-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}

/* Shared button styles */
.btn-green {
  display: inline-flex; align-items: center; gap: 8px;
  background: #2ea84f; color: #fff; border: none;
  border-radius: 50px; padding: 13px 26px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn-green:hover { background: #27963f; color: #fff; }

.btn-green-full {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #2ea84f; color: #fff; border: none;
  border-radius: 50px; padding: 15px 24px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  width: 100%;
}
.btn-green-full:hover { background: #27963f; color: #fff; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #1a1a1a;
  border: 1.5px solid #d5d5d5; border-radius: 50px;
  padding: 12px 22px; font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.btn-outline:hover { border-color: #2ea84f; color: #2ea84f; }

/* Accent underline */
.accent-line {
  width: 36px; height: 3px;
  background: #2ea84f; border-radius: 2px;
}

/* ── TABLET (≥ 640px) ── */
@media (min-width: 640px) {
  .nav-bar { padding: 0 32px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── DESKTOP (≥ 900px) ── */
@media (min-width: 900px) {
  .nav-hamburger { display: none; }
  .nav-links { display: flex; }
  .nav-bar { padding: 0 40px; }

  .page-wrapper { padding: 0 40px; }

  /* Two-column layouts */
  .desktop-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .desktop-two-col-reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    direction: rtl;
  }
  .desktop-two-col > *, .desktop-two-col-reverse > * { direction: ltr; }
}