/* ==========================================================================
   Devgun Family Law -- Chrome: cookie notice
   Loaded by Page.ss only where the notice renders ($ConsentNoticeMode).
   No Figma frame exists for it: built from the site's own tokens.

   Deliberately quiet (Dave, 2026-10-14): one short line and a small OK, on
   one row from tablet up. A white bar fixed to the bottom of the viewport (a
   light surface, so it reads apart from the Dark Blue call bar under it).
   consent-notice.js lifts it above the call bar below lg, and pads the page
   so nothing is stuck behind it. z-index 95: above the call bar (90), below
   the header (100), so the open mobile menu still covers it.
   ========================================================================== */

.consent-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background-color: var(--color-white);
  color: var(--color-text-default);
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  /* Home-indicator clearance when it sits on the screen edge. Above the
     call bar, the bar already clears it. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* A 400% zoom: the notice scrolls inside itself rather than covering
     the whole screen. */
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.consent-notice[hidden] {
  display: none;
}

.consent-notice--above-cta {
  padding-bottom: 0;
}

.consent-notice__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0.5rem var(--space-page-gutter);
}

/* 14px at every width. The legacy site.css sets the root in px (14, 14.5,
   15, 16 and 17px across breakpoints), so rem would only make it drift. */
.consent-notice__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Dark Blue, underlined: the token link colour (Canopy, 3.19:1) is short
   of AA for text this size; Dark Blue is 9.26:1 on white. */
.consent-notice__policy,
.consent-notice__policy:link,
.consent-notice__policy:visited {
  color: var(--color-action);
  font-size: inherit;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: inherit;
  text-decoration: underline;
  white-space: nowrap;
}

/* A small outlined button, text-sized. 36px tall: above the WCAG 2.2 AA
   24px target minimum, and small enough to stay out of the way. */
.consent-notice__ok {
  flex: 0 0 auto;
  min-width: 3.5rem;
  min-height: 36px;
  padding: 0 0.875rem;
  border: 1px solid var(--color-action);
  border-radius: 4px;
  background-color: var(--color-white);
  color: var(--color-action);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}

@media (hover: hover) {
  .consent-notice__ok:hover {
    background-color: var(--color-action);
    color: var(--color-white);
  }
}

.consent-notice__ok:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}