@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Lato:wght@400;700&display=swap');

/* =========================================================
   myGasztro – GLOBAL CUSTOM CSS (v9 – Final Slogan Fix)
   Javítva: 
   - Főoldal: Minden középen.
   - Belső oldalak: Sima címek BALON, Bekúszó cím (Slogan) KÖZÉPEN.
   ========================================================= */

:root {
  /* --- MÁRKA SZÍNEK --- */
  --myg-orange: #FF8630;
  --myg-orange-hover: #E87511;
  --myg-text-dark: #333333;
  
  /* --- FONTOK --- */
  --myg-font-head: "Poppins", sans-serif;
  --myg-font-body: "Lato", sans-serif;

  /* --- INPUT/GOMB KEREKÍTÉS --- */
  --myg-radius-ui: 10px; 

  /* --- ANIMÁCIÓK --- */
  --myg-underline-h: 3px;
}

/* =========================================================
   1. ALAPOK & TAPÉTA
   ========================================================= */
html, body {
  font-family: var(--myg-font-body) !important;
  color: #2f2f2f;
  background-image: url("https://mygasztro.hu/wp-content/uploads/tapeta-web.webp") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: top left !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
}

@media (max-width: 767px) {
  html, body {
    background-image: url("https://mygasztro.hu/wp-content/uploads/tapeta-mobil.webp") !important;
    background-attachment: scroll !important;
  }
}

/* Átlátszó rétegek */
#page, .site, #content, .site-content,
#masthead, .site-header, .kadence-header {
  background: transparent !important;
  box-shadow: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--myg-font-head) !important;
  color: var(--myg-text-dark);
}

/* =========================================================
   2. CÍMSOROK IGAZÍTÁSI LOGIKÁJA (Szigorú rend)
   ========================================================= */

/* Bekúszó animáció definíciója */
.sloganFade {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* --- A) KÖZÖS ALAPOK (Minden címsorra érvényes) --- */
:where(.mygasztro-section-title, .mygasztro-save-title) {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  
  /* Hogy a narancs csík ne fusson ki */
  width: fit-content !important; 
  max-width: 100%;
  
  /* Levegő */
  margin-top: 25px !important;
  margin-bottom: 10px !important; 
}

/* --- B) FŐOLDAL (body.home) -> MINDEN KÖZÉPEN --- */
body.home :where(.mygasztro-section-title, .mygasztro-save-title) {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  text-align: center !important;
}

/* --- C) BELSŐ OLDALAK (Nem home) -> ALAPÉRTELMEZETT BALRA --- */
/* Ez hat a "myKereső", "Hozzávalók" stb. címekre */
body:not(.home) :where(.mygasztro-section-title, .mygasztro-save-title) {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* --- D) BELSŐ OLDALAK KIVÉTEL: A FŐCÍM (Slogan) LEGYEN KÖZÉPEN! --- */
/* Ez a szabály felülírja a C-t, ha a címen rajta van a .sloganFade */
body:not(.home) .mygasztro-section-title.sloganFade {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Narancs ALÁHÚZÁS animáció (Mindenhol működik) */
:where(.mygasztro-section-title, .mygasztro-save-title)::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  height: var(--myg-underline-h);
  width: 100%; 
  max-width: 100%;
  background: var(--myg-orange);
  border-radius: 99px;
  transform: translateX(-50%) scaleX(0); 
  transform-origin: center;
  transition: transform 0.35s ease;
}

:where(.mygasztro-section-title, .mygasztro-save-title):hover::after {
  transform: translateX(-50%) scaleX(1); 
}

/* =========================================================
   3. GOMBOK ÉS INPUTOK (UNIVERZÁLIS DESIGN SYSTEM)
   ========================================================= */

/* -------------------------
   GLOBAL: kék "tap highlight" OFF (mobil)
   + fókusz kulturáltan (desktop)
   ------------------------- */
a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent !important; /* mobil "kék fátyol" */
  -webkit-touch-callout: none !important;
}

/* Ne legyen kék outline mindenhol, de billentyűzetnél maradjon kulturált jelzés */
:where(a, button, input, select, textarea):focus {
  outline: none !important;
}

/* Billentyűzetes fókusz jelzés (nem kék, hanem finom narancs) */
:where(a, button, input, select, textarea):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 134, 48, 0.35) !important;
  border-color: var(--myg-orange) !important;
}

/* --- ALAP GOMB STÍLUS (Mindenhol érvényes) --- */
button[id*="myg-"], 
a[id*="myg-"][class*="btn"], 
.myg-btn,
button, .button, .wp-block-button__link {
    font-family: var(--myg-font-head) !important;
    border-radius: 8px !important; /* Standard 8px kerekítés */
    border: none !important;
    cursor: pointer !important;
    
    /* Méret és igazítás */
    min-height: 44px !important;   /* A bűvös 44px magasság */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    
    /* --- AZ "ÉLŐ" EFFEKT --- */
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transform: translateY(0) !important;
}

/* --- HOVER / ACTIVE EFFEKT (stabil mobilon is) --- */

/* 1) HOVER csak ott, ahol tényleg létezik (desktop/egér) */
@media (hover: hover) and (pointer: fine) {
  button[id*="myg-"]:hover, 
  a[id*="myg-"][class*="btn"]:hover, 
  .myg-btn:hover,
  button:hover, .button:hover, .wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
    filter: brightness(0.95) !important;
  }
}

/* 2) MOBIL: :active adja a "kattanás" érzetet, és az mindig visszaáll */
@media (hover: none) and (pointer: coarse) {
  /* ha a böngésző mégis hover-t "ragasztana", nullázzuk */
  button[id*="myg-"]:hover, 
  a[id*="myg-"][class*="btn"]:hover, 
  .myg-btn:hover,
  button:hover, .button:hover, .wp-block-button__link:hover {
    transform: translateY(0) !important;
    filter: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
  }

  /* Alap "kattanás" – kicsit erősebb, mint eddig */
  button[id*="myg-"]:active, 
  a[id*="myg-"][class*="btn"]:active, 
  .myg-btn:active,
  button:active, .button:active, .wp-block-button__link:active {
    transform: translateY(2px) scale(0.96) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12) !important;
    filter: brightness(0.99) !important;
  }

  /* ====== NAPLÓ: ikonok "rezzenés" + erősebb tap anim ======
     Cél: a napló ÖSSZES kattintható ikonja (top / bottom / egyéb) ugyanúgy reagáljon.
     Biztonság: csak #myg-diary-app alatt érvényes. */
  @keyframes mygTapJiggle {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(2px) scale(0.96) rotate(-1deg); }
    70%  { transform: translateY(1px) scale(0.98) rotate(1deg); }
    100% { transform: translateY(0) scale(1); }
  }

  /* Naplóban minden "ikon-szerű" kattintható elem – elég tág, de csak a naplóban */
  #myg-diary-app :where(
    button,
    a,
    [role="button"],
    .myg-diary-monthly__nav-btn,
    .myg-diary-daily__nav-btn,
    .nav-btn,
    .topbar-btn,
    .bottom-nav-btn
  ):active {
    /* vizuális "rezzenés" + erősebb lenyomás */
    animation: mygTapJiggle 220ms ease-out both !important;
  }
}

/* Reduced motion: ha valaki kéri, ne rezegjen */
@media (prefers-reduced-motion: reduce) {
  #myg-diary-app :where(button, a, [role="button"], .myg-diary-monthly__nav-btn, .myg-diary-daily__nav-btn, .nav-btn, .topbar-btn, .bottom-nav-btn):active {
    animation: none !important;
  }
}


/* --- SZÍNVÁLTOZATOK (Global Helper Classok) --- */

/* Narancs (Primary) */
.myg-btn--primary, .myg-btn-primary {
    background: var(--myg-orange) !important;
    color: #fff !important;
}
.myg-btn--primary:hover, .myg-btn-primary:hover {
    background: var(--myg-orange-hover) !important;
}

/* Szürke (Secondary / Mégse) */
.myg-btn--secondary, .myg-btn-secondary {
    background: #f1f1f1 !important;
    color: #333 !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

/* Piros (Danger / Törlés) */
.myg-btn--danger, .myg-btn-danger {
    background: #dc2626 !important;
    color: #fff !important;
}

/* --- MODAL LÁBLÉC ELRENDEZÉSEK (Global) --- */

/* Egymás melletti gombok */
.myg-modal-footer {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
}
.myg-modal-footer .myg-btn {
    flex: 1 !important; /* Egyenlő szélesség */
    width: 100% !important;
}

/* Egymás alatti gombok (Stacked) - pl. Összevonás */
.myg-modal-footer--stacked {
    flex-direction: column !important;
    gap: 10px !important;
}
.myg-modal-footer--stacked .myg-btn {
    width: 100% !important;
    white-space: normal !important; /* Hosszú szöveg tördelése */
    height: auto !important;
    padding: 8px 12px !important;
}

/* --- INPUTOK --- */
input[type="text"], input[type="email"], select, textarea {
    border-radius: var(--myg-radius-ui) !important;
    height: 44px !important; /* Inputok is legyenek szinkronban a gombokkal */
    border: 1px solid #ddd !important;
}
input[type="text"]:focus, select:focus, textarea:focus {
    border-color: var(--myg-orange) !important;
    outline: none !important;
    box-shadow: none !important; /* ne villanjon kék */
}


/* =========================================================
   4. FŐOLDAL KÁRTYÁK
   ========================================================= */
body.home .kb-img {
  background-color: rgba(253,249,242,.95) !important;
  padding: 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
  transition: transform .25s ease !important;
}

body.home .kb-img:hover {
  transform: scale(1.02);
}

/* Admin bar fix */
.admin-bar .edit-link {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   myGasztro – Bemutató videó CTA + Modal (4:5, no-crop) – FIX v2
   Javítva:
   - CTA NE legyen gomb (globál button design felülírása)
   - Alsó hézag kicsit kisebb (finoman)
   - Close (X) háttér átlátszó
   - Modal stabilan kattintható (z-index/pointer)
   ========================================================= */

/* CTA sáv (háttér: tapéta, nincs külön doboz-háttér) */
.myg-video-cta {
  width: 100%;
  display: flex;
  justify-content: center;

  /* FINOMÍTÁS: kisebb alsó hézag (korábban 28px volt) */
  margin: 14px 0 0px;

  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  animation: mygVideoCtaIn 0.55s ease forwards;
  animation-delay: 1.8s; /* a bekúszó címsor után */
}

/* kattintható szöveg – GOMB STÍLUS KIKAPCS (globál button szabályok ellen) */
.myg-video-trigger {
  all: unset !important;         /* kulcs: lekap minden button-lookot */
  display: inline-block !important;
  cursor: pointer !important;

  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;   /* hangsúlyosabb */
  letter-spacing: 0.2px !important;

  /* biztosítás: semmi gomb-effekt */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: unset !important;
  transform: none !important;
  filter: none !important;
}

.myg-video-trigger:hover,
.myg-video-trigger:active {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* szöveg “narancs fény” pásztázás (a betűkön fut) – EZ A TE JÓ VERZIÓD */
.myg-video-text {
  display: inline-block;
  color: #333333; /* fallback */
  background-image: linear-gradient(
    90deg,
    #333333 0%,
    #333333 38%,
    #ff8630 50%,
    #333333 62%,
    #333333 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: mygTextSweep 2.4s ease-in-out infinite;
}

/* hover/active: kulturált, de nem tolakodó */
.myg-video-trigger:hover .myg-video-text {
  animation-duration: 2.0s;
}
.myg-video-trigger:active {
  transform: none !important;
}

/* belépő anim */
@keyframes mygVideoCtaIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* balról jobbra, majd vissza – folyamatos */
@keyframes mygTextSweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ----------------------------
   MODAL / OVERLAY
   ---------------------------- */
.myg-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);

  /* FIX: biztos kattinthatóság */
  pointer-events: none;
}

.myg-video-overlay.is-open {
  display: flex;
  pointer-events: auto;
}

/* 4:5 arányú “ablak” – gépen NE vágjon le semmit */
.myg-video-dialog {
  position: relative;
  width: min(420px, 92vw);
  aspect-ratio: 4 / 5;
  max-height: 82vh;
  max-width: calc(82vh * 4 / 5);

  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

/* videó kitöltés crop nélkül */
.myg-video-dialog video {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;      /* nincs levágás */
  background: transparent;  /* ne adjon fekete sávot “háttérből” */
}

/* záró gomb – ÁTLÁTSZÓ háttér */
.myg-video-close {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 42px !important;
  height: 42px !important;

  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 12px !important;

  cursor: pointer !important;
  font-size: 22px !important;
  line-height: 42px !important;

  background: rgba(0,0,0,0.28) !important;  /* átlátszó */
  color: #ffffff !important;

  box-shadow: none !important;              /* ne legyen “gombos” */
  transform: none !important;
  filter: none !important;

  z-index: 2;
}

.myg-video-close:hover {
  background: rgba(0,0,0,0.38) !important;
}
.myg-video-close:active {
  transform: none !important;
}

/* mobilon – biztosítás */
@media (max-width: 767px) {
  .myg-video-trigger { font-size: 16px !important; }
  .myg-video-cta { margin: 12px 0 6px; }

  .myg-video-dialog {
    width: min(360px, 92vw);
    max-height: 78vh;
    max-width: calc(78vh * 4 / 5);
    border-radius: 16px;
  }
}

/* =========================================================
   myGasztro – Video modal desktop méret finom növelés
   CSAK desktop, semmi más nem változik
   ========================================================= */

@media (min-width: 1024px) {
  .myg-video-dialog {
    width: min(520px, 90vw);        /* + ~20–25% */
    max-height: 88vh;              /* kicsit magasabb */
    max-width: calc(88vh * 4 / 5); /* arány marad */
  }
}

/* nagyobb monitorokon még egy lehelet */
@media (min-width: 1440px) {
  .myg-video-dialog {
    width: min(600px, 80vw);
    max-height: 90vh;
    max-width: calc(90vh * 4 / 5);
  }
}

/* =========================================================
   myGasztro – Video modal TABLET finom nagyítás (álló tablet)
   Cél: érezhetően nagyobb, de nem óriás.
   ========================================================= */

@media (hover: none) and (pointer: coarse) and (min-width: 600px) and (max-width: 1200px) {
  .myg-video-dialog {
    width: min(560px, 92vw) !important;
    max-height: 86vh !important;
    max-width: calc(86vh * 4 / 5) !important; /* 4:5 arány marad */
  }

  .myg-video-dialog video {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
  }
}

/* =========================================================
   myGasztro – Video CTA megjelenés: csak lassú fade-in
   (NINCS bekúszás, nincs le/fel mozgás)
   ========================================================= */

/* Írd felül a meglévő bejövetelt */
.myg-video-cta {
  opacity: 0;
  transform: none; /* kulcs: ne mozogjon */
  animation: mygVideoCtaFade 3s ease forwards;
  animation-delay: 1.2s; /* ezt finomhangolhatod (pl. 0.8–1.6s) */
}

/* új anim: csak áttűnés */
@keyframes mygVideoCtaFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ha valaki "reduced motion"-t kér, ne animáljunk */
@media (prefers-reduced-motion: reduce) {
  .myg-video-cta {
    animation: none;
    opacity: 1;
  }
}