/*
Theme Name: MyFive
Theme URI: https://frontendtanfolyam.hu/
Author: FrontendTanfolyam
Author URI: https://frontendtanfolyam.hu/pocsik-emese-frontend-fejleszto/
Description: Basic Block Theme by Emese Pocsik
Tags: one-column, custom-colors, custom-menu
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myfive
*/

@media screen and (max-width: 1199px) {
    body {
        font-size: 18px;
    }
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}
.wp-block-button:hover {
    border: 3x solid primary;
}
.wc-block-product > .wp-block-gorup {
    height: 100%;
}
/* Kosár ikon gombokon (termékoldal és lista) */
.single_add_to_cart_button::before,
.add_to_cart_button::before {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;utf8,<svg ...>'); /* SVG ikon */
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}
.single_add_to_cart_button::before {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: text-top;
}
.add_to_cart_button::before {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: baseline;
}

/* Mennyiségválasztó formázása (WooCommerce blokk) */
.wc-block-components-quantity-selector {
    border-radius: 10px !important;
}
.wc-block-components-quantity-selector button {
    font-size: 1rem !important;
    opacity: 1 !important;
    font-weight: bold !important;
    line-height: 1;
    border: solid 1px #ddd !important;
}
.wc-block-components-quantity-selector:after {
    border: solid 1px #ddd !important;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    font-size: 1rem !important;
}

/* Kosár tartalom (termékadatok, árak, meták) */
.wc-block-components-product-name {
    font-weight: 700;
}
.wc-block-cart-item__prices {
    font-size: 1rem;
}
.wc-block-components-product-metadata {
    display: none;
}
.wc-block-cart-items__row {
    border-bottom: solid 1px #ddd;
}

/* Termék címkék */
.wc-block-product .taxonomy-product_tag {
    position: absolute;
    left: 0;
    top: 1rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-self: flex-start;
    gap: 0.5rem;
}
.wc-block-product .taxonomy-product_tag a {
    font-size: .75rem;
    padding: 4px 14px;
    text-align: center;
    vertical-align: middle;
    align-self: flex-start;
    text-transform: uppercase;
    background: var(--wp--preset--color--merlot);
    color: #fff;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    z-index: 1;
}
.wc-block-product .wp-block-post-terms__separator {
    display: none;
}

/* Akciós ár áthúzása */
del {
    opacity: 0.5;
    background: var(--wp--preset--text-muted);
}

/* WooCommerce fülrendszer elrejtése */
ul.tabs.wc-tabs {
    display: none;
}
.woocommerce div.product div.images .flex-control-thumbs {
    padding-top: 10px!important;
}

/* ==========================================================
   Syntexson egyedi kiegészítések
   Áthelyezve a WordPress „További CSS” mezőjéből (2026.10.15.)
   ========================================================== */

/* === Syntexson – központi kiegészítő stílusok ===
   Itt csak olyasmi van, ami natív Gutenberg-beállítással nem oldható meg.
   Az ügyfélnek NEM kell CSS-osztályt írnia: minden a blokkok saját
   szerkezetére épül (rács-csoport > kártya-csoport).
   Szerkeszthető: Szerkesztő -> Stílusok -> További CSS
   ------------------------------------------------------------------ */

/* Kártyák a megoldás-rácsokban: kép ne lógjon ki a lekerekítésen */
.wp-block-group-is-layout-grid > .wp-block-group .wp-block-image {
  overflow: hidden;
  border-radius: 8px;
}

/* Enyhe hover-effekt: a kártya megemelkedik, a kép finoman ránagyít */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-group-is-layout-grid > .wp-block-group {
    transition: transform .2s ease, box-shadow .2s ease;
    will-change: transform;
  }
  .wp-block-group-is-layout-grid > .wp-block-group:hover,
  .wp-block-group-is-layout-grid > .wp-block-group:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
  /* A lábléc oszlopai nem kártyák: ott nincs emelkedés, árnyék és képnagyítás */
  footer .wp-block-group-is-layout-grid > .wp-block-group,
  footer .wp-block-group-is-layout-grid > .wp-block-group:hover,
  footer .wp-block-group-is-layout-grid > .wp-block-group:focus-within,
  footer .wp-block-group-is-layout-grid > .wp-block-group .wp-block-image img {
    transform: none;
    box-shadow: none;
    transition: none;
  }
  .wp-block-group-is-layout-grid > .wp-block-group .wp-block-image img {
    transition: transform .35s ease;
  }
  .wp-block-group-is-layout-grid > .wp-block-group:hover .wp-block-image img,
  .wp-block-group-is-layout-grid > .wp-block-group:focus-within .wp-block-image img {
    transform: scale(1.04);
  }
}

/* Billentyűzetes navigációhoz látható fókusz a kártyákon */
.wp-block-group-is-layout-grid > .wp-block-group a:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
}

/* === Gyártói logó körhinta ===
   A "Logó körhinta" csoport osztálya: logo-korhinta (egyszer beállítva, az
   ügyfélnek nem kell hozzányúlnia — csak a képeket cseréli a csempéken).
   A logósor kétszer tartalmazza ugyanazt a 10 logót, ettől végtelen a futás.
   Ha logót veszel fel vagy törölsz, MINDKÉT példányból tedd meg.
   ------------------------------------------------------------------ */
.logo-korhinta {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-korhinta > .wp-block-group-is-layout-flex {
  width: max-content;
  flex-wrap: nowrap;
  animation: logo-uszas 45s linear infinite;
}
.logo-korhinta > .wp-block-group-is-layout-flex > .wp-block-group {
  flex: 0 0 9rem;
}
/* Egérrel fölé állva megáll, hogy el lehessen olvasni */
.logo-korhinta:hover > .wp-block-group-is-layout-flex,
.logo-korhinta:focus-within > .wp-block-group-is-layout-flex {
  animation-play-state: paused;
}
@keyframes logo-uszas {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-korhinta > .wp-block-group-is-layout-flex { animation: none; }
  .logo-korhinta { overflow-x: auto; }
}

/* === Főoldali hero: lassú „Ken Burns” mozgás (közelítés + enyhe oldalra úszás) ===
   Csak a főoldal legelső Borító (Cover) blokkjának háttérképére hat.
   Képcsere után is működik, osztályt nem kell megadni.
   Kikapcsol, ha a látogató készülékén be van állítva a „mozgás csökkentése”. */
@keyframes sx-hero-kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.12) translate(-3%, -1.2%); }
}
.home .wp-block-post-content > .wp-block-cover:first-child { overflow: hidden; }
.home .wp-block-post-content > .wp-block-cover:first-child > .wp-block-cover__image-background {
  transform-origin: 60% 50%;
  animation: sx-hero-kenburns 15s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .home .wp-block-post-content > .wp-block-cover:first-child > .wp-block-cover__image-background { animation: none; }
}

/* === Gombok: modern hover-hatás (2026.10.) ===
   A gombok kinézete (lekerekítés, betű, térköz, árnyék) a Stílusok → Blokkok → Gomb
   beállításaiban van. Itt csak az áttűnés és a hover-mozgás, mert ezt theme.json nem tudja. */
.wp-element-button, .wp-block-button__link { transition: filter .2s ease, transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.wp-element-button:hover, .wp-block-button__link:hover { filter: brightness(0.93); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.14); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { filter: none; background-color: var(--wp--preset--color--secondary); border-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--white); }
@media (prefers-reduced-motion: reduce) { .wp-element-button:hover, .wp-block-button__link:hover { transform: none; } }

/* === Vissza a tetejére gomb + mobil kapcsolati sáv (2026.10.15.) ===
   Mindkettő a Lábléc sablonrészben van, natív Gomb blokként
   („Vissza a tetejére gomb”, „Mobil kapcsolati sáv”) – a szövegük és linkjük ott szerkeszthető. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sx-fel { position: fixed; right: 20px; bottom: 70px; z-index: 90; margin: 0 !important; }
.sx-fel .wp-block-button__link { width: 48px; height: 48px; padding: 0 !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; font-size: 1.35rem !important; line-height: 1; background-color: var(--wp--preset--color--secondary); }
@supports (animation-timeline: scroll()) {
  @keyframes sx-fel-megjelenik { from { opacity: 0; visibility: hidden; transform: translateY(12px); } to { opacity: 1; visibility: visible; transform: none; } }
  .sx-fel { animation: sx-fel-megjelenik linear both; animation-timeline: scroll(root); animation-range: 0 500px; }
}

.sx-mobilsav { display: none !important; }
@media (max-width: 781px) {
  .sx-mobilsav { display: flex !important; flex-wrap: nowrap !important; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; margin: 0 !important; background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,0.12); padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
  .sx-mobilsav .wp-block-button { flex: 1 1 0; margin: 0; }
  .sx-mobilsav .wp-block-button__link { width: 100%; padding: 0.75rem 0.4rem !important; font-size: 0.95rem !important; }
  .sx-mobilsav .wp-block-button:first-child .wp-block-button__link { background-color: var(--wp--preset--color--secondary); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .sx-fel { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 14px; }
}

/* === Kártyarácsok: kiegyensúlyozott tördelés (2026.10.15.) ===
   A rács (Csoport → Rács elrendezés) oszlopszáma a kártyák darabszámához igazodik,
   így egyetlen képernyőméreten sem marad egy kártya egyedül a sorban.
   2 kártya: 2 → 1 | 3 kártya: 3 → 1 | 4 kártya: 4 → 2 → 1 | 5 kártya: 5 → 3 → 1
   6 kártya: 3 → 2 → 1 | 8 kártya: 4 → 2 → 1. Kártyát hozzáadni/törölni szabadon lehet. */
.wp-block-group.is-layout-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-block-group.is-layout-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-group.is-layout-grid:has(> :nth-child(4):last-child),
.wp-block-group.is-layout-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wp-block-group.is-layout-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wp-block-group.is-layout-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1099px) {
  .wp-block-group.is-layout-grid:has(> :nth-child(4):last-child),
  .wp-block-group.is-layout-grid:has(> :nth-child(8):last-child),
  .wp-block-group.is-layout-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-block-group.is-layout-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wp-block-group.is-layout-grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .wp-block-group.is-layout-grid:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 781px) {
  .wp-block-group.is-layout-grid:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .wp-block-group.is-layout-grid:has(> :nth-child(2):last-child),
  .wp-block-group.is-layout-grid:has(> :nth-child(4):last-child),
  .wp-block-group.is-layout-grid:has(> :nth-child(5):last-child),
  .wp-block-group.is-layout-grid:has(> :nth-child(6):last-child),
  .wp-block-group.is-layout-grid:has(> :nth-child(8):last-child) { grid-template-columns: minmax(0, 1fr); }
  .wp-block-group.is-layout-grid:has(> :nth-child(5):last-child) > *,
  .wp-block-group.is-layout-grid:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: auto; }
}

/* ==========================================================
   30 ÉVES JELVÉNY  („30 | ÉVE A SZAKMÁBAN”)
   Használat: Minták → „30 éves jelvény”. A kinézetet ez a rész
   adja, a szerkesztőben csak a szöveget kell átírni.
   Borító (hero) blokkban betöltéskor beúszik, a számot a
   js/custom.js számolja fel 0-ról. Fejlécben kicsi, lapka nélkül,
   a „30” helyén a zöld pecsét képe áll; mobilon a fejlécből eltűnik.
   A láblécben a kék pecsét kép (sima Kép blokk), ahhoz nem kell CSS.
   ========================================================== */
.syx-30-jelveny {
  width: fit-content;
  align-items: center;
  gap: 16px !important;
  padding: 10px 20px 10px 16px;
  background: #FFFFFC;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.syx-30-jelveny p { margin: 0 !important; }
.syx-30-jelveny figure { margin: 0 !important; }
.syx-30-szam {
  min-width: 1.1em;
  font-size: 56px;
  line-height: .9;
  font-weight: 300;
  color: #5E7A1C;
  font-variant-numeric: tabular-nums;
}
.syx-30-szoveg {
  padding-left: 16px;
  border-left: 3px solid #8CAD31;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .18em;
  color: #535355;
}

/* Hero: nagyobb, animált */
.wp-block-cover .syx-30-jelveny {
  margin-bottom: var(--wp--preset--spacing--m);
  animation: syx30-fel .6s .1s cubic-bezier(.2, .7, .2, 1) both;
}
.wp-block-cover .syx-30-szam { font-size: 72px; }
.wp-block-cover .syx-30-szoveg {
  font-size: 16px;
  animation: syx30-be .7s 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes syx30-fel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes syx30-be  { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* Fejléc: kicsi, lapka nélkül */
header .syx-30-jelveny {
  gap: 12px !important;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
header .syx-30-szam { font-size: 38px; }
header .syx-30-szoveg { padding-left: 12px; border-left-width: 2px; font-size: 12px; }

@media (max-width: 600px) {
  .wp-block-cover .syx-30-szam { font-size: 52px; }
  .wp-block-cover .syx-30-szoveg { font-size: 13px; }
  header .syx-30-jelveny { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover .syx-30-jelveny,
  .wp-block-cover .syx-30-szoveg { animation: none; }
}