/* ==========================================================================
   OTN – Cookie notice (otn-privacy)
   The mockups' look: DESIGN.md 6.3 and the mockups' components.css 6.3.
   A bar fixed to the bottom of the screen: #203299 with white text, a 4px
   SU Orange top edge, and one compact orange "Dismiss" button with navy
   text. Not a dialog: it never takes focus by itself.

   Colours come only from the theme's role tokens (--otn-*). The second
   value in each var() is the same colour, used only when the otn theme
   isn't active (no role tokens on the page), so the notice still looks
   right. Sizes work the same way: the theme's token first, then its value.
   ========================================================================== */


/* A dark part (DESIGN.md 2.1): the notice keeps dark mode's colours on
   light pages too. The theme's tokens.css gives .otn-cookie all of dark
   mode's role values; this block repeats the four that the notice uses and
   that light mode changes, so the notice stays dark even if the theme
   doesn't do it (or isn't active). Same values as the theme's, and :where()
   keeps it at zero specificity like the theme's, so the order of the two
   files doesn't matter. The colours that don't change in light mode (the
   oranges, and navy on orange) need nothing here. */
:where(.otn-cookie) {
  color-scheme: dark;
  --otn-raised: var(--su-medium-blue, #203299);        /* the notice: white text on it 10.62:1 */
  --otn-text: var(--su-white, #ffffff);
  --otn-link-on-raised: var(--su-white, #ffffff);      /* orange text on #203299 isn't an SU pairing */
  --otn-focus: var(--su-white, #ffffff);               /* focus ring 10.62:1 on #203299 */
}

.otn-cookie,
.otn-cookie *,
.otn-cookie *::before,
.otn-cookie *::after {
  box-sizing: border-box;
}

.otn-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--otn-z-cookie, 300);
  margin: 0;
  padding: var(--otn-space-4, 1rem) var(--otn-gutter, clamp(1rem, 0.472rem + 2.254vw, 2.5rem));
  background-color: var(--otn-raised, #203299);
  color: var(--otn-text, #ffffff);
  border-top: 4px solid var(--otn-bar, #f76900);
  font-family: var(--otn-font-sans, "Sherman Sans", Verdana, sans-serif);
  font-size: var(--otn-fs-small, 0.9375rem);
  line-height: var(--otn-lh-small, 1.5);
  text-align: left;
}

/* Printed hidden; the plugin's scripts show it. [hidden] must win over any
   theme rule that sets display on sections. */
.otn-cookie[hidden] {
  display: none !important;
}

.otn-cookie__inner {
  display: flex;
  flex-direction: column;
  gap: var(--otn-space-4, 1rem);
  max-width: var(--otn-w-wide, 80rem);
  margin-inline: auto;
  padding: 0;
}

.otn-cookie .otn-cookie__text {
  margin: 0;
  max-width: none;
  color: inherit;
  font-size: var(--otn-fs-small, 0.9375rem);
  line-height: var(--otn-lh-small, 1.5);
}

/* The link: white and always underlined (text on #203299 is white only) */
.otn-cookie .otn-cookie__text a {
  color: var(--otn-link-on-raised, #ffffff);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* "Dismiss": the theme's compact primary button (.otn-btn .otn-btn--primary
   .otn-btn--compact, DESIGN.md 6.8), drawn here in full so it looks the same
   whether or not the theme has those classes, and so no other theme's
   "button:hover" or "button:focus" rule can change its colours (two classes
   beat them). Navy on SU Orange 5.86:1; hover Light Orange 7.66:1; pressed
   Medium Orange 5.10:1. The 2px transparent border shows the button's shape
   in forced-colours mode. Phone: full width, under the text. */
.otn-cookie .otn-cookie__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: var(--otn-btn-h-compact, 2.75rem);
  margin: 0;
  padding: 10px 18px;
  background-color: var(--otn-accent, #f76900);
  color: var(--otn-text-on-accent, #000e54);
  border: 2px solid transparent;
  border-radius: var(--otn-radius-s, 2px);
  box-shadow: none;
  font-family: var(--otn-font-sans, "Sherman Sans", Verdana, sans-serif);
  font-size: var(--otn-fs-button-compact, 0.9375rem);
  font-weight: var(--otn-fw-bold, 700);
  line-height: var(--otn-lh-label, 1.2);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}

.otn-cookie .otn-cookie__dismiss:hover {
  background-color: var(--otn-accent-hover, #ff8e00);
  color: var(--otn-text-on-accent, #000e54);
}

.otn-cookie .otn-cookie__dismiss:active {
  background-color: var(--otn-accent-active, #ff431b);
  color: var(--otn-text-on-accent, #000e54);
}

@media (prefers-reduced-motion: no-preference) {
  .otn-cookie .otn-cookie__dismiss {
    transition:
      background-color var(--otn-dur-fast, 120ms) var(--otn-ease, cubic-bezier(0.2, 0, 0, 1)),
      border-color var(--otn-dur-fast, 120ms) var(--otn-ease, cubic-bezier(0.2, 0, 0, 1)),
      color var(--otn-dur-fast, 120ms) var(--otn-ease, cubic-bezier(0.2, 0, 0, 1));
  }
}

/* Keyboard focus: the theme's white 3px ring (DESIGN.md 6.0), repeated here
   so the link and the button always have a visible ring, even under a theme
   that removes focus outlines. An outline, not a shadow, so it survives
   forced-colours mode. */
.otn-cookie a:focus-visible,
.otn-cookie button:focus-visible {
  outline: var(--otn-focus-width, 3px) solid var(--otn-focus, #ffffff);
  outline-offset: var(--otn-focus-offset, 3px);
}

/* From 600px: the text and the button side by side, the button at the right */
@media (min-width: 600px) {
  .otn-cookie__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .otn-cookie .otn-cookie__dismiss {
    flex-shrink: 0;
    width: auto;
  }
}

/* Very short or heavily zoomed screens (400% zoom, phones on their side):
   the notice is first in the page, so static puts it at the top, pushing
   the page down instead of covering it (otn-privacy.js then reports
   --otn-cookie-h as 0). The <noscript> copy, for visitors without
   JavaScript, is always static. */
@media (max-height: 30em) {
  .otn-cookie {
    position: static;
  }
}

.otn-cookie.otn-cookie--static {
  position: static;
}

/* While the notice shows, the page ends with room for it, and focus
   scrolling keeps the focused item above it (WCAG technique C43).
   otn-privacy.js keeps --otn-cookie-h on <html> equal to the height the
   notice covers (0 when it's static). The theme's base.css has the same two
   rules (DESIGN.md 6.0): they set the same properties to the same value, so
   they never add up. The theme's phone menu reads --otn-cookie-h too. */
:root.otn-has-cookie-notice {
  scroll-padding-bottom: var(--otn-cookie-h, 0px);
}

:root.otn-has-cookie-notice body {
  padding-bottom: var(--otn-cookie-h, 0px);
}

/* Forced colours (Windows High Contrast): the focus ring in the system's
   highlight colour, as the theme's base.css does */
@media (forced-colors: active) {
  .otn-cookie a:focus-visible,
  .otn-cookie button:focus-visible {
    outline-color: Highlight;
  }
}

/* Not on paper: a printed page doesn't need the notice over its text */
@media print {
  .otn-cookie {
    display: none !important;
  }

  :root.otn-has-cookie-notice body {
    padding-bottom: 0;
  }
}