/*
  Legis360 brand layer — loads after theme.min.css in partials/head-css.php.
  This is a full visual replacement of the purchased template's look:
  color, type, buttons, cards, dropdowns, plus new bespoke components
  (hero panel, trust marquee, pipeline, stat band, video cards, logo tiles)
  used across the redesigned pages. Bootstrap's grid/utility classes and
  JS-driven components (offcanvas, dropdown, collapse) are kept as-is.
*/


:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --si-primary: #0019d4;
  --si-primary-rgb: 0, 25, 212;
  --si-primary-text-emphasis: #0019d4;
  --si-primary-bg-subtle: #e9ecff;
  --si-primary-border-subtle: #c7cdff;

  --legis-accent: #0ea86c;
  --legis-accent-rgb: 14, 168, 108;
  --legis-deep: #001849;
  --legis-ink: #0a1a33;
  --legis-line: #dde3ee;
  --legis-muted: #55607a;

  --si-font-sans-serif: 'Public Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --si-body-font-family: var(--si-font-sans-serif);
  --legis-font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --legis-font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  --si-border-radius: 14px;
  --si-border-radius-sm: 10px;
  --si-border-radius-lg: 18px;
  --si-border-radius-xl: 20px;
  --si-border-radius-xxl: 24px;
}

body { font-family: var(--si-font-sans-serif); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--legis-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1, .h1, .display-4, .display-5, .display-6 {
  text-transform: uppercase;
  letter-spacing: 0.002em;
  line-height: 1.02;
}
.eyebrow, p.fs-sm.fw-bold.text-primary.text-uppercase, p.fs-xl.fw-bold.text-primary.text-uppercase {
  font-family: var(--legis-font-mono) !important;
  letter-spacing: 0.1em;
}

/* ---------- Buttons: pill-shaped, brand colors ---------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
}
.btn-lg { padding: 0.85em 1.75em; }
.btn-icon.rounded-circle,
.btn-icon { border-radius: 50%; }

/* ---------- Cards & dropdowns: rounder, softer ---------- */
.card { border-radius: var(--si-border-radius-lg); }
.dropdown-menu {
  border-radius: var(--si-border-radius-lg);
  border-color: var(--legis-line);
  box-shadow: 0 20px 40px -16px rgba(10, 26, 51, .18);
  padding: 0.75rem;
}
.dropdown-item { border-radius: 10px; }
.rounded-3 { border-radius: var(--si-border-radius) !important; }

.badge.bg-success { background-color: var(--legis-accent) !important; }
.text-legis-accent { color: var(--legis-accent) !important; }
.bg-legis-accent { background-color: var(--legis-accent) !important; }

/* ================= New bespoke components ================= */

/* Hero panel — photo + live stat snapshot card */
.legis-hero-panel {
  position: relative;
  border-radius: var(--si-border-radius-xxl);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 30px 60px -24px rgba(0, 25, 212, .35);
}
.legis-hero-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.legis-hero-panel .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,24,73,.15) 0%, rgba(0,24,73,.85) 100%);
}
.legis-hero-panel .content {
  position: absolute; inset: 0; z-index: 2; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
}
.legis-hero-panel .tag {
  font-family: var(--legis-font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .85; margin-bottom: 14px;
}
.legis-hero-panel .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.legis-hero-panel .stat-row b { font-family: var(--legis-font-display); font-size: 2rem; display: block; line-height: 1; }
.legis-hero-panel .stat-row span { font-size: .78rem; opacity: .85; }

/* Trust rail marquee */
.legis-trust { padding-block: 28px; border-block: 1px solid var(--legis-line); }
.legis-trust .label {
  font-family: var(--legis-font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--legis-muted); margin-bottom: 16px;
}
.legis-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.legis-marquee-track { display: flex; gap: 48px; width: max-content; align-items: center; animation: legis-scroll 26s linear infinite; }
.legis-marquee-track img { height: 32px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .2s ease, opacity .2s ease; }
.legis-marquee-track img:hover { filter: grayscale(0); opacity: 1; }
@keyframes legis-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .legis-marquee-track { animation: none; } }

/* Pipeline (dark band, vertical dividers) */
.legis-pipeline-wrap { background: var(--legis-ink); color: #fff; border-radius: var(--si-border-radius-xxl); padding: 48px 32px; }
@media (min-width: 992px) { .legis-pipeline-wrap { padding: 56px 48px; } }
.legis-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.legis-pipeline .lstep { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.18); }
.legis-pipeline .lstep:first-child { padding-left: 0; border-left: 0; }
.legis-pipeline .n {
  width: 38px; height: 38px; border-radius: 50%; background: var(--legis-deep);
  border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center;
  font-family: var(--legis-font-mono); font-size: .78rem; margin-bottom: 16px;
}
.legis-pipeline h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; color: #fff; }
.legis-pipeline p { font-size: .88rem; color: #b7c0da; margin: 0; }
@media (max-width: 860px) {
  .legis-pipeline { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .legis-pipeline .lstep:nth-child(2) { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.18); }
  .legis-pipeline .lstep:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .legis-pipeline { grid-template-columns: 1fr; }
  .legis-pipeline .lstep, .legis-pipeline .lstep:nth-child(2) { padding-left: 0; border-left: 0; }
}

/* Stat band */
.legis-stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--legis-line); border: 1px solid var(--legis-line); border-radius: var(--si-border-radius-lg); overflow: hidden; }
.legis-stat-band > div { background: #fff; padding: 30px 22px; }
[data-bs-theme="dark"] .legis-stat-band > div { background: var(--si-body-bg, #0b0f19); }
.legis-stat-band b { font-family: var(--legis-font-display); font-size: 2rem; color: var(--si-primary); display: block; }
.legis-stat-band span { font-size: .85rem; color: var(--legis-muted); }
@media (max-width: 900px) { .legis-stat-band { grid-template-columns: 1fr 1fr; } }

/* Video cards */
.legis-video-card { display: block; text-decoration: none; color: inherit; border-radius: var(--si-border-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--legis-line); transition: transform .15s ease; }
.legis-video-card:hover { transform: translateY(-2px); }
.legis-video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--legis-ink); }
.legis-video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.legis-video-thumb .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,24,73,.1), rgba(10,24,73,.55)); }
.legis-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -6px rgba(0,0,0,.5); }
.legis-play-btn::after { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--legis-deep); margin-left: 4px; }
.legis-video-tag { position: absolute; z-index: 2; top: 12px; left: 12px; font-family: var(--legis-font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(10,24,73,.55); padding: 4px 10px; border-radius: 999px; }
.legis-video-card .body { padding: 16px 18px 20px; }
.legis-video-card .body b { display: block; font-family: var(--legis-font-display); text-transform: none; font-size: 1.05rem; margin-bottom: 4px; }
.legis-video-card .body span { font-size: .8rem; color: var(--legis-muted); }

/* Logo tiles (partners/funders grid) */
.legis-logo-tile { background: #fff; border: 1px solid var(--legis-line); border-radius: var(--si-border-radius); height: 92px; display: flex; align-items: center; justify-content: center; padding: 16px; }
.legis-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Section eyebrow used outside Bootstrap's existing "fs-sm fw-bold text-primary text-uppercase" pattern */
.legis-eyebrow {
  font-family: var(--legis-font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--legis-accent); display: flex; align-items: center; gap: .5em; margin-bottom: 10px;
}
.legis-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--legis-accent); box-shadow: 0 0 0 3px rgba(var(--legis-accent-rgb), .22); }

/* Theme toggle (reskins the existing .mode-switch control as an icon button) */
.mode-switch { position: relative; width: 38px; height: 38px; }
.mode-switch .form-check-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--legis-line); background: #fff; opacity: 1;
  background-image: none; appearance: none;
}
.mode-switch .form-check-input::before {
  content: ""; position: absolute; inset: 9px; background: var(--legis-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mode-switch .form-check-input:checked::before {
  background: #ffba08;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mode-switch .form-check-label { display: none !important; }

/* Brand mark (logo chip) used in navbar/footer */
.legis-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--si-primary), var(--legis-deep));
  display: inline-flex; align-items: center; justify-content: center; padding: 6px; flex: none;
}
.legis-mark img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- "In action" photo grid ---------- */
.legis-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 20px; }
.legis-gallery .tile { position: relative; border-radius: var(--si-border-radius-lg); overflow: hidden; background: var(--legis-ink); margin: 0; }
.legis-gallery .tile.span-2 { grid-column: span 2; }
.legis-gallery .tile.tall { grid-row: span 2; }
.legis-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.legis-gallery .tile:hover img { transform: scale(1.04); }
.legis-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 18px; color: #fff;
  font-weight: 500; font-size: 1.02rem; line-height: 1.3;
  background: linear-gradient(180deg, rgba(0,24,73,0) 0%, rgba(0,24,73,.82) 100%);
}
@media (max-width: 991px) { .legis-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }
@media (max-width: 560px) { .legis-gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; } .legis-gallery .tile.span-2, .legis-gallery .tile.tall { grid-column: auto; grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { .legis-gallery img { transition: none; } }

/* ---------- Reference-style link list (media coverage & reports) ---------- */
.legis-reflist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.legis-reflist li { border-top: 1px solid var(--legis-line); }
.legis-reflist a { display: flex; gap: 14px; padding: 22px 0; text-decoration: none; color: inherit; }
.legis-reflist .dot { flex: none; width: 24px; height: 24px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--legis-accent); display: flex; align-items: center; justify-content: center; }
.legis-reflist .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--legis-accent); }
.legis-reflist b { display: block; font-family: var(--si-font-sans-serif); font-weight: 600; font-size: 1.12rem; line-height: 1.35; margin-bottom: 4px; }
.legis-reflist a:hover b { color: var(--si-primary); text-decoration: underline; text-underline-offset: 3px; }
.legis-reflist span.meta { font-size: .9rem; color: var(--legis-muted); }
@media (max-width: 860px) { .legis-reflist { grid-template-columns: 1fr; } }

/* Uniform card images (Our Solutions) */
.legis-card-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--si-border-radius-lg) var(--si-border-radius-lg) 0 0; }

/* ---------- Brand blue on buttons and links (the template hard-codes its old indigo) ---------- */
:root, [data-bs-theme="light"] {
  --si-link-color: #0019d4; --si-link-color-rgb: 0, 25, 212;
  --si-link-hover-color: #0014b0; --si-link-hover-color-rgb: 0, 20, 176;
}
.btn-primary {
  --si-btn-color: #fff; --si-btn-bg: #0019d4; --si-btn-border-color: #0019d4;
  --si-btn-hover-color: #fff; --si-btn-hover-bg: #0a2be0; --si-btn-hover-border-color: #0a2be0;
  --si-btn-active-color: #fff; --si-btn-active-bg: #0014b0; --si-btn-active-border-color: #0014b0;
  --si-btn-focus-shadow-rgb: 0, 25, 212;
  --si-btn-disabled-color: #fff; --si-btn-disabled-bg: #0019d4; --si-btn-disabled-border-color: #0019d4;
}
.btn-outline-primary {
  --si-btn-color: #0019d4; --si-btn-border-color: #0019d4;
  --si-btn-hover-color: #fff; --si-btn-hover-bg: #0019d4; --si-btn-hover-border-color: #0019d4;
  --si-btn-active-color: #fff; --si-btn-active-bg: #0014b0; --si-btn-active-border-color: #0014b0;
  --si-btn-focus-shadow-rgb: 0, 25, 212;
  --si-btn-disabled-color: #0019d4; --si-btn-disabled-border-color: #0019d4;
}
[data-bs-theme="dark"] {
  --si-primary: #7f92ff; --si-primary-rgb: 127, 146, 255; --si-primary-text-emphasis: #a3b0ff;
  --si-link-color: #9aa9ff; --si-link-color-rgb: 154, 169, 255;
  --si-link-hover-color: #c3ccff; --si-link-hover-color-rgb: 195, 204, 255;
}
[data-bs-theme="dark"] .btn-primary {
  --si-btn-bg: #3a50ff; --si-btn-border-color: #3a50ff; --si-btn-hover-bg: #5568ff; --si-btn-hover-border-color: #5568ff;
  --si-btn-active-bg: #2a3fe0; --si-btn-active-border-color: #2a3fe0; --si-btn-disabled-bg: #3a50ff; --si-btn-disabled-border-color: #3a50ff;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --si-btn-color: #9aa9ff; --si-btn-border-color: #9aa9ff; --si-btn-hover-color: #001849; --si-btn-hover-bg: #9aa9ff;
  --si-btn-hover-border-color: #9aa9ff; --si-btn-active-color: #001849; --si-btn-active-bg: #c3ccff; --si-btn-disabled-color: #9aa9ff; --si-btn-disabled-border-color: #9aa9ff;
}

/* ---------- Primary utilities the template hard-codes in indigo ---------- */
.text-primary { color: rgb(var(--si-primary-rgb)) !important; }
.border-primary { border-color: rgba(var(--si-primary-rgb), .35) !important; }
.shadow-primary { box-shadow: 0 .5rem 1.125rem -.5rem rgba(var(--si-primary-rgb), .9) !important; }
.bg-faded-primary { background-color: rgba(var(--si-primary-rgb), .12) !important; }

/* ---------- Readability and small fixes found on the phone review ---------- */
.text-muted { color: var(--legis-muted) !important; }
[data-bs-theme="dark"] { --legis-muted: #a9b3c9; --legis-line: #243249; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { word-spacing: .12em; }
.mode-switch .form-check-input { background-color: #fff !important; box-shadow: none !important; }
[data-bs-theme="dark"] .mode-switch .form-check-input { background-color: #16213a !important; border-color: #2b3a5e !important; }

/* Skip layout and paint work for sections far below the first screen */
.legis-defer { content-visibility: auto; contain-intrinsic-size: auto 720px; }

/* Resources grid: every cover the same square size, whatever the original shape */
.card-portfolio .card-img { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--si-border-radius-lg) var(--si-border-radius-lg) 0 0; }
.card-portfolio .card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.card-portfolio .card-portfolio-meta { opacity: 1 !important; }
.card-portfolio .card-portfolio-meta > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; line-height: 1.5; }