/*
 * The consent bar (owner handoff 2026-10-27, docs/IP-Analytics-GA4.md section 4): the strip across the bottom of the screen that asks
 * before Google Analytics may load. Markup: web/partials/consent-banner.blade.php. As plain as the bars on other sites (owner 2026-10-27:
 * "make it as simple as this"): no heading, one short paragraph with a "Learn more" link on the left, the two buttons on the right - the
 * SAME outline (Tertiary) button twice, so neither is more prominent - and on a phone the buttons go under the text. Dark, like the old
 * bar was, but in the design system's own colours (owner 2026-10-27): --surface-inverse (the header's and footer's dark), --ink-inverse
 * for the text and the link. The buttons are the system's outline family (ip-outline.css), which already knows a dark band: the band
 * carries .ip-on-dark and the buttons keep their white fill and ink text. Tokens only; every rule starts from a class that exists only
 * here (.ip-consent-live, .ip-consent, .ip-consent__*), so nothing else on the site can be touched. Linked by web.layouts.header only on
 * a page that carries analytics (App\Support\Analytics::enabled()).
 */

/* The strip at the bottom of the screen. It is as high as the bar (nothing when the bar is hidden) and lets every click through except the
   ones that land on the bar itself. Above the header (9999) and the phone search sheets; a native <dialog> opened with showModal() (the
   login modal) is in the top layer and still covers it. */
.ip-consent-live {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  pointer-events: none;
}

.ip-consent {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  /* the notch and the home bar of a phone included */
  padding: var(--space-4, 16px) var(--space-4, 16px) calc(var(--space-4, 16px) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-inverse, #333333);
  color: var(--ink-inverse, #ffffff);
  /* the line keeps the strip apart from the footer, which is the same dark, when the page is scrolled to its end */
  border-top: 1px solid var(--border-inverse, rgba(255, 255, 255, 0.4));
  /* never taller than the screen: the text scrolls inside the bar on a very small one */
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
}

.ip-consent__inner {
  box-sizing: border-box;
  max-width: var(--container-max, 1184px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5, 24px);
}

.ip-consent__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ip-consent__text,
.ip-consent__gpc {
  margin: 0;
  font-size: var(--button-md-size, 14px);
  line-height: 20px;
  color: var(--ink-inverse, #ffffff);
}
/* the programmatic focus target when the bar is opened from the footer link */
.ip-consent__text[tabindex="-1"]:focus {
  outline: none;
}
.ip-consent__gpc {
  margin-top: var(--space-1, 4px);
  font-weight: 600;
}
.ip-consent__gpc[hidden] {
  display: none;
}

.ip-consent__link {
  color: var(--ink-inverse, #ffffff);
  text-decoration: underline;
  white-space: nowrap;
}
/* hover, focus and pressed restated at one selector more than the site's own a:hover / a:focus link colours, which are for light pages */
.ip-consent__link:hover,
.ip-consent__link:focus,
.ip-consent__link:active {
  color: var(--ink-inverse-muted, #dedede);
  text-decoration: underline;
}
.ip-consent__link:focus-visible {
  outline: 2px solid var(--ink-inverse, #ffffff);
  outline-offset: 2px;
}

/* Two buttons of the same size, side by side (they are the same outline button: neither stands out). */
.ip-consent__actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-3, 12px);
}
.ip-consent__actions .btn {
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ip-consent {
    padding: var(--space-3, 12px) var(--space-4, 16px) calc(var(--space-3, 12px) + env(safe-area-inset-bottom, 0px));
  }
  .ip-consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3, 12px);
  }
  /* each button keeps its words on one line and shares the row (a very narrow screen wraps the second one under the first) */
  .ip-consent__actions {
    flex-wrap: wrap;
  }
  .ip-consent__actions .btn {
    flex: 1 1 auto;
  }
}