/* sprint 35 — the cookie notice.

   Deep navy, because the logo Beth chose is gold on transparent and gold needs a dark ground to read
   as gold rather than as beige. Every other surface on this site is cream or white, so the notice is
   the one dark thing on the page, which is also how it says it is not part of the page.

   It sits at the bottom and takes the width it needs, rather than a full-width bar. A bar across the
   foot of a page reads as a system message and gets dismissed without reading; a card reads as
   somebody telling you something. It also leaves the page's own bottom edge visible, so a parent can
   see she has not been cut off from anything. */

.obc-consent {
  position: fixed;
  z-index: 90;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  left: clamp(12px, 3vw, 28px);
  /* to the right rather than centred. Every hero on this site sets its heading and its two buttons
     against the left margin, and a centred card sat on top of "Choose my IBCLC" on the homepage. */
  margin-left: auto;
  max-width: 740px;
  border-radius: 14px;
  background: var(--mv-deep, #183e49);
  box-shadow: 0 18px 48px rgb(24 62 73 / 28%), 0 2px 8px rgb(24 62 73 / 18%);
  color: var(--mv-cream, #f6efe6);

  /* the resting state is the arrived one, so a browser that never runs the script's class still
     shows the notice properly once PHP has unhidden it */
  opacity: 1;
  transform: none;
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* the two states the script drives: below the fold on arrival, and on the way out */
.obc-consent:not(.is-here),
.obc-consent.is-going {
  opacity: 0;
  transform: translateY(14px);
}

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

@media (prefers-reduced-motion: reduce) {
  .obc-consent,
  .obc-consent:not(.is-here),
  .obc-consent.is-going {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.obc-consent-inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 24px);
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.8vw, 26px);
}

/* 84px, because the mark has the clinic's name inside the ring rather than beside it. Below about
   eighty the three words stop being words and it reads as a gold smudge, which is worse than no
   logo: it looks like a decoration nobody chose. */
.obc-consent-mark {
  flex: 0 0 auto;
  width: 84px;
  height: auto;
}

.obc-consent-words {
  flex: 1 1 auto;
  min-width: 0;
}

.obc-consent-title {
  margin: 0 0 4px;
  font-family: var(--mv-display, "Figtree", sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mv-gold-pale, #f6e2b0);
}

.obc-consent-body {
  margin: 0;
  font-family: var(--mv-display, "Figtree", sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgb(246 239 230 / 88%);
}

.obc-consent-body a {
  color: var(--mv-gold-pale, #f6e2b0);
  text-underline-offset: 3px;
}

.obc-consent-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.obc-consent-accept,
.obc-consent-decline {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--mv-display, "Figtree", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.obc-consent-accept {
  background: var(--mv-gold, #e9c471);
  color: var(--mv-deep, #183e49);
}

.obc-consent-accept:hover,
.obc-consent-accept:focus-visible {
  background: var(--mv-gold-pale, #f6e2b0);
}

/* Refusing has to be as easy to see as agreeing, or the agreement is not worth collecting. Quieter
   than accept, never hidden in it: same size, same place, same weight of type. */
.obc-consent-decline {
  border-color: rgb(246 239 230 / 38%);
  background: transparent;
  color: var(--mv-cream, #f6efe6);
}

.obc-consent-decline:hover,
.obc-consent-decline:focus-visible {
  border-color: var(--mv-cream, #f6efe6);
  background: rgb(246 239 230 / 10%);
}

.obc-consent-accept:focus-visible,
.obc-consent-decline:focus-visible {
  outline: 2px solid var(--mv-gold-pale, #f6e2b0);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .obc-consent-inner {
    flex-wrap: wrap;
  }

  .obc-consent-mark {
    width: 44px;
  }

  /* the buttons take the full row rather than crowding under the words, and accept stays first */
  .obc-consent-actions {
    flex: 1 0 100%;
  }

  .obc-consent-accept,
  .obc-consent-decline {
    flex: 1 1 0;
    text-align: center;
  }
}