/* Logo options preview (css/logos.css + js/logos.js): a "Try logos" button that swaps the header lockup, footer logo and
 * favicon between today's logo and the five new logo directions. Pick with the button or a link: ?logo=clear-path.
 * WordPress build: a preview-only setting, off at launch (don't enqueue these two files).
 * Every colour is a palette token, so each logo follows "Try colors" too. */

/* ---------- logo colours (inline SVG) ---------- */
.lg-mark .c-p, .lg-word .c-p, .ft-logo .c-p { fill: var(--primary); }
.lg-mark .c-d { fill: var(--deep); }
.lg-word .c-i { fill: var(--ink); }
.lg-word .c-s { fill: var(--brand-sub); }
.lg-word .c-r { fill: var(--line-2); }
.lg-mark .c-a, .lg-word .c-a, .ft-logo .c-a { fill: var(--accent); }
.lg-word .s-a, .ft-logo .s-a { stroke: var(--accent); }
.lg-word .s-p { stroke: var(--primary); }
.ft-logo .f-w { fill: var(--on-deep); }
.ft-logo .s-w { stroke: var(--on-deep); }
.ft-logo .s-op { stroke: var(--on-primary); }
.ft-logo .f-s { fill: var(--on-deep-soft); }
.ft-logo .f-l { fill: var(--on-deep-link); }
.ft-logo .f-f { fill: var(--on-deep-faint); }

/* before the first paint: while a new logo is chosen but not yet swapped in, don't flash the old one */
html[data-logo] .brand:not([data-lg]) .brand-ic, html[data-logo] .brand:not([data-lg]) .brand-word { visibility: hidden; }
html[data-logo] .ft-brand:not([data-lg]) > img { visibility: hidden; }

/* ---------- header lockup: the mark spans the wordmark + NMLS block, like today's H ---------- */
.brand[data-lg] { --lg-word-h: calc(var(--logo-h) - 21px); }
.brand[data-lg] .brand-ic { width: auto; }
.brand[data-lg] .brand-ic .lg-mark { display: block; height: 100%; width: auto; }
.brand[data-lg] .brand-txt { justify-content: center; }
.brand[data-lg] .brand-word .lg-word { display: block; height: var(--lg-word-h); width: auto; }
.brand.lg-nomark .brand-ic { display: none; }
.brand.lg-nomark { --lg-word-h: calc(var(--logo-h) - 19px); }
.brand[data-lg] .brand-nmls { margin-top: 4px; }
@media (max-width: 379px) {
  .brand[data-lg] { --logo-h: 48px; }
}

/* ---------- footer: the stacked white lockup ---------- */
.ft-brand .ft-logo { display: block; height: 112px; width: auto; max-width: 100%; margin-bottom: 16px; }

/* ---------- the "Try logos" button and panel (bottom-left, stacked just above "Try colors") ---------- */
.lgo { position: fixed; left: 20px; bottom: 78px; z-index: 54; font-family: var(--font-b); }   /* under the colors panel (55) when that is open */
.lgo[hidden] { display: none; }
.lgo-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 5px 16px 5px 5px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); font: 600 .925rem/1 var(--font-h); }
.lgo-btn:hover, .lgo-btn[aria-expanded="true"] { border-color: var(--primary); }
.lgo-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--primary); flex: none; }
.lgo-ic svg, .lgo-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lgo-panel { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - var(--header-h) - 148px); overflow-y: auto;   /* stops below the header, so the swapped logo stays in view */
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 16px; }
.lgo-panel[hidden] { display: none; }
.lgo-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lgo-panel h2 { font: 700 1.1rem/1.2 var(--font-h); color: var(--ink); margin: 0; }
.lgo-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none; }
.lgo-x:hover { background: var(--tint); }
.lgo-panel > p { margin: 4px 0 12px; font-size: .875rem; color: var(--muted); line-height: 1.4; }
.lgo-list { display: grid; gap: 6px; }
.lgo-opt { width: 100%; display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink); font: 600 .95rem/1.2 var(--font-b); }
.lgo-opt:hover { border-color: var(--line-2); background: var(--tint-2); }
.lgo-opt[aria-checked="true"] { border-color: var(--primary); background: var(--tint); }
.lgo-opt .nm-row { display: flex; align-items: center; gap: 8px; }
.lgo-opt .cur { margin-left: auto; font: 700 .7rem/1 var(--font-b); letter-spacing: .05em; text-transform: uppercase; color: var(--on-primary); background: var(--primary); padding: 4px 7px; border-radius: 6px; visibility: hidden; }
.lgo-opt[aria-checked="true"] .cur { visibility: visible; }
.lgo-opt .idea { font: 400 .8rem/1.35 var(--font-b); color: var(--muted); }
/* the small lockup previews (same SVG as the header, so they follow the palette) */
.lgo-pv { display: flex; align-items: center; gap: 6px; height: 34px; }
.lgo-pv .lg-mark { height: 34px; width: auto; flex: none; }
.lgo-pv .lg-word { height: 21px; width: auto; flex: none; }
.lgo-pv-nomark .lg-word { height: 24px; }
.lgo-pv-cur img { height: 34px; width: auto; flex: none; }
.lgo-pv-cur .pw { display: flex; flex-direction: column; gap: 4px; }
.lgo-pv-cur .pw b:first-child { font: 800 .95rem/.8 var(--font-h); letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.lgo-pv-cur .pw b:last-child { font: 600 .48rem/1 var(--font-h); letter-spacing: .32em; text-transform: uppercase; color: var(--brand-sub); }
.lgo-panel > .lgo-note { font-size: .8rem; margin: 12px 0 0; }
/* phones: a 44px round icon, just above the colors icon */
@media (max-width: 719px) {
  .lgo { left: 12px; bottom: 70px; }
  .lgo-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .lgo-txt { display: none; }
  .lgo-ic { width: 42px; height: 42px; background: transparent; }
  .lgo-panel { max-height: calc(100dvh - var(--header-h) - 136px); }
}