/*
Theme Name: Hungaro
Theme URI: https://hungaro.fruitdigital.eu/
Author: Fruit Digital
Description: Egyedi blokk-téma a Hungaro Kereskedőház Kft. automataüzemeltetési weboldalához. Visszafogott vállalati arculat, saját kiszolgálású Source Serif 4 / Source Sans 3 tipográfiával.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hungaro
Tags: full-site-editing, block-patterns, business
*/

/* ============================================================
   1. ALAP
   ============================================================ */
:root{
  --hu-vonal: var(--wp--preset--color--vonal);
  --hu-sotet: var(--wp--preset--color--sotet);
  --hu-terra: var(--wp--preset--color--terrakotta);
  --hu-oliva: var(--wp--preset--color--oliva);
  --hu-homok: var(--wp--preset--color--homok);
  --hu-fejlec: 76px;
}
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; text-rendering:optimizeLegibility; }
img, video{ max-width:100%; height:auto; }

/* Fókusz: billentyűzetes navigációhoz mindig látható */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--hu-terra);
  outline-offset:3px;
  border-radius:2px;
}
.hu-skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--hu-sotet); color:#fff; padding:.75rem 1.25rem;
  font-size:.9375rem; font-weight:600;
}
.hu-skip:focus{ left:1rem; top:1rem; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   2. TIPOGRÁFIAI SEGÉDOSZTÁLYOK
   ============================================================ */
.hu-eyebrow{
  font-family:var(--wp--preset--font-family--szoveg);
  font-size:.75rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--hu-oliva); margin:0 0 1rem;
  display:flex; align-items:center; gap:.7rem;
}
.hu-eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; flex:none; }
.has-sotet-background-color .hu-eyebrow,
.hu-dark .hu-eyebrow{ color:var(--hu-homok); }

.hu-lead{ font-size:1.1875rem; line-height:1.6; color:var(--wp--preset--color--tompa); max-width:56ch; }
.hu-dark .hu-lead{ color:rgba(247,245,239,.82); }
.hu-note{ font-size:.8125rem; line-height:1.55; color:var(--wp--preset--color--tompa); }
.hu-dark .hu-note{ color:rgba(247,245,239,.6); }
.hu-balance{ text-wrap:balance; }

/* Magyar szövegtörés: hosszú összetett szavak mobilon */
h1,h2,h3{ hyphens:auto; -webkit-hyphens:auto; }
@media (min-width:760px){ h1,h2,h3{ hyphens:manual; -webkit-hyphens:manual; } }

/* ============================================================
   3. GOMBOK
   ============================================================ */
.wp-block-button__link{ transition:background-color .18s ease, color .18s ease, border-color .18s ease; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{ background:#8E3822; }
.wp-block-button.is-style-outline .wp-block-button__link{
  border:1px solid var(--hu-vonal); color:var(--wp--preset--color--tinta); background:transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{ border-color:var(--wp--preset--color--tinta); background:transparent; }
.hu-dark .wp-block-button.is-style-outline .wp-block-button__link{ border-color:rgba(247,245,239,.35); color:#F7F5EF; }
.hu-dark .wp-block-button.is-style-outline .wp-block-button__link:hover{ border-color:#F7F5EF; }

/* ============================================================
   4. FEJLÉC
   ============================================================ */
.hu-header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,245,239,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--hu-vonal);
}
.hu-header .wp-block-group{ min-height:var(--hu-fejlec); }
.hu-logo img{ height:40px; width:auto; display:block; }
.hu-header .wp-block-navigation{ font-size:.9375rem; font-weight:500; }
.hu-header .wp-block-navigation a{ color:var(--wp--preset--color--tinta); text-decoration:none; }
.hu-header .wp-block-navigation a:hover{ color:var(--hu-terra); text-decoration:none; }
.hu-header .wp-block-navigation .current-menu-item > a{ color:var(--hu-terra); }

/* ============================================================
   5. NYITÓBLOKK
   ============================================================ */
.hu-hero{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem); }
.hu-hero h1{ margin:0 0 1.5rem; max-width:16ch; }
.hu-hero .hu-lead{ margin-bottom:2rem; }
.hu-hero-kep{ position:relative; }
.hu-hero-kep img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px;
}
@media (max-width:781px){ .hu-hero-kep img{ aspect-ratio:16/10; } }
.hu-hero-felirat{
  margin-top:.75rem; font-size:.8125rem; color:var(--wp--preset--color--tompa);
  border-left:2px solid var(--hu-oliva); padding-left:.75rem;
}
.hu-feltetel{
  margin-top:1.25rem; font-size:.875rem; color:var(--wp--preset--color--tompa);
  padding-top:1rem; border-top:1px solid var(--hu-vonal); max-width:46ch;
}

/* ============================================================
   6. BIZALMI SÁV
   ============================================================ */
.hu-bizalom{ border-block:1px solid var(--hu-vonal); background:var(--wp--preset--color--krem); }
.hu-bizalom .wp-block-column{ padding-block:1.75rem; }
.hu-bizalom dt, .hu-bizalom .hu-b-cim{
  font-family:var(--wp--preset--font-family--cim); font-size:1.0625rem; font-weight:600;
  margin:0 0 .2rem; letter-spacing:-.01em;
}
.hu-bizalom .hu-b-alcim{ font-size:.875rem; color:var(--wp--preset--color--tompa); margin:0; }
@media (min-width:782px){
  .hu-bizalom .wp-block-column + .wp-block-column{ border-left:1px solid var(--hu-vonal); padding-left:2rem; }
}

/* ============================================================
   7. SZEKCIÓ-RITMUS ÉS FEJEK
   ============================================================ */
.hu-szekcio{ padding-block:clamp(3.5rem,7vw,6rem); }
.hu-szekcio-fej{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3rem); }
.hu-szekcio-fej h2{ margin:0 0 1rem; }
.hu-hatar{ border-top:1px solid var(--hu-vonal); }

/* ============================================================
   8. SZOLGÁLTATÁSVÁLASZTÓ
   ============================================================ */
.hu-kartyak .wp-block-column{
  background:#fff; border:1px solid var(--hu-vonal); border-radius:2px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .18s ease;
}
.hu-kartyak .wp-block-column:hover{ border-color:#BFB7A5; }
.hu-kartya-kep{ background:var(--wp--preset--color--krem); }
.hu-kartya-kep img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.hu-kartya-kep.is-termek{ padding:1.5rem; }
.hu-kartya-kep.is-termek img{ object-fit:contain; aspect-ratio:auto; max-height:190px; width:auto; margin:0 auto; }
.hu-kartya-torzs{ padding:1.5rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.hu-kartya-torzs h3{ margin:0; }
.hu-kartya-torzs p{ margin:0; color:var(--wp--preset--color--tompa); font-size:.9375rem; }
.hu-kartya-link{
  margin-top:auto; font-weight:600; font-size:.9375rem;
  color:var(--hu-terra); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.hu-kartya-link:hover{ text-decoration:underline; }

/* Kiegészítő sor (leves) */
.hu-kiegeszito{
  margin-top:1.5rem; border:1px solid var(--hu-vonal); border-left:3px solid var(--hu-oliva);
  background:#fff; padding:1.25rem 1.5rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.hu-kiegeszito p{ margin:0; }

/* ============================================================
   9. SÖTÉT BLOKK (üzemeltetés)
   ============================================================ */
.hu-dark{ background:var(--hu-sotet); color:#F7F5EF; }
.hu-dark h2, .hu-dark h3{ color:#F7F5EF; }
.hu-dark a{ color:var(--hu-homok); }
.hu-lepesek .wp-block-column{ padding-top:1.5rem; border-top:1px solid rgba(247,245,239,.22); }
.hu-lepes-szam{
  font-family:var(--wp--preset--font-family--cim); font-size:.9375rem; font-weight:600;
  color:var(--hu-homok); margin:0 0 .6rem; letter-spacing:.06em;
}
.hu-lepesek h3{ font-size:1.125rem; margin:0 0 .5rem; }
.hu-lepesek p{ margin:0; font-size:.9375rem; color:rgba(247,245,239,.78); }

/* ============================================================
   10. CÉLCSOPORTOK
   ============================================================ */
.hu-celcsoport-lista{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.hu-celcsoport-lista li{
  padding:.85rem 0; border-bottom:1px solid var(--hu-vonal);
  font-size:1.0625rem; display:flex; align-items:baseline; gap:.75rem;
}
.hu-celcsoport-lista li::before{ content:""; width:6px; height:6px; background:var(--hu-oliva); flex:none; transform:translateY(-2px); }
.hu-celcsoport-lista li:first-child{ border-top:1px solid var(--hu-vonal); }

/* ============================================================
   11. CÉGBEMUTATÓ
   ============================================================ */
.hu-ceg-kep img{ width:100%; max-width:600px; border-radius:2px; }
.hu-kepfelirat{ font-size:.8125rem; color:var(--wp--preset--color--tompa); margin-top:.6rem; }

/* ============================================================
   12. FOLYAMAT
   ============================================================ */
.hu-folyamat .wp-block-column{ border-top:2px solid var(--wp--preset--color--tinta); padding-top:1.25rem; }
.hu-folyamat .hu-lepes-szam{ color:var(--hu-oliva); }
.hu-folyamat h3{ font-size:1.125rem; margin:0 0 .5rem; }
.hu-folyamat p{ margin:0; font-size:.9375rem; color:var(--wp--preset--color--tompa); }

/* ============================================================
   13. VIDEÓ
   ============================================================ */
.hu-video{ position:relative; background:#191410; border-radius:2px; overflow:hidden; }
.hu-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#191410; }
.hu-video.is-pillar video{ aspect-ratio:5/3; }

/* ============================================================
   14. GYIK
   ============================================================ */
.hu-gyik{ max-width:820px; }
.hu-gyik details{ border-bottom:1px solid var(--hu-vonal); }
.hu-gyik details:first-of-type{ border-top:1px solid var(--hu-vonal); }
.hu-gyik summary{
  cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--wp--preset--font-family--cim); font-size:1.125rem; font-weight:600; letter-spacing:-.005em;
}
.hu-gyik summary::-webkit-details-marker{ display:none; }
.hu-gyik summary::after{
  content:""; position:absolute; right:.35rem; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--hu-oliva); border-bottom:1.5px solid var(--hu-oliva);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.hu-gyik details[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.hu-gyik details > div, .hu-gyik details > p{
  padding:0 2.5rem 1.5rem 0; margin:0; color:var(--wp--preset--color--tompa); max-width:68ch;
}

/* ============================================================
   15. AJÁNLATKÉRŐ ŰRLAP
   ============================================================ */
.hu-ajanlat{ background:var(--wp--preset--color--krem); border-top:1px solid var(--hu-vonal); }
.hu-urlap-doboz{ background:#fff; border:1px solid var(--hu-vonal); border-radius:2px; padding:clamp(1.5rem,3vw,2.25rem); }
.hu-form{ display:grid; gap:1.1rem; }
.hu-form-sor{ display:grid; gap:1.1rem; }
@media (min-width:640px){ .hu-form-sor.is-ketto{ grid-template-columns:1fr 1fr; } }
.hu-mezo{ display:flex; flex-direction:column; gap:.4rem; }
.hu-mezo label{ font-size:.875rem; font-weight:600; color:var(--wp--preset--color--tinta); }
.hu-mezo .hu-kotelezo{ color:var(--hu-terra); }
.hu-mezo input, .hu-mezo select, .hu-mezo textarea{
  font-family:inherit; font-size:1rem; color:var(--wp--preset--color--tinta);
  background:#fff; border:1px solid #C9C1B0; border-radius:2px; padding:.7rem .85rem;
  width:100%; min-height:46px; transition:border-color .15s ease;
}
.hu-mezo textarea{ min-height:110px; resize:vertical; }
.hu-mezo input:focus, .hu-mezo select:focus, .hu-mezo textarea:focus{ border-color:var(--hu-terra); }
.hu-mezo[data-hiba="1"] input, .hu-mezo[data-hiba="1"] select{ border-color:#B3261E; }
.hu-mezo-hiba{ font-size:.8125rem; color:#B3261E; }
.hu-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.hu-form-kuldes{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.25rem; }
.hu-gomb{
  font-family:inherit; font-size:.9375rem; font-weight:600; letter-spacing:.01em;
  background:var(--hu-terra); color:#fff; border:0; border-radius:3px;
  padding:.95rem 1.7rem; cursor:pointer; min-height:48px;
  transition:background-color .18s ease;
}
.hu-gomb:hover{ background:#8E3822; }
.hu-gomb[disabled]{ opacity:.6; cursor:progress; }
.hu-form-allapot{ font-size:.9375rem; }
.hu-form-allapot[data-tipus="hiba"]{ color:#B3261E; }
.hu-siker{
  border:1px solid var(--hu-oliva); border-left:3px solid var(--hu-oliva);
  background:#fff; padding:1.5rem;
}
.hu-siker h3{ margin:0 0 .5rem; font-size:1.25rem; }
.hu-siker p{ margin:0; color:var(--wp--preset--color--tompa); }
.hu-kapcsolattarto{
  border:1px solid var(--hu-vonal); border-radius:2px; background:#fff; padding:1.5rem;
  display:grid; gap:.35rem;
}
.hu-kapcsolattarto .hu-nev{ font-family:var(--wp--preset--font-family--cim); font-size:1.125rem; font-weight:600; }
.hu-kapcsolattarto a{ color:var(--wp--preset--color--tinta); text-decoration:none; font-weight:600; }
.hu-kapcsolattarto a:hover{ color:var(--hu-terra); }

/* ============================================================
   16. LÁBLÉC
   ============================================================ */
.hu-footer{ background:var(--hu-sotet); color:rgba(247,245,239,.78); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.hu-footer h3{ font-size:1rem; color:#F7F5EF; margin:0 0 1rem; letter-spacing:0; }
.hu-footer a{ color:rgba(247,245,239,.78); text-decoration:none; }
.hu-footer a:hover{ color:#fff; text-decoration:underline; }
.hu-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.9375rem; }
.hu-footer-also{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(247,245,239,.18);
  font-size:.8125rem; color:rgba(247,245,239,.55);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
}

/* ============================================================
   17. MOBIL ALSÓ SÁV
   ============================================================ */
.hu-mobilsav{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:none; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hu-vonal); border-top:1px solid var(--hu-vonal);
  padding-bottom:env(safe-area-inset-bottom);
}
.hu-mobilsav a{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:54px; font-size:.9375rem; font-weight:600; text-decoration:none;
}
.hu-mobilsav .hu-m-tel{ background:var(--wp--preset--color--papir); color:var(--wp--preset--color--tinta); }
.hu-mobilsav .hu-m-cta{ background:var(--hu-terra); color:#fff; }
@media (max-width:781px){
  .hu-mobilsav{ display:grid; }
  body{ padding-bottom:56px; }
}

/* ============================================================
   18. MORZSA
   ============================================================ */
.hu-morzsa{ font-size:.8125rem; color:var(--wp--preset--color--tompa); padding-top:1.5rem; }
.hu-morzsa a{ color:var(--wp--preset--color--tompa); text-decoration:none; }
.hu-morzsa a:hover{ color:var(--hu-terra); text-decoration:underline; }
.hu-morzsa span[aria-current]{ color:var(--wp--preset--color--tinta); }

/* ============================================================
   19. MOBIL FINOMHANGOLÁS
   ============================================================ */
@media (max-width:781px){
  .hu-bizalom .wp-block-column{ padding-block:1.1rem; border-bottom:1px solid var(--hu-vonal); }
  .hu-bizalom .wp-block-column:last-child{ border-bottom:0; }
  .hu-kiegeszito{ flex-direction:column; align-items:flex-start; }
  .hu-gyik summary{ font-size:1.0625rem; padding-right:2rem; }
  .hu-hero h1{ max-width:none; }
}

/* ============================================================
   20. TERMÉKCSEMPÉK
   ============================================================ */
.hu-termekek{
  list-style:none; margin:0 0 1.25rem; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hu-vonal); border:1px solid var(--hu-vonal);
}
.hu-termek{
  background:#fff; padding:1.5rem 1rem 1.25rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem;
}
.hu-termek-kep{
  display:flex; align-items:flex-end; justify-content:center;
  height:132px; margin-bottom:.75rem;
}
.hu-termek-kep img{ max-height:132px; width:auto; object-fit:contain; }
.hu-termek-nev{ font-family:var(--wp--preset--font-family--cim); font-size:1rem; font-weight:600; }
.hu-termek-alcim{ font-size:.8125rem; color:var(--wp--preset--color--tompa); }
@media (max-width:781px){
  .hu-termekek{ grid-template-columns:repeat(2,1fr); }
  .hu-termek-kep{ height:104px; }
  .hu-termek-kep img{ max-height:104px; }
}

/* ============================================================
   21. KAPCSOLATI DOBOZOK
   ============================================================ */
.hu-kapcsolat-racs .wp-block-column{ display:flex; }
.hu-kapcsolat-doboz{
  background:#fff; border:1px solid var(--hu-vonal); border-top:3px solid var(--hu-oliva);
  padding:1.75rem; display:flex; flex-direction:column; gap:.6rem; width:100%;
}
.hu-kapcsolat-doboz.is-hiba{ border-top-color:var(--hu-terra); }
.hu-kapcsolat-doboz.is-ceg{ border-top-color:var(--wp--preset--color--tinta); }
.hu-kapcsolat-doboz h3{
  font-family:var(--wp--preset--font-family--cim); font-size:1.25rem; font-weight:600; margin:0;
}
.hu-kapcsolat-doboz p{ margin:0; color:var(--wp--preset--color--tompa); font-size:.9375rem; }
.hu-kapcsolat-doboz .hu-kiemelt{ margin-top:.35rem; }
.hu-kapcsolat-doboz .hu-kiemelt a{
  font-family:var(--wp--preset--font-family--cim); font-size:1.4rem; font-weight:600;
  color:var(--wp--preset--color--tinta); text-decoration:none; letter-spacing:-.01em;
}
.hu-kapcsolat-doboz .hu-kiemelt a:hover{ color:var(--hu-terra); }
.hu-kapcsolat-doboz a{ color:var(--wp--preset--color--tinta); display:inline-flex; align-items:center; min-height:40px; }
.hu-kapcsolat-doboz :is(h2,h3){
  font-family:var(--wp--preset--font-family--cim); font-size:1.25rem; font-weight:600; margin:0;
}

/* ============================================================
   22. HORGONY A RAGADÓS FEJLÉC ALATT
   ============================================================ */
.hu-horgony{ display:block; height:0; scroll-margin-top:calc(var(--hu-fejlec) + 24px); }
[id]{ scroll-margin-top:calc(var(--hu-fejlec) + 24px); }

/* ============================================================
   23. ÁLLÓ KÉPARÁNYÚ VIDEÓ
   ============================================================ */
.hu-video.is-portrait video{ aspect-ratio:5/6; }
@media (max-width:781px){
  .hu-video.is-portrait video{ aspect-ratio:4/5; }
}

/* ============================================================
   24. FEJLÉC CTA MOBILON
   ============================================================ */
@media (max-width:781px){
  .hu-fejlec-cta{ display:none; }
  .hu-logo img{ height:34px; }
}

/* ============================================================
   25. WP ALAPÉRTELMEZÉSEK IGAZÍTÁSA
   ============================================================ */
.wp-block-details summary{ font-weight:600; }
.wp-block-image figure, .wp-block-image{ margin:0; }
.hu-szekcio > .wp-block-columns:last-child{ margin-bottom:0; }
.wp-block-navigation__responsive-container.is-menu-open{ padding:2.5rem 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ font-size:1.25rem; }

/* ============================================================
   26. ÉRINTÉSI MÉRETEK MOBILON
   ============================================================ */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
@media (max-width:781px){
  .hu-footer ul a,
  .hu-kapcsolattarto a{
    display:inline-flex; align-items:center; min-height:40px;
  }
  .hu-gyik summary{ padding-block:1.5rem; }
}