/* Blueprint Safety: Stage 1 design system, Kadence Free + core blocks.
   Paste into Appearance > Customize > Additional CSS on STAGING.
   Add bps-design to each page's outer Group block; add component classes
   to their own Group/Button blocks. Avoid block-specific color/spacing
   overrides when using these classes. See the plan for the class map.
   Local font declarations are in fonts-wordpress.css. */

:root {
  --bps-ink: #03112C;
  --bps-blue: #184EB8;
  --bps-blue-hover: #0F3077;
  --bps-text: #3E3C3D;
  --bps-muted: #555555;
  --bps-border: #777576;
  --bps-surface: #E0DEDF;
  --bps-paper: #EAF0F8;
  --bps-paper-edge: #CAD5E4;
  --bps-white: #ffffff;
  --bps-silver: #c9cace;
  --bps-lime: #c7e86b;
  --bps-error: #b42318;
  --bps-success: #03112C;
  --bps-s1: 8px;
  --bps-s2: 16px;
  --bps-s3: 24px;
  --bps-s4: 32px;
  --bps-s5: 40px;
  --bps-s6: 48px;
  --bps-s8: 64px;
  --bps-s10: 80px;
  --bps-s12: 96px;
  --bps-radius: 8px;
  --bps-shadow: 0 8px 24px rgb(3 17 44 / 8%);
  --bps-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --bps-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

/* Final font setup: select system font fallbacks in the Customizer to
   avoid duplicate remote font loading; these declarations use local faces. */
body, .header-navigation, .mobile-navigation, .site-footer { font-family: var(--bps-body); }
h1,h2,h3,h4,h5,h6 { font-family: var(--bps-display); }
.header-navigation a, .mobile-navigation a, .site-footer a { min-height: 48px; display: inline-flex; align-items: center; }
.bps-design { color: var(--bps-text); font: 400 1.125rem/1.6 var(--bps-body); }
.bps-design *, .bps-design *::before, .bps-design *::after { box-sizing: border-box; }
.bps-design :where(h1,h2,h3,h4,h5,h6) {
  color: var(--bps-ink); font-family: var(--bps-display);
  font-weight: 700; line-height: 1.1; letter-spacing: 0;
  margin-block: 0 24px; overflow-wrap: break-word; text-wrap: balance;
}
.bps-design h1 { font-size: clamp(2.5rem, 1.65rem + 3vw, 4.5rem); }
.bps-design h2 { font-size: clamp(2rem, 1.35rem + 2vw, 3rem); }
.bps-design h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.bps-design h4 { font-size: 1.5rem; }
.bps-design h5 { font-size: 1.25rem; }
.bps-design h6 { font-size: 1.125rem; }
.bps-design p { margin-block: 0 24px; }
.bps-design :where(ul,ol) { padding-inline-start: 24px; }
.bps-design li + li { margin-top: 8px; }
.bps-design a { color: var(--bps-blue); text-underline-offset: .2em; }
.bps-design a:hover { color: var(--bps-blue-hover); }
.bps-design :where(a,button,input,select,textarea,summary):focus-visible,
.bps-mobile-actions a:focus-visible {
  outline: 3px solid var(--bps-blue); outline-offset: 4px;
}
.bps-design :where(button,input,select,textarea) { font: inherit; }
.bps-design :where(button,select,input:not([type="checkbox"]):not([type="radio"]),summary) { min-height: 48px; }
.bps-design input[type="checkbox"], .bps-design input[type="radio"] { width: 24px; height: 24px; }
.bps-design label { display: block; font-weight: 600; margin-bottom: 8px; }
.bps-design :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  max-width: 100%; width: 100%; padding: 12px 16px;
  border: 1px solid var(--bps-border); border-radius: 4px;
  color: var(--bps-ink); background: var(--bps-white);
}
.bps-design :where(input,textarea)::placeholder { color: var(--bps-muted); opacity: 1; }
.bps-design [aria-invalid="true"] { border: 2px solid var(--bps-error); }
.bps-design .bps-error { color: var(--bps-error); font-weight: 600; }
.bps-design .bps-success { color: var(--bps-success); font-weight: 600; }
.bps-design img { max-width: 100%; height: auto; }

.bps-design .bps-shell { width: min(100% - 32px, 1200px); margin-inline: auto; }
.bps-design .bps-section { padding-block: 48px; }
.bps-design .bps-paper { background: var(--bps-paper); }
.bps-design .bps-section.bps-paper { border-block: 1px solid var(--bps-paper-edge); }
/* The four-step process gets its own blueprint-tinted band, distinct from
   the general paper sections, so long pages have a purposeful color rhythm. */
@supports selector(.bps-section:has(.bps-grid-4)) {
  .bps-design .bps-section:has(.bps-grid-4) {
    background: #E3EAF4; border-block: 1px solid var(--bps-paper-edge);
  }
  .bps-design .bps-section:has(.bps-grid-4) .bps-card { border-top: 3px solid var(--bps-blue); }
}
.bps-design .bps-prose { max-width: 68ch; }
.bps-design .bps-kicker { font: 600 1rem/1.5 var(--bps-body); color: var(--bps-blue); margin-bottom: 16px; }
.bps-design .bps-small { font-size: 1rem; line-height: 1.5; color: var(--bps-muted); }
.bps-design .bps-dark { background: var(--bps-ink); color: var(--bps-white); }
.bps-design .bps-dark :where(h1,h2,h3,h4,h5,h6,p,a,.bps-small) { color: var(--bps-white); }
.bps-design .bps-dark :where(.bps-kicker,.bps-accent) { color: var(--bps-lime); }
.bps-design .bps-dark :where(a,button,summary):focus-visible { outline-color: var(--bps-lime); }

/* Use these grid classes on core Group blocks. For Kadence Row Layout,
   enter the documented column counts in the Row Layout controls instead. */
.bps-design :where(.bps-grid-2,.bps-grid-3,.bps-grid-4,.bps-hero-grid) { display: grid; gap: 24px; }
.bps-design :where(.bps-grid-2,.bps-grid-3,.bps-grid-4,.bps-hero-grid) > * { min-width: 0; }
.bps-design .bps-card {
  padding: 24px; border: 1px solid var(--bps-surface);
  border-radius: var(--bps-radius); background: var(--bps-white);
  color: var(--bps-text); box-shadow: none;
}
.bps-design .bps-card :where(h2,h3,h4) { color: var(--bps-ink); }
.bps-design .bps-card p { color: var(--bps-text); }
.bps-design .bps-card :last-child { margin-bottom: 0; }
.bps-design .bps-card-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
.bps-design .bps-document {
  background: var(--bps-white); color: var(--bps-ink);
  border: 1px solid var(--bps-border); border-radius: 4px;
  padding: 24px; box-shadow: var(--bps-shadow);
}
.bps-design .bps-document :where(h2,h3,p) { color: var(--bps-ink); }
.bps-design .bps-steps { list-style: decimal; padding-inline-start: 32px; }
.bps-design .bps-steps li { padding-left: 8px; margin-bottom: 24px; }
.bps-design .bps-steps li::marker { color: var(--bps-blue); font-weight: 700; }
.bps-design .bps-callout { border-inline-start: 4px solid var(--bps-blue); background: var(--bps-paper); padding: 24px; }
.bps-design .bps-faq { border-bottom: 1px solid var(--bps-border); padding-block: 8px; }
.bps-design .bps-faq summary { cursor: pointer; font-weight: 600; color: var(--bps-ink); padding: 12px 0; }
.bps-design .bps-faq p { padding-block: 8px; }
.bps-design .bps-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Classes go on a core Button block, or directly on a link for HTML demos.
   These selectors intentionally win over the base link colors above. */
.bps-design :where(.bps-primary,.bps-secondary,.bps-accent-button).wp-block-button { margin: 0; }
.bps-design :is(a.bps-primary,a.bps-secondary,a.bps-accent-button,
  .bps-primary .wp-block-button__link,.bps-secondary .wp-block-button__link,
  .bps-accent-button .wp-block-button__link) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px; border: 2px solid transparent;
  border-radius: 4px; font: 600 1.125rem/1.25 var(--bps-body);
  text-decoration: none; text-align: center;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.bps-design :is(a.bps-primary,.bps-primary .wp-block-button__link) { color: var(--bps-white); background: var(--bps-blue); }
.bps-design :is(a.bps-primary:hover,.bps-primary .wp-block-button__link:hover) { color: var(--bps-white); background: var(--bps-blue-hover); }
.bps-design :is(a.bps-secondary,.bps-secondary .wp-block-button__link) { color: var(--bps-blue); background: var(--bps-white); border-color: var(--bps-blue); }
.bps-design :is(a.bps-secondary:hover,.bps-secondary .wp-block-button__link:hover) { color: var(--bps-ink); background: var(--bps-surface); border-color: var(--bps-ink); }
.bps-design :is(a.bps-accent-button,.bps-accent-button .wp-block-button__link) { color: var(--bps-ink); background: var(--bps-lime); }
.bps-design :is(a.bps-accent-button:hover,.bps-accent-button .wp-block-button__link:hover) { color: var(--bps-ink); background: var(--bps-white); }
.bps-design .bps-dark :is(a.bps-primary,.bps-primary .wp-block-button__link) { background: var(--bps-blue); color: var(--bps-white); border-color: var(--bps-white); }
.bps-design .bps-dark :is(a.bps-primary:hover,.bps-primary .wp-block-button__link:hover) { background: var(--bps-blue-hover); }
.bps-design .bps-dark :is(a.bps-secondary,.bps-secondary .wp-block-button__link) { color: var(--bps-blue); background: var(--bps-white); border-color: var(--bps-white); }
.bps-design .bps-dark :is(a.bps-secondary:hover,.bps-secondary .wp-block-button__link:hover) { color: var(--bps-ink); background: var(--bps-surface); }
.bps-design .bps-dark :is(a.bps-accent-button,.bps-accent-button .wp-block-button__link) { color: var(--bps-ink); background: var(--bps-lime); }
.bps-design .bps-dark :is(a.bps-accent-button:hover,.bps-accent-button .wp-block-button__link:hover) { color: var(--bps-ink); background: var(--bps-white); }

/* Implement as two footer links inside one Group block, class
   bps-mobile-actions. body gets bps-mobile-bar-enabled only on marketing
   pages. Do not show this bar on cart, checkout, account or form success. */
.bps-mobile-actions { display: none; }
.bps-mobile-actions a { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 8px 16px; font: 600 1rem/1.25 var(--bps-body); text-decoration: none; }
@media (max-width: 767px) {
  body.bps-mobile-bar-enabled { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .bps-mobile-actions {
    display: grid; grid-template-columns: 1fr 2fr; gap: 8px;
    position: fixed; inset: auto 0 0; z-index: 90;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--bps-white); border-top: 1px solid var(--bps-border);
  }
  .bps-mobile-actions a:first-child { color: var(--bps-blue); border: 1px solid var(--bps-blue); border-radius: 4px; }
  .bps-mobile-actions a:last-child { color: var(--bps-white); background: var(--bps-blue); border-radius: 4px; }
  .bps-design .bps-actions { align-items: stretch; }
  .bps-design .bps-actions > .wp-block-button { width: 100%; }
  .bps-design .bps-actions .wp-block-button__link { width: 100%; }
  .bps-design :where(input,select,textarea) { font-size: 1.125rem; }
}
@media (max-width: 767px) and (max-height: 480px) {
  body.bps-mobile-bar-enabled { padding-bottom: 0; }
  .bps-mobile-actions { display: none; }
}
@media (min-width: 768px) {
  .bps-design .bps-shell { width: min(100% - 48px, 1200px); }
  .bps-design .bps-section { padding-block: 64px; }
  .bps-design :where(.bps-grid-2,.bps-grid-3,.bps-grid-4) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bps-design .bps-card { padding: 32px; }
}
@media (min-width: 1024px) {
  .bps-design .bps-shell { width: min(100% - 64px, 1200px); }
  .bps-design .bps-section { padding-block: 80px; }
  .bps-design .bps-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bps-design .bps-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .bps-design .bps-hero-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 48px; align-items: center; }
}

/* Optional native scroll movement: content is always visible; no JS,
   opacity hiding, parallax or animation on hero/LCP images. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bps-design .bps-reveal { animation: bps-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 25%; }
    @keyframes bps-rise { from { transform: translateY(8px); } to { transform: translateY(0); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bps-design *, .bps-design *::before, .bps-design *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .bps-design :where(a,button,input,select,textarea,summary):focus-visible,
  .bps-mobile-actions a:focus-visible { outline: 3px solid Highlight; }
  .bps-design .bps-card { border-color: CanvasText; }
}
@media print {
  .bps-mobile-actions { display: none !important; }
  body.bps-mobile-bar-enabled { padding-bottom: 0; }
  .bps-design .bps-dark { color: #000; background: #fff; }
  .bps-design .bps-dark :where(h1,h2,h3,p,a) { color: #000; }
}