/* ==========================================================================
   AAMG chrome kit — chrome.css  (v1.0.1)
   Shared billboard / breadcrumb / footer / feedback chrome for the
   aamgllc.com · levitt.family · mklcapitalgroup.com · preserve · preview sites.

   Include:  <link rel="stylesheet" href="/chrome/chrome.css">
             <script defer src="/chrome/chrome.js" data-site="aamgllc"></script>

   Rules of the house
   - Everything is namespaced: classes `ck-*`, custom properties `--ck-*`.
     Nothing here styles a page's own elements, so a page's header/footer/
     typography are untouched.
   - The palette below is the DEFAULT (aamgllc). chrome.js overrides the
     `--ck-*` tokens per site (see the SITES map) by injecting a <style>.
   - Light and dark both come from prefers-color-scheme; an explicit
     <html data-theme="light|dark"> wins over the OS setting.
   - No webfonts, no images, no third-party anything. Mobile-first.
   ========================================================================== */

:root {
  --ck-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ck-font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --ck-font: var(--ck-font-sans);
  --ck-shell: 60rem;

  /* default palette = aamgllc (light) */
  --ck-band: #16283d;            /* billboard background            */
  --ck-band-ink: #f2f6fa;        /* text on the band                */
  --ck-band-ink-soft: #b9c6d3;   /* secondary text on the band      */
  --ck-band-focus: #ffd66b;      /* focus ring on the band          */
  --ck-surface: #f7f8fa;         /* breadcrumb / footer background  */
  --ck-surface-2: #ffffff;       /* dialog / raised surfaces        */
  --ck-ink: #22303f;
  --ck-ink-soft: #55636f;
  --ck-rule: #dde3e9;
  --ck-accent: #2a5d8f;          /* links, buttons                  */
  --ck-accent-ink: #ffffff;      /* text on accent                  */
  --ck-danger: #b42318;
  --ck-ok: #1d7a45;
  --ck-shadow: 0 1px 3px rgba(20, 30, 45, .10), 0 10px 30px rgba(20, 30, 45, .14);
  --ck-radius: .6rem;
  --ck-z-fab: 60;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ck-band: #0c1520;
    --ck-band-ink: #f2f6fa;
    --ck-band-ink-soft: #b9c6d3;
    --ck-band-focus: #ffd66b;
    --ck-surface: #10161d;
    --ck-surface-2: #17202a;
    --ck-ink: #d5dde6;
    --ck-ink-soft: #93a2b1;
    --ck-rule: #2a3644;
    --ck-accent: #7aa7d1;
    --ck-accent-ink: #0c1520;
    --ck-danger: #f28b82;
    --ck-ok: #7ed3a0;
    --ck-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --ck-band: #0c1520;
  --ck-band-ink: #f2f6fa;
  --ck-band-ink-soft: #b9c6d3;
  --ck-band-focus: #ffd66b;
  --ck-surface: #10161d;
  --ck-surface-2: #17202a;
  --ck-ink: #d5dde6;
  --ck-ink-soft: #93a2b1;
  --ck-rule: #2a3644;
  --ck-accent: #7aa7d1;
  --ck-accent-ink: #0c1520;
  --ck-danger: #f28b82;
  --ck-ok: #7ed3a0;
  --ck-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */
.ck-billboard, .ck-crumbs, .ck-footer, .ck-fab, .ck-dialog, .ck-skip {
  font-family: var(--ck-font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.ck-billboard *, .ck-crumbs *, .ck-footer *, .ck-dialog * { box-sizing: border-box; }

.ck-shell {
  max-width: var(--ck-shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 40em) { .ck-shell { padding-inline: 1.5rem; } }

/* visually hidden but available to assistive tech */
.ck-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* skip link (only injected when the page has none of its own) */
.ck-skip {
  position: absolute;
  left: -999px; top: 0;
  z-index: 100;
  background: var(--ck-band);
  color: var(--ck-band-ink);
  padding: .5rem 1rem;
  text-decoration: underline;
}
.ck-skip:focus { left: 0; outline: 3px solid var(--ck-band-focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   1. Billboard (collapsible top band)
   -------------------------------------------------------------------------- */
.ck-billboard {
  background: var(--ck-band);
  color: var(--ck-band-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ck-bb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  padding-block: .55rem;
  min-height: 2.75rem;
}
.ck-billboard[data-collapsed="false"] .ck-bb-bar { padding-block: .9rem .35rem; }
.ck-bb-left { display: flex; align-items: baseline; min-width: 0; }   /* min-width:0 lets the wordmark shrink/wrap on narrow screens (v1.0.1) */
.ck-bb-bar > .ck-bb-toggle { flex: none; }

.ck-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  margin: 0;
  color: var(--ck-band-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .02em;
  flex-wrap: wrap;                 /* the sub-label wraps under the mark instead of forcing overflow (v1.0.1) */
  min-width: 0;
}
.ck-wordmark > span:first-child { white-space: nowrap; }
.ck-wordmark:hover, .ck-wordmark:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.ck-wordmark .ck-wm-sub { font-weight: 400; font-size: .85em; color: var(--ck-band-ink-soft); letter-spacing: 0; white-space: normal; }
.ck-wordmark .ck-wm-dot { color: var(--ck-accent); }
.ck-wordmark[data-style="tracked"] { letter-spacing: .18em; }
.ck-wordmark[data-style="serif"] { font-family: var(--ck-font-serif); font-weight: 600; letter-spacing: .04em; }

.ck-badge {
  display: inline-block;
  align-self: center;
  font: 600 .66rem/1 var(--ck-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3em .55em .28em;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ck-band-ink-soft);
  margin-left: .35rem;
}

.ck-bb-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin: 0;
  padding: .4em .8em;
  border: 1px solid var(--ck-band-ink-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--ck-band-ink);
  font: inherit;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  min-height: 2.25rem; /* touch target */
}
.ck-bb-toggle:hover { background: rgba(255, 255, 255, .10); }
.ck-bb-toggle:focus-visible { outline: 3px solid var(--ck-band-focus); outline-offset: 2px; }
.ck-bb-toggle .ck-chev {
  display: inline-block;
  width: .55em; height: .55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);           /* pointing down = "show" */
  transition: transform .25s ease;
}
.ck-bb-toggle[aria-expanded="true"] .ck-chev { transform: translateY(.15em) rotate(-135deg); } /* up = "hide" */

/* collapsible body: grid-row trick animates height without JS measuring */
.ck-bb-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .28s ease, opacity .22s ease;
}
.ck-bb-body > .ck-bb-inner {
  min-height: 0;
  overflow: hidden;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.ck-billboard[data-collapsed="true"] .ck-bb-body { grid-template-rows: 0fr; opacity: 0; }
.ck-billboard[data-collapsed="true"] .ck-bb-body > .ck-bb-inner { visibility: hidden; transition-delay: .28s; }

.ck-bb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: .1rem 1rem;
}
.ck-tagline {
  margin: 0;
  color: var(--ck-band-ink-soft);
  font-size: .98rem;
  max-width: 40rem;
}
.ck-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
}
.ck-nav a {
  display: inline-block;
  padding: .35em 0;             /* ≥ 24px target height */
  color: var(--ck-band-ink);
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 2px solid transparent;
}
.ck-nav a:hover { border-bottom-color: var(--ck-band-ink-soft); }
.ck-nav a[aria-current="page"] { border-bottom-color: var(--ck-band-ink); font-weight: 600; }
.ck-nav a:focus-visible { outline: 3px solid var(--ck-band-focus); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ck-bb-body, .ck-bb-body > .ck-bb-inner, .ck-bb-toggle .ck-chev { transition: none !important; }
}

/* --------------------------------------------------------------------------
   2. Breadcrumb
   -------------------------------------------------------------------------- */
.ck-crumbs {
  background: var(--ck-surface);
  color: var(--ck-ink-soft);
  border-bottom: 1px solid var(--ck-rule);
  font-size: .9rem;
}
.ck-crumbs ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .3rem;
  min-height: 2.5rem;
  padding-block: .35rem;
}
.ck-crumbs li { display: inline-flex; align-items: center; gap: 0 .3rem; }
.ck-crumbs .ck-sep { color: var(--ck-ink-soft); opacity: .7; user-select: none; }
.ck-crumbs a {
  display: inline-block;
  padding: .3em .1em;
  color: var(--ck-accent);
  text-decoration: none;
  text-underline-offset: .18em;
}
.ck-crumbs a:hover { text-decoration: underline; }
.ck-crumbs a:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; border-radius: 2px; }
.ck-crumbs [aria-current="page"] { color: var(--ck-ink); font-weight: 600; padding: .3em .1em; }

/* --------------------------------------------------------------------------
   3. Footer
   -------------------------------------------------------------------------- */
.ck-footer {
  background: var(--ck-surface);
  color: var(--ck-ink-soft);
  border-top: 1px solid var(--ck-rule);
  margin-top: 3rem;
  font-size: .92rem;
}
.ck-foot-grid {
  display: grid;
  gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  padding-block: 2.5rem 2rem;
}
.ck-foot-col--about { grid-column: 1 / -1; }
@media (min-width: 60em) {
  .ck-foot-grid { grid-template-columns: 2fr repeat(5, 1fr); }
  .ck-foot-col--about { grid-column: auto; }
}
.ck-foot-h {
  margin: 0 0 .6rem;
  font: 600 .78rem/1.3 var(--ck-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ck-ink);
}
.ck-foot-col ul { list-style: none; margin: 0; padding: 0; }
.ck-foot-col li { margin: 0; }
.ck-foot-col a, .ck-foot-col button.ck-linkish {
  display: inline-block;
  padding: .28em 0;
  color: var(--ck-accent);
  text-decoration: none;
  text-underline-offset: .18em;
}
.ck-foot-col a:hover, .ck-foot-col button.ck-linkish:hover { text-decoration: underline; }
.ck-foot-col a:focus-visible, .ck-foot-col button.ck-linkish:focus-visible {
  outline: 2px solid var(--ck-accent); outline-offset: 2px; border-radius: 2px;
}
.ck-foot-col a[rel~="external"]::after,
.ck-foot-col a.ck-ext::after {
  content: "\2197";                /* ↗ */
  font-size: .7em;
  margin-left: .25em;
  opacity: .75;
}
button.ck-linkish {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0;
  font: inherit; cursor: pointer; text-align: left;
}
.ck-foot-blurb { margin: 0 0 .75rem; max-width: 34rem; }
.ck-foot-blurb strong { color: var(--ck-ink); font-weight: 600; }
.ck-foot-addr { font-style: normal; margin: 0; }
.ck-foot-addr a { color: var(--ck-accent); text-decoration: none; }
.ck-foot-addr a:hover { text-decoration: underline; }

.ck-foot-legal {
  border-top: 1px solid var(--ck-rule);
  padding-block: 1.1rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem;
}
.ck-foot-legal p { margin: 0; }
.ck-foot-legal time { color: var(--ck-ink); }
.ck-foot-legal .ck-foot-note { color: var(--ck-ink-soft); }
.ck-foot-legal .ck-foot-note a { color: var(--ck-accent); }

/* --------------------------------------------------------------------------
   4. Feedback: floating button + dialog
   -------------------------------------------------------------------------- */
.ck-fab {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--ck-z-fab);
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: .5em;
  margin: 0;
  padding: .7em 1.1em;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--ck-accent);
  color: var(--ck-accent-ink);
  font: 600 .92rem/1 var(--ck-font-sans);
  box-shadow: var(--ck-shadow);
  cursor: pointer;
}
.ck-fab:hover { filter: brightness(1.08); }
.ck-fab:focus-visible { outline: 3px solid var(--ck-band-focus); outline-offset: 3px; }
.ck-fab svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ck-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: min(90vh, 44rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ck-rule);
  border-radius: var(--ck-radius);
  background: var(--ck-surface-2);
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow);
  overflow: auto;
}
.ck-dialog::backdrop { background: rgba(10, 16, 24, .55); }
.ck-dialog:not([open]) { display: none; }
/* fallback when <dialog> is unsupported: script adds .ck-dialog--fallback and toggles [open] */
.ck-dialog--fallback[open] {
  display: block;
  position: fixed; inset: 0; margin: auto; height: max-content;
  z-index: calc(var(--ck-z-fab) + 1);
}
.ck-dialog-inner { padding: 1.25rem 1.35rem 1.35rem; }
.ck-dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: .5rem;
}
.ck-dialog h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; font-family: var(--ck-font); }
.ck-dialog-close {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: 2.25rem; height: 2.25rem;
  margin: -.35rem -.5rem 0 0;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--ck-ink-soft);
  font: 400 1.5rem/1 var(--ck-font-sans);
  cursor: pointer;
}
.ck-dialog-close:hover { background: var(--ck-rule); color: var(--ck-ink); }
.ck-dialog-close:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 2px; }
.ck-dialog-lede { margin: 0 0 1rem; color: var(--ck-ink-soft); font-size: .95rem; }

.ck-form { display: grid; gap: .9rem; }
.ck-form[hidden], .ck-result[hidden] { display: none; }   /* author display:grid would otherwise beat the UA [hidden] rule (v1.0.1) */
.ck-field { display: grid; gap: .3rem; }
.ck-field label { font-size: .9rem; font-weight: 600; color: var(--ck-ink); }
.ck-field .ck-opt { font-weight: 400; color: var(--ck-ink-soft); }
.ck-field input, .ck-field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;              /* ≥16px stops iOS zoom */
  color: var(--ck-ink);
  background: var(--ck-surface);
  border: 1px solid var(--ck-rule);
  border-radius: .45rem;
  padding: .6rem .7rem;
  min-height: 2.75rem;
}
.ck-field textarea { min-height: 7.5rem; resize: vertical; }
.ck-field input:focus-visible, .ck-field textarea:focus-visible {
  outline: 2px solid var(--ck-accent); outline-offset: 1px; border-color: var(--ck-accent);
}
.ck-field-page { font-size: .82rem; color: var(--ck-ink-soft); word-break: break-all; margin: 0; }
.ck-field-page code { font: .82rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* honeypot: off-screen, not tab-reachable, hidden from AT */
.ck-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ck-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: .25rem; }
.ck-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 2.75rem;
  padding: .6em 1.2em;
  border: 1px solid var(--ck-accent);
  border-radius: 999px;
  background: var(--ck-accent);
  color: var(--ck-accent-ink);
  font: 600 .95rem/1 var(--ck-font-sans);
  text-decoration: none;
  cursor: pointer;
}
.ck-btn:hover { filter: brightness(1.08); }
.ck-btn:disabled { opacity: .6; cursor: progress; filter: none; }
.ck-btn:focus-visible { outline: 2px solid var(--ck-accent); outline-offset: 3px; }
.ck-btn--secondary { background: transparent; color: var(--ck-accent); }

.ck-status { margin: .25rem 0 0; font-size: .92rem; min-height: 1.4em; }
.ck-status[data-kind="error"] { color: var(--ck-danger); }
.ck-status[data-kind="ok"] { color: var(--ck-ok); }
.ck-result { display: grid; gap: .75rem; }
.ck-result p { margin: 0; }
.ck-result .ck-mailto-note { font-size: .9rem; color: var(--ck-ink-soft); }

/* --------------------------------------------------------------------------
   Print: keep the footer's legal line, drop the interactive chrome
   -------------------------------------------------------------------------- */
@media print {
  .ck-fab, .ck-dialog, .ck-bb-toggle, .ck-bb-body { display: none !important; }
  .ck-billboard { background: none; color: #000; border-bottom: 1px solid #000; }
  .ck-billboard .ck-wordmark { color: #000; }
  .ck-footer { background: none; }
}

/* Windows High Contrast / forced colors: rely on system colours, keep outlines */
@media (forced-colors: active) {
  .ck-bb-toggle, .ck-btn, .ck-fab { border: 1px solid ButtonText; }
  .ck-nav a[aria-current="page"] { border-bottom-color: LinkText; }
}
