/**
 * EEB AAQD Transposition Tracker - single country page styles.
 * All rules scoped under `.eeb-aqt-single` for BeTheme conflict-proofing.
 * Tokens extracted from Guglielmo's Figma (node 414:8182).
 */

/* Theme overrides: hide BeTheme's auto-injected page-title band so the
   plugin renders flush against the site header. The .eeb-aqt-page body
   class is added by inc/template.php on the tracker page and on every
   single country_status. */
body.eeb-aqt-page .header-image-position,
body.eeb-aqt-page .header-image-wrapper,
body.eeb-aqt-page .subheader { display: none !important; }

.eeb-aqt-single {
  /* Palette (shared with the map dots ramp) */
  --eeb-navy:       #2C478C;
  --eeb-navy-dark:  #172549;
  --eeb-navy-mid:   #4768B0;
  --eeb-navy-mute:  #7E9AD0;
  --eeb-navy-pale:  #CDDAFC;
  --eeb-dash:       #7186BC;
  --eeb-blue-bg:    #EBF0FF;
  --eeb-text:       #475569;
  --eeb-text-muted: #64748B;

  /* Risk palette */
  --risk-1: #E58888;
  --risk-2: #D15E5E;
  --risk-3: #C14242;
  --risk-4: #A32F2F;
  --risk-5: #7A1F1F;
  --risk-border: #C0392B;
  --risk-text:   #C14242;

  /* Typography */
  --font-heading: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Open Sans", Arial, Tahoma, sans-serif;

  /* Shape */
  --radius-card: 16px;

  font-family: var(--font-body) !important;
  color: var(--eeb-text);
  line-height: 1.5;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.eeb-aqt-single *,
.eeb-aqt-single *::before,
.eeb-aqt-single *::after { box-sizing: border-box; }

/* Internal reset to beat BeTheme defaults */
.eeb-aqt-single h1,
.eeb-aqt-single h2,
.eeb-aqt-single h3 {
  margin: 0 !important;
  padding: 0;
  font-family: var(--font-heading) !important;
  color: var(--eeb-navy);
  line-height: 1.2;
}
.eeb-aqt-single p {
  margin: 0 !important;
  padding: 0;
  line-height: 1.5;
}
.eeb-aqt-single ol,
.eeb-aqt-single ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.eeb-aqt-single li { margin: 0; padding: 0; }
.eeb-aqt-single a {
  color: var(--eeb-navy);
  text-decoration: none !important;
  font-weight: 700;
}
.eeb-aqt-single a:hover,
.eeb-aqt-single a:focus-visible { color: var(--eeb-navy-dark); text-decoration: underline !important; }
.eeb-aqt-single img { display: block; max-width: 100%; height: auto; }

/* ---------- Hero (pale blue band) ---------- */

.eeb-aqt-single .eeb-aqt-single__hero {
  background: var(--eeb-blue-bg);
  padding: 96px 24px 64px;
}
.eeb-aqt-single .eeb-aqt-single__hero-inner {
  max-width: 852px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.eeb-aqt-single .eeb-aqt-single__back {
  align-self: flex-start;
  font-family: var(--font-heading) !important;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4286;
  color: var(--eeb-navy) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding: 0 8px;
}
.eeb-aqt-single .eeb-aqt-single__back:hover,
.eeb-aqt-single .eeb-aqt-single__back:focus-visible { color: var(--eeb-navy-dark) !important; }

.eeb-aqt-single .eeb-aqt-single__header {
  display: flex;
  align-items: center;
  gap: 24px;
}
.eeb-aqt-single .eeb-aqt-single__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eeb-aqt-single .eeb-aqt-single__title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.eeb-aqt-single .eeb-aqt-single__flag {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  display: block;
  border-radius: 2px;
}
.eeb-aqt-single .eeb-aqt-single__title {
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.eeb-aqt-single .eeb-aqt-single__updated {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem;
  color: var(--eeb-text);
}

.eeb-aqt-single .eeb-aqt-single__intro {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--eeb-text);
  max-width: 760px;
}
.eeb-aqt-single .eeb-aqt-single__intro p { margin: 0 0 12px !important; }
.eeb-aqt-single .eeb-aqt-single__intro p:last-child { margin-bottom: 0 !important; }

/* ---------- Overall score circle ---------- */

.eeb-aqt-overall {
  position: relative;
  display: inline-flex;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.eeb-aqt-overall__svg { width: 88px; height: 88px; }
.eeb-aqt-overall__progress {
  /* Each layer transitions its stroke-dashoffset from its pathLength (hidden)
     to 0 (fully revealed) when the circle enters the viewport. JS triggers
     the transition per layer with a small stagger for the taper-in effect. */
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.eeb-aqt-overall__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading) !important;
  color: var(--eeb-navy);
  line-height: 1;
}
.eeb-aqt-overall__score {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--eeb-navy);
  line-height: 1;
}
.eeb-aqt-overall__max {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--eeb-navy);
  margin-left: 1px;
  /* Inline flow: natural baseline alignment with the parent "3" text.
     No line-height override so browser baseline math stays predictable. */
}

/* ---------- Body content wrapper ---------- */

.eeb-aqt-single .eeb-aqt-single__body {
  max-width: 852px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.eeb-aqt-single .eeb-aqt-single__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Key developments uses a slightly roomier internal rhythm */
.eeb-aqt-single .eeb-aqt-developments { gap: 16px; }
.eeb-aqt-single .eeb-aqt-single__section-title {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--eeb-navy);
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* ---------- Score card (unified: pillar + risk) ---------- */

.eeb-aqt-single .eeb-aqt-score-card {
  background: #FFFFFF;
  border: 1px solid var(--eeb-navy-pale);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eeb-aqt-single .eeb-aqt-score-card--risk {
  border-color: var(--risk-border);
  padding: 16px 24px;
  gap: 16px;
}
.eeb-aqt-single .eeb-aqt-score-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.eeb-aqt-single .eeb-aqt-score-card__title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--eeb-navy);
  margin: 0 !important;
}
.eeb-aqt-single .eeb-aqt-score-card--risk .eeb-aqt-score-card__title {
  font-size: 1.75rem !important;
  color: var(--risk-text);
}
.eeb-aqt-single .eeb-aqt-score-card__score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.eeb-aqt-single .eeb-aqt-score-card__value {
  font-family: var(--font-heading) !important;
  color: var(--eeb-navy);
  line-height: 1;
  white-space: nowrap;
}
.eeb-aqt-single .eeb-aqt-score-card--risk .eeb-aqt-score-card__value { color: var(--risk-text); }
.eeb-aqt-single .eeb-aqt-score-card__num { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.eeb-aqt-single .eeb-aqt-score-card__max { font-size: 1rem; font-weight: 700; color: #5C75B4; margin-left: 1px; }
.eeb-aqt-single .eeb-aqt-score-card--risk .eeb-aqt-score-card__max { color: #926965; }
.eeb-aqt-single .eeb-aqt-score-card__desc {
  font-size: 1rem;
  color: var(--eeb-text);
  line-height: 1.5;
}
.eeb-aqt-single .eeb-aqt-score-card__divider {
  border: none;
  height: 1px;
  background: #EECACA;
  margin: 0;
}
.eeb-aqt-single .eeb-aqt-score-card__subtitle {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3333 !important;
  color: var(--risk-text);
  margin: 0 !important;
}

/* ---------- Dots (shared, variants = pillar / risk) ---------- */

.eeb-aqt-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.eeb-aqt-dots__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--eeb-navy-pale);
  transition: background-color 200ms ease, border-color 200ms ease, opacity 380ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Pillar variant: filled dots follow the navy ramp by position */
.eeb-aqt-dots--pillar .eeb-aqt-dots__dot--p1.eeb-aqt-dots__dot--filled { background: var(--eeb-navy-pale); border-color: #7B93D0; }
.eeb-aqt-dots--pillar .eeb-aqt-dots__dot--p2.eeb-aqt-dots__dot--filled { background: var(--eeb-navy-mute); border-color: #7B93D0; }
.eeb-aqt-dots--pillar .eeb-aqt-dots__dot--p3.eeb-aqt-dots__dot--filled { background: var(--eeb-navy-mid); border-color: transparent; }
.eeb-aqt-dots--pillar .eeb-aqt-dots__dot--p4.eeb-aqt-dots__dot--filled { background: var(--eeb-navy); border-color: transparent; }
.eeb-aqt-dots--pillar .eeb-aqt-dots__dot--p5.eeb-aqt-dots__dot--filled { background: var(--eeb-navy-dark); border-color: transparent; }

/* Risk variant: reddish ramp */
.eeb-aqt-dots--risk .eeb-aqt-dots__dot { border-color: var(--risk-1); }
.eeb-aqt-dots--risk .eeb-aqt-dots__dot--p1.eeb-aqt-dots__dot--filled { background: var(--risk-1); border-color: var(--risk-1); }
.eeb-aqt-dots--risk .eeb-aqt-dots__dot--p2.eeb-aqt-dots__dot--filled { background: var(--risk-2); border-color: var(--risk-2); }
.eeb-aqt-dots--risk .eeb-aqt-dots__dot--p3.eeb-aqt-dots__dot--filled { background: var(--risk-3); border-color: var(--risk-3); }
.eeb-aqt-dots--risk .eeb-aqt-dots__dot--p4.eeb-aqt-dots__dot--filled { background: var(--risk-4); border-color: var(--risk-4); }
.eeb-aqt-dots--risk .eeb-aqt-dots__dot--p5.eeb-aqt-dots__dot--filled { background: var(--risk-5); border-color: var(--risk-5); }

/* When the animation controller takes over, start all dots invisible. The
   controller then adds .is-lit sequentially to reveal them. */
.eeb-aqt-dots.is-animating .eeb-aqt-dots__dot { opacity: 0; transform: scale(0.5); }
.eeb-aqt-dots.is-animating .eeb-aqt-dots__dot.is-lit { opacity: 1; transform: scale(1); }

/* ---------- Key developments timeline ---------- */

.eeb-aqt-single .eeb-aqt-developments__list {
  position: relative;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.eeb-aqt-single .eeb-aqt-developments__item {
  position: relative;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Connecting line: each item draws the segment from just below its own dot
   down to the next item's dot top. Last item has no line — this stops the
   line at the final dot. The gap between items is 24px and the next dot
   sits 4px below its item top, so the line extends 28px past the current
   item's bottom to reach the next dot. */
.eeb-aqt-single .eeb-aqt-developments__item::before {
  content: "";
  position: absolute;
  left: -21.5px;
  top: 12px;
  bottom: -28px;
  width: 1px;
  background: var(--eeb-navy);
}
.eeb-aqt-single .eeb-aqt-developments__item:last-child::before { display: none; }
.eeb-aqt-single .eeb-aqt-developments__dot {
  position: absolute;
  left: -25px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eeb-navy);
}
.eeb-aqt-single .eeb-aqt-developments__date {
  font-family: var(--font-heading) !important;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4286;
  color: var(--eeb-navy);
}
.eeb-aqt-single .eeb-aqt-developments__text {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--eeb-text);
  margin: 0 !important;
}

/* ---------- Public participation row ---------- */

.eeb-aqt-single .eeb-aqt-participation__row {
  background: #FFFFFF;
  border-radius: var(--radius-card);
  border: 1px solid var(--eeb-navy-pale);
  padding: 24px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.eeb-aqt-single .eeb-aqt-participation__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.eeb-aqt-single .eeb-aqt-participation__label {
  font-family: var(--font-heading) !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--eeb-text);
}
.eeb-aqt-single .eeb-aqt-participation__value {
  font-family: var(--font-heading) !important;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--eeb-text);
}
.eeb-aqt-single .eeb-aqt-participation__value--pill {
  display: inline-flex;
  align-items: center;
  background: var(--eeb-blue-bg);
  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
  width: auto;
}
.eeb-aqt-single .eeb-aqt-participation__link { color: var(--eeb-navy); text-decoration: none !important; }

/* ---------- Why this matters ---------- */

.eeb-aqt-single .eeb-aqt-why__body {
  font-family: var(--font-body) !important;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--eeb-navy);
}
.eeb-aqt-single .eeb-aqt-why__body p { margin: 0 0 12px !important; }
.eeb-aqt-single .eeb-aqt-why__body p:last-child { margin-bottom: 0 !important; }

/* ---------- Local partners ---------- */

/* Civil society organisations EEB collaborates with in the country.
   Singolare/plurale del titolo gestito lato PHP in base al count del
   repeater. Layout: card row con logo a sinistra (max 120px tall) e
   meta a destra (nome + url cliccabile). Multipli partner in lista. */
.eeb-aqt-single .eeb-aqt-partners__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eeb-aqt-single .eeb-aqt-partners__item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  background: #FFFFFF;
  border: 1px solid #CDDAFC;
  border-radius: 16px;
}
.eeb-aqt-single .eeb-aqt-partners__logo-wrap {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eeb-aqt-single .eeb-aqt-partners__logo {
  display: block;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.eeb-aqt-single .eeb-aqt-partners__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.eeb-aqt-single .eeb-aqt-partners__name {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.125rem;
  line-height: 1.3333;
  color: var(--eeb-navy);
  margin: 0 !important;
}
.eeb-aqt-single .eeb-aqt-partners__url {
  font-family: var(--font-body) !important;
  font-size: 0.9375rem;
  line-height: 1.4667;
  color: #5C75B4;
  text-decoration: none !important;
  word-break: break-word;
}
.eeb-aqt-single .eeb-aqt-partners__url:hover,
.eeb-aqt-single .eeb-aqt-partners__url:focus-visible {
  color: var(--eeb-navy);
  text-decoration: underline !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .eeb-aqt-single .eeb-aqt-single__hero { padding: 64px 20px 48px; }
  .eeb-aqt-single .eeb-aqt-single__body { padding: 48px 20px 72px; }
  .eeb-aqt-single .eeb-aqt-single__header { flex-wrap: wrap; gap: 16px; }
  .eeb-aqt-single .eeb-aqt-single__title { font-size: 2.25rem !important; }
  .eeb-aqt-single .eeb-aqt-score-card__head { flex-direction: column; align-items: flex-start; }
  .eeb-aqt-single .eeb-aqt-participation__row { gap: 24px; }
  .eeb-aqt-single .eeb-aqt-partners__item { flex-direction: column; align-items: flex-start; gap: 16px; }
  .eeb-aqt-single .eeb-aqt-partners__logo-wrap { width: auto; }
}

.eeb-aqt-single :focus-visible { outline: 3px solid #C7DF4D; outline-offset: 2px; border-radius: 2px; }