/* ==========================================================================
   ProntaMano — cookie banner and cookie policy page

   Stacking order: floating buttons 1030 < banner 1035 < offcanvas 1045
   < modal 1055 (Bootstrap), so menus and dialogs always cover the banner.
   .pm-consent-banner--notice is the "OK" note shown while GA is off.
   ========================================================================== */

/* 1. Banner ----------------------------------------------------------------- */
.pm-consent-banner {
  position: fixed;
  z-index: 1035;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  max-width: 72rem;
  margin-inline: auto;
  padding: 1rem 1.1rem;
  background: var(--pm-white);
  color: var(--pm-ink);
  border: 1px solid var(--pm-border);
  border-top: 4px solid var(--pm-accent);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-lg);
  /* Never taller than the screen: the buttons must stay reachable. */
  max-height: calc(100vh - 1rem);
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  animation: pm-consent-in 0.35s ease-out both;
}
/* `display` below would otherwise override the hidden attribute. */
.pm-consent-banner[hidden] { display: none !important; }

@keyframes pm-consent-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-consent-banner { animation: none; }
}

.pm-consent-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pm-consent-banner__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  font-weight: 700;
}
.pm-consent-banner__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--pm-muted);
}
.pm-consent-banner__text p { margin: 0; }
.pm-consent-banner__text > * + * { margin-top: 0.4rem; }
.pm-consent-banner__text a { font-weight: 600; }
/* Buttons side by side in columns of identical width (equal weight). */
.pm-consent-banner__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0;
}
.pm-consent-banner__actions .btn {
  --bs-btn-padding-x: 0.6rem;
  --bs-btn-font-size: 0.9rem;
  min-height: 2.75rem;          /* comfortable touch target */
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

/* Keep the end of the page reachable above the banner. The exact height is
   set by cookie-consent.js (--pm-consent-banner-space); the fallback is an
   estimate until it runs. */
body:has(.pm-consent-banner:not([hidden])) {
  padding-bottom: calc(var(--pm-consent-banner-space, 11rem) + 1rem);
}

/* Phones: the banner uses the full width, the floating buttons move above it. */
@media (max-width: 767.98px) {
  body:has(.pm-consent-banner:not([hidden])) .pm-floating {
    bottom: calc(var(--pm-consent-banner-space, 11rem) + 1rem);
  }
}

/* Tablets and up: leave a gutter on the right for the floating buttons
   (1rem offset + 3.25rem button + breathing room). */
@media (min-width: 768px) {
  .pm-consent-banner {
    left: 1rem;
    right: 5.5rem;
    bottom: 1rem;
    padding: 1.25rem 1.5rem;
  }
  .pm-consent-banner__actions {
    grid-auto-columns: auto;
    justify-content: end;
  }
  /* The notice is short: keep it compact. */
  .pm-consent-banner--notice .pm-consent-banner__actions { grid-auto-columns: minmax(6.5rem, auto); }
  .pm-consent-banner__actions .btn {
    --bs-btn-padding-x: 1.25rem;
    white-space: nowrap;
  }
}

/* Notice: text and buttons side by side as soon as there is room. */
@media (min-width: 992px) {
  .pm-consent-banner--notice .pm-consent-banner__inner {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
  .pm-consent-banner--notice .pm-consent-banner__body { flex: 1 1 auto; }
  .pm-consent-banner--notice .pm-consent-banner__actions { flex: 0 0 auto; }
}

/* Large screens: text and buttons side by side. */
@media (min-width: 1200px) {
  .pm-consent-banner__inner {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
  .pm-consent-banner__body { flex: 1 1 auto; }
  .pm-consent-banner__actions { flex: 0 0 auto; }
}

@media print {
  .pm-consent-banner { display: none !important; }
}

/* 2. Cookie policy page ----------------------------------------------------------
   Only what the legal-page layout (pages/css/pages.css) lacks. The settings card
   scrolls away; the table of contents below it is the sticky part. */
.pm-consent-settings { padding: 1.5rem; }
.pm-consent-settings:focus:not(:focus-visible) { outline: none; }
.pm-consent-settings__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.pm-consent-summary {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--pm-primary-soft);
  border-radius: var(--pm-radius-sm);
}
.pm-consent-summary__text {
  margin-bottom: 0.5rem;
  font-size: 0.925rem;
}
.pm-consent-summary__list { margin: 0; }
.pm-consent-summary__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.35rem;
  border-top: 1px solid rgba(var(--pm-primary-rgb), 0.15);
  font-size: 0.925rem;
}
.pm-consent-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pm-muted);
}
/* Status dot; the text says the same thing (colour is never the only cue). */
.pm-consent-state::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}
.pm-consent-state--on { color: #17693b; }

.pm-consent-table { margin-bottom: 1rem; }
.pm-consent-table table { font-size: 0.925rem; }
.pm-consent-table caption {
  caption-side: top;
  padding-top: 0;
  font-size: 0.875rem;
}
.pm-consent-table code {
  white-space: nowrap;
  color: var(--pm-primary-dark);
}
.pm-consent-table__tool {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--pm-muted);
}

/* Phones: five columns do not fit, so every cookie becomes a card with the
   column name in front of each value (td[data-label]). The ARIA roles in the
   markup keep the table semantics for screen readers, and the generated
   label has empty alternative text ("/ ''") so it is not read twice. */
@media (max-width: 575.98px) {
  .pm-consent-table { overflow: visible; }
  .pm-consent-table table,
  .pm-consent-table tbody,
  .pm-consent-table tr,
  .pm-consent-table th,
  .pm-consent-table td { display: block; }
  .pm-consent-table caption { display: block; padding-bottom: 0.5rem; }
  /* Column headers stay available to screen readers only. */
  .pm-consent-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pm-consent-table tbody { display: grid; gap: 0.75rem; }
  .pm-consent-table tr {
    padding: 0.75rem 0.9rem;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
  }
  /* Two classes beat Bootstrap's `.table > * > * > *` and `.pm-prose th/td`. */
  .pm-consent-table .table th,
  .pm-consent-table .table td {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .pm-consent-table .table th[scope="row"] {
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--pm-border);
    font-size: 1rem;
  }
  .pm-consent-table .table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 0.2rem;
    line-height: 1.5;
  }
  /* The long purpose text gets the full card width, below its label. */
  .pm-consent-table .table td.pm-consent-table__purpose {
    display: block;
    padding-block: 0.2rem 0.35rem;
  }
  .pm-consent-table td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--pm-muted);
    overflow-wrap: anywhere;
  }
  .pm-consent-table td.pm-consent-table__purpose::before { display: block; }
}

/* Tool and category lists use the two-column grid of the legal pages
   (.pm-legal dl); their descriptions are longer, so the rows get more room. */
.pm-legal .pm-consent-definitions dd { margin-bottom: 1rem; }