/*
 * Hand-written fixes layered after the precompiled Tailwind theme.css.
 *
 * There is no Tailwind build in this repo, so a utility class that is not already compiled does
 * nothing (see the cygnvs-theme-tailwind-precompiled note). Fixes therefore live here as plain,
 * scoped CSS. This file is unlayered, so it beats Tailwind utilities (which sit in a cascade layer)
 * without !important. Enqueued in inc/enqueue.php after theme.css and cache-busted through
 * assets/version.json like the other theme assets.
 *
 * First pass: phone and tablet QA of the Resilience Benchmark pages, 2026-10-13. Ids in brackets
 * refer to that QA run.
 */

.cyg-nowrap{white-space:nowrap}

/* ---------- Announcement bar, header, mobile menu ---------- */

/* Short landscape screens: the bar scrolls away instead of sticking, so bar + nav no longer cover a
   third of the screen. theme.js slides the nav up whenever the bar is not sticky. [NAV-4] */
@media (min-width:768px) and (max-height:500px){
  [data-announcement]{position:static}
}

/* The header's backdrop blur makes it the containing block for the fixed slide-in panel, which pushed
   the panel down by the bar height and cut off its bottom (Get Started) in landscape. [NAV-2] */
@media (max-width:1023.98px){
  .cygnvs-nav[data-open]{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Collapsed submenus leave the tab order, the close button gets a 44px hit area, and the open-menu
   backdrop also dims the sticky bar at 768-1023px. [NAV-13] */
@media (max-width:1023.98px){
  [data-nav-item]:not([data-open]) [data-nav-dropdown]{visibility:hidden}
  [data-nav-close]::after{content:"";position:absolute;inset:-10px}
  [data-nav-panel]>*{flex-shrink:0} /* the panel scrolls; its children (the close button included) must not squeeze */
  body.nav-active [data-announcement]{z-index:997}
}

/* ---------- Cookie banner ---------- */

/* Above the fixed header (at 320px its first lines sat behind it), and compact on phones and short
   screens so it no longer covers most of the page. Copy unchanged. [NAV-1] */
[data-cookie-banner]{z-index:1000}
@media (max-width:639.98px),(max-height:500px){
  [data-cookie-banner]{padding:.75rem}
  [data-cookie-banner]>div{max-height:calc(100dvh - 1.5rem);overflow-y:auto;padding:1rem;gap:.75rem}
  [data-cookie-banner]>div>div:last-child{flex-direction:row}
  [data-cookie-banner] button{flex:1 1 0;padding-left:.75rem;padding-right:.75rem}
}
@media (min-width:640px) and (max-height:500px){
  [data-cookie-banner]>div>div:last-child{justify-content:flex-end}
  [data-cookie-banner] button{flex:0 1 12rem}
}

/* ---------- Footer ---------- */

/* Bigger tap targets for footer links on phones. [NAV-9] */
@media (max-width:767.98px){
  footer ul.flex-col{gap:.25rem}
  footer ul.flex-col a,footer nav[aria-label] a{display:inline-block;padding-block:.375rem}
}

/* ---------- HubSpot forms ---------- */

/* theme.css hides fieldsets that hold only hidden fields. The consent fieldset holds no .hs-form-field
   at all, so the consent text and the Privacy Policy / Terms links never showed. The doubled class
   matches that rule's specificity and this file loads later, so it wins. [REP-1] */
.cygnvs-hubspot-form.cygnvs-hubspot-form fieldset:has(.legal-consent-container,.hs-richtext){display:block}
.cygnvs-hubspot-form .legal-consent-container a,.cygnvs-hubspot-form .hs-richtext a{color:var(--color-secondary);text-decoration:underline}

/* Two-column rows (first / last name) stack on phones, so fields are not truncated. [REP-2] */
@media (max-width:479.98px){
  .cygnvs-hubspot-form [class^=form-columns-]{flex-direction:column}
}

/* Visible focus and error states. Input borders are drawn with box-shadow, so the theme's
   border-color change on focus never showed. [REP-9] */
.cygnvs-hubspot-form input.hs-input:focus,.cygnvs-hubspot-form select.hs-input:focus,.cygnvs-hubspot-form textarea.hs-input:focus{box-shadow:0 0 0 2px var(--color-secondary)}
.cygnvs-hubspot-form input.hs-input.invalid,.cygnvs-hubspot-form select.hs-input.invalid,.cygnvs-hubspot-form textarea.hs-input.invalid{box-shadow:0 0 0 1px #b91c1c}
.cygnvs-hubspot-form input.hs-input.invalid:focus,.cygnvs-hubspot-form select.hs-input.invalid:focus,.cygnvs-hubspot-form textarea.hs-input.invalid:focus{box-shadow:0 0 0 2px #b91c1c}

/* ---------- Resource pages ---------- */

/* Long titles balance across lines instead of leaving one word alone. [REP-11] */
h1.text-display{text-wrap:balance}

/* Resource pages on phones: the template pads the top 80px (outer) + 80px (inner), so the breadcrumb sat
   79px below the fixed nav. Trim the inner padding to leave about 24px. Desktop unchanged. [EXTRA-1] */
@media (max-width:767.98px){
  .single-resource section.bg-white>div.pt-20>div.py-20{padding-top:1.5rem}
}

/* Breadcrumb links: 44px tap height without moving the layout. [REP-8] */
@media (max-width:1023.98px){
  nav[aria-label=Breadcrumb] a{display:inline-block;padding:13px 0;margin:-13px 0}
}

/* Share icons fit one row at 320px. [REP-14] */
@media (max-width:359.98px){
  ul.flex.flex-wrap>li>a.size-14[aria-label]{width:48px;height:48px}
}

/* "Latest from CYGNVS" slider. Below lg the text and image stack: the image gets a steady 16:9
   frame instead of stretching to the slide height and cropping the cover. [REP-4, REP-8] */
@media (max-width:1023.98px){
  .latest-resources-slider .swiper-slide>div{flex-direction:column;flex-wrap:nowrap}
  .latest-resources-slider .swiper-slide>div>div:first-child{flex:1 1 auto;justify-content:flex-start}
  .latest-resources-slider .swiper-slide>div>div:last-child{flex:none}
  .latest-resources-slider .swiper-slide img{height:auto;aspect-ratio:16/9}
  .latest-resources-slider .swiper-slide a.inline-size-14{min-height:44px}
}
.latest-resources-slider{--swiper-pagination-bullet-size:12px;--swiper-pagination-bullet-horizontal-gap:8px}

/* Related-post cards: the thumbnail keeps the covers' own shape (about 1.9:1) at every width instead of
   a fixed 228px crop, the arrow badge lets taps through to the link under it, and the title-to-image gap
   is tighter on phones. [REP-5, REP-6, REP-M3] */
article.group>a.block.h-57{height:auto;aspect-ratio:1.91/1}
article.group>div.absolute.rounded-full{pointer-events:none}
@media (max-width:767.98px){
  article.group>h3.mb-18{margin-bottom:1.5rem}
}