/* WordPress-specific overrides. site.css / pages.css stay identical to the static template — all tweaks go here. */

/* Admin bar: nav is position:fixed;top:0 */
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* Placeholder for pages without content yet */
.edu-todo{padding:60px 0 110px}
.edu-todo h1{font-size:clamp(34px,5vw,64px);max-width:20ch;margin:18px 0 16px}
.edu-todo .note{margin-top:22px;padding:14px 18px;border:2px dashed var(--line);border-radius:16px;color:var(--mute);font-size:14px;max-width:62ch}

/* Real appointment form submission (assets/js/forms.js) */
/* Multi-line field (kind "textarea" in edu/form): same look as the inputs, taller, resizable down/up only */
.fm textarea{display:block;width:100%;min-height:110px;resize:vertical;font:15px var(--b);padding:13px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
.fm textarea:focus{outline:0;border-color:var(--ink)}
.fm .is-invalid input,.fm .is-invalid select,.fm .is-invalid textarea{border-color:var(--deep)}
.fm .field-err{display:block;margin-top:6px;font-size:13px;color:var(--deep)}
.fm .form-err{grid-column:1/-1;font-size:14px;color:var(--deep);margin:0}
.fm button[disabled]{opacity:.6;cursor:progress}
/* reCAPTCHA: the floating badge is hidden; the notice under the submit button (.fm-note) replaces it, as Google allows. */
.grecaptcha-badge{visibility:hidden}
.fm .fm-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--mute)}
.fm .fm-note a{color:inherit;text-decoration:underline}
.fm.sent .fm-note{display:none}

/* Home hero: site.css gives .board transform-style:preserve-3d. While site.js tilts the board with the mouse,
   the browser stacks the polaroids by 3D depth instead of z-index, so the hovered photo (z-index:9) gets cut
   by the stamp or neighbors. The photos have no 3D transforms of their own, so "flat" keeps the tilt effect. */
.board{transform-style:flat}

/* Client-side pagination (assets/js/pager.js) — styled like the .chips filter row */
.pg-off{display:none!important}
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.pager[hidden]{display:none}
.pager button{font:700 14px/1 var(--b);min-width:44px;padding:11px 14px;border-radius:99px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:.2s}
.pager button:hover:not([disabled]){transform:translateY(-2px)}
.pager button.on{background:var(--lime);border-color:var(--lime)}
.pager button[disabled]{opacity:.35;cursor:default}
.pager .gap{align-self:center;min-width:16px;text-align:center;font:700 14px/1 var(--b)}
@media(max-width:600px){.pager{gap:4px}.pager button{min-width:34px;padding:9px 6px}.pager .gap{min-width:12px}}
/* on dark sections (.on-ink), like .chips */
.on-ink .pager button{color:#fff;border-color:#fff}
.on-ink .pager button.on{color:var(--ink);border-color:var(--lime)}
.loadmore[hidden]{display:none}

/* Mega menu with two or more featured cards: stack them in the last column. The box fits two cards
   (the menu grows to fit); from the third card on it scrolls. */
.mega.mega-1{width:auto;min-width:260px;grid-template-columns:1fr}
.mega .solo{display:grid;align-content:start}
.mega .feats{align-self:start;min-width:0}
.mega .feats>div{display:flex;flex-direction:column;gap:12px;max-height:440px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
.mega .feats .feat,.nav .mega .feats .feat{flex:none;align-self:stretch}
.nav.open .mega .feats{display:none}
.mega .feat .ph{height:170px} /* taller than the 110px design frame so portrait photos show head and shoulders, not just a face */
.mega .feat .ph img{object-position:center 12%}

/* Heading highlight: custom color via <mark style="--hl:#…">, lime by default as designed.
   Only background-image is overridden so the .hero mark draw-in animation (background-size) still works. */
mark{background-image:linear-gradient(transparent 58%,var(--hl,var(--lime)) 58%,var(--hl,var(--lime)) 92%,transparent 92%)}

/* Article share buttons: real icons instead of FB / Zalo / Link text (inc/social.php, assets/js/share.js) */
.share a{position:relative;color:var(--ink)}
.share a svg{width:16px;height:16px;fill:currentColor}
.share{flex-wrap:wrap}
.share a.s-zalo svg{width:24px;height:24px}
.share a svg.ico-line{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.share a.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font:600 12px/1.3 var(--b);padding:6px 10px;border-radius:8px;pointer-events:none;z-index:5}
.soc a[aria-label=Zalo] svg{width:24px;height:24px} /* the Zalo wordmark needs more width in the footer */