/*
Theme Name: Zolvill Modern
Theme URI: https://zolvill.hu/
Author: Hamvas Zoltán részére készült egyedi sablon
Description: Ügyfélbarát, mobilra optimalizált WordPress sablon villanyszerelő vállalkozásnak. Sárga-antracit színvilág, ragadós fejléc, mobil hívógomb, beépített ajánlatkérő űrlap (plugin nélkül), Customizer-ből szerkeszthető kapcsolati adatok.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zolvill
Tags: business, one-column, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   0. Alapváltozók
   ========================================================= */
:root{
  --zv-ink:#191d22;
  --zv-ink-soft:#2b3138;
  --zv-muted:#5d666f;
  --zv-line:#e4e8ed;
  --zv-bg:#ffffff;
  --zv-soft:#f5f7f9;
  --zv-soft-2:#eef1f5;
  --zv-accent:#ffc400;
  --zv-accent-2:#ffd54a;
  --zv-accent-ink:#191d22;
  --zv-accent-dark:#c99a00;
  --zv-ok:#1a7f4b;
  --zv-err:#b3261e;
  /* Fejléc sötét változata – a ZOLVILL logó sötét háttérre készült,
     ezért a fejlécsáv is sötét. Ha valaha fehér fejléc kellene,
     elég ezt az öt értéket átírni. */
  --zv-topbar-bg:#0f1215;
  /* FONTOS: a fejléc háttere szándékosan pontosan a ZOLVILL logófájl
     háttérszíne (#060807), így a JPG fekete kerete láthatatlanul beleolvad.
     Ha új logó kerül fel, ezt az értéket kell hozzá igazítani. */
  --zv-header-bg:#060807;
  --zv-header-ink:#eaeef2;
  --zv-header-muted:#98a3ae;
  --zv-header-line:rgba(255,255,255,.10);
  --zv-radius:14px;
  --zv-radius-lg:22px;
  --zv-shadow:0 1px 2px rgba(25,29,34,.06), 0 8px 24px rgba(25,29,34,.07);
  --zv-shadow-lg:0 2px 6px rgba(25,29,34,.07), 0 20px 48px rgba(25,29,34,.12);
  --zv-wrap:1160px;
  --zv-font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* =========================================================
   1. Reset / alapok
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--zv-font);
  font-size:17px;
  line-height:1.65;
  color:var(--zv-ink-soft);
  background:var(--zv-bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--zv-ink);text-decoration:none;}
a:hover{color:var(--zv-accent-dark);}
h1,h2,h3,h4{color:var(--zv-ink);line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em;}
h1{font-size:clamp(2rem,4.6vw,3.25rem);}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.1em;padding-left:1.2em;}
hr{border:0;border-top:1px solid var(--zv-line);margin:2.5rem 0;}
:focus-visible{outline:3px solid var(--zv-accent-dark);outline-offset:2px;border-radius:6px;}

.zv-wrap{width:100%;max-width:var(--zv-wrap);margin:0 auto;padding-inline:20px;}
.zv-section{padding-block:clamp(48px,7vw,88px);}
.zv-section--soft{background:var(--zv-soft);}
.zv-section--ink{background:var(--zv-ink);color:#d7dde4;}
.zv-section--ink h2,.zv-section--ink h3{color:#fff;}
.zv-center{text-align:center;}
.zv-lead{font-size:1.12rem;color:var(--zv-muted);max-width:62ch;}
.zv-center .zv-lead{margin-inline:auto;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.zv-skip:focus{position:fixed;top:10px;left:10px;z-index:9999;background:#fff;padding:12px 18px;border-radius:10px;box-shadow:var(--zv-shadow-lg);width:auto;height:auto;clip:auto;}

/* Kicsi címke a szakaszok fölé */
.zv-eyebrow{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--zv-accent-dark);margin-bottom:.6rem;
}
.zv-section--ink .zv-eyebrow{color:var(--zv-accent);}

/* =========================================================
   2. Gombok
   ========================================================= */
.zv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:15px 26px;border-radius:999px;border:2px solid transparent;
  font-weight:800;font-size:1rem;line-height:1;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-align:center;
}
.zv-btn:active{transform:translateY(1px);}
.zv-btn--primary{background:var(--zv-accent);color:var(--zv-accent-ink);box-shadow:0 6px 18px rgba(255,196,0,.35);}
.zv-btn--primary:hover{background:var(--zv-accent-2);color:var(--zv-accent-ink);}
.zv-btn--dark{background:var(--zv-ink);color:#fff;}
.zv-btn--dark:hover{background:#000;color:#fff;}
.zv-btn--ghost{background:transparent;border-color:var(--zv-line);color:var(--zv-ink);}
.zv-btn--ghost:hover{border-color:var(--zv-ink);color:var(--zv-ink);}
/* Sötét háttéren világos szöveg és keret kell */
.zv-section--ink .zv-btn--ghost,
.zv-hero .zv-btn--ghost,
.zv-pagehead .zv-btn--ghost{border-color:rgba(255,255,255,.38);color:#fff;}
.zv-section--ink .zv-btn--ghost:hover,
.zv-hero .zv-btn--ghost:hover,
.zv-pagehead .zv-btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08);}
.zv-btn--lg{padding:18px 32px;font-size:1.06rem;}
.zv-btn--block{width:100%;}
.zv-btn svg{width:20px;height:20px;flex:none;}

/* =========================================================
   3. Fejléc
   ========================================================= */
.zv-topbar{
  background:var(--zv-topbar-bg);color:#a9b3bd;font-size:.88rem;
}
.zv-topbar .zv-wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;padding-block:9px;}
.zv-topbar a{color:#fff;font-weight:700;}
.zv-topbar a:hover{color:var(--zv-accent);}
.zv-topbar__item{display:inline-flex;align-items:center;gap:.45em;}
.zv-topbar__item svg{width:16px;height:16px;color:var(--zv-accent);flex:none;}

.zv-header{
  position:sticky;top:0;z-index:900;background:var(--zv-header-bg);
  border-bottom:1px solid var(--zv-header-line);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.zv-header__inner{display:flex;align-items:center;gap:18px;padding-block:13px;}
.zv-brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0;flex:0 0 auto;}
.zv-brand img{max-height:58px;width:auto;margin-right:6px;}
@media (max-width:640px){.zv-brand img{max-height:46px;}}

.zv-nav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;}
.zv-nav a{
  display:block;padding:10px 14px;border-radius:10px;font-weight:700;font-size:.98rem;color:var(--zv-header-ink);
}
.zv-nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.zv-nav .current-menu-item>a,.zv-nav .current_page_item>a{
  background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 -2px 0 var(--zv-accent);
}
.zv-nav ul ul{display:none;}

.zv-header__cta{display:flex;align-items:center;gap:10px;}
.zv-header__cta .zv-btn{white-space:nowrap;padding:13px 20px;}
.zv-header__phone{
  display:inline-flex;align-items:center;gap:.5em;font-weight:900;font-size:1.02rem;color:#fff;
  white-space:nowrap;
}
.zv-header__phone:hover{color:var(--zv-accent);}
.zv-header__phone svg{width:19px;height:19px;color:var(--zv-accent);}

.zv-burger{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;border:1px solid rgba(255,255,255,.22);border-radius:12px;
  background:rgba(255,255,255,.05);cursor:pointer;
}
.zv-burger span{display:block;width:20px;height:2px;background:#fff;position:relative;}
.zv-burger span::before,.zv-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;}
.zv-burger span::before{top:-6px;}
.zv-burger span::after{top:6px;}

@media (max-width:1240px){
  .zv-nav a{padding:10px 10px;font-size:.94rem;}
  .zv-header__phone{font-size:.95rem;}
  .zv-header__cta .zv-btn{padding:13px 16px;font-size:.94rem;}
}
@media (max-width:1023px){
  .zv-burger{display:flex;}
  .zv-header__cta .zv-btn{display:none;}
  .zv-nav{
    position:absolute;left:0;right:0;top:100%;background:var(--zv-header-bg);
    border-bottom:1px solid var(--zv-header-line);
    box-shadow:0 18px 40px rgba(0,0,0,.45);display:none;
  }
  .zv-nav.is-open{display:block;}
  .zv-nav ul{flex-direction:column;gap:0;padding:10px 16px 18px;}
  .zv-nav a{padding:14px 10px;border-bottom:1px solid var(--zv-header-line);border-radius:0;font-size:1.05rem;}
  .zv-nav .current-menu-item>a,.zv-nav .current_page_item>a{box-shadow:none;border-left:3px solid var(--zv-accent);padding-left:12px;}
}
@media (max-width:560px){
  .zv-header__phone span{display:none;}
  .zv-topbar__item--hours{display:none;}
}

/* =========================================================
   4. Hero
   ========================================================= */
.zv-hero{
  position:relative;background:var(--zv-ink);color:#dbe1e8;overflow:hidden;
}
.zv-hero__media{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34;}
.zv-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(20,24,28,.94) 0%,rgba(20,24,28,.82) 45%,rgba(20,24,28,.55) 100%);
}
.zv-hero__inner{position:relative;z-index:2;padding-block:clamp(56px,9vw,108px);max-width:760px;}
.zv-hero h1{color:#fff;margin-bottom:.35em;}
.zv-hero h1 em{font-style:normal;color:var(--zv-accent);}
.zv-hero__sub{font-size:clamp(1.05rem,1.7vw,1.25rem);color:#c3ccd5;max-width:58ch;margin-bottom:1.6em;}
.zv-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:2rem;}
.zv-hero__points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 26px;}
.zv-hero__points li{display:flex;align-items:center;gap:.5em;font-weight:700;color:#fff;font-size:.97rem;}
.zv-hero__points svg{width:20px;height:20px;color:var(--zv-accent);flex:none;}

/* Oldal fejléc (aloldalakon) */
.zv-pagehead{background:var(--zv-ink);color:#c9d1d9;padding-block:clamp(40px,6vw,72px);}
.zv-pagehead h1{color:#fff;margin-bottom:.25em;}
.zv-pagehead p{color:#b9c2cb;max-width:60ch;margin:0;}
.zv-breadcrumb{font-size:.85rem;color:#8c97a2;margin-bottom:1rem;}
.zv-breadcrumb a{color:#c9d1d9;}
.zv-breadcrumb a:hover{color:var(--zv-accent);}

/* =========================================================
   5. Rácsok, kártyák
   ========================================================= */
.zv-grid{display:grid;gap:22px;}
.zv-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.zv-grid--3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr));}
.zv-grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}

.zv-card{
  background:#fff;border:1px solid var(--zv-line);border-radius:var(--zv-radius-lg);
  padding:28px;box-shadow:var(--zv-shadow);transition:transform .15s ease, box-shadow .15s ease;
  display:flex;flex-direction:column;
}
.zv-card:hover{transform:translateY(-3px);box-shadow:var(--zv-shadow-lg);}
.zv-card h3{margin-bottom:.4em;}
.zv-card p{color:var(--zv-muted);margin-bottom:0;font-size:.98rem;}
.zv-card__icon{
  width:52px;height:52px;border-radius:14px;background:var(--zv-accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex:none;
}
.zv-card__icon svg{width:26px;height:26px;color:var(--zv-accent-ink);}
.zv-card__list{list-style:none;padding:0;margin:14px 0 0;}
.zv-card__list li{position:relative;padding-left:1.5em;margin-bottom:.35em;font-size:.95rem;color:var(--zv-muted);}
.zv-card__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--zv-accent);
}

/* Lépések */
.zv-steps{counter-reset:zvstep;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.zv-step{position:relative;padding:26px 22px 22px;background:#fff;border:1px solid var(--zv-line);border-radius:var(--zv-radius-lg);}
.zv-step::before{
  counter-increment:zvstep;content:counter(zvstep);
  position:absolute;top:-18px;left:22px;width:38px;height:38px;border-radius:50%;
  background:var(--zv-ink);color:var(--zv-accent);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.05rem;
}
.zv-step h3{margin-top:10px;font-size:1.08rem;}
.zv-step p{color:var(--zv-muted);font-size:.95rem;margin:0;}

/* Előny-sáv */
.zv-usp{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.zv-usp__item{display:flex;gap:14px;align-items:flex-start;}
.zv-usp__item svg{width:28px;height:28px;color:var(--zv-accent);flex:none;margin-top:2px;}
.zv-usp__item strong{display:block;color:var(--zv-ink);font-size:1.02rem;margin-bottom:.15em;}
.zv-section--ink .zv-usp__item strong{color:#fff;}
.zv-usp__item span{font-size:.93rem;color:var(--zv-muted);}
.zv-section--ink .zv-usp__item span{color:#aab4bf;}

/* =========================================================
   6. GYIK
   ========================================================= */
.zv-faq{max-width:820px;margin-inline:auto;}
.zv-faq details{
  background:#fff;border:1px solid var(--zv-line);border-radius:var(--zv-radius);
  padding:0 20px;margin-bottom:12px;
}
.zv-faq summary{
  list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-weight:800;color:var(--zv-ink);
  position:relative;font-size:1.03rem;
}
.zv-faq summary::-webkit-details-marker{display:none;}
.zv-faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--zv-accent-dark);border-bottom:2px solid var(--zv-accent-dark);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s ease;
}
.zv-faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
.zv-faq details p{color:var(--zv-muted);padding-bottom:8px;margin:0 0 10px;}

/* =========================================================
   7. Űrlap
   ========================================================= */
.zv-form{
  background:#fff;border:1px solid var(--zv-line);border-radius:var(--zv-radius-lg);
  padding:clamp(22px,3vw,34px);box-shadow:var(--zv-shadow);
}
.zv-form__row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:16px;}
.zv-field{display:flex;flex-direction:column;gap:6px;}
.zv-field label{font-weight:700;font-size:.92rem;color:var(--zv-ink);}
.zv-field .zv-req{color:var(--zv-err);}
.zv-field input,.zv-field select,.zv-field textarea{
  font:inherit;font-size:1rem;padding:13px 14px;border:1.5px solid var(--zv-line);border-radius:12px;
  background:#fff;color:var(--zv-ink);width:100%;
}
.zv-field textarea{min-height:130px;resize:vertical;}
.zv-field input:focus,.zv-field select:focus,.zv-field textarea:focus{border-color:var(--zv-accent-dark);outline:none;}
.zv-field__hint{font-size:.82rem;color:var(--zv-muted);}
.zv-consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--zv-muted);margin-bottom:18px;}
.zv-consent input{margin-top:4px;width:18px;height:18px;flex:none;}
.zv-hp{position:absolute!important;left:-9999px;}
.zv-notice{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-weight:700;}
.zv-notice--ok{background:#e7f5ed;color:var(--zv-ok);border:1px solid #bfe3cf;}
.zv-notice--err{background:#fdecea;color:var(--zv-err);border:1px solid #f5c6c2;}

/* =========================================================
   8. Galéria / referencia
   ========================================================= */
.zv-gallery{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.zv-gallery figure{margin:0;border-radius:var(--zv-radius);overflow:hidden;border:1px solid var(--zv-line);background:#fff;}
.zv-gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.zv-gallery figcaption{padding:12px 14px;font-size:.9rem;color:var(--zv-muted);}
.zv-placeholder{
  aspect-ratio:4/3;border:2px dashed #c9d1da;border-radius:var(--zv-radius);
  background:repeating-linear-gradient(45deg,#f7f9fb,#f7f9fb 12px,#f1f4f7 12px,#f1f4f7 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:#7b858f;text-align:center;padding:18px;font-size:.9rem;font-weight:700;
}
.zv-placeholder svg{width:34px;height:34px;opacity:.6;}

/* Csillagos értékelés */
.zv-stars{display:flex;gap:3px;margin-bottom:12px;color:var(--zv-accent);}
.zv-stars svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1;}

/* Helykitöltő jelölés a szövegben */
.zv-todo{
  background:#fff6d6;border-bottom:2px solid var(--zv-accent);
  padding:1px 6px;border-radius:4px;font-weight:700;color:#6b5300;
}

/* =========================================================
   9. Kapcsolat blokk
   ========================================================= */
.zv-contact-list{list-style:none;padding:0;margin:0;}
.zv-contact-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--zv-line);}
.zv-contact-list li:last-child{border-bottom:0;}
.zv-contact-list svg{width:24px;height:24px;color:var(--zv-accent-dark);flex:none;margin-top:3px;}
.zv-contact-list strong{display:block;color:var(--zv-ink);font-size:1.05rem;}
.zv-contact-list span,.zv-contact-list a{color:var(--zv-muted);font-size:.97rem;}
.zv-contact-list a{font-weight:700;color:var(--zv-ink);}

/* =========================================================
   10. Záró CTA
   ========================================================= */
.zv-cta{
  background:linear-gradient(135deg,var(--zv-accent) 0%,var(--zv-accent-2) 100%);
  border-radius:var(--zv-radius-lg);padding:clamp(30px,5vw,52px);text-align:center;
}
.zv-cta h2{color:var(--zv-accent-ink);margin-bottom:.3em;}
.zv-cta p{color:#4a3d00;font-weight:600;max-width:56ch;margin-inline:auto;}
.zv-cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.4rem;}

/* =========================================================
   11. Lábléc
   ========================================================= */
.zv-footer{background:var(--zv-ink);color:#98a2ad;padding-block:56px 0;font-size:.95rem;}
.zv-footer a{color:#d6dde4;}
.zv-footer a:hover{color:var(--zv-accent);}
.zv-footer h3{color:#fff;font-size:1.05rem;margin-bottom:.9em;}
.zv-footer__grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-bottom:40px;}
.zv-footer ul{list-style:none;padding:0;margin:0;}
.zv-footer li{margin-bottom:.5em;}
.zv-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-block:18px;
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;font-size:.86rem;
}

/* =========================================================
   12. Mobil hívósáv
   ========================================================= */
.zv-callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:950;display:none;
  background:#fff;border-top:1px solid var(--zv-line);
  box-shadow:0 -6px 20px rgba(25,29,34,.12);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.zv-callbar .zv-btn{flex:1;padding:14px 10px;font-size:.98rem;}
@media (max-width:767px){
  .zv-callbar{display:flex;}
  body{padding-bottom:78px;}
}

/* =========================================================
   13. Blog / általános tartalom (tartalék sablonok)
   ========================================================= */
.zv-entry{max-width:820px;margin-inline:auto;}
.zv-entry img{border-radius:var(--zv-radius);}
.zv-entry h2,.zv-entry h3{margin-top:1.6em;}
.zv-entry blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--zv-accent);color:var(--zv-ink);font-size:1.05rem;
}
.zv-entry table{width:100%;border-collapse:collapse;margin-bottom:1.2em;}
.zv-entry th,.zv-entry td{border:1px solid var(--zv-line);padding:10px 12px;text-align:left;}
.zv-entry th{background:var(--zv-soft);}
.zv-postlist{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.zv-post__meta{font-size:.85rem;color:var(--zv-muted);margin-bottom:.5em;}
.zv-pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:32px;}
.zv-pagination .page-numbers{
  padding:10px 16px;border:1px solid var(--zv-line);border-radius:10px;font-weight:700;background:#fff;
}
.zv-pagination .current{background:var(--zv-ink);color:#fff;border-color:var(--zv-ink);}

.alignleft{float:left;margin:0 1.4em 1em 0;}
.alignright{float:right;margin:0 0 1em 1.4em;}
.aligncenter{margin-inline:auto;}
.wp-caption-text{font-size:.88rem;color:var(--zv-muted);}

@media print{
  .zv-header,.zv-topbar,.zv-callbar,.zv-footer,.zv-cta{display:none!important;}
}

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