/*
Theme Name: Varázsbillentyű
Theme URI: https://varazsbillentyu.hu
Author: Explicit Studio
Description: Varázsbillentyű – billentyűs hangszerek oktatása. Kétnyelvű (HU/EN) egyedi téma, a Figma terv alapján. Főoldal, Rólunk és Kapcsolat sablonokkal.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: varazsbillentyu
*/

html, body { margin:0; padding:0; background:#FFFFFF; overflow-x:hidden; }
* { box-sizing: border-box; }
body { font-family:'Poppins', system-ui, sans-serif; color:#164243; -webkit-font-smoothing:antialiased; }
a { color:#164243; text-decoration:none; }
a:hover { color:#F28FF7; }
img { max-width:100%; }
input, textarea, button, select { font-family: inherit; }
input::placeholder, textarea::placeholder { color:#244142; opacity:1; }

/* --- hover states (a DC style-hover attribútumok megfelelői) --- */
.vb-btn-pink:hover { background:#FCBDFF !important; color:#164243 !important; }
.vb-link-w:hover { color:#F28FF7 !important; }
.vb-field:focus { box-shadow:0 0 0 3px #A2E6E8; }

/* --- placeholder képhely (amíg nincs feltöltött kép) --- */
.vb-ph { background:rgba(36,65,66,0.06); border:1px dashed rgba(36,65,66,0.25);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:12px; letter-spacing:0.04em; color:rgba(36,65,66,0.55); }
.vb-cover { width:100%; height:100%; object-fit:cover; display:block; }

/* --- marquee --- */
@keyframes vb-marquee { from { transform: translateX(0); } to { transform: translateX(-1684px); } }
[data-marquee] { animation: vb-marquee 38s linear infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { [data-marquee] { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  [data-inner] { width:100% !important; max-width:100% !important; height:auto !important; padding-left:0 !important; padding-right:0 !important; }
  [data-mob~="hauto"] { height:auto !important; min-height:0 !important; }
  [data-mob~="hide"] { display:none !important; }
  [data-mob~="flow"] { position:static !important; left:auto !important; top:auto !important; right:auto !important; width:100% !important; max-width:100% !important; height:auto !important; }
  [data-mob~="col"] { display:flex !important; flex-direction:column !important; width:100% !important; height:auto !important; align-items:center !important; gap:32px !important; justify-content:flex-start !important; }
  [data-mob~="stack"] { display:flex !important; flex-direction:column !important; gap:20px !important; align-items:flex-start !important; width:100% !important; height:auto !important; padding-left:0 !important; }
  [data-mob~="wauto"] { width:auto !important; max-width:100% !important; height:auto !important; flex:0 1 auto !important; }
  [data-mob~="fw"] { width:100% !important; max-width:100% !important; }
  [data-mob~="full"] { width:100% !important; max-width:100% !important; height:auto !important; flex:0 0 auto !important; }
  [data-mob~="grid1"] { grid-template-columns:1fr !important; grid-template-rows:auto !important; width:100% !important; height:auto !important; }
  [data-mob~="pad"] { padding:56px 24px !important; }
  [data-mob~="pad-s"] { padding:28px 24px !important; }
  [data-mob~="pills"] > div { flex-shrink:1 !important; min-width:0 !important; max-width:100% !important; }
  [data-mob~="hdr"] { gap:16px !important; flex-wrap:wrap !important; height:auto !important; }
  [data-mob~="txt-l"] { font-size:clamp(32px,7vw,54px) !important; width:100% !important; }
  [data-mob~="txt-m"] { font-size:clamp(27px,5.4vw,40px) !important; width:100% !important; white-space:normal !important; }
  [data-mob~="qmark"] { font-size:96px !important; }
  [data-mob~="photo"] { position:static !important; width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio:4/3; max-height:46vh; flex:0 0 auto !important; }
  [data-mob~="avatar"], [data-mob~="avatar"] .vb-cover, [data-mob~="avatar"] .vb-ph { width:min(260px,62vw) !important; height:min(260px,62vw) !important; }
  [data-mob~="card"], [data-mob~="card"] .vb-cover, [data-mob~="card"] .vb-ph { width:268px !important; height:328px !important; }
  [data-mob~="logo"] { width:min(100%,320px) !important; height:auto !important; }
  [data-marquee] { animation-duration:26s; }
}
@media (max-width: 767px) {
  [data-mob~="pad"] { padding:42px 18px !important; }
  [data-mob~="pad-s"] { padding:22px 18px !important; }
  [data-mob~="col"] { gap:26px !important; }
  [data-mob~="card"], [data-mob~="card"] .vb-cover, [data-mob~="card"] .vb-ph { width:232px !important; height:284px !important; }
}

/* ---------- motion ---------- */
@keyframes vb-reveal {
  from { clip-path: inset(0 0 104% 0); transform: translateY(22px); }
  to   { clip-path: inset(-30% -30% -30% -30%); transform: none; }
}
@keyframes vb-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vb-scale {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}
@keyframes vb-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-anim] { opacity: 0; will-change: transform, opacity, clip-path; }
[data-anim].vb-in { animation-duration: 1s; animation-timing-function: cubic-bezier(.16,1,.3,1); animation-fill-mode: both; }
[data-anim="reveal"].vb-in { animation-name: vb-reveal; opacity: 1; }
[data-anim="rise"].vb-in   { animation-name: vb-rise; }
[data-anim="scale"].vb-in  { animation-name: vb-scale; animation-duration: 1.3s; }
[data-loader] { transition: transform .95s cubic-bezier(.76,0,.24,1), opacity .6s ease .35s; }
[data-loader].vb-gone { transform: translateY(-101%); opacity: 0; pointer-events: none; }
[data-loader-bar] { animation: vb-bar 1.15s cubic-bezier(.5,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; animation: none !important; }
  [data-loader] { display: none !important; }
}

/* --- süti panel --- */
@media (max-width: 767px) {
  [data-cookie] { padding:14px !important; }
  [data-cookie] > div { padding:22px 20px !important; border-radius:20px !important; gap:20px !important; }
  [data-cookie] button { flex:1 1 140px; }
}

/* --- WP alap --- */
.screen-reader-text { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.vb-prose { max-width:760px; margin:0 auto; padding:80px 24px; line-height:1.7; }
.vb-prose h1, .vb-prose h2, .vb-prose h3 { font-family:'Yanone Kaffeesatz', sans-serif; font-weight:600; line-height:1.1; }