/**
 * Crescita Studio — Consent
 * Source of truth: Legal Terms & Website Compliance Implementation Spec §28–30
 *
 * A bottom-anchored bar for the initial choice and a modal preferences panel
 * for changing it. Deliberately not a blocking overlay on first view: §29
 * requires an understandable, non-coercive choice, and interrupting the page
 * with a forced modal is both coercive and hostile to keyboard users.
 *
 * Accept and Reject are visually identical by design (§29: "Do not make
 * 'Accetta' visually coercive"). Do not restyle one to draw the eye.
 *
 * The bar is position: fixed and therefore out of flow — it cannot shift
 * layout, so CLS stays at zero (CWB §8).
 */

/* ── Consent bar ─────────────────────────────────────────────── */

/* border-box is set explicitly rather than inherited from GeneratePress'
   reset: this component's width and max-height maths must hold on their own,
   and a parent-theme change should not be able to break the consent UI. */
.crescita-consent,
.crescita-consent *,
.crescita-consent-dialog,
.crescita-consent-dialog * {
  box-sizing: border-box;
}

.crescita-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  background-color: var(--color-bg-dark);
  border-top: 1px solid var(--color-border-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-md) 0;
  /* Never let the bar swallow the page on a short viewport. */
  max-height: 60vh;
  overflow-y: auto;
}

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

.crescita-consent__inner {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}

@media (min-width: 1024px) {
  .crescita-consent__inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-lg);
    align-items: center;
  }
}

.crescita-consent__title {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-2xs);
  color: var(--color-text-on-dark);
}

.crescita-consent__body {
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--color-text-on-dark-secondary);
  margin: 0;
  max-width: var(--width-text);
}

/* At 375px the disclosure wraps to roughly ten lines, and at the desktop
   rhythm the bar took 40% of the viewport — enough to read as a wall rather
   than a choice. Tightened rather than shortened: the copy is
   compliance-relevant and is not varied by viewport. */
@media (max-width: 767.98px) {
  .crescita-consent {
    padding: var(--space-sm) 0;
  }

  .crescita-consent__inner {
    gap: var(--space-sm);
  }

  .crescita-consent__body {
    line-height: 1.45;
  }

  .crescita-consent__actions {
    gap: var(--space-2xs) var(--space-sm);
  }
}

.crescita-consent__body a {
  color: var(--color-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ── Consent actions ─────────────────────────────────────────── */

.crescita-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Accept and Reject share one class so they cannot drift apart. */
.crescita-consent__choice {
  font-family: var(--font-primary);
  font-size: var(--text-button);
  font-weight: 500;
  line-height: 1;
  padding: 1rem 1.75rem;
  min-width: 8rem;
  text-align: center;
  background-color: var(--crescita-sand);
  color: var(--crescita-midnight);
  border: 1px solid var(--crescita-sand);
  border-radius: var(--radius-cta);
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

/*
 * Rounded with the rest of the site's controls, and lit rather than dimmed on
 * hover — Sand → white, where it used to go Sand → Stone, which is darker.
 *
 * **No gloss sweep here, deliberately.** The travelling highlight marks a
 * page's primary action, and §29 is explicit that neither consent choice may be
 * made visually more attractive than the other. Both buttons still share one
 * class and one hover, so they remain identical; adding an animated highlight
 * to a consent bar would either favour one choice or turn a legal control into
 * an advertisement for itself.
 */
.crescita-consent__choice:hover,
.crescita-consent__choice:focus-visible {
  background-color: #fff;
  border-color: #fff;
  /* GeneratePress' own `button:hover, ...` rule sets color:#fff at
     specificity (0,1,1) — higher than this class alone at (0,1,0) — and
     silently won on hover, leaving invisible white text on this now-white
     background. Re-declaring color here (0,2,0) is what actually beats it;
     confirmed on the live page 2026-09-26, not assumed. */
  color: var(--crescita-midnight);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* Preferences is a genuine third option, not a hidden escape hatch:
   underlined and full-size, just lower emphasis than the two choices. */
.crescita-consent__more {
  font-family: var(--font-primary);
  font-size: var(--text-button);
  font-weight: 400;
  line-height: 1;
  padding: 1rem 0.5rem;
  background: none;
  border: 0;
  color: var(--color-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* ── Preferences dialog ──────────────────────────────────────── */

/* Native <dialog> carries the focus trap, Escape handling and inert
   background for free — hand-rolling those is where consent UIs usually
   break for keyboard and screen-reader users. */
.crescita-consent-dialog {
  width: min(38rem, calc(100vw - 2 * var(--space-md)));
  max-height: calc(100vh - 2 * var(--space-lg));
  overflow-y: auto; /* max-height alone would clip the categories, not scroll them */
  padding: var(--space-lg);
  background-color: var(--color-bg);
  color: var(--color-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.crescita-consent-dialog::backdrop {
  background-color: rgba(15, 23, 34, 0.6);
}

.crescita-consent-dialog__title {
  font-family: var(--font-primary);
  font-size: var(--text-h3);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-sm);
}

.crescita-consent-dialog__intro {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-lg);
}

.crescita-consent-group {
  border: 0;
  border-top: var(--border-hairline);
  margin: 0;
  padding: var(--space-md) 0 0;
}

.crescita-consent-group + .crescita-consent-group {
  margin-top: var(--space-md);
}

.crescita-consent-group__legend {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-heading);
  padding: 0;
}

.crescita-consent-group__body {
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin: var(--space-2xs) 0 0;
}

/* Always-on categories read as state, not as a disabled control the user
   might think they could change. */
.crescita-consent-group__state {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

.crescita-consent-toggle {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  margin-top: var(--space-xs);
  cursor: pointer;
}

/* 24px minimum target (WCAG 2.2 SC 2.5.8). */
.crescita-consent-toggle input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--crescita-ocean);
  cursor: pointer;
}

.crescita-consent-toggle__label {
  font-size: var(--text-small);
  line-height: 1.4;
}

.crescita-consent-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-hairline);
}

/* Lowest emphasis of the three: leaving without deciding is a legitimate
   exit, not the encouraged one. */
.crescita-consent-dialog__dismiss {
  font-family: var(--font-primary);
  font-size: var(--text-button);
  font-weight: 400;
  line-height: 1;
  padding: 1rem 0.5rem;
  margin-inline-start: auto;
  background: none;
  border: 0;
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color var(--transition-base);
}

.crescita-consent-dialog__dismiss:hover {
  color: var(--color-body);
}

/* ── Footer control ──────────────────────────────────────────── */

/* Sits beside the copyright line in the Midnight footer, so it matches that
   line's weight rather than competing with it. Padded to clear the 24px
   minimum target size (WCAG 2.2 SC 2.5.8) — at 14px the bare text box is 18px. */
.crescita-consent-reopen {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  line-height: 1;
  padding-block: var(--space-2xs);
  background: none;
  border: 0;
  color: var(--color-text-on-dark-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color var(--transition-base);
}

.crescita-consent-reopen:hover {
  color: var(--color-text-on-dark);
}

/* ── Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .crescita-consent {
    animation: crescita-consent-in 240ms ease-out;
  }

  @keyframes crescita-consent-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}