/*
 Theme Name:   Hana Němcová – Divi Child
 Theme URI:    https://hananemcova.cz
 Description:  Child theme šablony Divi pro web finanční poradkyně Hany Němcové. Paleta: teplá antracitová, tlumené staré zlato, teplá greige. Důraz na lidský, osobní tón.
 Author:       Vytvořeno pro Hanu Němcovou
 Template:     Divi
 Version:      1.0.1
 Text Domain:  hana-nemcova-divi-child
*/

/* ==========================================================================
   1) DESIGN TOKENY (barvy, typografie, rozestupy)
   -------------------------------------------------------------------------
   Paleta je záměrně "teplá" verze černo-zlaté - ne studená luxusní
   kombinace, ale odstíny, které fungují s fotkami a osobním textem.
   ========================================================================== */

:root {
  /* Antracitová (místo čisté černé - působí měkčeji, méně "pohřebně") */
  --hn-black:        #1C1B17;
  --hn-black-soft:   #2A2823;

  /* Tlumené staré zlato (ne křiklavé, ne "bling") */
  --hn-gold:          #B8894A;
  --hn-gold-light:    #D4AF6A;
  --hn-gold-dark:     #96693A;

  /* Teplá šedá / greige - hlavní podkladová barva webu */
  --hn-grey-bg:       #F4F1EC;
  --hn-grey-mid:      #8C877D;
  --hn-grey-dark:     #4A473F;

  --hn-white:         #FFFFFF;

  /* Typografie */
  --hn-font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --hn-font-body:     'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --hn-font-note:     'Caveat', cursive; /* pro "osobní poznámky" - viz níže */

  --hn-radius:        14px;
  --hn-radius-lg:     28px;
}

/* ==========================================================================
   2) ZÁKLADNÍ STYLY
   ========================================================================== */

body, .et_pb_section {
  background-color: var(--hn-grey-bg);
  color: var(--hn-grey-dark);
  font-family: var(--hn-font-body);
  font-size: 17px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3 {
  font-family: var(--hn-font-display);
  color: var(--hn-black);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 400; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

a { color: var(--hn-gold-dark); transition: color 0.2s ease; }
a:hover { color: var(--hn-gold); }

/* ==========================================================================
   3) SEKCE - UTILITY TŘÍDY
   -------------------------------------------------------------------------
   Přidávej v Divi Builderu do pole "CSS Class" u sekce/řádku/modulu.
   ========================================================================== */

/* Tmavá sekce (např. "O mně", reference, patička) */
.hn-section-dark {
  background-color: var(--hn-black) !important;
  color: var(--hn-grey-bg);
}
.hn-section-dark h1, .hn-section-dark h2, .hn-section-dark h3,
.hn-section-dark h4, .hn-section-dark h5, .hn-section-dark h6 {
  color: var(--hn-white);
}
.hn-section-dark p { color: #C9C6BE; }

/* Zlatý akcent na pozadí - používat úsporně, jen malé plochy (badge, CTA pruh) */
.hn-section-gold {
  background-color: var(--hn-gold) !important;
  color: var(--hn-black);
}

/* Bílá "karta" na greige pozadí - pro formulář, reference, ceníkové boxy */
.hn-card {
  background-color: var(--hn-white);
  border-radius: var(--hn-radius);
  padding: 40px;
  box-shadow: 0 12px 32px rgba(28, 27, 23, 0.08);
}

/* Zaoblené fotky - měkčí, lidštější než ostré rohy */
.hn-photo-round img {
  border-radius: var(--hn-radius-lg);
}

/* Tenký zlatý oddělovač místo těžkých bloků */
.hn-divider-gold {
  border: none;
  height: 2px;
  width: 64px;
  background-color: var(--hn-gold);
  margin: 24px 0;
}

/* ==========================================================================
   4) SIGNATURE PRVEK: "Osobní poznámka"
   -------------------------------------------------------------------------
   Ručně psaný citát/poznámka od Hany - opakující se prvek napříč webem,
   který nese hlavní myšlenku "za čísly je člověk". Vkládej do Divi textového
   modulu, obal text do <p class="hn-note">…</p>, případně přidej
   <span class="hn-note-sign">– Hana</span> na konec.
   ========================================================================== */

.hn-note {
  font-family: var(--hn-font-note);
  font-size: 1.7rem;
  line-height: 1.5;
  color: var(--hn-gold-dark);
  position: relative;
  padding-left: 28px;
  border-left: 3px solid var(--hn-gold);
}

.hn-note-sign {
  display: block;
  margin-top: 8px;
  font-family: var(--hn-font-note);
  font-size: 1.3rem;
  color: var(--hn-black);
}

/* ==========================================================================
   5) TLAČÍTKA (Divi buttons + CF7 submit)
   ========================================================================== */

.et_pb_button, .wpcf7-submit {
  font-family: var(--hn-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  background-color: var(--hn-gold) !important;
  border: none !important;
  color: var(--hn-black) !important;
  border-radius: 999px !important;
  padding: 14px 34px !important;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.et_pb_button:hover, .wpcf7-submit:hover {
  background-color: var(--hn-gold-light) !important;
  transform: translateY(-1px);
  color: var(--hn-black) !important;
}

/* Sekundární (obrysové) tlačítko - přidej CSS třídu "hn-btn-outline" na modul tlačítka */
.hn-btn-outline .et_pb_button {
  background-color: transparent !important;
  border: 2px solid var(--hn-gold) !important;
  color: var(--hn-black) !important;
}
.hn-btn-outline.hn-section-dark .et_pb_button {
  color: var(--hn-white) !important;
}

/* ==========================================================================
   6) POPTÁVKOVÝ FORMULÁŘ (Contact Form 7)
   ========================================================================== */

.wpcf7-form {
  background-color: var(--hn-white);
  border-radius: var(--hn-radius);
  padding: 40px;
}

.wpcf7-form p label {
  font-size: 0.9rem;
  color: var(--hn-grey-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  border: 1px solid #DDD8CE;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--hn-font-body);
  font-size: 1rem;
  background-color: var(--hn-grey-bg);
  margin-bottom: 18px;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--hn-gold);
  background-color: var(--hn-white);
}

.wpcf7-form .wpcf7-acceptance label {
  font-weight: 400;
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.wpcf7-not-valid-tip {
  color: #B3261E;
  font-size: 0.82rem;
  margin-top: -14px;
  margin-bottom: 14px;
  display: block;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--hn-gold) !important;
  background-color: #FBF6EC;
  border-radius: 8px;
}

/* ==========================================================================
   7) RESPONZIVITA - drobné doladění pro mobil
   ========================================================================== */

@media (max-width: 767px) {
  .hn-card, .wpcf7-form { padding: 26px; }
  .hn-note { font-size: 1.4rem; }
}

/* ==========================================================================
   8) PŘÍSTUPNOST - viditelný focus stav
   ========================================================================== */

a:focus-visible, button:focus-visible, .et_pb_button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--hn-gold-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}