/* ==========================================================================
   Intelligent Title — Pre-Launch Fixes v1.0
   File: /assets/css/it-fixes.css
   Load LAST, after site.css, video-share.css, and it-tokens.css.
   Depends on the variables in it-tokens.css.

   F1  Header overflow at 1181–1480px (Order button clipped)
   F2  Mobile horizontal scroll on the homepage (.pf-two grid)
   F3  IRIS pill covering content on mobile
   F4  White text on #14A3B8 at 3.02:1 (all teal fills with text)
   F5  Subtle text (#9CA3AF, 2.54:1) and visible focus rings
   ========================================================================== */


/* --------------------------------------------------------------------------
   F1  HEADER OVERFLOW
   The full nav needs ~1300px, but .nav-wrap is capped at 1280px, so the row
   pushed the Order button off-screen at 1440px and below. Fix: widen the cap,
   tighten spacing in the mid range, and collapse to the menu below 1280px.
   -------------------------------------------------------------------------- */
.nav-wrap   { max-width: 1400px; }
.nav-items  { flex-wrap: nowrap; }

@media (max-width: 1480px) {
  .nav-wrap  { gap: 20px; padding-left: 20px; padding-right: 20px; }
  .nav-items { gap: 16px; }
  .nav-cta   { padding: 9px 14px; }
}

@media (min-width: 1px) and (max-width: 0px) {
  /* Collapse to the existing mobile menu (same rules site.css uses <=1180px) */
  .nav-items { display: none; }
  .nav-mobile-toggle { display: block; }
  .nav-items.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; padding: 24px; gap: 12px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); max-height: 75vh; overflow-y: auto; }
  .nav-items.open > li { width: 100%; }
  .nav-items.open .nav-link { padding: 10px 0; font-size: 17px; }
  .mega-menu { position: static; transform: none; min-width: 0; padding: 12px 0 0 0; border: none; box-shadow: none; }
  .nav-items > li.mega-parent > .mega-menu { display: none; }
  .nav-items > li.mega-parent.mega-open > .mega-menu { display: block; }
  .mega-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   F2  MOBILE HORIZONTAL SCROLL
   The homepage rule ".pf .pf-uw.pf .pf-two" is missing a comma, so the
   two-card grid never collapses on mobile and pushes the page to 428px.
   The same block had "rgba(255,255,255.84)" (missing comma) for paragraph text
   on the navy white-paper card.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pf .pf-two, .pf-two { grid-template-columns: 1fr; }
  .pf .pf-uw           { grid-template-columns: 1fr; }
}
.pf-card, .pf-paper  { min-width: 0; max-width: 100%; box-sizing: border-box; }
.pf-paper p          { color: rgba(255, 255, 255, 0.84); }

/* Safety net: long words and URLs wrap instead of widening the page */
@media (max-width: 640px) {
  h1, h2, h3, p, li, a { overflow-wrap: anywhere; }
  img, video, iframe, table { max-width: 100%; }
}


/* --------------------------------------------------------------------------
   F3  IRIS PILL ON MOBILE
   At 390px the pill was 285px wide and sat over the "Watch IRIS" controls.
   On phones it becomes a compact "IRIS" chip; the full label and the aria-label
   are unchanged, so screen readers still hear "Chat with IRIS — price your
   policy or ask anything".
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #iris-bubble {
    right: 14px !important;
    bottom: 14px !important;
    padding: 11px 16px !important;
    max-width: calc(100vw - 28px);
  }
  #iris-bubble .iris-b2 { display: none !important; }
  /* Room at the end of the page so the footer can scroll clear of the chip */
  body { padding-bottom: 72px; }
}


/* --------------------------------------------------------------------------
   F4  BUTTON AND BADGE CONTRAST
   White text on #14A3B8 measures 3.02:1; WCAG 2.2 AA needs 4.5:1 at these
   sizes. Every teal fill carrying text moves to teal-600 (#0E7F91, 4.71:1),
   hover to teal-700 (#0B6F7F, 5.84:1). Teal stays as the accent for icons,
   strokes, and large display type.
   -------------------------------------------------------------------------- */
.btn-primary,
.page-hero .btn-primary,
.nav-cta,
.btn-order-cta,
.order-embed-block .btn-order-cta,
.trust-bar__cta,
.brand-lockup-cta,
.ob2 .ob2-cta,
.ob2 .ob2-step.now .ob2-num,
.cl .cl-cta,
.cl .cl-dot.a,
.xd .xd-btn,
.it-cta-inline {
  background-color: var(--it-action) !important;
  color: var(--it-action-text) !important;
}
.btn-primary:hover,
.page-hero .btn-primary:hover,
.nav-cta:hover,
.btn-order-cta:hover,
.trust-bar__cta:hover,
.brand-lockup-cta:hover,
.ob2 .ob2-cta:hover,
.cl .cl-cta:hover,
.xd .xd-btn:hover,
.it-cta-inline:hover {
  background-color: var(--it-action-hover) !important;
}
/* IRIS chat "Send" button (styled by iris-chat.js) */
#iris-send { background-color: var(--it-action) !important; color: #FFFFFF !important; }
#iris-send:hover { background-color: var(--it-action-hover) !important; }


/* --------------------------------------------------------------------------
   F5  SUBTLE TEXT AND FOCUS
   -------------------------------------------------------------------------- */
:root { --text-light: var(--it-slate-500); } /* was #9CA3AF, 2.54:1 -> 5.91:1 */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--it-focus-ring);
  outline-offset: 2px;
}
.site-footer :focus-visible,
.it-section--dark :focus-visible,
.it-section--dark-2 :focus-visible,
.it-video-band :focus-visible {
  outline-color: var(--it-focus-ring-dark);
}


/* --------------------------------------------------------------------------
   F6  WIDE TABLES ON PHONES
   The timeline and white-paper tables pushed pages 12-79px past a 390px
   screen. They now scroll inside their own box instead of widening the page.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  table.timeline-table,
  table.wp-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* --------------------------------------------------------------------------
   F7  QUESTIONS, ANSWERED BY IRIS (resources-questions-answered.html)
   Styles for the repaired Q&A library. .qa-hidden is required by the page's
   search filter; without it, filtering has no visible effect.
   -------------------------------------------------------------------------- */
.qa-hidden { display: none !important; }
.qa-section { padding-top: 8px; }
.qa-search { margin: 0 0 36px; }
.qa-search input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--it-border-strong, #B2B9C3);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--it-text-strong, #0F2342);
}
.qa-count { margin: 8px 2px 0; font-size: 14px; color: var(--it-slate-500); min-height: 1.2em; }
.qa-cat { margin: 0 0 40px; }
.qa-cat h2 {
  font-family: var(--serif, Georgia, serif);
  font-size: 26px;
  line-height: 1.25;
  color: var(--navy, #0F2342);
  margin: 0 0 6px;
}
.qa-cat-lead { color: var(--it-slate-500); margin: 0 0 14px; font-size: 15px; }
.qa-item {
  border: 1px solid var(--it-border, #D9DCE1);
  border-radius: 10px;
  background: #FFFFFF;
  margin: 0 0 10px;
}
.qa-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 44px 16px 18px;
  font-weight: 600;
  color: var(--navy, #0F2342);
  position: relative;
  line-height: 1.45;
}
.qa-item > summary::-webkit-details-marker { display: none; }
.qa-item > summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 14px;
  font-size: 20px;
  color: var(--it-teal-700);
}
.qa-item[open] > summary::after { content: "\2212"; }
.qa-item[open] { border-color: var(--it-teal-200, #B8E3EA); background: var(--it-teal-25, #F6FBFC); }
.qa-a { padding: 0 18px 18px; line-height: 1.65; color: var(--it-text, #1F2937); }
.qa-a a { color: var(--it-teal-700); font-weight: 600; }

/* 2026-09-25 — Full-nav fit for 1181-1359px: keep the complete bar with every label
   (no wording changes; Price a Policy stays top-level). Width comes from spacing,
   type, and the CTA size inside this band only. */
@media (min-width: 1181px) and (max-width: 1359px) {
  .nav-wrap { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .nav-items { gap: 10px; flex-wrap: nowrap; }
  .nav-items .nav-link { font-size: 14.5px; letter-spacing: -0.1px; padding: 6px 2px; white-space: nowrap; }
  .nav-cta { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
  .nav-logo .it-logo { width: 190px; height: auto; }
}