/*
 * 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}
}

/* Quote wall cards (template-parts/blocks/quote_wall.php). From two columns up, every card has the same
   80px logo strip so quotes start level across a row. Phones show one card per row, so the strip shrinks:
   a round seal floats beside the quote, a wide wordmark sits on its own short line, and a card with no
   logo drops the strip. */
.cyg-qw-logo{display:flex;justify-content:flex-end;align-items:center;height:80px;margin-bottom:1rem}
@media (max-width:767.98px){
  .cyg-qw-body{display:flow-root}
  .cyg-qw-logo{height:auto;margin-bottom:.75rem}
  .cyg-qw-logo:not(.is-wide){float:right;margin:.25rem 0 .5rem 1rem}
  .cyg-qw-logo.is-empty{display:none}
}
/* A company with no logo shows its name in words in the logo strip. */
.cyg-qw-logo-text{max-width:220px;text-align:right;text-wrap:balance;color:var(--color-navy-550);font-size:1.125rem;font-weight:600;line-height:1.2;letter-spacing:-.1px}

/* Card type and spacing (design pass, 2026-11-06). The quote and the person read as two different
   things: the quote in blue at 18px (17px on phones), then 32px of space, then the name in bold brand
   navy and the title and company smaller in slate. The opening quote mark hangs into the margin so the quote's
   text edge lines up with the name. Phones get 24px side padding (was 16px). */
.cyg-qw-card{margin:0;padding:1.75rem 1.5rem}
@media (min-width:1024px){
  .cyg-qw-card{padding:1.75rem}
}
.cyg-qw-quote{margin:0 0 2rem;color:var(--color-navy-550);font-size:1.125rem;line-height:1.6}
.cyg-qw-quote p{margin:0;text-indent:-.42em}
@media (max-width:767.98px){
  .cyg-qw-quote{font-size:1.0625rem;line-height:1.55}
}
.cyg-qw-who{min-width:0;overflow-wrap:anywhere}
.cyg-qw-name{margin:0;color:#002559;font-size:1rem;font-weight:700;line-height:1.3}
.cyg-qw-role{margin:.25rem 0 0;color:#475569;font-size:.875rem;line-height:1.45}

/* Each card has three parts: the quote (with its logo strip), the optional buttons, then who said it.
   From two columns up, where the browser supports subgrid, the cards in a row share those three rows,
   so every name starts at the same height across the row whether or not a card has a button. The
   grid's row gap is moved onto the card's bottom margin: a subgrid keeps the parent's gap between its
   own rows, which left a blank 24px band in cards without a button. Phones (one column) and older
   browsers keep the column layout, which still puts who said it at the foot of every card. */
.cyg-qw-act{padding-bottom:1.5rem}
@media (min-width:768px){
  @supports (grid-template-rows:subgrid){
    .cyg-qw-grid{row-gap:0}
    .cyg-qw-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;margin-bottom:1.5rem}
    .cyg-qw-card>.cyg-qw-body{grid-row:1}
    .cyg-qw-card>.cyg-qw-act{grid-row:2}
    .cyg-qw-card>.cyg-qw-by{grid-row:3}
  }
}

/* Featured quote in the hero header (template-parts/blocks/header.php). From laptop width up it
   takes the right third, starting just past the hero's two-thirds grid line, and the headline keeps
   the left two thirds. On smaller screens it stacks under the intro with a hairline above it.
   The company logo sits in white on the navy, across from the quote mark. */
.cyg-hero-split{display:grid;gap:2.5rem}
@media (min-width:1024px){
  .cyg-hero-split{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0;align-items:center}
  .cyg-hero-split .cyg-hero-main{padding-right:3rem}
}
.cyg-hero-quote{margin:0;padding-top:2rem;border-top:1px solid rgba(255,255,255,.14)}
@media (min-width:1024px){
  .cyg-hero-quote{padding:0 0 0 2.5rem;border-top:0}
}
.cyg-hq-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.cyg-hq-mark{display:block;width:38px;height:29px;flex:none;color:var(--color-secondary)}
.cyg-hero-quote blockquote{margin:0}
.cyg-hero-quote blockquote p{margin:0;color:#fff;font-size:clamp(1.125rem,.95rem + .55vw,1.375rem);line-height:1.45;font-weight:500;letter-spacing:-.1px}
.cyg-hero-quote figcaption{display:flex;align-items:center;gap:1rem;margin-top:1.75rem}
.cyg-hq-who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cyg-hq-who strong{color:#fff;font-size:1rem;font-weight:600}
.cyg-hq-who span{color:var(--color-slate-300);font-size:.875rem}
.cyg-hq-logo{flex:none;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}