/* UrgentMed theme — layout/components not expressible in theme.json. Tokens come from theme.json presets. */
:root { --um-focus: 0 0 0 3px var(--wp--preset--color--navy); }
*:focus-visible { outline: 3px solid var(--wp--preset--color--navy); outline-offset: 2px; }
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; max-width: 100%; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 0; left: 0; right: 0; z-index: 100; text-align: center; border-radius: 0; width: auto; height: auto; clip: auto; padding: .75rem 1rem; background: var(--wp--preset--color--navy-deep); color: #fff; border-radius: 6px; }
/* While the skip link is showing it must not sit on top of the logo link (axe target-size: "partially obscured"),
   so the header is pushed down by the link's height for as long as it has focus. */
body:has(.skip-link:focus) .um-header { margin-top: 3.25rem; }
.um-eyebrow { font-size: var(--wp--preset--font-size--xs); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--navy); font-weight: 600; margin: 0 0 .5rem; }
.um-eyebrow--light { color: rgba(255,255,255,.8); }
.um-main > * + * { }

/* Header */
.um-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--line); padding-top: .625rem; padding-bottom: .625rem; }
.um-header__bar { gap: 1rem; align-items: center; }
.um-header__logo img { height: 40px; width: auto !important; max-width: none; display: block; }
.um-header__brand, .um-header__actions { flex-shrink: 0; }
.um-header .um-mega { min-width: 0; }
@media (max-width: 1439px) { .um-header__logo img { height: 34px; } .um-header__bar { gap: .6rem; } }
/* Between 1200 and 1339px the phone link is the one thing that does not fit; the Check In button
   stays, and the number is one tap away in the footer and on every location card. */

/* Tablet/mobile: the menu button belongs with the other controls, not floating mid-bar. */
@media (max-width: 1279px) { .um-header .um-mega { margin-left: auto; } .um-header__bar { gap: .5rem; } }
/* Phones: the sticky bottom bar already carries the call button, so the header keeps logo, menu and Check In. */
@media (max-width: 479px) { .um-header__actions .um-btn--secondary { display: none; } .um-header__logo img { height: 30px; } }
.um-nav { flex: 1; }
.um-nav .wp-block-navigation-item__content { padding: .5rem .25rem; color: var(--wp--preset--color--navy-deep); }
.um-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--brand-red); text-decoration: none; }
.um-nav .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; box-shadow: var(--wp--preset--shadow--card); padding: .5rem; min-width: 16rem; }
.um-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem .75rem; border-radius: 6px; }
.um-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--navy-soft); }
.um-header__actions { gap: .75rem; align-items: center; }
.um-header__actions .um-tel { font-size: var(--wp--preset--font-size--s); white-space: nowrap; }
.um-header__actions .um-btn--secondary { white-space: nowrap; }
/* Colour for the header Call Now comes from the site-wide tel: button rule in core.css. */
/* "Call Now" keeps its label from 1536px up; below that only the icon fits beside seven tabs and Check In
   (verified by screenshot at 1280 / 1440 / 1536 / 1600 — the header is capped at 96rem). */
@media (max-width: 1535px) { .um-header__actions .um-btn--secondary span { display: none; } .um-header__actions .um-btn--secondary { padding: .55rem .6rem; min-width: 44px; justify-content: center; } }
/* 1280–1439: seven tabs + Check In use the whole bar; the call button does not fit even as a bare icon. */
@media (min-width: 1280px) and (max-width: 1439px) { .um-header__actions .um-btn--secondary { display: none; } }
@media (max-width: 599px) { .um-header__actions .um-btn { padding: .5rem .875rem; font-size: .875rem; } }
/* Mobile overlay menu from core navigation */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--surface); padding: 5rem 1.5rem 2rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .25rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--l); padding: .5rem 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0; box-shadow: none; padding-left: 1rem; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--navy-deep); }

/* Hero */
.um-hero__cols { gap: 2.5rem; }
.um-hero__lede { max-width: 36rem; color: var(--wp--preset--color--ink-muted); }
.um-hero__actions { gap: .75rem; margin-top: 1.25rem; }
.um-hero__actions .wp-block-buttons { margin: 0; }
.um-hero__status { margin-top: 1rem; }
.um-hero__status p { margin: 0; color: var(--wp--preset--color--success); font-weight: 600; }
.um-hero__status p:empty { display: none; }
.um-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--wp--preset--shadow--card); }
@media (max-width: 781px) { .um-hero__media img { aspect-ratio: 16 / 10; } }

/* Lanes */
.um-lanes { gap: 1rem; }
.um-lane { padding: 1.5rem; border-radius: 12px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); box-shadow: var(--wp--preset--shadow--card); border-top: 4px solid var(--wp--preset--color--brand-red); }
.um-lane--employer { border-top-color: var(--wp--preset--color--navy); }
.um-lane--programs { border-top-color: var(--wp--preset--color--teal); }
.um-lane h2 { margin-top: 0; }
.um-lane .wp-block-buttons { gap: .5rem; }
.um-lane .um-btn, .um-lane .wp-block-button__link { padding: .55rem 1rem; font-size: .875rem; }

/* Sections & bands */
.um-section { scroll-margin-top: 5rem; }
.um-checklist { list-style: none; padding: 0; margin: 1rem 0; }
.um-checklist li { position: relative; padding-left: 1.75rem; margin: .5rem 0; }
.um-checklist li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--wp--preset--color--success); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E") center / 100% no-repeat; }
.um-checklist--card { background: var(--wp--preset--color--surface-alt); border-radius: 12px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; }
.um-band--wc { border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--70); }
.um-band--employer .wp-block-button__link { border-width: 1.5px; }
.um-band--employer p { color: rgba(255,255,255,.88); }
.um-program { padding: 1.5rem; border-radius: 12px; background: var(--wp--preset--color--surface-alt); border-left: 4px solid var(--wp--preset--color--teal); }
.um-program h3 { margin-top: 0; }
.um-why__grid { gap: 1.25rem; margin-top: 1.5rem; }
.um-why__item { padding: 1.25rem; border-radius: 12px; border: 1px solid var(--wp--preset--color--line); }
.um-why__item h3 { margin: 0 0 .5rem; }
.um-why__item p { margin: 0; color: var(--wp--preset--color--ink-muted); }
.um-final .um-btn--primary { background: #fff; color: var(--wp--preset--color--brand-red); }
.um-final .um-btn--primary:hover { background: var(--wp--preset--color--surface-alt); }
.um-final .um-btn--secondary:not([href^="tel:"]) { background: transparent; color: #fff; border-color: #fff; }
.um-final .um-btn--secondary:not([href^="tel:"]):hover { background: rgba(255,255,255,.12); }
.um-final__actions { gap: .75rem; margin-top: 1.25rem; }

/* Service / location templates */
.um-service__hero h1 { max-width: 20ch; }
.um-service__lede { color: var(--wp--preset--color--ink-muted); max-width: 44rem; }
.um-service__actions { gap: .75rem; margin-top: 1rem; }
.um-location__cols { gap: 3rem; }
.um-location__aside { background: var(--wp--preset--color--surface-alt); border-radius: 12px; padding: 1.5rem; align-self: start; position: sticky; top: 5.5rem; }
.um-location__aside h2 { margin-top: 0; }
.um-prose .wp-block-post-content > * { max-width: 68ch; }
.um-post__meta { gap: 1rem; color: var(--wp--preset--color--ink-muted); }
.um-card { display: grid; gap: .5rem; }

/* Footer */
.um-footer a { color: #fff; }
.um-footer a:hover { color: rgba(255,255,255,.8); }
.um-footer__grid { gap: 2.5rem; }
.um-footer__heading { color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: var(--wp--preset--font-size--xs); margin: 0 0 .75rem; }
.um-footer__links { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.um-footer__links li { margin: .375rem 0; font-size: var(--wp--preset--font-size--s); }
.um-footer__logo img { height: 36px; width: auto; background: #fff; padding: 6px 10px; border-radius: 6px; }
.um-footer .um-notice { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); border-left-color: #ff8a80; color: #fff; }
.um-footer .um-notice .um-icon { color: #ff8a80; }
.um-footer .um-nap { color: #fff; }
.um-footer .um-nap__name a, .um-footer .um-tel { color: #fff; }
.um-footer .um-nap__hours { color: rgba(255,255,255,.7); }
.um-footer__sep { border-color: rgba(255,255,255,.2); margin: 2rem auto 1rem; opacity: 1; }
.um-footer__legal p { margin: 0; color: rgba(255,255,255,.75); }

/* Buttons from core map to design system */
.wp-block-button__link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; line-height: 1.2; }
.is-style-outline .wp-block-button__link { border: 1.5px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); background: transparent; }
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--navy-soft); }

/* Print */
@media print { .um-header, .um-cta-bar, .um-footer__links { display: none !important; } }
.um-header.is-scrolled { box-shadow: var(--wp--preset--shadow--card); }
/* fixes r2 */
.um-header__actions .um-btn { white-space: nowrap; }
.um-lanes.wp-block-group, .um-why__grid.wp-block-group, .um-footer__grid.wp-block-group { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) !important; }
.um-why__grid.wp-block-group { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; }
.um-footer__grid.wp-block-group { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)) !important; }
.um-footer__sep { width: 100%; max-width: none; }
.um-service__hero > .is-layout-constrained > *, .um-service__hero h1, .um-service__hero .um-service__lede, .um-service__hero .um-service__actions { margin-left: 0 !important; }
.um-migration-notice { color: var(--wp--preset--color--warning); }

/* How-care-works / employer-workflow steps + before-your-visit prep */
.um-steps__grid { gap: 1.25rem; margin-top: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) !important; }
.um-step { padding: 1.5rem 1.25rem; border-radius: 12px; border: 1px solid var(--wp--preset--color--line); position: relative; }
.um-step__n { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--wp--preset--color--navy); color: #fff; font-weight: 700; margin: 0 0 .75rem; }
.um-steps--employer .um-step__n { background: var(--wp--preset--color--brand-red, #CF1F27); }
/* Five-step variant. The base grid's 15rem minmax is !important (it has to beat the block's own inline
   grid style), so a step grid with more than four cards cannot widen its columns by passing a different
   minimumColumnWidth — at 84rem that lays five cards out in five ~13rem columns and the copy turns into
   a ribbon. 22rem wraps them 3 + 2 instead. Same modifier shape as .um-steps--employer above. */
.um-steps--wide .um-steps__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)) !important; }
.um-step h3 { margin: 0 0 .35rem; }
.um-step p { margin: 0; color: var(--wp--preset--color--ink-muted); }
.um-prep__cols { gap: 2rem; margin-top: 1rem; }
.um-prep__list { line-height: 1.7; }

/* Brand: the site title is the always-present home link; hidden only when a logo image is actually rendered. */
.um-header__title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.35rem; line-height: 1; letter-spacing: -0.01em; }
.um-header__title a { color: var(--wp--preset--color--navy-deep); text-decoration: none; }
.um-header__title a:hover { color: var(--wp--preset--color--brand-red); }
.um-header__brand:has(.um-header__logo img) .um-header__title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.um-header__brand { align-items: center; gap: .65rem; }

/* Long service dropdown: two columns on desktop so a demand-ordered list stays scannable */
@media (min-width: 1024px) {
  .um-nav__wide > .wp-block-navigation__submenu-container { columns: 2; column-gap: 1.5rem; width: 34rem; max-width: 90vw; }
  .um-nav__wide > .wp-block-navigation__submenu-container > li { break-inside: avoid; }
  .um-nav__wide .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { position: static; box-shadow: none; border: 0; padding-left: .75rem; }
}
.um-nav__all > a { font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Outline button. (2026-09-03, D-60)

   This lived in theme.json as styles.blocks.core/button.variations.outline. WordPress does not
   emit a theme.json block-style variation once — it emits a NUMBERED COPY PER INSTANCE CONTEXT.
   On the home page that produced `is-style-outline--1` through `--26`: twenty-six byte-identical
   rule sets, 6,817 bytes of inline <head> CSS, for one button style used 58 times.

   Declared here instead, it is one rule in a stylesheet the browser caches across the whole site,
   and the inline block-style-variation payload drops to zero. The rendered result is identical —
   the markup already carries `is-style-outline`; only the source of the CSS moved.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	border: 1.5px solid var(--wp--preset--color--navy);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--navy-soft);
	color: var(--wp--preset--color--navy);
}
