/*
Theme Name: Dragos Marian — Design B
Theme URI: https://dragosmarian.ro
Description: Tema child Hello Elementor cu setarile designului B (verde-padure + chihlimbar, Bricolage Grotesque + Hanken Grotesk). Se foloseste impreuna cu sabloanele Elementor din pachetul "elementor-templates-design-b".
Author: Dragos Marian
Template: hello-elementor
Version: 2.0.0
Text Domain: dragosmarian-b
*/

:root {
  /* Paleta Design B */
  --dm-bg: #f3efe6;          /* fundal pagina */
  --dm-surface: #fdfaf3;     /* carduri */
  --dm-border: #ddd5c2;      /* contur carduri (1.5px) */
  --dm-dark: #1d2620;        /* verde-padure inchis */
  --dm-dark-line: #37423a;   /* linii pe fond inchis */
  --dm-amber: #d8a24a;       /* accent chihlimbar */
  --dm-amber-text: #a1741f;  /* text chihlimbar pe fundal deschis */
  --dm-amber-bg: #f6edd9;    /* fundal chip chihlimbar */
  --dm-text: #5f5a4c;        /* text curent */
  --dm-muted: #7c7663;       /* text secundar */
  --dm-on-dark: #b9c2b8;     /* text pe fond inchis */
  --dm-on-dark-muted: #7d887f;

  --dm-font-heading: 'Bricolage Grotesque', sans-serif;
  --dm-font-body: 'Hanken Grotesk', sans-serif;

  --dm-radius-card: 20px;
  --dm-radius-btn: 12px;
  --dm-radius-chip: 10px;
}

/* ============================================================
   1. BAZA — tipografie si fundal
   ============================================================ */

body {
  background-color: var(--dm-bg);
  font-family: var(--dm-font-body) !important;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--dm-text);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--dm-font-heading) !important;
  color: var(--dm-dark);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h3, h4, h5, h6 { font-weight: 600; }

/* Marimi implicite pe niveluri (Elementor nu le seteaza consecvent) */
h1, h1.elementor-heading-title { font-size: 60px; line-height: 1.05; letter-spacing: -0.02em; }
h2, h2.elementor-heading-title { font-size: 44px; }
h3, h3.elementor-heading-title { font-size: 30px; }
h4, h4.elementor-heading-title { font-size: 24px; }

/* Evidentierea aurie din titluri (span-urile din prototip) */
h1 span, h2 span, h3 span,
.elementor-heading-title span { color: var(--dm-amber); }

/* Corpul de text al widgeturilor */
.elementor-widget-text-editor,
.elementor-text-editor {
  font-family: var(--dm-font-body) !important;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--dm-text);
}

a { color: var(--dm-amber-text); text-decoration: none; }
a:hover { color: var(--dm-dark); }

::selection { background: var(--dm-amber); color: var(--dm-dark); }

blockquote {
  border-left: 3px solid var(--dm-amber);
  margin: 0;
  padding: 4px 0 4px 22px;
  font-family: var(--dm-font-heading);
  font-size: 21px;
  font-style: italic;
  color: var(--dm-dark);
}

/* ============================================================
   2. SECTIUNI PE FOND INCHIS (hero, footer)
   Orice sectiune cu fundal #1d2620: textul devine crem automat.
   ============================================================ */

.elementor-section[data-settings] {} /* pastreaza specificitatea joasa */

/* aplica pe sectiunile care au clasa utilitara .dm-dark
   SAU direct pe cele cu fundalul verde setat de sabloane */
.dm-dark h1, .dm-dark h2, .dm-dark h3, .dm-dark h4,
.dm-dark .elementor-heading-title { color: #f3efe6; }
.dm-dark, .dm-dark .elementor-widget-text-editor { color: var(--dm-on-dark); }
.dm-dark a:not(.elementor-button) { color: var(--dm-amber); }
.dm-dark a:not(.elementor-button):hover { color: #f3efe6; }

/* ============================================================
   3. BUTOANE — 3 variante prin clase utilitare
   Pune clasa pe WIDGETUL de buton: Advanced -> CSS Classes.
   .dm-btn-gold  = auriu plin (Programare)
   .dm-btn-line  = contur (pe fond inchis: crem; pe deschis: verde)
   .dm-btn-dark  = verde inchis plin (pe fond deschis)
   Fara clasa: butonul primeste implicit varianta aurie.
   ============================================================ */

.elementor-button {
  font-family: var(--dm-font-body) !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  border-radius: var(--dm-radius-btn) !important;
  padding: 15px 28px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* implicit + varianta aurie */
.elementor-button,
.dm-btn-gold .elementor-button {
  background-color: var(--dm-amber) !important;
  color: var(--dm-dark) !important;
  border: 1.5px solid var(--dm-amber) !important;
}
.elementor-button:hover,
.dm-btn-gold .elementor-button:hover {
  background-color: #c9923c !important;
  border-color: #c9923c !important;
  color: var(--dm-dark) !important;
}

/* contur */
.dm-btn-line .elementor-button {
  background: transparent !important;
  color: var(--dm-dark) !important;
  border: 1.5px solid var(--dm-dark) !important;
}
.dm-btn-line .elementor-button:hover {
  background: var(--dm-dark) !important;
  color: var(--dm-bg) !important;
}
/* contur pe fond inchis */
.dm-dark .dm-btn-line .elementor-button {
  color: #f3efe6 !important;
  border-color: #4a564c !important;
}
.dm-dark .dm-btn-line .elementor-button:hover {
  background: #f3efe6 !important;
  color: var(--dm-dark) !important;
  border-color: #f3efe6 !important;
}

/* verde inchis plin */
.dm-btn-dark .elementor-button {
  background-color: var(--dm-dark) !important;
  color: #f3efe6 !important;
  border: 1.5px solid var(--dm-dark) !important;
}
.dm-btn-dark .elementor-button:hover {
  background-color: #2a362e !important;
  color: #f3efe6 !important;
}

/* crem plin (pe fond inchis, ex. footer) */
.dm-btn-cream .elementor-button {
  background-color: #f3efe6 !important;
  color: var(--dm-dark) !important;
  border: 1.5px solid #f3efe6 !important;
}
.dm-btn-cream .elementor-button:hover {
  background-color: #e6e0d1 !important;
}

/* ============================================================
   4. CARDURI — clasa .dm-card pe sectiunea/coloana card
   ============================================================ */

.dm-card {
  background-color: var(--dm-surface) !important;
  border: 1.5px solid var(--dm-border) !important;
  border-radius: var(--dm-radius-card) !important;
  overflow: hidden;
  box-shadow: none !important;
}

/* Elementor pune uneori umbre implicite din kit */
.elementor-widget, .elementor-column, .elementor-section {
  box-shadow: none;
}

/* ============================================================
   5. CHIPS / TAGS — .dm-chips pe widgetul text care contine lista
   In prototip: fundal crem-deschis, contur, radius 10, 15px/600.
   Scrie chip-urile ca linkuri sau <span> despartite in widget.
   ============================================================ */

.dm-chips a, .dm-chips span, .dm-chip {
  display: inline-block;
  background: var(--dm-surface);
  border: 1.5px solid var(--dm-border);
  border-radius: var(--dm-radius-chip);
  padding: 10px 20px;
  margin: 5px 6px 5px 0;
  font-family: var(--dm-font-heading) !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--dm-dark);
  line-height: 1;
}
.dm-chips a:hover { border-color: var(--dm-amber); color: var(--dm-dark); }

/* tag mic auriu (pe carduri: "50 min individual" etc.) */
.dm-tags a, .dm-tags span, .dm-tag {
  display: inline-block;
  background: var(--dm-amber-bg);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  margin: 3px 6px 3px 0;
  font-family: var(--dm-font-body) !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dm-amber-text);
  line-height: 1.2;
}

/* ============================================================
   6. EYEBROW — eticheta mica uppercase de deasupra titlurilor
   Clasa .dm-eyebrow pe widgetul heading/text.
   ============================================================ */

.dm-eyebrow,
.dm-eyebrow .elementor-heading-title,
.dm-eyebrow .elementor-text-editor {
  font-family: var(--dm-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--dm-amber-text) !important;
}
.dm-dark .dm-eyebrow,
.dm-dark .dm-eyebrow .elementor-heading-title { color: var(--dm-amber) !important; }

/* ============================================================
   7. IMAGINI — implicit rotunjite; .dm-img-flush pentru cele
   care umplu marginea cardului (fara radius propriu)
   ============================================================ */

.elementor-widget-image img {
  border-radius: var(--dm-radius-card);
  object-fit: cover;
}
.dm-img-flush img, .dm-card .elementor-widget-image img { border-radius: 0; }

/* ============================================================
   8. SPATIERE — ritmul din prototip
   ============================================================ */

/* padding implicit al sectiunilor de top (dupa import unele au 10px) */
.elementor-section-boxed > .elementor-container { max-width: 1180px; }

/* spatiu intre widgeturi: 12px in interiorul cardurilor */
.dm-card .elementor-widget { margin-bottom: 12px; }
.dm-card .elementor-widget:last-child { margin-bottom: 0; }

/* FAQ: randuri cu linie despartitoare */
.dm-faq .elementor-widget-text-editor,
.dm-faq-row {
  border-bottom: 1.5px solid var(--dm-border);
  padding: 16px 0;
  margin: 0;
}

/* Definition rows (eticheta + valoare) */
.dm-defrow { border-bottom: 1.5px solid var(--dm-border); padding: 18px 0; }

/* ============================================================
   9. FORMULARE
   ============================================================ */

button, input[type="submit"] {
  font-family: var(--dm-font-body);
  font-weight: 700;
  border-radius: var(--dm-radius-btn);
}

input[type="text"], input[type="email"], input[type="tel"],
select, textarea {
  background: var(--dm-bg);
  border: 1.5px solid var(--dm-border);
  border-radius: var(--dm-radius-chip);
  font-family: var(--dm-font-body);
  color: var(--dm-dark);
  padding: 13px 14px;
}
label { font-size: 13px; font-weight: 700; color: var(--dm-dark); }

/* ============================================================
   10. RESPONSIVE — titlurile mari scad pe mobil
   ============================================================ */

@media (max-width: 767px) {
  h1, h1.elementor-heading-title { font-size: 40px; }
  h2, h2.elementor-heading-title { font-size: 32px; }
  h3, h3.elementor-heading-title { font-size: 24px; }
  body { font-size: 16.5px; }
  .elementor-button { padding: 13px 22px !important; }
}