/* Post-migration additions (not transplanted WP CSS). Keep small. */

/* ===== Accessibility (WCAG AA contrast; Lighthouse color-contrast + link-in-text-block) =====
   Minimal colour shifts on top of the transplanted theme CSS — no underlines added. */
/* Theme gray #7b839a is 3.1–3.8:1 on the light backgrounds (#fff, #f3f3f3, #e6ebed) -> the theme's
   body-text gray #61687c (4.6–5.6:1). */
/* (text-* utility classes keep their colour, e.g. the footer's p.h4.text-lightgray on blue) */
h4:not([class*="text-"]), .h4:not([class*="text-"]), .text-darkgray, .has-darkgray-color, #page-nav-mobile { color: #61687c; }
/* ...on the dark-blue (#14234c) homepage hero it must get lighter instead: 4.0:1 -> 5.9:1. */
#home-main-content h4, #home-main-table .text-darkgray { color: #9aa1b5; }
/* Solid red buttons: white on #FF473F is 3.4:1 -> #e0302a 4.5:1. */
.button, .wp-block-button__link, #menu .menu-download > a.button,
.button.has-red-background-color, .wp-block-button__link.has-red-background-color { background-color: #e0302a; }
/* "NEW" badges (inline style, white on #4ec9b0 = 2.0:1): navy text on the same teal = 7.5:1. */
label[style*="#4EC9B0" i] { color: #14234c !important; }
/* Links inside running text must differ from the #61687c text by 3:1 without relying on an
   underline: #274492 is 1.6:1 -> dark navy #0b1430 (3.3:1; 18:1 on white). */
.block li > a, #footer-sub small a { color: #0b1430; }
/* Rouge code samples (feature pages): token colours were 1.2–3.8:1 on the #f7f7f7 code background ->
   same hues darkened to >= 4.6:1. */
.highlight .c, .highlight .cm, .highlight .c1 { color: #6e6e6e; }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt,
.highlight .nt, .highlight .ow { color: #3474a0; }
.highlight .cs { color: #e00808; }
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: #3473a4; }
.highlight .s { color: #966400; }
.highlight .nb, .highlight .bp { color: #1f7a85; }
.highlight .nc, .highlight .nf { color: #007f65; }
.highlight .no, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: #1f7a7a; }
.highlight .nd, .highlight .sx { color: #996300; }
.highlight .nn { color: #3c70b6; }
.highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si,
.highlight .sr, .highlight .s1, .highlight .ss { color: #98640c; }
/* Visually hidden text (link descriptions for screen readers / Lighthouse link-text). */
.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;
}

/* Training promo on feature pages: stands in for the empty <h2></h2> of the dropped CF7 form
   (only its h2 margin-bottom contributed to the layout). */
.feature-cta-spacer { margin-bottom: 1rem; }

/* Former GIFs as <video> (scripts/convert-media.mjs). Same box as the old img.tat-contain / inline CTA
   img: the column width (max. intrinsic), height from the width/height attributes' aspect ratio. */
video.tat-contain { display: block; width: 100%; max-width: 1000px; height: auto; }
.feature-icon video { max-width: 100%; height: auto; vertical-align: middle; } /* = theme img rule */

/* YouTube click-to-load facade (replaces embedded iframes; see scripts/extract-home.mjs) */
.yt-facade {
  position: relative;
  max-width: 100%;
  background-color: #000;
  background-position: center;
  background-size: cover;
  cursor: pointer;
}
.yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play { opacity: 1; }

/* The theme sets display on .button etc., which would override the hidden attribute. */
[hidden] { display: none !important; }

/* ===== Site search (/search/, header menu, 404) — Pagefind; theme tokens: navy #14234c, blue #274492,
   gray #61687c, light blue #DEF1F7, teal #4ec9b0, Nunito ===== */
.search-form { display: flex; gap: 0.75rem; align-items: center; }
.search-form input[type="search"] {
  flex: 1; min-width: 0; height: 3rem; margin: 0; padding: 0 1rem;
  border: 1px solid #c8c8c8; border-radius: 0.25rem; background: #fff;
  color: #14234c; font-family: Nunito, sans-serif; font-size: 1.125rem;
}
.search-form input[type="search"]::placeholder { color: #61687c; opacity: 1; }
.search-form .button { flex: none; height: 3rem; }
.search-box { background: #fff; padding: 1.5rem; margin-top: 1.5rem; }
.search-page :focus-visible, .page-404 :focus-visible, .menu-search :focus-visible { outline: 3px solid #274492; outline-offset: 2px; }

.search-filters { margin-bottom: 1rem; }
.search-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.search-chip {
  border: 1px solid #274492; border-radius: 1.25rem; background: #fff; color: #274492;
  padding: 0.35rem 1rem; font: 600 0.9375rem/1.4 Nunito, sans-serif; cursor: pointer;
}
.search-chip[aria-pressed="true"] { background: #274492; color: #fff; }
.search-chip-count { opacity: 0.8; font-weight: 400; }
.search-status { color: #61687c; margin: 0.5rem 0 1rem; }
.search-status.is-loading { display: flex; align-items: center; gap: 0.75rem; }
.search-spinner {
  width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%;
  border: 3px solid #DEF1F7; border-top-color: #274492; animation: search-spin 0.7s linear infinite;
}
@keyframes search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .search-spinner { animation: none; } }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-result { border-bottom: 1px solid #e6ebed; padding: 1.25rem 0; }
.search-result-badges { margin: 0 0 0.25rem; display: flex; gap: 0.5rem; }
.search-badge {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.2rem; background: #DEF1F7;
  color: #14234c; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.search-badge-platform { background: #4ec9b0; }
.search-result-title { font-size: 1.375rem; line-height: 1.75rem; margin: 0 0 0.25rem; letter-spacing: -0.5px; }
.search-result-title a { color: #274492; }
.search-result-title a:hover { color: #14234c; }
.search-result-section { margin: 0 0 0.25rem; color: #14234c; font-weight: 600; }
.search-result-excerpt { margin: 0 0 0.25rem; color: #61687c; }
.search-result-excerpt mark { background: #fff3b0; color: #14234c; padding: 0 0.1em; }
.search-result-url { margin: 0; color: #61687c; font-size: 0.875rem; word-break: break-all; }
.search-more-wrap { margin-top: 1.5rem; }
.search-popular ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.search-popular a { color: #274492; font-weight: 600; }

/* header menu: compact GET search form in place of the old "Search" link */
#menu .menu-search-form { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; }
#menu .menu-search-form input {
  width: 11rem; margin: 0; padding: 0.25rem 0; border: 0; border-bottom: 2px solid #61687c; border-radius: 0;
  background: transparent; color: #14234c; font-family: Nunito, sans-serif; font-size: 1.125rem; line-height: 1.5rem;
}
#menu .menu-search-form input::placeholder { color: #274492; opacity: 1; }
#menu .menu-search-form button {
  display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; background: none; color: #274492; cursor: pointer;
}

/* 404: search + popular links on the dark band */
.page-404 .search-form { max-width: 36rem; margin: 0 auto 1.5rem; }
.page-404 .search-popular h2 { color: #fff; }
.page-404 .search-popular ul { justify-content: center; }
.page-404 .search-popular a { color: #fff; }

/* ===== Blog posts (BELLATRIX-04) ===== */
/* Gutenberg spacers of the converted posts: inline style="height:Npx" -> class (scripts/convert-posts.mjs). */
.wp-block-spacer.spacer-20 { height: 20px; }
.wp-block-spacer.spacer-30 { height: 30px; }
.wp-block-spacer.spacer-40 { height: 40px; }
.wp-block-spacer.spacer-50 { height: 50px; }
.wp-block-spacer.spacer-60 { height: 60px; }
/* Every column block in the posts carried a per-page `.wp-container-N { flex-wrap: nowrap }` (WP layout
   support, inline on live; the generated class is dropped by the converter). */
.guten-content .wp-block-columns { flex-wrap: nowrap; }
/* Post header videos on phones: live's 782x440 iframe overflows the page there; the facade keeps the
   column width and scales its height with the 16:9 frame instead of a fixed 440px. Desktop keeps 440px
   (= live box). Feature pages are not affected. */
@media (max-width: 767px) {
  .single-post #page-header .yt-facade { height: auto !important; aspect-ratio: 782 / 440; }
}
/* A11y (Lighthouse color-contrast), same approach as the 02/03 overrides at the top of this file:
   post breadcrumbs + hero subtitle; #274492 on the #4ec9b0 hero are 4.43:1 -> dark navy 7.5:1; the theme's Note /
   Definition boxes set white text on #F4AA16 / #4ec9b0 (2.0:1) -> navy 7.7 / 7.5:1 (ATP's note box
   also uses dark body text). Box colours, sizes and spacing are unchanged. */
.single-post .breadcrumbs a.text-blue { color: #14234c; }
/* (the theme sets .has-white-color with !important) */
.blog-prose .is-note-box .has-white-color, .blog-prose .is-definition-box .has-white-color { color: #14234c !important; }
/* Post hero subtitle (#page-header h4.text-white): white on the #4ec9b0 hero is 2.0:1 -> navy like the h1. */
.single-post #page-header h4.text-white, .single-post #page-subtitle { color: #14234c; }
/* /learning-resources/ featured card: label gray #61687c on the #FBC547 card is 3.6:1 -> navy. */
.featured-main .resource-tag.text-darkgray { color: #14234c; }

/* FAQ accordion (/features/) — native details/summary */
.faq .faq-item { border-bottom: 1px solid #d9dee8; padding: 0 15px; }
.faq .faq-item summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.125rem; line-height: 1.4; padding: 1rem 2rem 1rem 0; position: relative; color: #14234C; }
.faq .faq-item summary::-webkit-details-marker { display: none; }
.faq .faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; }
.faq .faq-item[open] summary::after { content: '\2212'; }
.faq .faq-item summary:focus-visible { outline: 3px solid #1a5fd0; outline-offset: 2px; }
.faq .faq-answer { padding: 0 0 1rem; }
.faq .faq-answer p { margin: 0 0 .5rem; }
.faq .faq-link a { text-decoration: underline; }

/* A11y: archive index hero subtitle (grey on grey-blue, contrast 1.46) */
.post-type-archive #page-subtitle { color: #0d1633; }