/* in5.us — audit fixes 2026-10-02 (B4). Loaded after app.css by includes/htmlhead.two-one.php.
   Standard: primary/secondary buttons keep the app.css shape; this file only changes behaviour at the 375 px floor
   and enforces the 24 px minimum target size (WCAG 2.5.8). Rollback: remove the <link> in htmlhead.two-one.php. */

/* B4a — hero buttons: stack and go full-width below 480 px; never wrap their label */
@media (max-width: 480px) {
  .banner-section .inner-container .description .btn-container { flex-direction: column; align-items: stretch; gap: 12px; }
  .banner-section .inner-container .description .btn-container .btn { width: 100%; white-space: nowrap; min-height: 44px; }
}
.banner-section .inner-container .description .btn-container .btn { white-space: nowrap; }

/* B4b — minimum target size: nav links, feature-table preview links, tag/close icons */
.header .navigation a, .navigation > ul > li > a { min-height: 24px; display: inline-flex; align-items: center; }
a.preview { display: inline-flex; min-width: 24px; min-height: 24px; align-items: center; justify-content: center; }
@media (max-width: 768px) { .btn { min-height: 44px; } }

/* B4c — footer link lists: 24 px minimum row height (was 21 px) */
.footer-menu-1 ul li a, .footer-menu-2 ul li a, .footer-menu-3 ul li a, .footer-menu-4 ul li a, [class^="footer-menu"] li a { display: inline-flex; align-items: center; min-height: 24px; }

/* ===== 2026-10-02 WCAG 2.1 AA pass (moves 1,3,4) — rollback: remove this block ===== */
/* Brand text/button blue: #4e77fc (3.9:1) -> #3a5fe6 (5.3:1 on white, 4.7:1 on #edf1ff). Replaced in app.css + _variables.scss. */
/* 1.4.3 eyebrow/section labels already covered by the colour swap. */
/* 2.4.7 focus visible (app.css sets outline:none on every link) */
.theme-new-b a:focus-visible, .theme-new-b a *:focus-visible, .theme-new-b button:focus-visible, .theme-new-b input:focus-visible,
.theme-new-b select:focus-visible, .theme-new-b textarea:focus-visible, .theme-new-b [tabindex]:focus-visible, .theme-new-b .btn:focus-visible,
a:focus-visible, button:focus-visible { outline: 3px solid #242424 !important; outline-offset: 3px; }
.footer-cta a:focus-visible, footer a:focus-visible, footer button:focus-visible, .btn-secondary:focus-visible { outline-color: #ffffff !important; }
/* 2.4.1 skip link */
.skip-link { position: absolute; left: 12px; top: -200px; z-index: 10000; background: #242424; color: #fff; padding: 12px 18px; border-radius: 8px; font-family: Jost, sans-serif; font-size: 16px; text-decoration: none; }
.skip-link:focus, .skip-link:focus-visible { top: 12px; outline: 3px solid #fff !important; outline-offset: 2px; }
/* visually hidden (labels for screen readers) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* page H1s styled as the theme heading they replaced (B2) */
.theme-new-b .banner-section .description h1.banner-h1 { color:#242424; font-family:Jost; font-size:40px; font-style:normal; font-weight:600; line-height:120%; text-align:left; margin:0; padding:0; }
@media (max-width:768px) { .theme-new-b .banner-section .description h1.banner-h1 { font-size:30px; } }
.theme-new-b .plans-section .description h1.plans-h1 { color:#242424; font-family:Jost; font-size:36px; font-weight:600; line-height:120%; margin:0; padding:0; max-width:768px; }
@media (max-width:1024px) { .theme-new-b .plans-section .description h1.plans-h1 { font-size:28px; } }
/* 2.2.2 pause control for autoplaying videos */
.in5-video-wrap { position: relative; display: inline-block; max-width: 100%; }
.in5-video-wrap video { display: block; max-width: 100%; }
.in5-video-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 5; min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(36,36,36,.85); color: #fff; font: 600 14px/44px Jost, sans-serif; cursor: pointer; }
.in5-video-toggle:hover { background: #242424; }
@media (prefers-reduced-motion: reduce) { .in5-video-wrap video { animation: none; } }
/* eyebrow labels that were <h4> (not headings): same look as .theme-new-b h4 */
.theme-new-b .eyebrow-h4 { color:#3a5fe6; font-family:Jost; font-style:normal; font-weight:500; line-height:150%; font-size:14px; text-align:center; text-transform:uppercase; margin:0; padding:0; }
.banner-section .inner-container .description .eyebrow-h4 { text-align:left; }
.theme-new-b .plans-section .description h1.plans-h1 { text-align:center; }
/* heading-order: spotlight article titles are h3 (look of the old h4); blog category labels are not headings */
.spotlight-collections .spotlight-collection-articles article .inner-container .article-desc h3.article-h3{color:#242424;font-family:Jost;font-size:28px;font-weight:600;line-height:150%;text-align:left;text-transform:none;margin:0;padding:0}
@media (max-width:1024px){.spotlight-collections .spotlight-collection-articles article .inner-container .article-desc h3.article-h3{font-size:22px}}
.blogs-section>.inner-container .blogs .blog .inner-container .blog-content .eyebrow-h4{text-align:left}
/* 1.4.3: knowledge-base chips (contact page) — blue text on #d3ddfe was 3.9:1; darker blue = 5.3:1 */
.banner-section.search-section .inner-container .refinements a { color: #2b4dcc; }
/* 1.4.3 legacy-theme link colour (features/help/changelog use pages/css/ajar.two-one.css --cta #3399cc = 2.8:1) -> #1a6a9e = 5.8:1 white, 5.2:1 on stripes */
:root { --cta: #1a6a9e; }

/* 2026-10-15 (#180): the live-example link under the hero visual */
.banner-section .banner-example{margin:10px 0 0;text-align:center;font-size:15px}
.banner-section .banner-example a{text-decoration:underline;text-underline-offset:3px}

/* 2026-10-15 (#180): the primary action is the filled button, the secondary the outlined one — the theme names them the other way round (GOV.UK: one unmistakable primary action) */
.theme-new-b .banner-section .btn-container .btn-primary{background:#3a5fe6;color:#fff;border:1px solid #3a5fe6}
.theme-new-b .banner-section .btn-container .btn-primary:hover{background:#2f4fc9;border-color:#2f4fc9;color:#fff}
.theme-new-b .banner-section .btn-container .btn-secondary{background:#fff;color:#3a5fe6;border:1px solid #3a5fe6}
.theme-new-b .banner-section .btn-container .btn-secondary:hover{background:#eef2fd;color:#2f4fc9}