/* UX pass 2026-10-16: one button system, calmer hero, compact TOC, collapsible sections, smarter bonus bar */
:root{--ux-primary:#1465c0;--ux-primary-h:#1d78dd;--ux-line:#2c3a5c;--ux-txt:#d8dde9;--ux-gap:48px}

/* ---------- buttons: one primary colour, one secondary style, one size ---------- */
.btn,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 26px;border-radius:10px;font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease;transform:none!important}
.btn.accent,.btn.secondary,.btn.large,.wp-block-button__link,.bonus-bar .btn,.cta-box .btn{background:var(--ux-primary);color:#fff;border:2px solid var(--ux-primary)}
.btn.accent:hover,.btn.secondary:hover,.btn.large:hover,.wp-block-button__link:hover,.bonus-bar .btn:hover,.cta-box .btn:hover{background:var(--ux-primary-h);border-color:var(--ux-primary-h);color:#fff}
.btn.large{min-height:52px;padding:14px 30px;font-size:17px}
.btn.outline,.ux-secondary{background:transparent!important;color:#fff!important;border:2px solid var(--ux-line)!important}
.btn.outline:hover,.ux-secondary:hover{border-color:#5b7bb5!important;background:rgba(20,101,192,.12)!important}
/* button on the blue-green gradient box: white so it stays readable */
.cta-gradient .btn,.cta-gradient .wp-block-button__link{background:#fff;color:#0b2a55;border:2px solid #fff}
.cta-gradient .btn:hover,.cta-gradient .wp-block-button__link:hover{background:#e8f0ff;color:#0b2a55}
.wp-block-buttons{margin:24px 0;gap:12px;flex-wrap:wrap}
/* header: Log In = quiet, Registration = the only filled button */
.header-buttons .btn{min-height:40px;padding:8px 18px;font-size:14px}
/* active nav item no longer a green pill */
.main-nav a.active,.main-nav a[aria-current="page"]{background:rgba(20,101,192,.18)!important;color:#fff!important;border-radius:8px}

/* ---------- hero: text first, smaller mock-up ---------- */
.welcome-section{grid-template-columns:1.35fr .65fr;padding:36px 40px;gap:28px;margin-bottom:24px}
.welcome-section .description p{font-size:17px;margin:0 0 20px}
.welcome-section .image img,.welcome-section .hero-img-wrap,.welcome-section .hero-image{max-width:340px!important;width:100%}
@media (max-width:900px){
  .welcome-section{grid-template-columns:1fr;padding:24px 20px}
  .welcome-section .image{display:none}
  .welcome-section h1{font-size:26px}
  .welcome-section .description p{font-size:16px}
  .welcome-section .btn.large{width:100%}
}
.ux-intro{margin:0 0 8px;color:var(--ux-txt)}

/* ---------- table of contents: collapsed by default, compact ---------- */
.lwptoc{padding:14px 20px;margin:0 0 24px}
.lwptoc_header{display:flex;align-items:center;gap:12px}
.lwptoc_title{font-size:16px}
.lwptoc_toggle_label{border:1px solid var(--ux-line)!important;border-radius:999px;padding:5px 14px!important;text-decoration:none!important;color:#fff!important;font-size:13px!important}
.lwptoc_items{grid-template-columns:repeat(3,1fr);gap:2px 20px;margin-top:12px}
.lwptoc_items li{padding:2px 0}
.lwptoc_items a{font-size:13.5px}
@media (max-width:900px){.lwptoc_items{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lwptoc_items{grid-template-columns:1fr}}

/* ---------- vertical rhythm ---------- */
article.content>h2,main>h2,.content h2{margin:var(--ux-gap) 0 14px}
article.content>h2:first-child{margin-top:8px}
.content h3{margin:28px 0 10px}
.content p{margin:0 0 14px}
.content ul,.content ol{margin:0 0 16px}
.content figure,.content-image,.cta-gradient,.cta-box,.content table,.content .table-wrap{margin-top:24px;margin-bottom:24px}
@media (max-width:600px){:root{--ux-gap:36px}}

/* ---------- collapsible sections ---------- */
.sec-more{display:inline-flex;align-items:center;gap:6px;margin:2px 0 6px;background:none;border:1px solid var(--ux-line);border-radius:999px;color:#9cc3ff;font:600 14px inherit;padding:7px 16px;cursor:pointer}
.sec-more:hover{border-color:#5b7bb5;color:#fff}
.sec-more .ux-chev{transition:transform .2s}
.sec-more[aria-expanded="true"] .ux-chev{transform:rotate(180deg)}
html:not(.ux-js) .sec-more{display:none}
html:not(.ux-js) .sec-rest[hidden]{display:block!important;content-visibility:visible}
html:not(.ux-js) #toc-list{display:grid!important}

/* ---------- language switcher: visible, tappable ---------- */
.lang-switcher{font-size:14px;gap:4px;border:1px solid var(--ux-line);border-radius:999px;padding:3px}
.lang-switcher a{padding:6px 12px;border-radius:999px;color:#cfd5e3}
.lang-switcher a.active{background:var(--ux-primary);color:#fff}
.lang-switcher .sep{display:none}
@media (max-width:600px){.lang-switcher{font-size:14px}.lang-switcher a{padding:7px 11px}}

/* ---------- bonus bar: hidden until the hero has scrolled away; never over content ---------- */
.bonus-bar{transform:translateY(110%);transition:transform .25s ease;padding:10px 16px}
.bonus-bar.ux-show{transform:none}
.bonus-bar__close{width:44px;height:44px;flex:0 0 44px;font-size:26px!important;border-radius:50%;display:flex;align-items:center;justify-content:center}
.bonus-bar__close:hover{background:rgba(255,255,255,.12)}
body.ux-bar-on{padding-bottom:76px}
@media (max-width:600px){
  .bonus-bar{gap:8px}
  .bonus-bar__text{font-size:13px;line-height:1.3}
  .bonus-bar__text strong{font-size:14px}
  .bonus-bar .btn{min-height:40px;padding:8px 14px;font-size:14px;white-space:nowrap}
  body.ux-bar-on{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){.bonus-bar{transition:none}}