/*
Theme Name:   Proiect Familiar
Theme URI:    https://proiectfamiliar.ro
Description:  Child theme pentru Proiect Familiar — bazat pe Hello Elementor
Author:       Proiect Familiar
Template:     hello-elementor
Version:      1.0.0
Text Domain:  proiect-familiar
*/

/* ============================================================
   IMPORT FONTURI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   VARIABILE GLOBALE
   ============================================================ */
:root {
  /* Arhitectural */
  --pf-bej:         #F2EAD9;
  --pf-grena:       #704F3A;
  --pf-greige:      #E5D7CE;
  --pf-text:        #1C1712;
  --pf-muted:       #888078;
  --pf-white:       #FDFAF5;

  /* Imobiliar */
  --pf-navy:        #203354;
  --pf-blue-light:  #D4E6F1;
  --pf-blue-bg:     #F5FAFD;

  /* Tipografie */
  --pf-font-title:  'Playfair Display', Georgia, serif;
  --pf-font-body:   'Plus Jakarta Sans', sans-serif;
}

/* ============================================================
   RESET & BAZĂ
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--pf-font-body) !important;
  background-color: var(--pf-white);
  color: var(--pf-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pf-font-title) !important;
  color: var(--pf-text);
  line-height: 1.2;
  font-weight: 700;
}

p, a, li, span, div,
input, select, textarea, button, label {
  font-family: var(--pf-font-body);
}

a {
  color: var(--pf-grena);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--pf-text); }

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

/* ============================================================
   ELEMENTOR — OVERRIDE DEFAULTS
   ============================================================ */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--pf-font-title) !important;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--pf-font-body) !important;
}

/* Elimină border-radius peste tot */
.elementor-widget-image img,
.elementor-widget-image-box img,
.elementor-button {
  border-radius: 0 !important;
}

/* ============================================================
   CLASE UTILITARE — folosite direct în Elementor
   Advanced → CSS Classes
   ============================================================ */

/* ── Fundaluri secțiuni ── */
.pf-bg-bej     { background-color: var(--pf-bej) !important; }
.pf-bg-white   { background-color: var(--pf-white) !important; }
.pf-bg-grena   { background-color: var(--pf-grena) !important; }
.pf-bg-dark    { background-color: var(--pf-text) !important; }
.pf-bg-blue    { background-color: var(--pf-blue-bg) !important; }
.pf-bg-navy    { background-color: var(--pf-navy) !important; }

/* ── Culori text ── */
.pf-text-white  { color: #fff !important; }
.pf-text-bej    { color: var(--pf-bej) !important; }
.pf-text-grena  { color: var(--pf-grena) !important; }
.pf-text-navy   { color: var(--pf-navy) !important; }
.pf-text-muted  { color: var(--pf-muted) !important; }
.pf-text-dark   { color: var(--pf-text) !important; }

/* ── Font titlu pe element specific ── */
.pf-serif { font-family: var(--pf-font-title) !important; }
.pf-sans  { font-family: var(--pf-font-body) !important; }

/* ── Italic colorat ── */
.pf-italic-grena em,
.pf-italic-grena i {
  font-style: italic;
  color: var(--pf-grena);
}
.pf-italic-navy em,
.pf-italic-navy i {
  font-style: italic;
  color: var(--pf-navy);
}

/* ── Label supratitlu ── */
.pf-label {
  font-family: var(--pf-font-body) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--pf-grena) !important;
  display: block;
}
.pf-label-navy { color: var(--pf-navy) !important; }
.pf-label-white { color: rgba(253,250,245,0.6) !important; }

/* ── Divider subțire ── */
.pf-divider {
  width: 40px;
  height: 1px;
  background: var(--pf-grena);
  opacity: 0.35;
}
.pf-divider-white { background: rgba(253,250,245,0.4); opacity: 1; }
.pf-divider-center { margin: 0 auto; }

/* ============================================================
   BUTOANE
   ============================================================ */
.elementor-button,
.pf-btn {
  font-family: var(--pf-font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: all 0.2s !important;
  padding: 14px 28px !important;
}

/* Buton principal maro */
.elementor-button.pf-btn-primary,
.pf-btn-primary {
  background-color: var(--pf-grena) !important;
  color: #fff !important;
  border: 1px solid var(--pf-grena) !important;
}
.elementor-button.pf-btn-primary:hover { opacity: 0.82 !important; }

/* Buton outline maro */
.elementor-button.pf-btn-outline,
.pf-btn-outline {
  background: transparent !important;
  color: var(--pf-grena) !important;
  border: 1px solid var(--pf-grena) !important;
}
.elementor-button.pf-btn-outline:hover {
  background: var(--pf-grena) !important;
  color: #fff !important;
}

/* Buton navy */
.elementor-button.pf-btn-navy,
.pf-btn-navy {
  background-color: var(--pf-navy) !important;
  color: #fff !important;
  border: 1px solid var(--pf-navy) !important;
}

/* Buton outline pe fundal întunecat */
.elementor-button.pf-btn-light,
.pf-btn-light {
  background: transparent !important;
  color: var(--pf-bej) !important;
  border: 1px solid rgba(242,234,217,0.4) !important;
}
.elementor-button.pf-btn-light:hover {
  background: rgba(242,234,217,0.1) !important;
}

/* ============================================================
   CARDS PROIECTE
   ============================================================ */
.pf-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #c8b8a0;
  aspect-ratio: 4/3;
  display: block;
}

.pf-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.4s;
  filter: brightness(0.9);
}

.pf-card:hover img {
  transform: scale(1.04);
  filter: brightness(0.55) saturate(0.8);
}

.pf-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 32px;
  background: linear-gradient(transparent, rgba(10,7,5,0.88));
  opacity: 0;
  transition: opacity 0.35s;
}

.pf-card:hover .pf-card-overlay { opacity: 1; }

.pf-card-category {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253,250,245,0.7);
  margin-bottom: 6px;
  display: block;
}

.pf-card-title {
  font-family: var(--pf-font-title);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.pf-card-meta {
  font-size: 0.65rem;
  color: rgba(253,250,245,0.6);
  margin-top: 6px;
  letter-spacing: 0.05em;
}

/* Card featured */
.pf-card-featured { aspect-ratio: 21/9; }

/* Grid proiecte */
.pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* ============================================================
   ABOUT BLOCK (secțiune colorată)
   ============================================================ */
.pf-about {
  padding: 80px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.pf-about h2, .pf-about h3 {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  color: #fff !important;
}

.pf-about p {
  font-size: 0.88rem !important;
  line-height: 1.9 !important;
  color: rgba(253,250,245,0.65) !important;
  font-weight: 300;
}

.pf-about a {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 0.5px solid rgba(253,250,245,0.4);
  padding-bottom: 3px;
}

/* ============================================================
   STATEMENT PRINCIPAL
   ============================================================ */
.pf-statement {
  padding: 60px 60px 52px;
  border-bottom: 0.5px solid rgba(28,23,18,0.08);
}

.pf-statement h2 {
  font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  max-width: 700px;
}

/* ============================================================
   NAVIGAȚIE
   ============================================================ */
.site-header,
.elementor-location-header {
  background: var(--pf-white);
  border-bottom: 0.5px solid rgba(28,23,18,0.08);
}

/* Nav links */
.elementor-nav-menu .elementor-item {
  font-family: var(--pf-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--pf-text) !important;
  text-transform: none !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--pf-grena) !important;
}

/* Logo */
.site-logo,
.elementor-widget-site-logo img {
  max-height: 40px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
.elementor-location-footer {
  background: var(--pf-text);
  padding: 36px 60px;
}

.site-footer p,
.site-footer a,
.elementor-location-footer p,
.elementor-location-footer a {
  color: rgba(242,234,217,0.35) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer a:hover,
.elementor-location-footer a:hover {
  color: var(--pf-bej) !important;
}

/* ============================================================
   FORMULARE CONTACT
   ============================================================ */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  font-family: var(--pf-font-body) !important;
  border: 1px solid rgba(28,23,18,0.18) !important;
  border-radius: 0 !important;
  background: var(--pf-white) !important;
  color: var(--pf-text) !important;
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
  transition: border-color 0.2s !important;
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
  border-color: var(--pf-grena) !important;
  outline: none !important;
  box-shadow: none !important;
}

.elementor-field-label {
  font-family: var(--pf-font-body) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--pf-muted) !important;
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-card-featured { aspect-ratio: 4/3; }
  .pf-card-overlay { opacity: 1; }

  .pf-about {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 24px;
  }

  .pf-statement { padding: 36px 24px 28px; }

  .site-footer,
  .elementor-location-footer {
    padding: 32px 24px;
    text-align: center;
  }
}