/* ==========================================================================
   Site footer 2026 (partials/footer/footer-main.php)
   Loads on every page, so everything is scoped under .bff and the #footer
   wrapper. Colors and fonts match the 2026 page templates.
   ========================================================================== */

/* The wrapper div around the footer. Reset spacing only. No background here:
   on older pages the wrapper also holds the video/logo blocks, whose angled
   edges are meant to show the site's orange body color behind them. The dark
   background lives on .bff itself. */
#footer.footer { margin: 0; padding: 0; }

.bff {
  --ink: #0E1218;
  --ink-2: #131A23;
  --orange: #E8842B;
  --cream: #F4F1EA;
  --muted: #B9C3D0;
  --muted-2: #8C98A8;
  --line: rgba(146, 169, 201, 0.18);
  --f-display: 'Anton', 'Oswald', sans-serif;
  --f-cond: 'Oswald', sans-serif;
  --f-body: 'Barlow', sans-serif;
  --f-serif: 'Newsreader', Georgia, serif;
  --gutter: clamp(20px, 8.3vw, 120px);

  display: block;
  background: var(--ink);
  color: var(--muted);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Link rules below are written as ".bff .bff-x a" so they beat page CSS like
   the book page's ".footer a { color }", whatever order the files load in. */

/* Local resets. :where() keeps them at zero specificity so the classes below win. */
:where(.bff) *, :where(.bff) *::before, :where(.bff) *::after { box-sizing: border-box; }
:where(.bff) :is(p, ul, form) { margin: 0; padding: 0; }
:where(.bff) ul { list-style: none; }
:where(.bff) a { text-decoration: none; }
.bff li { margin: 0; padding: 0; }          /* theme ui.css adds a 10px bottom margin to li */
.bff li::before { content: none; }

.bff-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Top: brand block + three columns ---- */
.bff-top { display: grid; grid-template-columns: 5fr 2.5fr 2.5fr 3fr; gap: clamp(32px, 4vw, 64px); padding-block: clamp(64px, 6vw, 88px) clamp(48px, 4.5vw, 64px); }

.bff-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 380px; }
.bff-name { font-family: var(--f-display); font-size: clamp(34px, 3vw, 44px); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: var(--cream); }
.bff-tagline { font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.4; color: var(--muted); }
.bff-firm { font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.bff .bff-firm a { color: var(--cream); border-bottom: 1px solid var(--orange); transition: color .2s ease; }
.bff .bff-firm a:hover { color: var(--orange); }

.bff-social { display: flex; gap: 10px; margin-top: 8px; }
.bff .bff-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); color: var(--cream); transition: border-color .2s ease, color .2s ease; }
.bff .bff-social a:hover { border-color: var(--orange); color: var(--orange); }

.bff-col { display: flex; flex-direction: column; gap: 18px; }
.bff-label { font-family: var(--f-cond); font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); }
.bff-links { display: flex; flex-direction: column; gap: 12px; }
.bff .bff-links a { font-size: 16px; color: var(--muted); transition: color .2s ease; }
.bff .bff-links a:hover { color: var(--cream); }

.bff .bff-phone { align-self: flex-start; font-family: var(--f-cond); font-size: 22px; font-weight: 500; letter-spacing: 0.06em; color: var(--cream); transition: color .2s ease; }
.bff .bff-phone:hover { color: var(--orange); }

/* Search: a slim dark field with the button inside it */
.bff-search { position: relative; margin-top: 4px; }
.bff .bff-search input[type="search"] { display: block; width: 100%; height: 48px; margin: 0; padding: 0 48px 0 16px; background: var(--ink-2); border: 1px solid rgba(146,169,201,0.3); border-radius: 0; box-shadow: none; color: var(--cream); font-family: var(--f-body); font-size: 15px; -webkit-appearance: none; appearance: none; transition: border-color .2s ease; }
.bff .bff-search input[type="search"]::placeholder { color: rgba(167,179,196,0.65); }
.bff .bff-search input[type="search"]:focus { border-color: var(--orange); outline: none; }
.bff .bff-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.bff .bff-search button { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer; transition: color .2s ease; }
.bff .bff-search button:hover { color: var(--orange); }

/* Screen-reader-only label */
.bff-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Bottom bar ---- */
.bff-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; padding-block: 24px 32px; border-top: 1px solid var(--line); }
.bff-copy { font-size: 14px; color: var(--muted-2); }
.bff-legal { display: flex; gap: 28px; }
.bff .bff-legal a { font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); transition: color .2s ease; }
.bff .bff-legal a:hover { color: var(--cream); }

.bff a:focus-visible, .bff button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .bff-top { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .bff-brand { grid-column: 1 / -1; max-width: 520px; }
  .bff-col--contact { grid-column: 1 / -1; max-width: 420px; }
}

@media (max-width: 560px) {
  .bff-top { column-gap: 24px; padding-top: 56px; }
  .bff-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bff *, .bff *::before, .bff *::after { transition: none !important; }
}