/*
Theme Name:   Plasztika Child
Theme URI:    https://plasztika.com
Description:  Plasztika.com v7.1 — Mobilmenü fullscreen overlay fix (iOS/Android) — PHP header (nem Elementor), nincs dupla hamburger, teljesen reszponzív. Elementor Pro az oldalak tartalmához.
Author:       Plasztika.com
Template:     hello-elementor
Version:      7.1.0
Text Domain:  plasztika
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --pl-gold:      #B8965A;
  --pl-gold-l:    #D4AF72;
  --pl-gold-pale: #F0E6D0;
  --pl-dark:      #1A1A18;
  --pl-charcoal:  #2C2C2A;
  --pl-cream:     #F5F0E8;
  --pl-beige:     #EDE5D8;
  --pl-beige-m:   #D4C4AD;
  --pl-gray:      #6B6B68;
  --pl-gray-l:    #A8A8A5;
  --pl-white:     #FAFAF8;
  --pl-font-d:    'Cormorant Garamond', Georgia, serif;
  --pl-font-b:    'Jost', system-ui, sans-serif;
  --pl-ease:      0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pl-max:       1200px;

  /* Header magassága — CSS változó, hogy az oldalak is használhassák */
  --pl-header-h:  72px;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--pl-font-b);
  font-weight: 300;
  color: var(--pl-charcoal);
  background: var(--pl-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pl-gold); text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   HELLO ELEMENTOR SZÜLŐTÉMA ELREJTÉSE
   A functions.php-ban 'hello_elementor_header_footer' => false,
   de CSS-ből is megerősítjük hogy semmi ne szivárogjék át.
   ============================================================ */
.hello-elementor .site-header,
.hello-elementor .site-footer,
.hello-elementor header.site-header { display: none !important; }

/* Elementor Theme Builder header — KIKAPCSOLVA
   Ha valaki véletlenül aktiválna TB headert, ne jelenjen meg */
.elementor-location-header { display: none !important; }

/* ============================================================
   PHP HEADER — pl-header
   Reszponzív, nincs fix szélesség, automatikusan igazodik.
   ============================================================ */
.pl-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--pl-header-h);
  background: rgba(250, 250, 248, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(184, 150, 90, 0.15);
  transition: box-shadow var(--pl-ease);
}

.pl-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(44, 44, 42, 0.10);
}

/* Belső konténer: rugalmas, nem fix szélesség */
.pl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--pl-header-h);
  max-width: var(--pl-max);
  margin: 0 auto;
  /* Fluid padding: 16px mobilon, 40px desktopon */
  padding: 0 clamp(16px, 3vw, 40px);
}

/* ── LOGÓ ────────────────────────────────────────────────── */
.pl-header__logo {
  font-family: var(--pl-font-d);
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--pl-charcoal);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.pl-header__logo:hover { color: var(--pl-gold); }
.pl-logo-dot { color: var(--pl-gold-l); }

/* Egyéni logókép */
.pl-header__logo img,
.pl-header__logo .custom-logo {
  max-height: 44px;
  width: auto;
  display: block;
}

/* ── DESKTOP NAVIGÁCIÓ ───────────────────────────────────── */
.pl-header__nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.pl-header__nav ul {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.pl-header__nav ul li a {
  display: block;
  padding: 8px clamp(8px, 1.2vw, 16px);
  font-family: var(--pl-font-b);
  font-size: clamp(0.68rem, 1vw, 0.76rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pl-gray);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color var(--pl-ease);
}

.pl-header__nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: clamp(8px, 1.2vw, 16px);
  right: clamp(8px, 1.2vw, 16px);
  height: 1px;
  background: var(--pl-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pl-ease);
}

.pl-header__nav ul li a:hover,
.pl-header__nav ul li.current-menu-item > a {
  color: var(--pl-gold);
}
.pl-header__nav ul li a:hover::after,
.pl-header__nav ul li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* ── HAMBURGER GOMB ──────────────────────────────────────── */
/* Alapból rejtett — csak mobilon/tableten látszik */
.pl-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  /* min 44×44px — iOS/Android touch target */
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.pl-toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--pl-charcoal);
  border-radius: 0;
  transition: transform 0.28s ease, opacity 0.28s ease, background 0.28s ease;
  transform-origin: center;
}

/* Animált X nyitva állapotban */
.pl-header__toggle.is-open .pl-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.pl-header__toggle.is-open .pl-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.pl-header__toggle.is-open .pl-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.pl-header__toggle:hover .pl-toggle-bar { background: var(--pl-gold); }

/* ============================================================
   RESZPONZÍV — TABLET ÉS MOBIL
   Breakpoint: 1024px (Elementor alapértelmezett tablet mérete)
   ============================================================ */
@media (max-width: 1024px) {

  /* ── Hamburger megjelenik ───────────────────────────────── */
  .pl-header__toggle {
    display: flex;
  }

  /* ── Desktop nav alapból rejtett ───────────────────────── */
  .pl-header__nav {
    display: none;
  }

  /* ── TELJES KÉPERNYŐS OVERLAY nyitva ─────────────────────
     FIX #1: position:fixed + inset:0 → valóban teljes képernyő
     FIX #2: height:100% helyett 100dvh (iPhone Safari safe area)
     FIX #3: top:0 — a header FÖLÉ kerül (z-index rendezi)
     FIX #4: overflow-y:scroll + -webkit-overflow-scrolling
     FIX #5: opacity tranzíció a villanás ellen
  ─────────────────────────────────────────────────────────── */
  .pl-header__nav.is-open {
    display: flex;
    position: fixed;
    /* inset: 0 = top/right/bottom/left: 0 — valóban teljes képernyő */
    inset: 0;
    /* z-index a header alá, de az oldaltartalom fölé */
    z-index: 9997;
    /* Teljes magasság — dvh a dinamikus viewport height (iOS Safari fix) */
    height: 100dvh;
    height: 100vh; /* fallback nem dvh-t támogató böngészőkre */
    /* Szín: teljesen átlátszatlan fehér — a háttér NEM látszik át */
    background: var(--pl-white);
    background: #FAFAF8;
    /* Flex: oszlop, felülről indul, scrollozható */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Görgetés — iOS-on is */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Padding: felül a header magassága, hogy ne takarja */
    padding-top: calc(var(--pl-header-h) + 16px);
    padding-bottom: env(safe-area-inset-bottom, 32px);
    padding-left: clamp(20px, 5vw, 48px);
    padding-right: clamp(20px, 5vw, 48px);
  }

  /* ── Header a menü FÖLÖTT marad ───────────────────────── */
  /* A header z-index: 9999 > nav z-index: 9997 */
  /* Ezért a hamburger gomb mindig látható és kattintható */

  /* ── Menülista ──────────────────────────────────────────── */
  .pl-header__nav.is-open ul {
    flex-direction: column;
    align-items: stretch;  /* teljes szélesség */
    width: 100%;
    max-width: 480px;
    gap: 0;
    padding: 0;
    margin: 0 auto;
  }

  .pl-header__nav.is-open ul li {
    width: 100%;
    border-bottom: 1px solid var(--pl-beige);
  }
  .pl-header__nav.is-open ul li:first-child {
    border-top: 1px solid var(--pl-beige);
  }

  /* ── Menü linkek ────────────────────────────────────────── */
  .pl-header__nav.is-open ul li a {
    display: block;
    width: 100%;
    /* Nagy, jól olvasható betűk */
    font-family: var(--pl-font-d);
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    font-weight: 300;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--pl-charcoal);
    /* Touch-barát padding: min 48px magasság */
    padding: 18px 0;
    text-align: left;
    text-decoration: none;
    /* Touch kiemelés letiltása */
    -webkit-tap-highlight-color: transparent;
    /* Nincs underline animáció mobilon */
  }
  .pl-header__nav.is-open ul li a::after { display: none !important; }

  .pl-header__nav.is-open ul li a:hover,
  .pl-header__nav.is-open ul li.current-menu-item > a {
    color: var(--pl-gold);
  }

  /* ── Body scroll blokkolás ──────────────────────────────── */
  /* FIX: position:fixed a legmegbízhatóbb iOS-en */
  body.pl-menu-open {
    overflow: hidden;
    /* iOS Safari: ha position:fixed nincs, a body tud scrollozni */
    position: fixed;
    width: 100%;
    /* A jelenlegi scroll pozíciót JS tárolja és visszaállítja */
  }
}

/* Kis mobil (320–480px) */
@media (max-width: 480px) {
  :root { --pl-header-h: 64px; }

  .pl-header__logo {
    font-size: 1.1rem;
  }
}

/* ============================================================
   OLDALTARTALOM ELTOLÁS A FIXED HEADER MIATT
   ============================================================ */
.page-content,
#page-content {
  padding-top: var(--pl-header-h);
}

/* Ha admin bar is van (bejelentkezve) */
.admin-bar .pl-header {
  top: 32px;
}
.admin-bar .pl-header__nav.is-open {
  top: calc(var(--pl-header-h) + 32px);
}
@media (max-width: 782px) {
  .admin-bar .pl-header { top: 46px; }
  .admin-bar .pl-header__nav.is-open { top: calc(var(--pl-header-h) + 46px); }
}

/* ============================================================
   ELEMENTOR RESZPONZÍV OVERRIDE
   ============================================================ */
.elementor-section,
.elementor-container { overflow-x: hidden; }

/* Tablet nézet */
@media (max-width: 1024px) {
  .elementor-column { width: 100% !important; }
  .elementor-inner-section .elementor-column { width: 50% !important; }
}

/* Mobil nézet */
@media (max-width: 767px) {
  body, html { overflow-x: hidden !important; }

  .elementor-section,
  .elementor-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .elementor-column,
  .elementor-inner-section .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .elementor-section > .elementor-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Gombok 100% szélesség mobilon */
  .elementor-widget-button { width: 100% !important; }
  .elementor-button { width: 100% !important; text-align: center !important; }
}

/* ============================================================
   ELEMENTOR WIDGET STÍLUSOK
   ============================================================ */

/* Heading widget */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--pl-font-d) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
}
.elementor-widget-heading .elementor-heading-title em {
  font-style: italic;
  color: var(--pl-gold);
}

/* Text editor widget */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--pl-font-b);
  font-weight: 300;
  line-height: 1.85;
}
.elementor-widget-text-editor strong { font-weight: 500; color: var(--pl-charcoal); }

/* Button widget */
.elementor-button {
  font-family: var(--pl-font-b) !important;
  font-weight: 400 !important;
  font-size: clamp(0.65rem, 1.5vw, 0.72rem) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  min-height: 48px !important;
  border-radius: 0 !important;
  transition: all var(--pl-ease) !important;
  -webkit-tap-highlight-color: transparent;
}

/* Accordion widget */
.elementor-accordion .elementor-tab-title {
  font-family: var(--pl-font-d) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--pl-charcoal) !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid rgba(184, 150, 90, 0.2) !important;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon { color: var(--pl-gold) !important; }
.elementor-accordion .elementor-tab-content {
  font-family: var(--pl-font-b) !important;
  font-size: 0.9rem !important;
  color: var(--pl-gray) !important;
  line-height: 1.9 !important;
}

/* Image widget lazy load */
.elementor-widget-image img { loading: lazy; }

/* ============================================================
   PRÉMIUM ÁRLISTA — Bézs/arany stílus
   Desktop: táblázat. Mobil (max 600px): card nézet.
   ============================================================ */
.pl-price-table-desktop { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pl-price-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pl-font-b);
  background: var(--pl-white);
}

.pl-price-table .pl-cat-row td {
  background: var(--pl-charcoal);
  color: var(--pl-gold-l);
  font-family: var(--pl-font-b);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 9px 22px;
}

.pl-price-table .pl-row {
  border-bottom: 1px solid var(--pl-beige);
  transition: background 0.2s ease;
}
.pl-price-table .pl-row:hover { background: var(--pl-cream); }
.pl-price-table .pl-row.pl-hot { background: var(--pl-gold-pale); }
.pl-price-table .pl-row.pl-hot:hover { background: #e8d8b8; }

.pl-price-table .pl-name {
  padding: 15px 22px;
  font-family: var(--pl-font-b);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--pl-charcoal);
  line-height: 1.5;
}

.pl-price-table .pl-price-cell {
  padding: 15px 22px;
  text-align: right;
  font-family: var(--pl-font-d);
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--pl-gold);
  white-space: nowrap;
  vertical-align: middle;
}

.pl-alap {
  display: block;
  font-family: var(--pl-font-b);
  font-size: 0.72rem;
  color: var(--pl-gray-l);
  text-decoration: line-through;
  line-height: 1.3;
  margin-top: 2px;
}

.pl-akc {
  display: inline-block;
  font-family: var(--pl-font-b);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--pl-gold);
  color: var(--pl-white);
  margin-left: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Mobil card nézet */
.pl-price-cards { display: none; }

@media (max-width: 600px) {
  .pl-price-table-desktop { display: none !important; }
  .pl-price-cards { display: flex !important; flex-direction: column; gap: 4px; }
}

.pl-price-cat-label {
  background: var(--pl-charcoal);
  color: var(--pl-gold-l);
  font-family: var(--pl-font-b);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 16px;
  margin: 10px 0 3px;
}

.pl-price-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--pl-white);
  border-left: 3px solid var(--pl-beige-m);
  border-bottom: 1px solid var(--pl-beige);
}
.pl-price-card.pl-hot {
  background: var(--pl-gold-pale);
  border-left-color: var(--pl-gold);
}

.pl-card-name {
  font-family: var(--pl-font-b);
  font-size: 0.87rem;
  font-weight: 300;
  color: var(--pl-charcoal);
  flex: 1;
  line-height: 1.4;
}

.pl-card-price {
  font-family: var(--pl-font-d);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--pl-gold);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

/* Tablet: kisebb padding */
@media (max-width: 1024px) and (min-width: 601px) {
  .pl-price-table .pl-name,
  .pl-price-table .pl-price-cell { padding: 13px 16px; }
}

/* ============================================================
   REVEAL ANIMÁCIÓ
   ============================================================ */
.pl-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s ease; }
.pl-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pl-reveal, .elementor-button, * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .pl-header, .pl-header__toggle { display: none !important; }
  .page-content, #page-content { padding-top: 0 !important; }
}