/* ==========================================================================
   cookie-banner.css — .b-cookies-informer
   Loaded after base.css. Only component-specific values live here; the button
   look comes entirely from the .g-btn modifier system in base.css.
   ========================================================================== */

.b-cookies-informer {
  display: block;
  position: relative;
  z-index: 8;
  min-height: 49px;            /* renders 57px tall at 1440 once content + padding land */
  /* mobile-first: the site's base padding is 8px top / 3px bottom.
     The 16px side gutter comes from the .g-sides-gaps class. */
  padding: 8px 16px 3px;
  border-bottom: 1px solid var(--of-border-subtle);
  background-color: var(--of-bg-gray);
  color: var(--of-muted);
  /* 21.3344px is the site's own computed line-height (16px * 1.3334) — kept verbatim */
  font: 400 16px/21.3344px var(--of-font);
}

/* app.js dismisses the banner by setting [hidden]; no exit animation on the original */
.b-cookies-informer[hidden] { display: none; }

.b-cookies-informer__inner { width: 100%; }

.b-cookies-informer__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.b-cookies-informer__text {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 6px 0;
  color: var(--of-muted);
  font: 400 14px/20px var(--of-font);
}

.b-cookies-informer__text a { color: var(--of-blue); }

.b-cookies-informer__text .g-icon {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0 2px 0 1px;
  /* middle, not baseline — on baseline the inline-block grows the line box by 2px */
  vertical-align: middle;
  transform: translateY(-1px);  /* optically centres the cookie glyph on the text */
}

.b-cookies-informer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0;
}

/* the two buttons sit 4px apart */
.b-cookies-informer__nav .g-btn:not(:first-child) { margin-left: 4px; }

/* "Only Necessary Cookies" carries no .m-rounded on the original, yet still
   computes to a 1000px radius — the pill shape comes from the banner's own rules.
   Its 36px height falls out of 8px padding + 20px line-height, so it is not set. */
.b-cookies-informer__nav .g-btn.m-flat { border-radius: 1000px; }

/* ---------- responsive ----------
   The only breakpoint on this component is 710px. Above it the banner tightens
   its vertical padding and the nav gains a 10px side margin. */
@media screen and (min-width: 710px) {
  .b-cookies-informer      { padding-top: 6px; padding-bottom: 6px; }
  .b-cookies-informer__text { margin-top: 4px; margin-bottom: 4px; }
  .b-cookies-informer__nav  { margin: 4px 10px; }
}