/* obx.click — shared styles for the interactive pieces that were React state
   in authoring and are now native HTML + CSS on the prerendered static site.
   Loaded on every page (injected at build). Structural/visual inline styles
   stay on the elements themselves; this file only holds what needs :checked /
   [open] / sibling state that inline styles can't express. */

.obxf-hide { display: none !important; }

/* ---- CtaButton hover (base styles are inline; these add hover for the
   prerendered static site, which ships no React). ---- */
.obxbtn:hover { transform: translateY(-2px); }
.obxbtn:hover .obxarrow { transform: translateX(6px); }
.obxb-primary:hover { background: #0e2135 !important; box-shadow: 0 12px 26px rgba(14,26,38,.30) !important; }
.obxb-light:hover { background: #ffffff !important; box-shadow: 0 12px 26px rgba(0,0,0,.28) !important; }
.obxb-ghost:hover { background: rgba(23,50,74,0.05) !important; border-color: #17324A !important; }
.obxb-ghost-light:hover { background: rgba(238,241,242,0.10) !important; border-color: #EEF1F2 !important; }
.obxb-accent:hover { background: #A83A32 !important; box-shadow: 0 14px 30px rgba(196,69,60,.40) !important; }

/* ---- Visible keyboard focus (accent ring reads on both light and navy). ---- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #C4453C; outline-offset: 3px; border-radius: 2px;
}

/* ---- Restrained scroll reveal (added by obx.js only when motion is OK) ---- */
.obx-reveal-el { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.obx-reveal-el.obx-reveal-in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .obx-reveal-el { opacity: 1 !important; transform: none !important; }
}

/* ---- Budget radio chips (Contact) ---- */
.obxf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.obxf-chip { position: relative; cursor: pointer; }
.obxf-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.obxf-chip span {
  display: inline-block; font-family: Inter, sans-serif; font-size: 14px; font-weight: 500;
  padding: 10px 15px; border-radius: 2px; border: 1px solid rgba(140,132,120,0.5);
  background: #EEF1F2; color: #3a4550; transition: all .18s ease;
}
.obxf-chip input:checked + span { border-color: #17324A; background: #17324A; color: #EEF1F2; }
.obxf-chip input:focus-visible + span { outline: 2px solid #17324A; outline-offset: 2px; }

/* ---- Contact mini-FAQ accordion (native <details>) ---- */
details.obxacc { background: #ffffff; border: 1px solid rgba(140,132,120,0.32); border-radius: 2px; overflow: hidden; }
details.obxacc summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 20px 24px; cursor: pointer; }
details.obxacc summary::-webkit-details-marker { display: none; }
.obxacc-q { font-family: Zodiak, serif; font-weight: 700; font-size: 18px; color: #17324A; }
.obxacc-icon { font-family: Inter, sans-serif; font-size: 22px; color: #C4453C; line-height: 1;
  transition: transform .2s ease; flex: 0 0 auto; }
details.obxacc[open] .obxacc-icon { transform: rotate(45deg); }
.obxacc-a { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.65; color: #3a4550; }

/* ---- Checklist scoring rows (native checkboxes) ---- */
.obxc-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 2px;
  border-bottom: 1px solid rgba(140,132,120,0.28); cursor: pointer; user-select: none; }
.obxc-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.obxc-box { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
  line-height: 1; transition: all .15s ease; border: 2px solid #8C8478; background: transparent; color: #EEF1F2; }
.obxc-row input:checked + .obxc-box { border-color: #17324A; background: #17324A; }
.obxc-row input:checked + .obxc-box::after { content: '\2713'; }
.obxc-row input:focus-visible + .obxc-box { outline: 2px solid #17324A; outline-offset: 2px; }
.obxc-text { font-size: 16px; line-height: 1.55; transition: color .15s ease; color: #2b3640; }
.obxc-row input:checked ~ .obxc-text { color: #a6adb3; text-decoration: line-through; }