/* =============================================================
   KN BASIC – nav-hero.css
   Navigation bar + Hero section + Floor plan
   ============================================================= */

/* ===== NAV ===== */
header nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 2.5rem;
  backdrop-filter: blur(1.25rem);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 0.125rem 1.25rem rgba(0,0,0,0.08);
  transition: background 0.4s;
}

.nav-logo {
  display: flex; align-items: center; gap: 0.625rem;
  text-decoration: none;
}
.nav-logo-icon {
  height: 2.25rem;
  width: auto;
  display: flex; align-items: center;
}
.nav-logo-icon img { height: 100%; width: auto; object-fit: contain; }
.nav-logo-text {
  font-family: var(--mono); font-size: 0.9375rem; font-weight: 700;
  color: var(--text); letter-spacing: 0.125rem;
}
.nav-logo-text span { color: var(--green); }

.nav-links {
  display: flex; gap: 2rem; list-style: none;
}
.nav-links a {
  font-size: 0.8125rem; font-weight: 500; color: var(--text3);
  text-decoration: none; letter-spacing: 0.03125rem;
  transition: color 0.2s; font-family: var(--mono);
}
.nav-links a:hover { color: var(--green); }

.nav-right { display: flex; align-items: center; gap: 1rem; }

.theme-toggle {
  width: 2.75rem; height: 1.5rem;
  background: var(--border2);
  border-radius: 0.75rem; border: none;
  position: relative; transition: background 0.3s;
  outline: none;
}
.theme-toggle::after {
  content: '';
  position: absolute; top: 0.1875rem; left: 0.1875rem;
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%; background: var(--green);
  transition: transform 0.3s;
}
[data-theme="dark"] .theme-toggle::after { transform: translateX(1.25rem); }

.nav-cta {
  background: linear-gradient(135deg, var(--green), #00a86b);
  color: #000; font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none;
  letter-spacing: 0.03125rem; transition: all 0.2s;
  box-shadow: 0 0.25rem 0.875rem var(--green-glow);
}
.nav-cta:hover { transform: translateY(-0.0625rem); box-shadow: 0 0.375rem 1.25rem var(--green-glow); }

/* ===== HERO ===== */
#hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 6.25rem 0 3.75rem;
}
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3.75rem; align-items: center;
}
.hero-label {
  font-family: var(--mono); font-size: 0.6875rem; color: var(--green);
  letter-spacing: 0.1875rem; text-transform: uppercase; margin-bottom: 1rem;
}
.hero-title {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800; line-height: 1.1; margin-bottom: 0.5rem;
}
.hero-title .accent  { color: var(--green); }
.hero-title .outline {
  -webkit-text-stroke: 0.125rem var(--text);
  color: transparent;
}
.hero-sub {
  font-size: 1.1rem; color: var(--text2);
  max-width: 30rem; margin: 1.25rem 0 2.25rem;
  line-height: 1.7;
}
.hero-sub strong { color: var(--green); font-weight: 600; }

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ===== STATS BAR ===== */
.stats-bar {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1rem; margin-top: 2.5rem; padding: 1.875rem;
}
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--mono); font-size: 2rem; font-weight: 700;
  color: var(--green); display: block;
}
.stat-label { font-size: 0.75rem; color: var(--text3); letter-spacing: 0.03125rem; margin-top: 0.25rem; }

/* ===== FLOOR PLAN ===== */
.floor-plan-container {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.floor-plan-wrap {
  position: relative; width: 100%; max-width: 30rem;
  padding: 1.5rem; border-radius: 1.25rem;
}
.floor-plan-wrap::before {
  content: 'RZUT MIESZKANIA – SYS. KNX';
  position: absolute; top: 0.625rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.5625rem; color: var(--green);
  letter-spacing: 0.125rem; opacity: 0.7;
}
#floorPlanSvg { width: 100%; height: auto; }

.room-widget {
  position: absolute;
  background: var(--surface);
  backdrop-filter: blur(1rem);
  border: 1px solid var(--border2);
  border-radius: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--mono); font-size: 0.625rem; color: var(--text2);
  pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
  white-space: nowrap;
  box-shadow: 0 0.25rem 1rem var(--green-glow);
  z-index: 10;
}
.room-widget.visible  { opacity: 1; }
.room-widget .w-title { color: var(--green); font-weight: 700; font-size: 0.5625rem; margin-bottom: 0.1875rem; letter-spacing: 0.0625rem; }
.room-widget .w-row   { display: flex; gap: 0.375rem; align-items: center; }
.room-widget .w-dot   { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 48rem) {
  nav { padding: 0.75rem 1.25rem; }
  .nav-links { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .stats-bar  { grid-template-columns: repeat(2,1fr); }
}