/* Cookie consent banner. Kept in its own file so the ported Drupal theme CSS stays
   untouched: delete these two files and the banner is gone without a trace.
   Colours use the Patronale teal (#309898) and the theme's dark blue (#152346). */

.pl-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10000;
  background: #152346;
  color: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
  font-size: 15px;
  line-height: 1.5;
}

.pl-consent__box { max-width: 1140px; margin: 0 auto; padding: 20px 20px 24px; }
.pl-consent__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #fff; }
.pl-consent__body { margin: 0 0 8px; max-width: 70ch; }
.pl-consent__link { color: #fff; text-decoration: underline; }
.pl-consent__link:hover, .pl-consent__link:focus { color: #9fdada; }

.pl-consent__details { margin: 14px 0 4px; }
.pl-consent__row { margin: 0 0 10px; padding-left: 26px; position: relative; }
.pl-consent__row input { position: absolute; left: 0; top: 4px; }
.pl-consent__row label { font-weight: 700; }
.pl-consent__help { margin: 2px 0 0; font-size: 13px; opacity: .85; max-width: 70ch; }

.pl-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Accept and refuse are the same size and weight on purpose: equal prominence is a
   requirement, not a style choice. Only the fill colour differs.
   A shared fixed basis rather than min-width, because the refusal label is the longer
   string in both languages and min-width let it grow 12 px wider than accept. The
   behaviour test asserts the two boxes match. */
.pl-consent__btn {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 10px 20px; border-radius: 3px; border: 2px solid transparent;
  flex: 0 0 240px; text-align: center;
}
.pl-consent__btn--primary { background: #309898; color: #fff; border-color: #309898; }
.pl-consent__btn--primary:hover { background: #267a7a; border-color: #267a7a; }
.pl-consent__btn--secondary { background: transparent; color: #fff; border-color: #fff; }
.pl-consent__btn--secondary:hover { background: rgba(255, 255, 255, .12); }
.pl-consent__btn--ghost {
  background: transparent; color: #fff; border-color: transparent;
  text-decoration: underline; flex: 0 0 auto; padding-left: 4px; padding-right: 4px;
}
.pl-consent__btn:focus-visible { outline: 3px solid #9fdada; outline-offset: 2px; }

/* The withdraw button on the cookie statement page, outside the dark banner. */
.pl-consent__btn--inline {
  background: #309898; color: #fff; border-color: #309898; flex: 0 0 auto;
}
.pl-consent__btn--inline:hover { background: #267a7a; border-color: #267a7a; }

@media (max-width: 600px) {
  .pl-consent__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .pl-consent { animation: pl-consent-in .25s ease-out both; }
  @keyframes pl-consent-in { from { transform: translateY(100%); } to { transform: none; } }
}
