/* DOVR Media — styles every page needs, the homepage included.
 *
 * The homepage loads home.css + this file; every other page loads
 * site.css + styles.css + this file. So this holds what both need and neither
 * token set fully covers: the cookie banner (markup from
 * public/assets/js/consent.js) and the footer's legal links + "Cookie
 * preferences" button. Uses only tokens both sets define, or literals.
 */
/* ---- cookie consent banner ---- */
/* The hidden attribute has to beat author display rules (.btn sets
   inline-block, .cookie-banner__opts sets grid), or [hidden] does nothing. */
[hidden] {
  display: none !important;
}
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  background: var(--navy);
  color: #ffffff;
  border-top: 3px solid var(--accent);
  box-shadow: 0 -8px 30px rgba(8, 23, 41, 0.25);
}
.cookie-banner__inner {
  width: min(1180px, 92%);
  margin: 0 auto;
  padding: 1.35rem 0;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1 1 30rem;
  min-width: 0;
}
.cookie-banner__text h2 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  color: #ffffff;
  /* inline-block so the focus ring hugs the text instead of the full row */
  display: inline-block;
}
.cookie-banner__text h2:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.cookie-banner__text p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #c9d4e3;
}
.cookie-banner__text a {
  color: #ffffff;
  text-decoration: underline;
}
.cookie-banner__opts {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}
.cookie-banner__opts label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: #c9d4e3;
  cursor: pointer;
}
.cookie-banner__opts strong {
  color: #ffffff;
}
.cookie-banner__opts input {
  margin-top: 0.2rem;
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  flex: 0 0 auto;
  /* Keeps the last control clear of Intercom's launcher if it has not booted
     yet (the JS lifts the launcher once it has). */
  padding-right: 3.5rem;
}
/* Reject must be as easy to reach as accept, so it is a real button of the
   same size rather than a de-emphasised link. */
.cookie-banner__actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
.cookie-banner__actions .btn-ghost:hover {
  border-color: #ffffff;
}
.cookie-banner__link {
  background: none;
  border: 0;
  color: #c9d4e3;
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem;
}
.cookie-banner__link:hover {
  color: #ffffff;
}
.footer-cookie-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.footer-cookie-link:hover {
  color: var(--accent);
}
@media (max-width: 720px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.1rem 0;
  }
  /* Stacked, the 30rem flex-basis above becomes a 30rem height. */
  .cookie-banner__text {
    flex: 0 0 auto;
  }
  .cookie-banner__actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
  /* The banner can get tall on a phone; keep it scrollable, not clipped. */
  .cookie-banner {
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* The banner's "No thanks" is a .btn-ghost; site.css has no ghost button, so
   the outline is set here. */
.cookie-banner__actions .btn-ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  padding: 12px 24px;
}

/* Footer legal row: plain links in the muted footer color. */
.footer-legal a { color: inherit; }
.footer-legal a:hover, .footer-cookie-link:hover { color: var(--accent-ink); }

/* The homepage's fixed call/audit bar (.sticky-cta, phones only) sits where
   Intercom puts its launcher. Intercom ignores vertical_padding on mobile, so
   the launcher is moved with CSS: 74px bar + 20px gap. */
@media (max-width: 860px) {
  body:has(.sticky-cta) .intercom-lightweight-app-launcher,
  body:has(.sticky-cta) .intercom-launcher-frame { bottom: 94px !important; }
}

/* Dropdown hover gap: .menu-panel sits 6px below its button, and crossing that
   gap fired mouseleave and closed the menu. This invisible strip fills the gap
   (it belongs to the panel, so the cursor never leaves .menu). The panel is
   display:none until open, so the strip only exists while a menu is showing. */
@media (min-width: 1021px) {  /* desktop nav only; the mobile menu stacks panels inline */
  .menu-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }
}

/* Brand logo (header + footer). Height drives the size; the image keeps its
   450x120 aspect ratio. In the header it sits in the space the text logo had. */
.brand-logo { display: block; height: 26px; width: auto; }
.logo picture { display: block; }
/* Never let the nav squeeze the logo: styles.css caps img at max-width:100%,
   so a shrinking flex item would distort it horizontally. */
.nav .logo { flex-shrink: 0; }
.logo-footer .brand-logo { height: 22px; }
@media (max-width: 480px) { .nav .brand-logo { height: 22px; } }