/* ==========================================================================
   VERV.ONE — GLOBAL DESIGN SYSTEM (Unified across all pages)
   Standardizes typography, color variables, layout, and NAV sizes (desktop & mobile)
   ========================================================================== */

/* -------------------------------
   Root variables
---------------------------------*/
:root {
  /* Font family */
  --font-primary: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (matches project guidelines) */
  --text-xs: clamp(0.7rem, 1vw, 0.75rem);
  --text-sm: clamp(0.8rem, 1.2vw, 0.875rem);
  --text-base: clamp(0.9rem, 1.5vw, 1rem);
  --text-lg: clamp(1rem, 1.8vw, 1.125rem);
  --text-xl: clamp(1.1rem, 2vw, 1.25rem);
  --text-2xl: clamp(1.3rem, 2.5vw, 1.5rem);
  --text-3xl: clamp(1.6rem, 3vw, 1.875rem);
  --text-4xl: clamp(1.9rem, 3.5vw, 2.25rem);
  --text-5xl: clamp(2.5rem, 5vw, 3rem);

  /* Color palette */
  --primary-black: #0a0a0a;
  --charcoal: #1a1a1a;
  --warm-white: #fefefe;
  --pearl-grey: #f8f8f8;
  --silver: #e8e8e8;
  --graphite: #2a2a2a;
  --platinum: #f5f5f5;
  --deep-grey: #333333;
  --soft-grey: #666666;
  --light-grey: #999999;
  --border-light: #e0e0e0;

  /* Layout */
  --container-max: 1400px;
  --padding-desktop-x: 3rem;
  --padding-mobile-x: 1.5rem;
  --section-pad-desktop-y: 6rem;
  --section-pad-mobile-y: 4rem;
}

/* -------------------------------
   Base
---------------------------------*/
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  color: var(--primary-black);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------
   Typography
---------------------------------*/
h1, .hero-title {
  font-family: var(--font-primary);
  font-weight: 300; /* elegant */
  letter-spacing: -0.01em;
  font-size: var(--text-5xl);
  line-height: 1.1;
  margin: 0 0 0.5em;
}

h2, .section-title {
  font-family: var(--font-primary);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: var(--text-3xl);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h3, .subtitle {
  font-family: var(--font-primary);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: var(--text-xl);
  line-height: 1.3;
  margin: 0 0 0.5em;
}

p, li, .property-description {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
}

/* -------------------------------
   Layout helpers
---------------------------------*/
.container, .section-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--padding-desktop-x);
  padding-right: var(--padding-desktop-x);
}

.page-section {
  width: 100%;
  padding-top: var(--section-pad-desktop-y);
  padding-bottom: var(--section-pad-desktop-y);
}

@media (max-width: 768px) {
  .container, .section-container {
    padding-left: var(--padding-mobile-x);
    padding-right: var(--padding-mobile-x);
  }
  .page-section {
    padding-top: var(--section-pad-mobile-y);
    padding-bottom: var(--section-pad-mobile-y);
  }
}

/* -------------------------------
   Buttons
---------------------------------*/
.btn, button, .cta {
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-sm);
}

/* -------------------------------
   NAVIGATION — Unified sizes across all pages
   This overrides per-page deviations (e.g., var(--text-2xl) on Properties).
---------------------------------*/
.header-nav .nav-link,
.nav-link,
.mobile-nav-link {
  font-family: var(--font-primary);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.1rem !important; /* Desktop standard */
  line-height: 1.2;
}

@media (max-width: 768px) {
  .header-nav .nav-link,
  .nav-link,
  .mobile-nav-link {
    font-size: 1rem !important; /* Tablet/Mobile standard */
  }
}

@media (max-width: 480px) {
  .header-nav .nav-link,
  .nav-link,
  .mobile-nav-link {
    font-size: 0.9rem !important; /* Small phones */
  }
}

/* -------------------------------
   BURGER MENU — Unified dimensions
---------------------------------*/
.burger-menu-btn {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
}

.burger-menu-btn .line {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  margin: 4px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 768px) {
  .burger-menu-btn {
    width: 48px;
    height: 48px;
  }
  .burger-menu-btn .line {
    width: 22px;
  }
}

/* -------------------------------
   Footer helpers
---------------------------------*/
.footer {
  background: var(--charcoal);
  color: var(--warm-white);
}

.footer a { color: var(--warm-white); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* -------------------------------
   Utilities
---------------------------------*/
.hidden { display: none !important; }
.text-center { text-align: center; }
.upper { text-transform: uppercase; }
.thin { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }

/* End of file */

/* -------------------------------
   BURGER MENU FIX — Always 3 lines (no X transform)
---------------------------------*/
.burger-menu-btn.active .line {
  opacity: 1 !important;
  transform: none !important;
}