/* ==========================================================================
   KUBO TINYHOUSE — DESIGN TOKENS
   Sistem extras din LP Kubo Family (rentakub.com/kubofamilyfr)
   Editat: 2026-05-25
   ========================================================================== */

:root {
  /* ============ CULORI BRAND ============ */
  /* Backgrounds — paletă naturală, caldă, mineral */
  --color-bg:           #f5f1ea;   /* Background principal — crem cald */
  --color-bg-warm:      #ebe4d8;   /* Background secțiuni alternate */
  --color-white:        #fdfbf7;   /* "Alb" cu nuanță caldă (folosit pe carduri) */

  /* Tipografie & ink */
  --color-ink:          #1a1612;   /* Text principal — near-black brown */
  --color-ink-soft:     #4a4239;   /* Text secundar / paragraph */

  /* Accente brand */
  --color-accent:       #6b4423;   /* Brown principal — itemi italici, eyebrows, accente */
  --color-accent-deep:  #3d2817;   /* Brown închis — footer, hover-uri */
  --color-wood:         #a87749;   /* Wood — secțiuni dark (gallery, trust, contact) */
  --color-line:         #d4c9b8;   /* Borduri, dividers */

  /* Secundar (din LP Kubo Family) */
  --color-green:        #97C141;   /* Verde brand (folosit punctual — eco/nature accent) */

  /* WhatsApp brand */
  --color-whatsapp:     #25D366;

  /* ============ TIPOGRAFIE ============ */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale tipografic (clamp pentru fluid responsive) */
  --fs-hero:        clamp(48px, 6.5vw, 88px);    /* h1 hero */
  --fs-h2:          clamp(40px, 5vw, 64px);      /* h2 secțiuni */
  --fs-h2-large:    clamp(44px, 5.5vw, 72px);    /* h2 emfatic (trust) */
  --fs-h3-display:  38px;                        /* card titles (model, finition) */
  --fs-h3:          26px;                        /* card titles feature */
  --fs-quote:       clamp(32px, 4vw, 52px);
  --fs-lead:        19px;                        /* paragraph lead, hero-sub */
  --fs-body:        17px;
  --fs-body-sm:     15px;                        /* body small (cards) */
  --fs-meta:        14px;                        /* meta info, btn labels */
  --fs-caption:     13px;
  --fs-eyebrow:     12px;                        /* tag-uri, eyebrow text */
  --fs-micro:       11px;                        /* badge text, labels */

  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  --lh-tight:       1.05;   /* h1/h2 */
  --lh-normal:      1.6;    /* body */
  --lh-relaxed:     1.75;   /* paragraph editorial */

  --ls-tight:       -0.02em;   /* h1/h2 */
  --ls-normal:      0;
  --ls-wide:        0.05em;    /* button labels */
  --ls-wider:       0.12em;    /* badge */
  --ls-widest:      0.18em;    /* eyebrow */

  /* ============ SPACING ============ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
  --space-25:  100px;
  --space-30:  120px;
  --space-35:  140px;

  /* Section paddings (sectiune verticala standard) */
  --section-y:        120px;
  --section-y-mobile: 80px;
  --section-x:        40px;
  --section-x-mobile: 20px;

  /* Container max widths */
  --container-narrow:  720px;     /* text editorial */
  --container-default: 1280px;    /* layout principal */
  --container-wide:    1400px;    /* hero full */

  /* ============ BORDER RADIUS ============ */
  --radius-sm:   4px;     /* inputs, imagini */
  --radius-md:   8px;     /* carduri */
  --radius-lg:   12px;    /* trust cards (dark) */
  --radius-pill: 100px;   /* butoane, tag-uri */

  /* ============ SHADOWS ============ */
  --shadow-card:       0 8px 24px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 24px 50px -20px rgba(26, 22, 18, 0.18);
  --shadow-image:      0 40px 80px -20px rgba(26, 22, 18, 0.25);
  --shadow-btn-hover:  0 12px 28px rgba(26, 22, 18, 0.2);

  /* ============ TIMING ============ */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       0.3s;
  --dur-medium:     0.4s;
  --dur-slow:       0.6s;

  /* ============ Z-INDEX ============ */
  --z-nav:        100;
  --z-whatsapp:   200;
  --z-modal:      1000;

  /* ============ BREAKPOINTS (referință — folosite în media queries) ============ */
  /* --bp-mobile:  max-width: 600px */
  /* --bp-tablet:  max-width: 900px */
  /* --bp-laptop:  max-width: 1200px */
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   UTILITARE TIPOGRAFICE
   ========================================================================== */
.display { font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: var(--ls-tight); }
.italic  { font-style: italic; }
.accent  { color: var(--color-accent); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); margin-bottom: var(--space-6); }
h2 em { font-style: italic; color: var(--color-accent); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-8);
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}

.section-lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  max-width: 640px;
  margin: 0 auto;
  font-weight: var(--fw-light);
  line-height: 1.6;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
section { padding: var(--section-y) var(--section-x); position: relative; }

.container { max-width: var(--container-default); margin: 0 auto; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; }

.section-header { text-align: center; margin-bottom: var(--space-20); }
.section-header .eyebrow { justify-content: center; }
.section-header .eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}

/* Secțiune cu fundal cald alternativ */
.bg-warm { background: var(--color-bg-warm); }
.bg-dark { background: var(--color-ink); color: var(--color-white); }
.bg-dark h2, .bg-dark h3 { color: var(--color-white); }
.bg-dark .eyebrow { color: var(--color-wood); }
.bg-dark .eyebrow::before, .bg-dark .eyebrow::after { background: var(--color-wood); }
.bg-dark .section-lead { color: rgba(253, 251, 247, 0.7); }

/* ==========================================================================
   BUTOANE
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 18px 32px;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: all var(--dur-fast) var(--ease-standard);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-accent-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.btn-secondary:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn-accent {
  background: var(--color-wood);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}
.btn-accent:hover {
  background: var(--color-white);
  transform: translateY(-2px);
}

.btn-sm { padding: 10px 22px; font-size: var(--fs-caption); }

/* ==========================================================================
   COMPONENTE — CARD
   ========================================================================== */
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--dur-medium) var(--ease-standard);
  border: 1px solid transparent;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-line);
}

.card-body { padding: 36px; }
.card h3 { font-size: var(--fs-h3-display); margin-bottom: var(--space-2); }
.card h3 em { color: var(--color-accent); font-style: italic; font-weight: var(--fw-regular); }

.card-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--color-bg);
}
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) ease; }
.card:hover .card-image img { transform: scale(1.04); }

/* Badge pe card (poziție absolută top-left) */
.badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--color-white);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  z-index: 2;
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   COMPONENTE — NAVIGAȚIE
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(245, 241, 234, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) ease;
}
.nav.scrolled { border-bottom-color: var(--color-line); }

.nav-links { display: flex; gap: var(--space-8); align-items: center; }
.nav-links a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) ease;
}
.nav-links a:hover { color: var(--color-accent); }

.logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-decoration: none;
}
.logo span { color: var(--color-accent); font-style: italic; }

.lang-switcher {
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.lang-switcher a {
  color: var(--color-ink-soft);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) ease;
}
.lang-switcher a.active { color: var(--color-accent); font-weight: var(--fw-semibold); }
.lang-switcher a:hover { color: var(--color-ink); }

/* ==========================================================================
   COMPONENTE — FOOTER
   ========================================================================== */
.footer {
  background: var(--color-accent-deep);
  color: rgba(253, 251, 247, 0.7);
  padding: 60px var(--section-x) 30px;
}
.footer a { color: var(--color-wood); text-decoration: none; }
.footer a:hover { color: var(--color-white); }
.footer .logo { color: var(--color-white); }

/* ==========================================================================
   COMPONENTE — WHATSAPP FLOAT
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 64px;
  height: 64px;
  background: var(--color-whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: var(--z-whatsapp);
  transition: all var(--dur-fast) ease;
  text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 32px; height: 32px; fill: white; }

/* ==========================================================================
   ANIMAȚII
   ========================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  animation: fadeUp 1s var(--ease-standard) forwards;
}
.reveal.d1 { animation-delay: 0.1s; }
.reveal.d2 { animation-delay: 0.25s; }
.reveal.d3 { animation-delay: 0.4s; }
.reveal.d4 { animation-delay: 0.55s; }

/* ==========================================================================
   HAMBURGER — BUTON MOBIL
   ========================================================================== */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  z-index: 201;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.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); }

/* Link contact vizibil doar în meniu mobil */
.nav-mobile-cta { display: none; }

/* Steaguri lang afișate în bara nav pe mobil (în afara meniului burger) */
.lang-mobile { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  section { padding: var(--section-y-mobile) var(--section-x-mobile); }
  .nav { padding: 16px 20px; gap: 12px; }
  .logo { font-size: 22px; }
  .card-body { padding: 28px; }

  /* Ascunde CTA-ul din bara de nav pe mobil */
  .nav > .btn { display: none !important; }

  /* Arată butonul hamburger */
  .nav-hamburger { display: flex; }

  /* Steaguri vizibile în bara nav pe mobil */
  .lang-mobile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .lang-mobile a {
    display: inline-flex;
    line-height: 0;
    border-radius: 3px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }
  .lang-mobile a.active { opacity: 1; outline: 1.5px solid var(--color-accent, #6b4423); outline-offset: 2px; border-radius: 3px; }
  .lang-mobile a:hover { opacity: 1; }
  .lang-mobile img { display: block; width: 24px; height: 18px; border-radius: 2px; }

  /* Meniu mobil — panel full-screen, toggle prin display (robust iOS Safari) */
  .nav-links {
    display: none !important;
  }
  .nav-links.open {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--color-bg, #f5f1ea);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    padding: 96px 24px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 200;
    box-sizing: border-box;
    animation: navSlideIn 0.25s ease-out;
  }
  @keyframes navSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .nav-links a {
    font-size: 26px;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--color-ink, #1a1612);
    text-decoration: none;
    text-align: center;
  }
  .nav-links a:hover { color: var(--color-accent, #6b4423); }
  .nav-links .lang-switcher {
    margin-top: 12px;
    display: inline-flex;
    gap: 14px;
  }
  .nav-links .lang-switcher a { font-size: 14px; font-family: var(--font-body, 'Manrope', sans-serif); padding: 0; }
  .nav-links .lang-switcher img { display: block; width: 28px; height: 21px; border-radius: 3px; }

  /* Afișează CTA-ul înăuntrul meniului mobil */
  .nav-mobile-cta {
    display: inline-flex !important;
    margin-top: 8px;
    font-size: 15px !important;
    font-family: var(--font-body, 'Manrope', sans-serif) !important;
  }
}

@media (max-width: 600px) {
  .btn { padding: 14px 24px; font-size: var(--fs-caption); }
  .lang-mobile { gap: 6px; }
  .lang-mobile img { width: 22px; height: 16px; }
  .nav { padding: 14px 16px; gap: 8px; }
}