/* TwothMatch site layer: glue between the design stylesheet (tm.css) and the PHP pages. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; }
body.tm-body { font-family: 'Axiforma', 'Outfit', system-ui, sans-serif; color: #1B1030; }
[hidden] { display: none !important; }

/* Page roots: the design clips sideways overflow; clip keeps sticky elements working. */
main.tm { overflow: visible; overflow-x: clip; }

/* Site header: the announcement bar scrolls away, the main nav stays pinned. */
.tm-site-header { position: sticky; top: calc(var(--ubar-h, 42px) * -1); z-index: 50; background: transparent; }
.tm-site-header .nav { position: relative; top: auto; }
.tm-site-header .menu[aria-expanded="true"] { background: var(--p-50); border-color: var(--p-100); }
@container (max-width:1120px) {
  .tm-site-header .mnav { max-height: calc(100vh - 64px); overflow-y: auto; }
}
.tm-site-footer { overflow: visible; }

/* Conditional template blocks: they never add a box of their own. */
.sc { display: contents; }

/* Forms */
.tm .form.is-sending button[type="submit"],
.tm form.is-sending button[type="submit"] { opacity: .7; pointer-events: none; }
.tm .form-alert { font-size: 14px; font-weight: 600; color: #C2273A; background: #FFF5F6; border: 1px solid #F5C9CF; border-radius: 12px; padding: 10px 14px; }
.tm .field .err { display: block; margin-top: 6px; }
.tm .bad, .tm .phone-in.bad-wrap { border-color: #C2273A; }
.tm .check-row.bad-wrap label { color: #C2273A; }

/* Resource and event modals opened by site.js */
.tm .overlay[hidden] { display: none !important; }
body.tm-modal-open { overflow: hidden; }

/* Blog list filtering */
.tm [data-blog-card].is-hidden,
.tm [data-res-card].is-hidden,
.tm [data-ev-card].is-hidden,
.tm [data-ev-group].is-hidden { display: none !important; }

/* Legacy (not yet redesigned) pages: keep the new header and footer fonts intact
   next to the old Tailwind content. */
body.tm-legacy .tm-site-header,
body.tm-legacy .tm-site-footer { font-family: 'Axiforma', 'Outfit', system-ui, sans-serif; color: #1B1030; line-height: normal; }
body.tm-legacy .tm-site-header svg,
body.tm-legacy .tm-site-footer svg { display: inline-block; vertical-align: middle; }
body.tm-legacy .tm-site-header .tm-logo,
body.tm-legacy .tm-site-footer .tm-logo { display: block; }
.tm-legacy-main { display: block; padding-top: 24px; }
.tm-legacy-main > header:first-child { display: none; }

/* Footer: "Hire by role" links to the role landing pages */
.tm .foot-roles { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.tm .foot-roles span { color: #FFFFFF; font-weight: 700; margin-right: 6px; }
.tm .foot-roles a { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: #D9D2E6; transition: border-color .2s ease, color .2s ease; }
.tm .foot-roles a:hover { color: var(--y); border-color: var(--y); }
.tm .foot-roles + .foot-bottom { margin-top: 32px; }