/* Enhancements on top of the base design: theme toggle, count-up numbers,
   site-wide mobile booking bar, micro-interactions. */

/* ---------- theme toggle ---------- */
.ml-theme{display:inline-grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:999px;border:1px solid var(--line,#efdfe5);background:transparent;color:inherit;cursor:pointer;padding:0;transition:background .25s,border-color .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.ml-theme:hover{border-color:var(--pink,#fd5c93);transform:rotate(-18deg) scale(1.06)}
.ml-theme:focus-visible{outline:2px solid var(--pink,#fd5c93);outline-offset:2px}
.ml-theme svg{width:20px;height:20px;grid-area:1/1;transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.ml-theme .moon{opacity:1}
.ml-theme .sun{opacity:0;transform:rotate(-90deg) scale(.5)}
html[data-theme=dark] .ml-theme .moon{opacity:0;transform:rotate(90deg) scale(.5)}
html[data-theme=dark] .ml-theme .sun{opacity:1;transform:none;color:#ffd27a}
html.ml-theme-anim,html.ml-theme-anim *{transition:background-color .45s ease,color .45s ease,border-color .45s ease!important}
@media(max-width:860px){.ml-theme{width:38px;height:38px;flex-basis:38px}}

/* dark theme: the few things a colour swap cannot express */
html[data-theme=dark] .bl-logo img{filter:drop-shadow(0 0 10px rgba(253,92,147,.28))}
html[data-theme=dark] .bl-logo .word{filter:brightness(0) invert(.94) drop-shadow(0 0 8px rgba(253,92,147,.35))}
html[data-theme=dark] .bl-btn--glow{box-shadow:0 8px 28px rgba(253,92,147,.42),0 0 0 1px rgba(255,255,255,.06) inset}
html[data-theme=dark] img:not(.word):not(.crest){filter:brightness(.94) contrast(1.03)}
html[data-theme=dark] ::selection{background:#fd5c93;color:#fff}
/* small ink marks that would sink into the dark page */
html[data-theme=dark] .bl-burger i{background:#f6eaf0}
html[data-theme=dark] .st-q input:checked+span,
html[data-theme=dark] .bk-prog li.ok:before,
html[data-theme=dark] .bk-step.done h2 .n{background:#d6177a;border-color:#d6177a;color:#fff}
html[data-theme=dark] .bl-ccard,html[data-theme=dark] .bl-ocard,html[data-theme=dark] .st-cpanel,
html[data-theme=dark] .bk-sum,html[data-theme=dark] .st-money,html[data-theme=dark] .st-rec{box-shadow:0 0 0 1px rgba(255,255,255,.06)}

/* ---------- micro-interactions ---------- */
@media (prefers-reduced-motion: no-preference){
  /* cards lift and glow */
  .bl-ccard,.st-techcard,.bl-cards>a,.bl-rev,.st-quick-row{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
  .bl-ccard:hover,.st-techcard:hover,.bl-cards>a:hover,.bl-rev:hover{transform:translateY(-6px);box-shadow:0 22px 50px -18px rgba(214,23,122,.38),0 0 0 1px rgba(253,92,147,.22)}
  .bl-ccard .bl-ccard-img img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .bl-ccard:hover .bl-ccard-img img{transform:scale(1.06)}

  /* shimmer sweep on the pink buttons */
  .bl-btn--glow{position:relative;overflow:hidden;isolation:isolate}
  /* the sweep moves with transform, not left: animating left re-laid out the page on every
     frame of every pink button, all the time (scroll jank, 2026-10-28) */
  .bl-btn--glow::after{content:"";position:absolute;inset:-2px auto -2px 0;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-140%) skewX(-18deg);z-index:-1;animation:ml-shine 4.8s ease-in-out infinite;will-change:transform}
  .bl-btn--glow:hover::after{animation-duration:1.1s}
  @keyframes ml-shine{0%,62%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(290%) skewX(-18deg)}}
  .bl-btn{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
  .bl-btn:hover{transform:translateY(-2px)}
  .bl-btn:active{transform:translateY(0) scale(.97)}

  /* headings rise in word by word */
  .ml-words .ml-w{display:inline-block}
  .ml-words .ml-w,.ml-words .ml-wb{opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(4px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1),filter .7s ease;transition-delay:calc(var(--i)*70ms)}
  .ml-words.ml-in .ml-w,.ml-words.ml-in .ml-wb{opacity:1;transform:none;filter:none}

  /* date chips bounce a little */
  .st-date{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
  .st-date:not(.full):hover{transform:translateY(-3px) scale(1.03)}
}

/* ---------- count-up ---------- */
.ml-count{font-variant-numeric:tabular-nums}

/* ---------- mobile booking bar (pages without a course-specific one) ---------- */
.st-mbar .ml-next{display:block;font-size:11px;opacity:.75;white-space:nowrap}
.ml-mbar-gen small{display:block}
@media (prefers-reduced-motion: no-preference){
  .st-mbar{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s}
  .st-mbar.show .bl-btn--glow{animation:ml-pulse 2.6s ease-in-out 1s 2}
  @keyframes ml-pulse{0%,100%{box-shadow:0 0 0 0 rgba(253,92,147,.55)}50%{box-shadow:0 0 0 12px rgba(253,92,147,0)}}
}

/* ---------- mobile top bar ticker + header with wordmark ---------- */
.ml-ticker{display:none}
@media(max-width:860px){
  .bl-topbar>.bl-wrap{display:none}
  .ml-ticker{display:block!important;overflow:hidden;white-space:nowrap;min-height:34px;line-height:34px;font-size:12.5px;font-weight:500;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .ml-track{display:inline-flex;animation:ml-tick 34s linear infinite}
  .ml-ticker:active .ml-track{animation-play-state:paused}
  .ml-seq{display:inline-flex;align-items:center;gap:14px;padding-right:14px}
  .ml-seq a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
  .ml-seq i{font-style:normal;opacity:.7;font-size:10px}
  @keyframes ml-tick{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion: reduce){.ml-track{animation:none}.ml-ticker{overflow-x:auto}}

  .st-header .bl-logo .word{display:block;height:22px}
  .st-header .bl-logo .crest{height:34px}
  .st-header .bl-logo{gap:6px;margin-right:6px}
  .st-header .bl-header-cta{padding:0 13px;font-size:13px;min-height:40px}
  .st-header .bl-header-in{gap:8px}
}
@media(max-width:430px){
  .st-header .bl-logo .crest{display:none}
  .st-header .bl-logo .word{height:27px}
  .st-header .bl-header-cta{padding:0 12px;font-size:12.5px}
  .ml-theme{width:36px;height:36px;flex-basis:36px}
  .bl-burger{width:40px;padding:9px}
}
/* the call bubble steps aside while the booking bar (which has its own call button) is up */
.bl-fab{transition:opacity .3s,transform .3s}
html.ml-mbar-on .bl-fab{opacity:0;transform:scale(.6);pointer-events:none}

.ml-mbar-gen b{white-space:nowrap;font-size:15px}

/* ---------- hero: slow Ken Burns zoom + parallax ---------- */
.bl-hero,.st-hub,.st-chero-media{overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .bl-hero picture,.st-hub picture{display:block;translate:0 var(--ml-par,0px);will-change:translate}
  .bl-hero-img,.st-hub-img{transform-origin:62% 38%;animation:ml-kb 24s ease-in-out infinite alternate;will-change:transform}
  .st-chero-media img{transform-origin:50% 45%;animation:ml-kb-card 20s ease-in-out infinite alternate}
  @keyframes ml-kb{from{transform:scale(1.04)}to{transform:scale(1.14) translate3d(-1.6%,-1%,0)}}
  @keyframes ml-kb-card{from{transform:scale(1)}to{transform:scale(1.09) translate3d(1%,-1.2%,0)}}
}

/* ---------- page transitions (same-origin navigations) ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  .st-header{view-transition-name:ml-header}
  .ml-topbar-vt{view-transition-name:ml-topbar}
  ::view-transition-old(root){animation:ml-vt-out .26s ease both}
  ::view-transition-new(root){animation:ml-vt-in .42s cubic-bezier(.22,1,.36,1) both}
  @keyframes ml-vt-out{to{opacity:0;transform:scale(.985)}}
  @keyframes ml-vt-in{from{opacity:0;transform:translateY(14px)}}
}

/* ---------- reading progress under the header ---------- */
.ml-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;z-index:1}
.ml-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--ml-p,0));background:linear-gradient(90deg,#d6177a,#ff5fa2 60%,#ffb1d0);box-shadow:0 0 10px rgba(253,92,147,.55);border-radius:0 3px 3px 0}

/* ---------- thank-you page ---------- */
.ml-ty{padding:56px 0 80px}
.ml-ty-card{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line,#efdfe5);border-radius:28px;padding:40px 28px;box-shadow:0 30px 70px -40px rgba(214,23,122,.45)}
.ml-ty-card .bl-h1 span{display:block}
.ml-ty-card .bl-lead{margin:14px auto 26px}
.ml-ty-mark{width:78px;height:78px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center}
.ml-ty-mark svg{width:36px;height:36px}
.ml-ty-mark.ok{background:linear-gradient(135deg,#d6177a,#ff5fa2);color:#fff;box-shadow:0 14px 34px -10px rgba(253,92,147,.75);animation:ml-pop .7s cubic-bezier(.34,1.56,.64,1) both}
.ml-ty-mark.wait{background:rgba(253,92,147,.12)}
.ml-ty-mark.no{background:rgba(163,36,36,.1);color:#b3123f}
.ml-ty-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(253,92,147,.25);border-top-color:#fd5c93;animation:ml-spin 1s linear infinite}
@keyframes ml-pop{from{transform:scale(.3);opacity:0}}
@keyframes ml-spin{to{transform:rotate(360deg)}}
.ml-ty-list{margin:0 0 26px;padding:6px 20px;text-align:left;border:1px solid var(--line,#efdfe5);border-radius:18px;background:var(--blush,#fff3f7)}
.ml-ty-list>div{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line,#efdfe5)}
.ml-ty-list>div:last-child{border-bottom:0}
.ml-ty-list dt{flex:0 0 118px;margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6f5f66)}
.ml-ty-list dd{flex:1;margin:0;font-weight:700}
.ml-ty-list dd small{display:block;font-weight:400;font-size:13px;color:var(--muted,#6f5f66)}
.ml-ty-list .code{font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#d6177a}
.ml-ty-btn{width:100%;max-width:380px}
.ml-ty-note{margin:18px auto 0;max-width:520px}
.ml-ty-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.ml-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}
@media(max-width:480px){.ml-ty{padding:28px 0 60px}.ml-ty-card{padding:30px 18px;border-radius:22px}.ml-ty-list>div{display:block}.ml-ty-list dt{margin-bottom:2px}}
html[data-theme=dark] .ml-ty-card{background:#1d1419;border-color:#3a2a31;box-shadow:0 30px 70px -40px rgba(253,92,147,.35)}
html[data-theme=dark] .ml-ty-list{background:#140d11;border-color:#3a2a31}
html[data-theme=dark] .ml-ty-list>div{border-color:#3a2a31}
html[data-theme=dark] .ml-ty-list dt,html[data-theme=dark] .ml-ty-list dd small{color:#c4b2ba}
html[data-theme=dark] .ml-ty-list .code{color:#ff8ab8}

/* ---------- mobile polish (audit 2026-10-27, 70% of visitors are on phones) ---------- */
@media(max-width:860px){
  /* comfortable thumb targets without changing the look: the hit area grows, the text does not */
  .bl-link{display:inline-flex;align-items:center;min-height:40px}
  .st-crumbs a{display:inline-flex;align-items:center;min-height:36px}
  .st-header .bl-logo{min-height:44px}
  [data-fan-dot]{position:relative}
  [data-fan-dot]::after{content:"";position:absolute;inset:-14px -8px}
  /* the call bubble sat on top of the hero buttons; pages with the booking bar
     already carry a call button there */
  html.ml-has-mbar .bl-fab{display:none!important}
}
/* dark theme: footer crest and the pale "soft" pills */
/* the footer logo has dark lettering; on the dark theme it shows the pink crest instead */
html[data-theme=dark] footer img[src*="logo-full"]:not(.x){content:url(../img/derived/logo-crest.webp);height:auto;max-width:150px;mix-blend-mode:normal;filter:drop-shadow(0 0 14px rgba(253,92,147,.35))}
html[data-theme=dark] .bl-btn--soft{background:rgba(253,92,147,.14);color:#ffd2e3;box-shadow:inset 0 0 0 1px rgba(253,92,147,.45)}
html[data-theme=dark] .bl-btn--soft:hover{background:rgba(253,92,147,.24)}
@media(max-width:480px){
  /* "HAJHOSSZABBÍTÁS" was wider than the text column and got clipped by the card */
  .st-techcard{grid-template-columns:112px minmax(0,1fr)}
  .st-techcard>div{padding:18px 16px;min-width:0}
  .st-techcard h3 b{font-size:clamp(15px,4.6vw,20px);overflow-wrap:anywhere}
  .bk-edit{min-height:36px;display:inline-flex;align-items:center}
}

/* ---------- A: swipeable course cards on phones ---------- */
@media(max-width:720px){
  .bl-course-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-20px;padding:6px 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .bl-course-grid::-webkit-scrollbar{display:none}
  .bl-course-grid>*{flex:0 0 86%;scroll-snap-align:center;min-width:0}
  .ml-swipe-ui{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px}
  .ml-dots{display:flex;gap:12px}
  .ml-dots button{width:12px;height:12px;padding:0;border:0;border-radius:99px;background:rgba(214,23,122,.25);transition:width .35s cubic-bezier(.22,1,.36,1),background .3s;position:relative;cursor:pointer}
  .ml-dots button::after{content:"";position:absolute;inset:-16px -6px}
  .ml-dots button[aria-current=true]{width:32px;background:linear-gradient(90deg,#d6177a,#ff5fa2)}
  .ml-swipe-hint{font-size:12px;color:var(--muted,#6f5f66);display:flex;align-items:center;gap:6px}
  .ml-swipe-hint svg{width:16px;height:16px;animation:ml-nudge 1.6s ease-in-out infinite}
  @keyframes ml-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
}
.ml-swipe-ui{display:none}
@media(max-width:720px){.ml-swipe-ui{display:flex}}
html[data-theme=dark] .ml-swipe-hint{color:#c4b2ba}

/* ---------- B: back to top ---------- */
.ml-top{position:fixed;right:16px;bottom:22px;z-index:55;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(30,20,24,.82);color:#fff;backdrop-filter:blur(8px);box-shadow:0 12px 28px -12px rgba(0,0,0,.55);
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1),bottom .35s}
.ml-top svg{width:20px;height:20px}
.ml-top.on{opacity:1;transform:none;pointer-events:auto}
html.ml-mbar-on .ml-top{bottom:92px}
html[data-theme=dark] .ml-top{background:rgba(253,92,147,.9)}

/* ---------- C: FAQ search ---------- */
.ml-faq-search{position:relative;max-width:520px;margin:22px auto 0}
.ml-faq-search input{width:100%;height:52px;border-radius:999px;border:1.5px solid var(--line,#efdfe5);background:#fff;padding:0 48px 0 50px;font:500 16px var(--sans,system-ui);color:inherit;outline:none;transition:border-color .25s,box-shadow .25s}
.ml-faq-search input:focus{border-color:#fd5c93;box-shadow:0 0 0 4px rgba(253,92,147,.15)}
.ml-faq-search>svg{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:#d6177a;pointer-events:none}
.ml-faq-search button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:22px;cursor:pointer;opacity:.6}
.ml-faq-count{margin:10px 0 0;font-size:13px;text-align:center;color:var(--muted,#6f5f66);min-height:1.4em}
.ml-faq-hit mark{background:rgba(253,92,147,.22);color:inherit;border-radius:4px;padding:0 2px}
html[data-theme=dark] .ml-faq-search input{background:#1d1419;border-color:#3a2a31}
html[data-theme=dark] .ml-faq-count{color:#c4b2ba}

/* ---------- D: sticky section tabs (pages that had none) ---------- */
.st-subnav .bl-wrap{scrollbar-width:none}
.st-subnav .bl-wrap::-webkit-scrollbar{display:none}
html[data-theme=dark] .st-subnav{background:rgba(20,13,17,.94);border-color:#3a2a31}

/* ---------- F: gallery viewer full screen on phones ---------- */
.st-lb img{transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.st-lb img.ml-lb-in-l{animation:ml-lb-l .38s cubic-bezier(.22,1,.36,1)}
.st-lb img.ml-lb-in-r{animation:ml-lb-r .38s cubic-bezier(.22,1,.36,1)}
@keyframes ml-lb-l{from{opacity:0;transform:translateX(-40px)}}
@keyframes ml-lb-r{from{opacity:0;transform:translateX(40px)}}
@media(max-width:720px){
  .st-lb{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;display:flex;align-items:center;justify-content:center}
  .st-lb[open]{display:flex}
  .st-lb::backdrop{background:#0d080b;backdrop-filter:none}
  .st-lb figure{width:100%}
  .st-lb img{max-width:100vw;max-height:80dvh;border-radius:0}
  .st-lb .p,.st-lb .n{top:auto!important;bottom:calc(18px + env(safe-area-inset-bottom));transform:none}
  .st-lb .p{left:calc(50% - 64px)}
  .st-lb .n{right:calc(50% - 64px);left:auto}
  .st-lb .x{top:calc(14px + env(safe-area-inset-top))}
  .st-lb figcaption{position:fixed;left:0;right:0;top:calc(26px + env(safe-area-inset-top));font-size:13px;letter-spacing:.04em;opacity:.85}
}

/* fixes after the A-F test (2026-10-27) */
.st-mbar>div{min-width:0;flex:1 1 auto}
.st-mbar .bl-btn{flex:none;white-space:nowrap}
@media(max-width:430px){
  .st-mbar{gap:8px;padding-left:16px}
  .st-mbar .bl-btn{padding:0 15px;font-size:13.5px}
  .st-mbar .ml-next{font-size:10px;white-space:normal;line-height:1.25;margin-top:2px}
  .st-mbar b{font-size:15.5px}
}
@media(max-width:720px){.bl-course-grid .bl-btn{padding-inline:18px;font-size:15px}}
.st-lb,.st-lb *{font-family:Poppins,system-ui,-apple-system,sans-serif}
/* off-screen decorations stand still (ml-enhance.js, 2026-10-28) */
.ml-off,.ml-off::after,.ml-off::before{animation-play-state:paused!important}

/* review dots: bigger, with a finger-sized hit area (Erik 2026-10-28) */
.tm-dots{gap:12px}
.tm-dots button{width:12px;height:12px;position:relative}
.tm-dots button::after{content:"";position:absolute;inset:-16px -6px}
.tm-dots button[aria-selected=true]{width:32px}

/* WCAG 2.1 AA text contrast (axe audit 2026-10-29, Erik). The accent text colour is a
   shade darker on light surfaces and a lighter pink on dark ones; white labels sit on
   the deep magenta instead of the bright pink; the hot pink stays for glows and fills. */
html .bl{--mag:#c0126c}
html[data-theme=dark] .bl{--mag:#ff7ab0}
.bl .bl-h3c span,.bl .st-techcard h3 em,.bl .bl-hero-sub i{color:var(--mag)}
.bl .st-subnav .go,.bl .st-subnav .go:hover,.bl .bl-ccard-img .tag,.bl .st-chero-media .tag,.bl .st-quick-row .tag,
.bl [data-col-btn][aria-pressed="true"]{background:#c0126c;color:#fff}
.bl .bl-btn--soft{background:#a8466e;color:#fff}
html[data-theme=dark] .bl .st-date.few em{color:#ff7ab0}

/* review keyword filter (tanuloink-mondtak): non-matching reviews stay fully readable
   instead of fading to 38%; the matches get a pink ring (WCAG AA, Erik 2026-10-29) */
.bl .tm-list .bl-rev.dim{opacity:1;transform:none}
.bl .tm-list:has(.bl-rev.dim) .bl-rev:not(.dim){box-shadow:0 0 0 2px var(--mag),0 14px 30px -18px rgba(192,18,108,.45)}