/* General reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* include padding și border în dimensiunile elementului */
}

/* Setări generale pentru corpul paginii */
body {
  font-family: 'Lato', sans-serif; /* font principal */
  color: #333; /* culoare text */
  background: #fff; /* fundal alb */
  line-height: 1.6; /* spațiere între rânduri */
}

/* Container centrat și cu lățime maximă */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
/* Fundal și bordură jos */
header {
  background: #f9f6fb; /* lavandă deschis */
  padding: 1rem 0;
  border-bottom: 1px solid #e1d9ec; /* linie subțire */
  position: sticky; /* rămâne fixat sus la scroll */
  top: 0;
  z-index: 1000; /* peste alte elemente */
}

/* Layout flex pentru containerul din header */
header .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px; /* spațiu între logo și nav */
}

/* --- LOGO (imagine) --- */
.logo-container {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 140px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  display: block;
  height: 56px;     /* ajustează: 48–64px după preferință */
  width: auto;      /* păstrează proporțiile */
  object-fit: contain;
}

/* Logo cu font serif (dacă folosești text, nu imagine) */
.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: #6a3ea1;
}

/* Lista meniului, afișată orizontal cu spații între linkuri */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

/* Linkurile meniului */
.nav-links a {
  text-decoration: none; /* fără subliniere */
  color: #333;
  font-weight: 500;
}

/* HERO */
.hero {
  background: #e8dff5;
  padding: 4rem 0;
  text-align: center;
}

/* Titlu mare, mov închis */
.hero h2 {
  font-size: 2.2rem;
  color: #4e2f75;
}

/* Paragraf cu spațiu sus-jos */
.hero p {
  margin: 1rem 0;
  font-size: 1.1rem;
}

/* Buton principal - mov intens cu text alb */
.btn {
  background: #6a3ea1;
  color: white;
  padding: 0.7rem 1.5rem;
  border: none;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  margin-top: 1rem;
}
.btn:hover { background: #582f8f; }

/* SERVICII */
.servicii {
  padding: 4rem 0;
  background: #fafafa;
}
.servicii h3 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: #4e2f75;
}
.servicii-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.card {
  background: white;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: box-shadow 0.3s ease;
}
.card:hover { box-shadow: 0 2px 15px rgba(0,0,0,0.1); }

/* DESPRE SCURT */
.despre-scurt {
  padding: 3rem 0;
  text-align: center;
}
.despre-scurt h3 {
  font-size: 1.8rem;
  color: #4e2f75;
  margin-bottom: 1rem;
}

.despre-scurt .text-col {
  text-align: left;
  max-width: 900px;
  margin: 0 auto 1.5rem auto;
}

.despre-scurt .text-col p {
  margin-bottom: 1rem;
}

.btn-secondary {
  background: transparent;
  color: #6a3ea1;
  border: 2px solid #6a3ea1;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  margin-top: 1rem;
  display: inline-block;
}
.btn-secondary:hover { background: #6a3ea1; color: white; }

/* CTA */
.cta {
  background: #4e2f75;
  color: white;
  padding: 3rem 0;
  text-align: center;
}
.cta .btn {
  background: white;
  color: #4e2f75;
  margin-top: 1rem;
}
.cta .btn:hover { background: #e8dff5; }

/* FOOTER */
footer {
  background: #f2f2f2;
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  color: #777;
}

/* Header pentru pagini */
.page-header {
  background: #e8dff5;
  padding: 2rem 0;
  text-align: center;
}
.page-header h2 { color: #4e2f75; font-size: 2rem; }

/* Despre page */
.despre-page {
  padding: 3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.despre-page .text-col { flex: 1; min-width: 300px; }
.despre-page .image-col { flex: 1; min-width: 300px; text-align: center; }
.despre-page img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Servicii detaliat */
.servicii-detailed { padding: 3rem 0; }
.service-item {
  background: #fafafa;
  border-left: 5px solid #6a3ea1;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border-radius: 4px;
  box-shadow: 0 1px 8px rgba(106, 62, 161, 0.1);
  transition: box-shadow 0.3s ease;
}
.service-item:hover { box-shadow: 0 4px 20px rgba(106, 62, 161, 0.2); }
.service-item h3 { color: #6a3ea1; margin-bottom: 0.5rem; }

/* Contact */
.contact-form-section { padding: 3rem 0; }
form {
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
label { font-weight: 600; color: #4e2f75; }
input, textarea {
  padding: 0.7rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}
input:focus, textarea:focus { border-color: #6a3ea1; outline: none; }
.form-message { margin-top: 0.5rem; font-weight: 600; color: #6a3ea1; min-height: 1.5em; }
button.btn {
  background: #6a3ea1;
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 6px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
button.btn:hover { background: #582f8f; }

/* Hamburger - ascuns implicit */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 25px;
  height: 20px;
  justify-content: space-between;
}
.hamburger span {
  background: #6a3ea1;
  height: 3px;
  border-radius: 3px;
}

/* Responsive pentru mobil (max-width 768px) */
@media (max-width: 768px) {
  nav {
    position: fixed;
    background: white;
    top: 60px; /* înălțimea header-ului */
    right: 0;
    width: 200px;
    height: calc(100vh - 60px);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    z-index: 999;
  }
  nav.open { transform: translateX(0); } /* afișează meniul */

  .nav-links { flex-direction: column; padding: 1rem; }
  .nav-links li { margin: 1rem 0; }

  .hamburger { display: flex; } /* afișează hamburger */

  .logo-container{
    min-width: 0;
    flex: 1 1 100%;
  }
  .logo-text{
    flex: 1 1 auto;
  }
}

/* Header la scroll */
header.scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background: #e8dff5;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Intro */
.intro-text {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: #6a3ea1;
  font-style: italic;
}

/* Articole */
.articole-lista { padding: 3rem 0; }
.articol-preview {
  background: #fafafa;
  padding: 2rem;
  margin-bottom: 2rem;
  border-left: 4px solid #6a3ea1;
  border-radius: 6px;
  box-shadow: 0 1px 10px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}
.articol-preview:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.articol-preview h3 { color: #4e2f75; font-size: 1.4rem; margin-bottom: 0.5rem; }
.articol-preview a { text-decoration: none; font-weight: 600; }

.articole-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.articol-card {
  background: #fff;
  border: 1px solid #ddd;
  border-left: 5px solid #6a3ea1;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  margin-bottom: 2rem;
}
.articol-card:hover { transform: translateY(-5px); }
.articol-card h3 { color: #4e2f75; font-size: 1.2rem; margin-bottom: 0.5rem; }
.articol-card p { font-size: 0.95rem; color: #555; margin-bottom: 0.3rem; }

/* ==== Imagine separatoare între secțiuni ==== */
.imagine-separatoare {
  text-align: center;
  padding: 2rem 0;
  background-color: #f9f9f9; /* opțional: pentru contrast ușor */
}

.imagine-separatoare img {
  max-width: 60%;
  height: auto;
  border-radius: 8px; /* colțuri ușor rotunjite, opțional */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* efect de profunzime */
  transition: transform 0.3s ease;
}

.imagine-separatoare img:hover {
  transform: scale(1.02); /* mic efect de mărire la hover */
}

/* Header layout: logo + texte stânga, meniu dreapta */
header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* Grup logo + texte */
.logo-container{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 320px;
}

/* Textele din dreapta logo-ului */
.logo-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.logo-line-1{
  margin:0;
  font-size:0.95rem;
  font-weight:600;
  color:#333;
  line-height:1.25;
}

.logo-line-2{
  margin:0;
  font-size:0.85rem;
  color:#666;
  line-height:1.25;
}

/* ==============================
   FIX: CENTRARE MENIU PE DESKTOP
   (fără să stric mobilul)
   ============================== */
@media (min-width: 769px){
  nav{
    /* nav ocupă spațiul dintre logo și hamburger și centrează conținutul */
    margin-left: 0;              /* neutralizează margin-left:auto de mai jos */
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-links{
    justify-content: center;
    flex-wrap: nowrap;
  }

  /* Hamburger (dacă apare prin alte reguli) rămâne la dreapta */
  .hamburger{
    margin-left: auto;
  }
}

/* Meniu: pe un rând, cu spațiere corectă */
nav{
  width:100%;
  display:flex;
  justify-content:center;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:nowrap;
}

/* (opțional) dacă îți „cade” meniul sub logo pe ecrane mici */
@media (max-width: 900px){
  header .container{
    flex-wrap:wrap;
  }
  nav{
    width:100%;
    /* pe ecrane mai mici, îl lăsăm să se alinieze natural (nu forțăm centrare completă) */
    margin-left: 0;
  }
  .nav-links{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}