/* ═══════════════════════════════════════════
   IQ COMPONENTS — Supplemental CSS
   For Marquee Insights Microsoft IQ extension
   ═══════════════════════════════════════════ */

/* ── Tighter vertical rhythm ── */
:root {
  --section-pad: clamp(52px, 6vw, 80px);
}
.section-header {
  margin-bottom: 32px;
}

/* ── Breadcrumbs ── */
.breadcrumbs {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  padding-top: 100px;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-muted, #6b6b6b);
}
.breadcrumbs li::after {
  content: '›';
  margin-left: 6px;
}
.breadcrumbs li:last-child::after {
  content: '';
}
.breadcrumbs a {
  color: var(--mi-blue, #006e96);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Reduce hero top padding when breadcrumbs already cleared the fixed header */
.breadcrumbs + .page-hero {
  padding-top: clamp(32px, 4vw, 56px);
}

/* ── IQ Cards Grid ── */
.iq-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 32px;
}
.iq-card {
  background: var(--white, #fff);
  border: 1px solid var(--mi-putty-60, #e6ddd7);
  border-radius: 16px;
  padding: 32px 28px;
  transition: border-color 0.3s, transform 0.3s;
}
.iq-card:hover {
  border-color: var(--mi-orange-40, #f9b18b);
  transform: translateY(-3px);
}
.iq-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink, #1a1a1a);
}
.iq-card-tagline {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mi-orange, #f05a28);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

/* ── Comparison Table ── */
.comparison-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border-radius: 12px;
  border: 1px solid var(--mi-putty-60, #e6ddd7);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 700px;
}
.comparison-table thead {
  background: var(--ink, #1a1a1a);
  color: var(--white, #fff);
}
.comparison-table th {
  padding: 14px 18px;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
}
.comparison-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--mi-putty-40, #f0e9e3);
  line-height: 1.55;
  vertical-align: top;
}
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.comparison-table tbody tr:nth-child(even) {
  background: var(--mi-putty-10, #f9f6f3);
}
.comparison-table td:first-child {
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  color: var(--ink, #1a1a1a);
  min-width: 160px;
}

/* ── Use/Don't Use Blocks ── */
.use-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.use-block {
  border-radius: 12px;
  padding: 28px 24px;
}
.use-block h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.use-block ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.use-block li {
  font-size: 0.92rem;
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
}
.use-block-do {
  background: rgba(152, 209, 228, 0.12);
  border: 1px solid rgba(0, 110, 150, 0.15);
}
.use-block-do li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--mi-blue, #006e96);
  font-weight: 700;
}
.use-block-dont {
  background: rgba(240, 90, 40, 0.06);
  border: 1px solid rgba(240, 90, 40, 0.12);
}
.use-block-dont li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: var(--mi-orange, #f05a28);
  font-weight: 700;
}

/* ── Decision Tree ── */
.decision-tree {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}
.decision-block {
  background: var(--white, #fff);
  border: 1px solid var(--mi-putty-60, #e6ddd7);
  border-radius: 16px;
  padding: 32px;
  border-left: 4px solid var(--mi-blue, #006e96);
}
.decision-block h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--mi-blue, #006e96);
}

/* ── Engagement Grid ── */
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.engagement-card {
  background: var(--white, #fff);
  border: 1px solid var(--mi-putty-60, #e6ddd7);
  border-radius: 16px;
  padding: 28px 24px;
  transition: border-color 0.3s;
}
.engagement-card:hover {
  border-color: var(--mi-orange-40, #f9b18b);
}
.engagement-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

/* ── Related Cards ── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.related-card {
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border: 1px solid var(--mi-putty-60, #e6ddd7);
  border-radius: 16px;
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.related-card:hover {
  border-color: var(--mi-orange-40, #f9b18b);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  text-decoration: none;
}
.related-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--ink, #1a1a1a);
}
.related-card p {
  font-size: 0.92rem;
  color: var(--ink-muted, #6b6b6b);
  flex-grow: 1;
}
.related-card-link {
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mi-blue, #006e96);
}

/* ── Authority Block ── */
.authority-block {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  max-width: 680px;
}
.authority-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.authority-title {
  font-size: 0.9rem;
  color: var(--ink-muted, #6b6b6b);
  margin-bottom: 4px;
}
.authority-credential {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mi-orange, #f05a28);
  margin-bottom: 10px;
}
.authority-desc {
  font-size: 0.9rem;
  color: var(--ink-muted, #6b6b6b);
  line-height: 1.65;
  margin-bottom: 10px;
}
.authority-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mi-blue, #006e96);
}

/* ── Freshness Dates ── */
.freshness-dates {
  display: flex;
  gap: 20px;
  font-size: 0.82rem;
  color: var(--ink-muted, #6b6b6b);
  margin-top: 12px;
}

/* ── Mobile Nav Open State ── */
.nav-links.nav-open {
  display: flex !important;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  flex-direction: column;
  background: rgba(250,248,246,0.98);
  backdrop-filter: blur(16px);
  padding: 24px;
  gap: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  z-index: 99;
}

/* ── Grid helpers ── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

/* ── Dark section card text fix ── */
.section-dark .content-card h3 { color: var(--ink, #1a1a1a); }
.section-dark .content-card p { color: var(--ink-muted, #6b6b6b); }
.section-dark .content-card { background: var(--white, #fff); }

/* ── Enhanced Page Hero Accent ── */
/* Overrides the faint default stripes with a stronger branded graphic */
.page-hero::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -8%;
  width: 50%;
  height: 140%;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 36px,
      rgba(240, 90, 40, 0.07) 36px,
      rgba(240, 90, 40, 0.07) 42px,
      transparent 42px,
      transparent 64px,
      rgba(240, 90, 40, 0.04) 64px,
      rgba(240, 90, 40, 0.04) 68px
    );
  opacity: 1;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, black 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, black 30%, transparent 72%);
}

/* Concentric arc accent — echoes the logo curve */
.page-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 6%;
  width: 340px;
  height: 340px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 3px solid rgba(240, 90, 40, 0.08);
  box-shadow:
    0 0 0 28px rgba(240, 90, 40, 0.04),
    0 0 0 64px rgba(0, 110, 150, 0.03),
    0 0 0 110px rgba(0, 110, 150, 0.015);
  pointer-events: none;
  z-index: 0;
}

/* Ensure hero content stays above the accent */
.page-hero .container { position: relative; z-index: 1; }
.page-hero .hero-content { position: relative; z-index: 1; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .iq-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .use-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .iq-cards-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .engagement-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .freshness-dates { flex-direction: column; gap: 4px; }
  .breadcrumbs { padding-top: 80px; }

  /* Tone down hero accent on mobile */
  .page-hero::before {
    width: 200px;
    height: 200px;
    right: -10%;
    box-shadow:
      0 0 0 20px rgba(240, 90, 40, 0.03),
      0 0 0 48px rgba(0, 110, 150, 0.02);
  }
  .page-hero::after {
    width: 60%;
    right: -15%;
    opacity: 0.7;
  }
}