/*
Theme Name: CreatIT — vedohalok.hu
Theme URI: https://creatit.hu
Author: CreatIT Solutions
Author URI: https://creatit.hu
Description: Egyedi blokktéma az A-Necc Kft. (vedohalok.hu) számára, a Demján Sándor Program keretében. Nincs build lépés — sima CSS és theme.json.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 8.1
Version: 0.3.0
License: Proprietary
Text Domain: creatit-theme
*/

/*
  A tényleges design tokenek a theme.json-ben élnek (settings.color.palette,
  settings.typography, settings.spacing, settings.custom). Ide csak olyan
  szabály kerülhet, amit a Site Editor semmilyen formában nem tud kifejezni
  (állapotok, sorhossz, képarány, harmadik féltől jövő plugin-felületek).
  Beégetett hex szín vagy skálán kívüli méret ide sem kerülhet — mindig
  var(--wp--preset--...) vagy var(--wp--custom--...) hivatkozás.

  A szabályokat a DESIGN-REVIEW.md (2026-09-20) tételei indokolják; minden
  blokk fölött ott a hivatkozott tétel azonosítója.
*/

/* ---------------------------------------------------------------------
   GLOBÁLIS BOX-SIZING — a WordPress core nem ad ilyet.
   Anélkül a `box-sizing` elemenként a böngésző-alapértelmezett
   `content-box`-ra esik vissza, HACSAK egy véletlenül betöltött
   core blokk-stíluslap (pl. a `wp:list` blokké, ami `ol, ul { box-sizing:
   border-box }`-ot ad) épp nem fedi le — a WordPress ugyanis csak azoknak a
   blokkoknak a CSS-ét tölti be egy oldalon, amik ténylegesen szerepelnek
   rajta. Nálunk pont ez történt: a főoldalon volt egy `wp:list` valahol,
   ezért ott a mobil menü `.wp-block-navigation__submenu-container`-je
   véletlenül border-box-ot kapott és pont kitöltötte a 100%-os szélességet;
   a `termek-kategoria` sablonon nincs lista blokk, ott content-box maradt,
   a bal oldali padding HOZZÁADÓDOTT a 100%-hoz, és a menü ezért lett
   szélesebb a viewportnál — vízszintesen húzhatóvá vált nyitott menünél.
   Innentől nem blokkonként véletlenszerű: mindenhol border-box.
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   F3 — Fókuszjelölés. A böngésző 1px-es alapértelmezése a sárga CTA-n
   gyakorlatilag láthatatlan. Két rétegű gyűrű: a belső a felülettel
   egyezik, így sötét és világos háttéren is elválik.
   --------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-radius: var(--wp--custom--radius--base);
}

.has-navy-background-color :where(a, button, input, select, textarea):focus-visible,
.wp-block-template-part footer :where(a, button, input, select, textarea):focus-visible {
    outline-color: var(--wp--preset--color--brand);
}

.has-signal-background-color:focus-visible,
a.has-signal-background-color:focus-visible {
    outline-color: var(--wp--preset--color--signal-ink);
}

/* ---------------------------------------------------------------------
   B3 — Lábléc-linkek. Az alapszínt a footer.html blokkjelölése adja
   (brand, 8,87:1); a hover csak innen fejezhető ki.
   --------------------------------------------------------------------- */
footer.wp-block-group a:hover,
footer.wp-block-group a:focus {
    color: var(--wp--preset--color--on-navy);
}

/* ---------------------------------------------------------------------
   F6 — Sorhossz. A library mércéje 45–75 karakter; a kategórialap
   bevezetője és a hero-lead enélkül a teljes konténeren átér.
   --------------------------------------------------------------------- */
.hero-section .lede {
    max-width: 46ch;
}

.wp-block-post-terms + .wp-block-heading + p,
.page-intro,
.term-description,
.taxonomy-intro {
    max-width: 68ch;
}

/* ---------------------------------------------------------------------
   V4 — Hero. A két hasáb alja elcsúszott, mert a kép nem nyúlt le.
   --------------------------------------------------------------------- */
.hero-section .hero-photo-slot,
.hero-section .hero-photo-slot img {
    height: 100%;
    width: 100%;
}

/* ---------------------------------------------------------------------
   V3 — Termékrács. Eltérő képarányok miatt szaggatott volt a rács alja.
   --------------------------------------------------------------------- */
.wp-block-post-template .wp-block-post-featured-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.wp-block-post-template > li {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wp-block-post-template .wp-block-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* A rögzített columnCount:4 rács a Gutenberg oldalán nem kap automatikus
   töréspontot — mobilon a négy oszlop pár tíz pixeles kártyákra zsugorodik,
   ami vizuálisan is túlcsordulást imitál. A `.is-layout-grid` osztály két
   szelektort ér, tehát a generált `.wp-container-core-post-template-…`
   (egy osztály) fölé ír, sorrendtől függetlenül. */
@media (max-width: 781px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ---------------------------------------------------------------------
   F5 — Hírlevél-gomb. A `newsletter` plugin gyári #444-es gombja az
   egyetlen elem az oldalon a paletta mellett. A sárga jár neki, mert a
   lábléc az egyetlen hely, ahol a fő CTA nincs jelen.
   --------------------------------------------------------------------- */
.footer-newsletter input.tnp-submit,
.footer-newsletter .tnp-widget input.tnp-submit,
.tnp-widget input.tnp-submit,
form.tnp-form input[type="submit"] {
    background-color: var(--wp--preset--color--signal);
    color: var(--wp--preset--color--signal-ink);
    border: 0;
    border-radius: var(--wp--custom--radius--base);
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    min-height: 48px;
    padding-inline: var(--wp--preset--spacing--60);
    cursor: pointer;
}

.footer-newsletter input.tnp-submit:hover,
.footer-newsletter .tnp-widget input.tnp-submit:hover,
.tnp-widget input.tnp-submit:hover {
    filter: brightness(0.94);
}

.footer-newsletter input[type="email"],
.tnp-widget input[type="email"] {
    min-height: 48px;
    border-radius: var(--wp--custom--radius--base);
    border: 1px solid var(--wp--preset--color--line-strong);
    padding-inline: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------
   F7 — Érintőcélok. Mobilon a lista- és láblécszerű linkek 20–24px
   magasak voltak; a WCAG/library minimuma 44px.
   --------------------------------------------------------------------- */
@media (max-width: 781px) {
    footer.wp-block-group p a,
    .wp-block-post-terms a,
    .wp-block-navigation__responsive-container a {
        display: inline-block;
        padding-block: var(--wp--preset--spacing--30);
    }

    .wp-block-button__link,
    .wp-element-button {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }
}

/* ---------------------------------------------------------------------
   F8 — Térkép. Hozzájárulás előtt (vagy ha az embed nem tölt be) a
   keret üresen maradt. A helyettesítő mindig látszik, az iframe ráül.
   --------------------------------------------------------------------- */
.creatit-map {
    position: relative;
    background-color: var(--wp--preset--color--sunken);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: var(--wp--custom--radius--base);
    overflow: hidden;
}

.creatit-map::before {
    content: attr(data-fallback);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--60);
    text-align: center;
    color: var(--wp--preset--color--muted-strong);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
}

.creatit-map iframe {
    position: relative;
    display: block;
    width: 100%;
}

/*
  F9 — a korábbi `.wp-site-blocks { overflow-x: hidden }` kikerült:
  tünetet rejtett el, és elrontotta volna a sticky pozicionálást.
  Vízszintes túlcsordulás 360/768/1440-en nincs (mért scrollWidth).

  F9b — a `hidden` helyett a <html>-en `overflow-x: clip`: ez NEM hoz
  létre saját görgetési kontextust (a `hidden` az overflow-y-t is
  automatikusan `auto`-ra kényszerítette volna a másik tengelyen, és ez
  törte el korábban a sticky fejlécet), viszont a mobil aloldalakon
  esetenként jelentkező, csak valódi eszközön látszó néhány pixeles
  vízszintes túllógást is levágja anélkül, hogy a sticky pozicionálást
  érintené.
*/
html {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------
   B1 — Süti-banner. A szövegeket a creatit-core fordítja; a plugin saját
   stíluslapjából jövő gyári kék (#1863DC) viszont csak innen írható felül.
   --------------------------------------------------------------------- */
.cky-consent-container .cky-show-desc-btn,
.cky-modal .cky-show-desc-btn,
.cky-accordion-btn {
    color: var(--wp--preset--color--primary);
}

.cky-consent-container,
.cky-modal {
    font-family: var(--wp--preset--font-family--body);
}

/* ---------------------------------------------------------------------
   F11 — Állítás-szekció (Rólunk). A constrained layout minden max-width-es
   gyereket középre húz, ezért a nagy címsor elcsúszott; itt balra zárjuk.
   --------------------------------------------------------------------- */
.statement-section > .wp-block-heading {
    max-width: 16ch;
    margin-inline-start: 0;
}

/* ---------------------------------------------------------------------
   F7 / kivitelezés — Fejléc 480px alatt. A logó 150px-es fix szélessége
   + a menügomb + a sárga CTA együtt 342px, a 360px-es nézetben elérhető
   312px helyett — emiatt a fejléc két sorba tört és 135px magas lett.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
    .site-header .wp-block-site-logo,
    .site-header .custom-logo-link,
    .site-header .custom-logo {
        width: auto;
        max-width: 112px;
        height: auto;
    }

    .site-header > .wp-block-group {
        gap: var(--wp--preset--spacing--30);
    }

    .site-header .wp-block-button__link {
        padding-inline: var(--wp--preset--spacing--40);
    }
}

/* =====================================================================
   MOBIL MENÜ
   A WordPress gyári overlay-e fehér lap, jobbra zárt 14px-es linkekkel,
   logó és CTA nélkül — „szétesett". Itt teljes képernyős navy lap lesz,
   balra zárt nagy címsor-linkekkel, alatta a fő gombbal és az
   elérhetőségekkel, hogy a menü önmagában is használható legyen.
   ===================================================================== */

/* A nyitógomb legyen valódi, 48px-es érintőcél — de CSAK ott, ahol a
   WordPress egyáltalán megjeleníti. A `display` tulajdonságot nem vesszük
   át: korábban feltétel nélküli `display:flex` volt itt, és emiatt a
   hamburger desktopon is kiült a menü fölé (a főmenü pedig egy sorral
   lejjebb csúszott). */
@media (max-width: 600px) {
    .site-header .wp-block-navigation__responsive-container-open {
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        border-radius: var(--wp--custom--radius--base);
        color: var(--wp--preset--color--navy);
    }

    .site-header .wp-block-navigation__responsive-container-open:hover {
        background: var(--wp--preset--color--sunken);
    }

    .site-header .wp-block-navigation__responsive-container-open svg {
        width: 26px;
        height: 26px;
    }
}

/* Az overlay maga. */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--navy);
    color: var(--wp--preset--color--on-navy);
    padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    /* A felső sáv magassága: a mobil fejléccel megegyező 81px, hogy a
       logó nyitáskor pontosan a helyén maradjon. */
    --creatit-menu-bar: 81px;
    display: flex;
    flex-direction: column;
    /* A WordPress blokk-köze flex-résként is érvényesül, és elcsúsztatná a
       sávba beültetett bezáró gombot — itt nulla. */
    gap: 0;
    height: 100%;
    padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--90);
    /* NINCS saját overflow: különben ez lenne a ragadós elemek görgetési
       kerete, ő viszont nem görget (a .is-menu-open igen), és a sticky
       egyszerűen nem lépne működésbe. */
    overflow: visible;
}

/* Fejlécsáv az overlayen belül: a márkajelet a .menu-brand blokk adja
   (fehér logó, pontosan ott, ahol a fejlécben a sötét változat áll), a
   bezárás pedig oda kerül, ahol a hamburger volt. Így a menü nyitása-zárása
   nem ugrik — csak a színek váltanak. A helyet itt tartjuk fenn neki. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    flex: 0 0 auto;
    height: var(--creatit-menu-bar);
    /* teljes szélesség: a dialógus oldalsó paddingján kilógva */
    margin-inline: calc(-1 * var(--wp--preset--spacing--50));
    background: var(--wp--preset--color--navy);
    border-bottom: 1px solid var(--wp--preset--color--navy-line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: sticky;
    z-index: 3;
    /* pontosan a hamburger helye: a fejléc függőleges paddingja */
    top: var(--wp--preset--spacing--40);
    right: auto;
    align-self: flex-end;
    /* beleül a fenti sávba, majd visszaadja a helyet a tartalomnak */
    margin-top: calc(var(--wp--preset--spacing--40) - var(--creatit-menu-bar));
    margin-bottom: calc(var(--creatit-menu-bar) - var(--wp--preset--spacing--40) - 48px);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wp--preset--color--navy-line);
    border-radius: 50%;
    background: var(--wp--preset--color--navy-2);
    color: var(--wp--preset--color--on-navy);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
    background: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    flex: 1 1 auto;
    padding-top: var(--wp--preset--spacing--80);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: block;
    width: 100%;
    gap: 0;
}

/* Elsődleges menüpontok: nagy, balra zárt, vékony elválasztóval.
   Az első elem (jellemzően „Termékek") NEM kap felső szegélyt: a fejlécsáv
   alján már ott az ::before elem border-bottomja, ami ugyanazt a vonalat
   adja — a kettő egymás alatt két, egymáshoz túl közeli csíknak hatott. */
.wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-close
    > .wp-block-navigation__responsive-dialog
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item:not(:first-child) {
    border-top: 1px solid var(--wp--preset--color--navy-line);
}

.wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-close
    > .wp-block-navigation__responsive-dialog
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item {
    display: block;
    opacity: 0;
    transform: translateY(10px);
    animation: creatit-menu-in 420ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 40ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 90ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 140ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 190ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 240ms; }

@keyframes creatit-menu-in {
    to { opacity: 1; transform: none; }
}

.wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-close
    > .wp-block-navigation__responsive-dialog
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 60px;
    padding-block: var(--wp--preset--spacing--30);
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--heading-s);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--on-navy);
    text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--brand);
}

/* A „Termékek" almenü mindig nyitva, behúzva, monóval — nem kell külön
   koppintani a lenyitásához. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-block: var(--wp--preset--spacing--20);
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--mono-data);
    font-weight: 400;
    color: var(--wp--preset--color--on-navy-muted);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--brand);
}

/* A menü alja: fő gomb és elérhetőségek. A fejlécből emeljük ide, hogy
   a tartalom a Site Editorban szerkeszthető maradjon. */
.menu-extras { display: none; }

/* Teljes szélességű, tömör sáv a menü alján: a görgetett menüpontok
   MÖGÉ kerülnek, nem ütnek át rajta. (Korábban átlátszó volt, és a hosszú
   menü beleért az „Ajánlatot kérek" gombba.) */
html.has-modal-open .menu-extras {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
    position: fixed;
    z-index: 100001;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
    background: var(--wp--preset--color--navy);
    border-top: 1px solid var(--wp--preset--color--navy-line);
    opacity: 0;
    animation: creatit-menu-in 420ms cubic-bezier(.16, 1, .3, 1) 300ms forwards;
}

html.has-modal-open .menu-extras .wp-block-button,
html.has-modal-open .menu-extras .wp-block-buttons { width: 100%; }

html.has-modal-open .menu-extras .wp-block-button__link {
    width: 100%;
    justify-content: center;
    min-height: 56px;
    font-size: var(--wp--preset--font-size--body);
}

html.has-modal-open .menu-extras .menu-extras__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
    margin: 0;
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--mono-data);
    color: var(--wp--preset--color--on-navy-muted);
}

html.has-modal-open .menu-extras a:not(.wp-block-button__link) {
    color: var(--wp--preset--color--brand);
    text-decoration: none;
}

html.has-modal-open .menu-extras a:not(.wp-block-button__link):hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
    html.has-modal-open .menu-extras {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* =====================================================================
   REFERENCIA-GALÉRIA
   A régi oldal teljes szélességű mozaikja jó ötlet volt, de a fehér
   felirat közvetlenül a fotón helyenként olvashatatlan. Itt ugyanaz a
   mozaik-ritmus, de a felirat mindig sötét átmenetre kerül, és a kép
   nagyítható. Minden mozgás kikapcsol `prefers-reduced-motion` esetén.
   ===================================================================== */

.ref-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    grid-auto-flow: dense;
    gap: var(--wp--preset--spacing--30);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Minden hetedik csempe duplán széles, minden tizenegyedik duplán magas —
   ettől lesz mozaik és nem táblázat. A `dense` pakolás tölti ki a réseket. */
.ref-gallery > li:nth-child(7n + 1) { grid-column: span 2; }
.ref-gallery > li:nth-child(11n + 4) { grid-row: span 2; }

.ref-gallery > li { min-width: 0; }

.ref-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--base);
    background: var(--wp--preset--color--navy);
    cursor: zoom-in;
}

.ref-card__media,
.ref-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.ref-card__media img {
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1), filter 400ms ease;
}

/* A sötét átmenet az, ami a feliratot olvashatóvá teszi bármilyen fotón. */
.ref-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(5, 47, 66, .92) 0%,
        rgba(5, 47, 66, .72) 28%,
        rgba(5, 47, 66, .18) 56%,
        rgba(5, 47, 66, 0) 78%);
    transition: opacity 400ms ease;
    pointer-events: none;
}

.ref-card__title {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    bottom: 0;
    margin: 0;
    padding: var(--wp--preset--spacing--50);
    color: var(--wp--preset--color--on-navy);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
    transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}

/* A jelzősárga csík hoverre balról jobbra húzódik be. */
.ref-card__title::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--wp--preset--spacing--50);
    width: 40px;
    height: 3px;
    background: var(--wp--preset--color--signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 450ms cubic-bezier(.16, 1, .3, 1);
}

.ref-card:hover .ref-card__media img,
.ref-card:focus-visible .ref-card__media img {
    transform: scale(1.07);
}

.ref-card:hover::after,
.ref-card:focus-visible::after { opacity: .88; }

.ref-card:hover .ref-card__title,
.ref-card:focus-visible .ref-card__title {
    transform: translateY(calc(-1 * var(--wp--preset--spacing--30)));
}

.ref-card:hover .ref-card__title::before,
.ref-card:focus-visible .ref-card__title::before { transform: scaleX(1); }

.ref-card:focus-visible {
    outline: 3px solid var(--wp--preset--color--signal);
    outline-offset: 3px;
}

/* =====================================================================
   FŐOLDALI REFERENCIA-TEASER
   Ugyanaz a .ref-card komponens, mint a teljes galérián (fotó, sötét
   átmenet, cím) — de itt nincs lightbox (a creatit-ui.js csak a
   `.ref-gallery`-n belüli kártyákra köt be), ezért a nagyító kurzor és a
   galéria fix rácssor-magassága sem kell: a kártya arányát a 4:3 képarány
   adja. Reszponzív oszlopszám a rács közös szabályából jön (V3, style.css). */
.home-ref-grid .ref-card {
    aspect-ratio: 4 / 3;
    cursor: default;
}

.home-ref-grid {
    gap: var(--wp--preset--spacing--40) !important;
}

/* Nagyítás-jelzés: mono felirat a jobb felső sarokban. */
.ref-card__cue {
    position: absolute;
    z-index: 2;
    top: var(--wp--preset--spacing--40);
    right: var(--wp--preset--spacing--40);
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--mono-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--navy);
    background: var(--wp--preset--color--signal);
    padding: 4px 10px;
    border-radius: var(--wp--custom--radius--base);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 300ms ease, transform 300ms ease;
    pointer-events: none;
}

.ref-card:hover .ref-card__cue,
.ref-card:focus-visible .ref-card__cue { opacity: 1; transform: none; }

/* Belépő animáció görgetésre, csempénként késleltetve.
   A rejtett kiindulóállapot CSAK akkor él, ha a JS be tudta kapcsolni
   (`js-reveal` osztály). JS nélkül minden csempe azonnal látszik —
   egy meghiúsult IntersectionObserver nem tüntetheti el a galériát. */
.ref-gallery.js-reveal > li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(.16, 1, .3, 1);
}

.ref-gallery.js-reveal > li.is-in { opacity: 1; transform: none; }

@media (max-width: 1024px) {
    .ref-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
    .ref-gallery > li:nth-child(11n + 4) { grid-row: span 1; }
}

@media (max-width: 600px) {
    .ref-gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .ref-gallery > li:nth-child(7n + 1) { grid-column: span 1; }
}

/* --- Lightbox --- */
.ref-lightbox {
    border: 0;
    padding: 0;
    max-width: min(1100px, 92vw);
    max-height: 92vh;
    background: transparent;
    overflow: visible;
}

.ref-lightbox::backdrop { background: rgba(5, 47, 66, .94); }

.ref-lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.ref-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    margin: 0 auto;
    border-radius: var(--wp--custom--radius--base);
    background: var(--wp--preset--color--navy-2);
}

.ref-lightbox figcaption {
    color: var(--wp--preset--color--on-navy);
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--heading-xs);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
}

.ref-lightbox__meta {
    display: flex;
    justify-content: center;
    gap: var(--wp--preset--spacing--40);
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--mono-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--on-navy-muted);
}

.ref-lightbox__btn,
.ref-lightbox__close {
    position: fixed;
    width: 52px;
    height: 52px;
    border: 1px solid var(--wp--preset--color--navy-line);
    border-radius: 50%;
    background: var(--wp--preset--color--navy-2);
    color: var(--wp--preset--color--on-navy);
    font-size: var(--wp--preset--font-size--heading-s);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-lightbox__btn { top: 50%; transform: translateY(-50%); }
.ref-lightbox__btn:hover,
.ref-lightbox__close:hover { background: var(--wp--preset--color--primary); }
.ref-lightbox__btn--prev { left: var(--wp--preset--spacing--50); }
.ref-lightbox__btn--next { right: var(--wp--preset--spacing--50); }
.ref-lightbox__close { top: var(--wp--preset--spacing--50); right: var(--wp--preset--spacing--50); }

.ref-lightbox__btn:focus-visible,
.ref-lightbox__close:focus-visible {
    outline: 2px solid var(--wp--preset--color--signal);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .ref-lightbox__btn { top: auto; bottom: var(--wp--preset--spacing--50); transform: none; }
    .ref-lightbox__btn--prev { left: var(--wp--preset--spacing--40); }
    .ref-lightbox__btn--next { right: var(--wp--preset--spacing--40); }
}

@media (prefers-reduced-motion: reduce) {
    .ref-card__media img,
    .ref-card::after,
    .ref-card__title,
    .ref-card__title::before,
    .ref-card__cue,
    .ref-gallery.js-reveal > li { transition: none !important; }
    .ref-gallery.js-reveal > li { opacity: 1; transform: none; }
    .ref-card:hover .ref-card__media img { transform: none; }
}

/* =====================================================================
   MOBIL FEJLÉC ÉS RAGADÓS CTA
   A fejlécben 360px-en nem fért el egyszerre a logó, a menügomb és a
   sárga gomb — vagy a logó lett aprá, vagy a fejléc tört két sorba.
   Megoldás: mobilon a fejléc csak logó + menügomb, a fő CTA pedig
   ragadós sávba kerül az oldal alján, így végig elérhető marad.
   ===================================================================== */

.mobile-cta-bar { display: none; }

@media (max-width: 600px) {
    .site-header .header-cta { display: none; }

    .site-header .wp-block-site-logo,
    .site-header .custom-logo-link,
    .site-header .custom-logo {
        width: auto;
        max-width: 150px;
        height: auto;
    }

    .mobile-cta-bar {
        display: flex;
        position: fixed;
        z-index: 90;
        inset-inline: 0;
        bottom: 0;
        align-items: center;
        gap: var(--wp--preset--spacing--40);
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
        background: var(--wp--preset--color--navy);
        border-top: 1px solid var(--wp--preset--color--navy-line);
    }

    .mobile-cta-bar__label {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--wp--preset--color--brand);
    }

    .mobile-cta-bar .wp-block-button__link {
        min-height: 48px;
        white-space: nowrap;
    }

    /* Nyitott menü alatt a sáv zavarna — a menünek saját gombja van. */
    html.has-modal-open .mobile-cta-bar { display: none; }

    /* Hogy a lábléc alja ne csússzon a sáv alá. */
    .wp-site-blocks { padding-bottom: 72px; }
}

/* 480px alatt korábban a logót szűkítettük — erre már nincs szükség,
   mert a sárga gomb lekerült a fejlécből. */
@media (max-width: 480px) {
    .site-header .wp-block-site-logo,
    .site-header .custom-logo-link,
    .site-header .custom-logo { max-width: 150px; }

    .site-header > .wp-block-group { gap: var(--wp--preset--spacing--40); }
}

/* =====================================================================
   MOBIL MENÜ — specifikussági javítás
   A WordPress `wp-block-navigation` stíluslapja a témánál KÉSŐBB kerül
   ki (blokkonkénti betöltés), ezért az azonos erősségű szabályai
   felülírták a fentieket: a háttér `inherit` maradt (fehér), a lista
   pedig a fejléc jobbra igazítását örökölte. Az alábbi blokk ugyanazokat
   a szabályokat viszi, magasabb specifikussággal.
   ===================================================================== */

html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--navy);
    color: var(--wp--preset--color--on-navy);
}

html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100%;
}

/* A generált elrendezés-osztály (.wp-container-core-navigation-…) a
   fejléchez való: ott jobbra zár. Az overlayben balra kell. */
html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100%;
}

html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    align-items: stretch !important;
    text-align: left !important;
}

html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    justify-content: flex-start !important;
    color: var(--wp--preset--color--on-navy);
}

html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--on-navy-muted);
}

html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
html.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--brand);
}

/* =====================================================================
   RAGADÓS CTA SÁV — apróságok
   A felirat 360px-en szóközépen tört el, a süti-plugin lebegő gombja
   pedig ráült a sávra.
   ===================================================================== */

@media (max-width: 600px) {
    .mobile-cta-bar__label {
        line-height: 1.35;
        text-wrap: balance;
    }

    /* A süti-plugin „beállítások újranyitása" gombja a sáv fölé kerül. */
    .cky-btn-revisit-wrapper {
        bottom: 84px !important;
    }
}

@media (max-width: 400px) {
    /* Ennél keskenyebben a felirat már csak zaj — a gomb vigye az egészet. */
    .mobile-cta-bar__label { display: none; }
    .mobile-cta-bar { justify-content: center; }
    .mobile-cta-bar .wp-block-button,
    .mobile-cta-bar .wp-block-buttons { width: 100%; }
    .mobile-cta-bar .wp-block-button__link { width: 100%; justify-content: center; }
}

/* A háttérszínt a WordPress
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open`
   szabálya adta (fehér). Az a szelektor négy osztályt ér — ezért kell ide
   a `.wp-block-navigation` közbeiktatása, hogy eggyel erősebb legyen.
   Háttérszínt magán a navigációs blokkon nem állítunk, mert az a
   desktop menüsávot is befestené. */
html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--navy);
    color: var(--wp--preset--color--on-navy);
}

/* =====================================================================
   MOBIL MENÜ — ritmus és görgetés
   Az első kör után maradt három baj: az alsó (fix pozíciójú) gomb ráült
   az utolsó menüpontra, a almenü tételei között a fejléc 20px-es
   blockGap-je tátongott, és a lista teteje fölött fölösleges üres sáv volt.
   ===================================================================== */

html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    /* Hely az alul rögzített gombnak és elérhetőségeknek. */
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: 210px;
}

html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    gap: 0 !important;
    padding-top: 0;
    padding-bottom: var(--wp--preset--spacing--30);
}

html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border: 0;
}

html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    min-height: 44px;
    padding-block: var(--wp--preset--spacing--10);
}

/* A főpontok se legyenek túl levegősek — 56px bőven elég érintésre. */
html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
    > .wp-block-navigation__responsive-close
    > .wp-block-navigation__responsive-dialog
    > .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    min-height: 56px;
    padding-block: var(--wp--preset--spacing--20);
}

/* A süti-plugin lebegő gombja nyitott menüben zavar. */
html.has-modal-open .cky-btn-revisit-wrapper { display: none !important; }

/* =====================================================================
   SÜTI-BEÁLLÍTÁSOK ABLAK — vízszintes túlcsordulás
   A CookieYes „preference center" panelje fix 845px széles, és zárt
   állapotban is a rendezésben marad. 360px-en ez vízszintes görgetést
   okozott a Kapcsolat és az Ajánlatkérés oldalon (mért 398px / 361px).
   ===================================================================== */

.cky-modal {
    max-width: 100vw;
    overflow: hidden;
}

.cky-preference-center {
    max-width: min(845px, calc(100vw - var(--wp--preset--spacing--80))) !important;
}

.cky-preference-header,
.cky-preference-body-wrapper,
.cky-preference-content-wrapper,
.cky-accordion-wrapper,
.cky-accordion,
.cky-accordion-item,
.cky-prefrence-btn-wrapper {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* A Gutenberg elrendezés-osztálya (.wp-container-core-group-is-layout-…)
   `display:flex`-et ad a blokknak, és erősebb, mint a fenti `display:none` —
   ezért a mobil CTA-sáv desktopon is megjelent. Itt zárjuk le. */
.mobile-cta-bar { display: none !important; }

@media (max-width: 600px) {
    .mobile-cta-bar { display: flex !important; }
    html.has-modal-open .mobile-cta-bar { display: none !important; }
}

/* =====================================================================
   RAGADÓS FEJLÉC
   Görgetés közben is kéznél a menü és az ajánlatkérő gomb — minden
   nézeten, mobilon is (korábban csak 601px fölött ragadt; mobilon az
   alsó CTA-sáv emellett, nem helyette, marad kéznél).
   ===================================================================== */

.wp-site-blocks > .wp-block-template-part:first-child {
    position: sticky;
    top: 0;
    z-index: 80;
}

.site-header {
    /* A fejléc alatt átgörgő tartalomnak nem szabad átütnie. */
    background-color: var(--wp--preset--color--surface);
}

/* A horgonyos linkek (pl. #rolunk) ne csússzanak a fejléc alá. */
:target { scroll-margin-top: 96px; }

@media (max-width: 600px) {
    :target { scroll-margin-top: 96px; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* =====================================================================
   MOBIL MENÜ — alacsony képernyőkön összehúzva
   640–700px magas telefonokon a nyolc menüpont + az alsó sáv nem fért ki
   egyszerre, és a lista beleért az „Ajánlatot kérek" gombba. Az alsó sáv
   tömör (a tartalom alatta fut el), alacsony képernyőn pedig minden
   méret egy fokkal kisebb, hogy görgetés nélkül is kiférjen.
   ===================================================================== */

@media (max-height: 720px) {
    html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: var(--wp--preset--spacing--30);
        padding-bottom: 168px;
    }

    html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
        > .wp-block-navigation__responsive-close
        > .wp-block-navigation__responsive-dialog
        > .wp-block-navigation__responsive-container-content
        > .wp-block-navigation__container
        > .wp-block-navigation-item
        > .wp-block-navigation-item__content {
        min-height: 48px;
        font-size: var(--wp--preset--font-size--heading-xs);
        padding-block: var(--wp--preset--spacing--10);
    }

    html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        min-height: 38px;
        padding-block: 0;
    }

    html.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        padding-bottom: var(--wp--preset--spacing--20);
    }

    html.has-modal-open .menu-extras {
        gap: var(--wp--preset--spacing--30);
        padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
    }

    html.has-modal-open .menu-extras .wp-block-button__link { min-height: 48px; }

    html.has-modal-open .menu-extras .menu-extras__contact {
        font-size: var(--wp--preset--font-size--mono-label);
        gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
    }

    /* A felső sáv magassága alacsony képernyőn sem változik — a logónak
       pontosan a fejlécbeli helyén kell maradnia. */
}

/* =====================================================================
   TERMÉKKÁRTYÁK — egyforma magasság
   A rács celláiban a kártyadoboz nem nyúlt le a cella aljáig, ezért a
   rövidebb nevű termékek kártyája alacsonyabb maradt.
   ===================================================================== */

.wp-block-post-template > li > .wp-block-group {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wp-block-post-template > li > .wp-block-group > .wp-block-group:last-child {
    flex: 1 1 auto;
}

/* =====================================================================
   MENÜ MÁRKAJEL
   A fehér logó ugyanabban a dobozban ül, mint a fejléc sötét logója:
   48px magas sor (a hamburgerrel egy magasságban), a logó benne
   függőlegesen középen, 150px szélesen. Így a menü nyitásakor a jel nem
   mozdul el, csak a háttér vált sötétre.
   ===================================================================== */

.menu-brand { display: none; }

html.has-modal-open .menu-brand {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 100001;
    top: var(--wp--preset--spacing--40);
    left: var(--wp--preset--spacing--50);
    height: 48px;
    margin: 0;
}

/* A <figure> blokkszintű, benne az <a> inline-block volt — a sor alatti
   alapvonal-maradvány 7,6px-szel magasabbra tolta a logót, mint a fejlécben.
   Flexbe téve a doboz pontosan a kép magassága lesz. */
html.has-modal-open .menu-brand .menu-brand__logo,
html.has-modal-open .menu-brand figure {
    margin: 0;
    display: flex;
    line-height: 0;
}

html.has-modal-open .menu-brand a { display: block; }

html.has-modal-open .menu-brand img {
    display: block;
    width: 150px;
    height: auto;
}

html.has-modal-open .menu-brand a:focus-visible {
    outline: 2px solid var(--wp--preset--color--brand);
    outline-offset: 4px;
}

/* A logó mérete és pozíciója alacsony képernyőn SEM változik: a fejlécben
   is 150px, és az egész ötlet az, hogy nyitáskor ne mozduljon el. */

/* =====================================================================
   VISSZA A TETEJÉRE GOMB
   Minden oldalon megjelenik, görgetés után, jobb alul. Mobilon az alsó
   ragadós CTA-sáv (72px) fölé kerül, hogy ne takarja és ne takarja az.
   A JS adja hozzá a body végéhez és kapcsolja az `is-visible` osztályt.
   ===================================================================== */
.back-to-top {
    position: fixed;
    right: var(--wp--preset--spacing--50);
    bottom: var(--wp--preset--spacing--50);
    z-index: 85;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--wp--preset--color--navy-line);
    border-radius: 9999px;
    background: var(--wp--preset--color--navy);
    color: var(--wp--preset--color--on-navy);
    box-shadow: 0 4px 16px rgba(5, 47, 66, 0.24);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--wp--preset--color--primary);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--wp--preset--color--brand);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity .01s linear;
        transform: none;
    }
}

/* Mobilon az alsó ragadós CTA-sáv fölé kell kerülnie, és nyitott menü
   alatt — ahogy a CTA-sáv is — el kell tűnnie. */
@media (max-width: 600px) {
    .back-to-top {
        right: var(--wp--preset--spacing--40);
        bottom: calc(72px + var(--wp--preset--spacing--30));
        width: 44px;
        height: 44px;
    }

    html.has-modal-open .back-to-top { display: none; }
}

/* =====================================================================
   LÁBLÉC — kompaktabb mobilon, olvashatóbb betűméret mindenhol
   A lábléc szövege korábban `tiny` (13px) volt, a linklistákon
   `line-height:2`-vel — ez adatvezérelt oldalakon (négy oszlop, sok sor)
   mobilon nagyon hosszúra nyújtotta a láblécet, a szöveg pedig kis
   képernyőn nehezebben olvasható. A betűméretet `small`-ra (15px)
   emeltük, a linklisták sortávját 2-ről 1,7-re csökkentettük — összességében
   nem lett magasabb, de jobban olvasható. Mobilon ezenfelül szűkebbek a
   szekciók közötti térközök, és a támogatói logósor rése (141px — csak
   akkor kell ekkora, ha a két logó egymás mellett van) 141px-ről a
   mobilon egymás alá kerülő logóknak megfelelő méretre csökken.
   ===================================================================== */
@media (max-width: 600px) {
    .footer-columns {
        gap: var(--wp--preset--spacing--50) !important;
    }

    .support-logos {
        gap: var(--wp--preset--spacing--50) !important;
    }

    .footer-newsletter {
        margin-top: var(--wp--preset--spacing--60) !important;
        padding-top: var(--wp--preset--spacing--50) !important;
        padding-bottom: var(--wp--preset--spacing--50) !important;
    }

    .support-block {
        margin-top: var(--wp--preset--spacing--70) !important;
        padding-top: var(--wp--preset--spacing--50) !important;
        padding-bottom: var(--wp--preset--spacing--50) !important;
    }
}