/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/
 Description:  Hello Elementor Child Theme
 Author:       Tóth László
 Author URI:   https://ablakos.hdnyilaszaro-szerviz.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* ============================================================
   1. GLOBÁLIS VÁLTOZÓK ÉS ALAPBEÁLLÍTÁSOK
   ============================================================ */
:root {
  --color-primary-brown: #592c0e;
  --color-primary-green: #4b6605;
  --color-accent-green: #84b026;
  --color-light-green: #c7f464;
  --color-earth-tan: #a67c52;
  --color-deep-dark: #261c13;
  --color-sand-light: #d9c5a0;
  --color-white: #ffffff;
  --color-off-white: #f9f7f2;

  --font-main: 'Poppins', system-ui, sans-serif;
  --font-secondary: 'Lora', Georgia, serif;
  --font-accent: 'Marck Script', cursive;

    --nav-height: 85px;
    --nav-height-mobile: 85px;
    /* Mivel a JS-t töröltük, adjunk egy fix értéket a --nav-h-nak is, 
       hogy a rá hivatkozó kódok ne omoljanak össze: */
    --nav-h: 85px; 
    --transition-smooth: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   1. GLOBÁLIS ALAPOK ÉS RESET
   ============================================================ */
body {
    background-color: var(--color-off-white);
    color: var(--color-primary-brown);
    font-family: var(--font-main);
    line-height: 1.7;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

p, span, .elementor-widget-container {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* ============================================================
   2. CÍMSOROK (NAGY SZÖVEGEK) - Dinamikus méretezéssel
   ============================================================ */

/* Közös tulajdonságok minden címre */
div.elementor-widget-heading .elementor-heading-title,
h1.elementor-heading-title, 
h2.elementor-heading-title, 
h3.elementor-heading-title, 
h4.elementor-heading-title, 
h5.elementor-heading-title, 
h6.elementor-heading-title,
.elementor-icon-box-title a {
    color: var(--color-primary-brown);
    font-family: var(--font-main);
    margin-bottom: 0.5em;
    display: block;
}

/* Erősített szabály a címsoroknak */
h2.elementor-heading-title, 
.elementor-heading-title {
    color: var(--color-primary-brown) !important;
}

/* H1 - Az abszolút legnagyobb */
h1, h1.elementor-heading-title, .elementor-widget-heading h1 {
    font-weight: 900;
    font-size: clamp(2.25rem, 6vw + 1rem, 4rem);
    line-height: 1.1;
}

/* H2 és H3 - Másodlagos címek */
h2, h3, .elementor-heading-title:not(h1):not(h4):not(h5):not(h6) {
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw + 1rem, 2.625rem);
    line-height: 1.2;
}

/* H4 és H5 - Kisebb alcímek */
h4, h5, .elementor-widget-heading h4, .elementor-widget-heading h5 {
    font-weight: 500;
    font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);
    line-height: 1.3;
}

/* H6 - Kicsi, alcím-szerű stílus */
h6, .elementor-widget-heading h6 {
    font-weight: 400;
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   3. BEKEZDÉSEK ÉS LEÍRÁSOK (KICSI SZÖVEGEK)
   ============================================================ */
p,
.elementor-widget.elementor-widget-heading > p,
.elementor-widget-text-editor p,
.elementor-widget-text-editor > p,
.elementor-icon-box-description {
    font-family: var(--font-secondary);
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem); 
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-primary-brown);
    white-space: pre-line;
    margin-bottom: 1.5em;
}

/* Az utolsó bekezdés után ne legyen felesleges üres hely */
.elementor-widget-text-editor p:last-child,
.elementor-icon-box-description p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   4. EGYEDI ELEMEK (Linkek, Slider kivétel, Dark Mode)
   ============================================================ */

/* Heading link hover */
.elementor-widget-heading .elementor-heading-title > a:hover {
    color: var(--color-accent-green) !important;
    transition: var(--transition-smooth);
    text-decoration: none;
}

/* egyedi link stílus a szöveges tartalomhoz */
.elementor-widget-text-editor a {
    color: var(--color-primary-brown) !important; /* halvány barna */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.elementor-widget-text-editor a:hover {
    color: var(--color-accent-green) !important; /* zöld (elsődleges márkszín) */
    text-decoration: underline;
}

/* ============================================================
   SZÖVEGSZERKESZTŐN BELÜLI H2 - EGYEDI STÍLUS
   ============================================================ */

/* A pontosabb szelektorral felülbíráljuk az Elementor alapértelmezett szabályait */
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h2 b,
.elementor-widget-text-editor h2 span {
    font-family: var(--font-main) !important; /* Poppins használata kényszerítve */
    font-size: clamp(1.5rem, 3vw + 1rem, 2rem) !important;
    font-weight: 500 !important;
    color: var(--color-primary-brown) !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.6em !important;
    text-transform: none !important;
    display: block !important;
}

/* A pontosabb szelektorral felülbíráljuk az Elementor alapértelmezett szabályait */
.elementor-widget-text-editor h3 {
    font-family: var(--font-main) !important; /* Poppins használata kényszerítve */
    font-size: clamp(1.5rem, 3vw + 1rem, 2rem) !important;
    font-weight: 700 !important;
    color: var(--color-primary-brown) !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.6em !important;
    text-transform: none !important;
    display: block !important;
}
/* ============================================================
   LISTAJELEK (PÖTTYÖK) SZÍNEZÉSE
   ============================================================ */

/* 1. Modern módszer (minden modern böngésző támogatja) */
.elementor-widget-text-editor ul li::marker,
.elementor-icon-box-description ul li::marker {
    color: var(--color-accent-green); /* Világosabb zöld a jobb láthatóságért */
    font-size: 1.2em; /* Opcionális: kicsit nagyobb pöttyök */
}

/* 2. Biztonsági tartalék (régebbi szelektorokhoz és elrendezésekhez) */
.elementor-widget-text-editor ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 1.5em;
}

.elementor-widget-text-editor li {
    color: var(--color-primary-brown); /* A szöveg marad barna */
    padding-left: 5px;
}

/* Ha az Elementor alapból kikapcsolná a listastílust, itt kényszerítjük vissza */
.elementor-widget-text-editor ul {
    list-style: disc !important;
}

/* Dark-BG Rendszer */
.dark-bg {
    background-color: var(--color-deep-dark) !important;
}

.dark-bg :is(h1, h2, h3, h4, h5, h6, p, span, li, a:not(.elementor-button)) {
    color: var(--color-sand-light) !important;
}

.dark-bg h2.elementor-heading-title {
    color: var(--color-light-green) !important;
}

/* Slider kivétel (hogy a főoldali slider ne örökölje a barna színt, ha ott fehér kellene) */
.hero-content-slider * {
    /* Itt a slider egyedi stílusai élnek, nem bántjuk őket */
}

/* ============================================================
   5. DARK-BG RENDSZER (GLOBÁLIS)
   ============================================================ */
.dark-bg {
  background-color: var(--color-deep-dark) !important;
}

.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6,
.dark-bg p,
.dark-bg span,
.dark-bg li,
.dark-bg a:not(.elementor-button) {
  color: var(--color-sand-light) !important;
}

.dark-bg h2.elementor-heading-title {
  color: var(--color-light-green) !important;
}

/*==========================
    4. MODULOK VÉDELME ÉS INTEGRÁCIÓJA
========================== */
.nav-container {
  z-index: 1000;
}
.nav-menu li a {
  color: var(--color-primary-brown);
}
.nav-menu li a:hover {
  color: var(--color-primary-green);
}

/*==========================
    5. PRÉMIUM GOMB RENDSZER
========================== */
.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 10px;
  font-family: var(--font-main);
  font-weight: 700;
  transition: all 0.4s ease-in-out;
}

/* --- 1. DARK (BARNA) GOMBOK --- */
/* A módosítás: a szabály illeszkedik a .btn-dark osztályú elemre ÉS az .elementor-button gyerekeire is */
.btn-dark, 
.btn-dark .elementor-button {
  background-color: var(--color-primary-brown) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-primary-brown) !important;
  /* Ezeket is hozzáadjuk, hogy az űrlapgombod is megkapja a szép formát */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.btn-dark:hover, 
.btn-dark:hover .elementor-button {
  background-color: transparent !important;
  color: var(--color-primary-brown) !important;
}

.btn-dark-rev .elementor-button {
  background-color: transparent;
  color: var(--color-primary-brown);
  border: 2px solid var(--color-primary-brown);
}
.btn-dark-rev:hover .elementor-button {
  background-color: var(--color-primary-brown);
  color: var(--color-white);
}

/* --- 2. ACCENT (ZÖLD) GOMBOK --- */
.btn-accent .elementor-button {
  background-color: var(--color-accent-green);
  color: var(--color-off-white);
  border: 2px solid var(--color-accent-green);
}
.btn-accent:hover .elementor-button {
  background-color: transparent;
  color: var(--color-accent-green);
}

/* --- 2. ACCENT V2 (ZÖLD) GOMBOK --- */
.btn-accent2 .elementor-button {
  background-color: var(--color-accent-green);
  border: 2px solid #fff !important;
  color: var(--color-off-white);
}
.btn-accent2:hover .elementor-button {
  border: 2px solid #fff !important;
  background-color: var(--color-primary-brown);
  color: var(--color-off-white);
}

.btn-accent-rev .elementor-button {
  background-color: transparent;
  color: var(--color-accent-green);
  border: 2px solid var(--color-accent-green);
}
.btn-accent-rev:hover .elementor-button {
  background-color: var(--color-accent-green);
  color: var(--color-white);
}

/* --- 3. IKONOK A GOMBOKBAN --- */
.elementor-button .elementor-button-icon svg {
  fill: currentColor;
  width: 1.2em;
  height: 1.2em;
  transition: all 0.4s ease-in-out;
}
.elementor-button:hover .elementor-button-icon svg {
  fill: currentColor;
  transform: translateX(3px);
}

/*==========================
    6. RESPONSIVE SEGÍTSÉG
Ez a kód kényszeríti a böngészőt, hogy vágja le az összes kilógó részt a vízszintes tengelyen.
===================== */
@media (max-width: 768px) {
  .dark-bg {
    padding: 20px;
  }
  p {
    text-align: left;
  }
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
}

/* 1px-nél nagyobb túlcsordulás kereső*/
/** {
    outline: 1px solid red !important;
}*/

/* Slider elemek szétcsúszás elleni védelme */
.hero-content-slider, 
.hero-content-slider * {
    will-change: transform, opacity;
    transform: translateZ(0); /* Hardveres gyorsítás bekapcsolása */
    backface-visibility: hidden;
}

@media (max-width: 767px) {
    p, .elementor-widget-text-editor {
        text-align: left !important;
    }
}

/* Szolid változat */
.e-font-icon-svg.e-fab-facebook {
  fill: var(--color-primary-brown);
  transition: var(--transition-smooth);
}

.e-font-icon-svg.e-fab-facebook:hover {
  fill: var(--color-accent-green) !important;
}

/* Márkásabb változat (válaszd ezt, ha a fenti nem tetszik) */
/*
.e-font-icon-svg.e-fab-facebook {
  fill: var(--color-deep-dark);
  transition: var(--transition-smooth);
}

.e-font-icon-svg.e-fab-facebook:hover {
  fill: var(--color-primary-green);
}
*/

/* ============================================================
    STILIZÁLT MOBIL ALSÓ SÁV
/* ============================================================
    VÉGLEGES STICKY BAR JAVÍTÁS
   ============================================================ */

/* Alap konténer kényszerítése */
.mobile-sticky-bar {
    display: none;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 75px !important;
    z-index: 999999 !important;
    grid-template-columns: 1fr 1fr;
    margin: 0 !important;
    padding: 0 !important;
}

/* Elemek belső elrendezése */
.sticky-bar-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    gap: 5px !important;
}

/* Ikon körök stilizálása */
.sticky-bar-item .icon-circle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* IKONOK SZÍNE ÉS MÉRETE - Kényszerítve, hogy ne legyen barna */
.sticky-bar-item i {
    font-size: 1.3rem !important;
    color: #ffffff !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

/* SZÖVEGEK - A globális barna felülbírálása */
.sticky-bar-item .sticky-text {
    font-family: var(--font-main) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Hívás: Zöld háttér, Fehér felirat */
.call-item {
    background-color: var(--color-primary-green) !important;
}
.call-item .sticky-text {
    color: #ffffff !important;
}

/* Email: Barna háttér, Accent Green felirat */
.email-item {
    background-color: var(--color-primary-brown) !important;
}
.email-item .email-label {
    color: var(--color-accent-green) !important;
}

/* Emojik letiltása ebben a szekcióban (ha a WP mégis berakná) */
.mobile-sticky-bar img.emoji {
    display: none !important;
}

/* MEGJELENÍTÉS CSAK MOBILON */
@media (max-width: 1024px) {
    .mobile-sticky-bar {
        display: grid !important;
    }
    body {
        padding-bottom: 75px !important;
    }
}