/* FounderBrain Cookie Consent styles. Theme-aware (light/dark), brand accent via --fbc-accent.
 *
 * ONE FILE, SIX SITES. This is byte-identical across every brand and the
 * cookie-consent-banner skill template. It drifted once, in the direction you
 * would least want: a height bound and a 44px tap target were added to one site
 * only, and the other five kept a notice that stacked to roughly 59% of a phone
 * screen. If you change this, change every copy, or the next person measures one
 * site and reasonably assumes the rest match.
 */
.fbc-root { --fbc-accent: #111827; }
.fbc-root, .fbc-root * { box-sizing: border-box; }

.fbc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
  background: #ffffff; color: #1f2937;
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: fbc-up .28s ease;
}
@keyframes fbc-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* ONE ROW on anything wider than a phone. Measured before this change: 96 to
   102px on laptop and desktop and 160 to 166px on an iPad mini, for a notice
   that is two short sentences and three buttons. The height came from generous
   padding plus a heading on its own line, not from the content. */
.fbc-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.fbc-text { flex: 1 1 420px; min-width: 260px; }
/* The heading sits INLINE with the sentence rather than on its own line. It was
   a block, so it cost a whole line height on every viewport to say four words. */
.fbc-text strong { font-size: 13.5px; margin-right: 6px; }
.fbc-text p { display: inline; margin: 0; font-size: 13px; line-height: 1.45; color: #4b5563; }
.fbc-text a { color: var(--fbc-accent); text-decoration: underline; }

.fbc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fbc-btn {
  appearance: none; border: 1px solid transparent; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  font-family: inherit; line-height: 1; transition: filter .15s ease, background .15s ease;
  /* Tap-target floor. Measured at 35px in the rendered crawl; this is a consent
     interaction, which is the last place to make someone aim carefully.
     Declared HERE rather than in a second .fbc-btn block: two rules for one
     selector is how the hero collage drifted, with one silently losing the
     cascade and nobody able to tell which. */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fbc-btn:focus-visible { outline: 2px solid var(--fbc-accent); outline-offset: 2px; }
.fbc-primary { background: var(--fbc-accent); color: #fff; }
.fbc-primary:hover { filter: brightness(1.08); }
.fbc-secondary { background: transparent; color: #1f2937; border-color: rgba(0,0,0,0.25); }
.fbc-secondary:hover { background: rgba(0,0,0,0.04); }
.fbc-ghost { background: transparent; color: var(--fbc-accent); border-color: var(--fbc-accent); }
.fbc-ghost:hover { background: rgba(0,0,0,0.04); }

/* preferences modal */
.fbc-overlay {
  position: fixed; inset: 0; z-index: 2147483001;
  background: rgba(15,23,42,0.55); display: flex; align-items: center; justify-content: center;
  padding: 20px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: fbc-fade .2s ease;
}
@keyframes fbc-fade { from { opacity: 0; } to { opacity: 1; } }
.fbc-modal {
  background: #fff; color: #1f2937; width: 100%; max-width: 620px; max-height: 86vh;
  border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.fbc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 12px; }
.fbc-modal-head h2 { margin: 0; font-size: 18px; }
.fbc-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.fbc-close:hover { color: #111827; }
.fbc-modal-body { padding: 4px 22px 8px; overflow-y: auto; }
.fbc-lead { font-size: 13px; color: #4b5563; line-height: 1.55; margin: 0 0 8px; }

.fbc-cat { border-top: 1px solid rgba(0,0,0,0.08); padding: 14px 0; }
.fbc-cat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fbc-cat-label { font-size: 14px; font-weight: 700; }
.fbc-always { font-size: 12px; font-weight: 700; color: #16a34a; }
.fbc-cat-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #4b5563; }

/* toggle switch */
.fbc-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.fbc-switch input { opacity: 0; width: 0; height: 0; }
.fbc-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .18s ease; cursor: pointer; }
.fbc-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s ease; }
.fbc-switch input:checked + .fbc-slider { background: var(--fbc-accent); }
.fbc-switch input:checked + .fbc-slider::before { transform: translateX(18px); }
.fbc-switch input:focus-visible + .fbc-slider { outline: 2px solid var(--fbc-accent); outline-offset: 2px; }

.fbc-modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 22px 20px; border-top: 1px solid rgba(0,0,0,0.08); }

/* reopen links */
.fbc-footer-link { font-size: 13px; opacity: .85; text-decoration: underline; cursor: pointer; }
.fbc-corner-link {
  position: fixed; left: 14px; bottom: 14px; z-index: 2147482000;
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  background: rgba(17,24,39,0.82); color: #fff; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.fbc-corner-link:hover { background: rgba(17,24,39,0.95); }

/* dark theme: honor OS preference and common site theme hooks */
@media (prefers-color-scheme: dark) {
  .fbc-banner { background: #0f172a; color: #e5e7eb; border-top-color: rgba(255,255,255,0.10); }
  .fbc-text p { color: #9ca3af; }
  .fbc-secondary { color: #e5e7eb; border-color: rgba(255,255,255,0.28); }
  .fbc-secondary:hover, .fbc-ghost:hover { background: rgba(255,255,255,0.06); }
  .fbc-modal { background: #0f172a; color: #e5e7eb; }
  .fbc-close { color: #9ca3af; } .fbc-close:hover { color: #fff; }
  .fbc-lead, .fbc-cat-desc { color: #9ca3af; }
  .fbc-cat, .fbc-modal-foot { border-color: rgba(255,255,255,0.10); }
  .fbc-slider { background: #475569; }
}
:root[data-theme="dark"] .fbc-banner, html.dark .fbc-banner, .dark .fbc-banner { background: #0f172a; color: #e5e7eb; border-top-color: rgba(255,255,255,0.10); }
:root[data-theme="dark"] .fbc-text p, html.dark .fbc-text p, .dark .fbc-text p { color: #9ca3af; }
:root[data-theme="dark"] .fbc-modal, html.dark .fbc-modal, .dark .fbc-modal { background: #0f172a; color: #e5e7eb; }
:root[data-theme="dark"] .fbc-secondary, html.dark .fbc-secondary, .dark .fbc-secondary { color: #e5e7eb; border-color: rgba(255,255,255,0.28); }
:root[data-theme="dark"] .fbc-lead, :root[data-theme="dark"] .fbc-cat-desc,
html.dark .fbc-lead, html.dark .fbc-cat-desc, .dark .fbc-lead, .dark .fbc-cat-desc { color: #9ca3af; }
:root[data-theme="dark"] .fbc-cat, :root[data-theme="dark"] .fbc-modal-foot,
html.dark .fbc-cat, html.dark .fbc-modal-foot, .dark .fbc-cat, .dark .fbc-modal-foot { border-color: rgba(255,255,255,0.10); }

@media (max-width: 640px) {
  /* COMPACT, not merely bounded.
     The previous fix capped this at 46vh and let it scroll. That stopped it
     covering the WHOLE screen but 46 percent is still most of a phone, and it
     measured 307 to 429px across four handsets while sitting directly on the
     homepage call to action, the contact form field and the Save button on a
     contact card. A cap is not a size; bounding the damage is not the same as
     not doing it.

     This version is built to be short instead: the heading is inline with the
     sentence, the sentence no longer restates the buttons, and all three
     controls share ONE row. Roughly 130 to 150px, about 16 to 20 percent. */
  .fbc-inner { flex-direction: column; align-items: stretch; gap: 9px; padding: 11px 14px; }
  .fbc-text { flex: none; min-width: 0; }
  .fbc-text strong { font-size: 13px; }
  .fbc-text p { font-size: 12.5px; line-height: 1.4; }

  /* Three across, equal width. Reject must be exactly as easy to reach as
     Accept: a consent choice where refusing is the harder action is not a
     free choice, and it is a named A2P and GDPR rejection cause. */
  .fbc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .fbc-actions .fbc-btn { flex: none; width: 100%; padding: 10px 4px; font-size: 12.5px; }

  /* Still bounded, as a backstop only. If the brand name is long or the user
     has scaled their text up, the notice yields and scrolls rather than growing
     without limit. It should never actually reach this. */
  .fbc-banner { max-height: 34vh; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; }
  .fbc-modal { max-height: 84vh; }
}

/* The very short handsets. An iPhone SE is 667px tall, so a percentage that is
   comfortable on a 932px screen is not comfortable here. */
@media (max-width: 640px) and (max-height: 700px) {
  .fbc-inner { gap: 7px; padding: 9px 12px; }
  .fbc-text p { font-size: 12px; }
  .fbc-banner { max-height: 30vh; }
}

/* dvh where supported, so the bound respects the real visible area once mobile
   browser chrome collapses. Behind @supports because it must never break the vh
   fallback above. */
@supports (height: 1dvh) {
  @media (max-width: 640px) {
    .fbc-banner { max-height: 34dvh; }
    .fbc-modal { max-height: 84dvh; }
  }
}