/*
 * The General Assembly portal (add-ga-public-site §5) — on the VolunHub host and on
 * ag.scout.ro alike. Only design-system tokens (--bs-*, --vh-*, --oncr-*): the published
 * theme loads design_system.css, so the portal looks the same inside either chrome.
 * The look is the „Portalul AG" design canvas (2026-10-27): a solid bleumarin header with the
 * ONCR logo and a gold accent, numbered steps, date badges, pills for the tabs on a phone.
 */
.ga-hero {
  background: var(--oncr-bleumarin, var(--bs-primary));
  color: var(--bs-white);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; justify-content: space-between;
}
/* design_system.css paints every heading bleumarin, which vanished on the hero's own
   bleumarin: a heading inside it takes the hero's colour. */
.ga-hero :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: inherit; }
.ga-hero__main { display: flex; gap: 1rem; align-items: center; flex: 1 1 26rem; min-width: 0; }
.ga-hero__logo { width: 3.5rem; height: auto; flex: 0 0 auto; }
.ga-hero__eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-size: var(--vh-font-xs, .75rem);
  font-weight: 600; color: var(--oncr-auriu, var(--bs-warning));
}
.ga-hero__meta { color: color-mix(in srgb, var(--bs-white) 88%, transparent); }
.ga-hero .badge { background: color-mix(in srgb, var(--bs-white) 18%, transparent); color: var(--bs-white); }
.ga-countdown {
  display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--bs-white) 28%, transparent); border-radius: .75rem;
}
.ga-countdown__number { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--oncr-auriu, var(--bs-warning)); }
.ga-countdown__label { font-size: var(--vh-font-sm, .8125rem); color: color-mix(in srgb, var(--bs-white) 88%, transparent); }
.ga-live {
  display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 999px;
  background: var(--oncr-rosu, var(--bs-danger)); color: var(--bs-white); font-weight: 600; font-size: var(--vh-font-sm, .8125rem);
}
.ga-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-white); }

/* The portal's tabs: an underlined strip on a wide screen, scrolling pills on a phone. */
.ga-nav {
  display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; scrollbar-width: thin;
  list-style: none; margin: 1rem 0 1.5rem; padding: 0; border-bottom: 1px solid var(--bs-border-color);
}
.ga-nav__link {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .875rem; white-space: nowrap;
  color: var(--bs-body-color); text-decoration: none; border-bottom: 3px solid transparent;
}
.ga-nav__link:hover { color: var(--oncr-bleumarin, var(--bs-primary)); }
.ga-nav__link[aria-current="page"] {
  color: var(--oncr-bleumarin, var(--bs-primary)); font-weight: 600;
  border-bottom-color: var(--oncr-bleumarin, var(--bs-primary));
}
@media (max-width: 767.98px) {
  .ga-hero { border-radius: .75rem; padding: 1.25rem 1rem; }
  .ga-hero__logo { width: 2.75rem; }
  .ga-countdown { flex-direction: row; align-items: baseline; gap: .375rem; padding: .375rem .75rem; border-radius: 999px; }
  .ga-countdown__number { font-size: 1.125rem; }
  .ga-nav { gap: .5rem; padding-bottom: .625rem; }
  .ga-nav__link {
    min-height: 2.25rem; padding: 0 .875rem; border-radius: 999px; border-bottom: 0;
    background: var(--vh-surface-muted, var(--bs-tertiary-bg));
  }
  .ga-nav__link[aria-current="page"] { background: var(--oncr-bleumarin, var(--bs-primary)); color: var(--bs-white); }
}

.ga-panel {
  background: var(--vh-surface, var(--bs-body-bg)); border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
  border-radius: .75rem; padding: 1.5rem;
}
@media (max-width: 767.98px) { .ga-panel { padding: 1rem; } }
.ga-panel__title { font-size: 1.25rem; margin-bottom: .25rem; }

/* „Ce poți face acum": numbered steps, tinted by what they ask of the viewer. */
.ga-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.ga-step {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; padding: 1rem; border-radius: .625rem;
  background: var(--vh-surface-muted, var(--bs-tertiary-bg));
}
.ga-step__mark {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  background: var(--bs-white); border: 2px solid var(--bs-gray-400, #9CA3AF); color: var(--bs-secondary-color);
}
.ga-step__body { flex: 1 1 16rem; min-width: 0; }
.ga-step__title { font-weight: 600; }
.ga-step__text { font-size: var(--vh-font-sm, .8125rem); color: var(--bs-secondary-color); }
.ga-step__action { min-height: 2.75rem; display: inline-flex; align-items: center; }
.ga-step--primary, .ga-step--warning { background: color-mix(in srgb, var(--oncr-auriu, var(--bs-warning)) 16%, var(--bs-white)); }
.ga-step--primary .ga-step__mark, .ga-step--warning .ga-step__mark {
  background: var(--oncr-auriu, var(--bs-warning)); border-color: var(--oncr-auriu, var(--bs-warning)); color: var(--oncr-bleumarin, var(--bs-primary));
}
.ga-step--success { background: color-mix(in srgb, var(--bs-success) 12%, var(--bs-white)); }
.ga-step--success .ga-step__mark { background: var(--bs-success); border-color: var(--bs-success); color: var(--bs-white); }
.ga-step--danger { background: color-mix(in srgb, var(--bs-danger) 10%, var(--bs-white)); }
.ga-step--danger .ga-step__mark { background: var(--bs-danger); border-color: var(--bs-danger); color: var(--bs-white); }
@media (max-width: 767.98px) {
  .ga-step__action { flex: 1 1 100%; justify-content: center; }
}

/* Deadlines with a date badge; the next one is filled. */
.ga-dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.ga-dates__item { display: flex; gap: .875rem; align-items: center; }
.ga-date {
  flex: 0 0 3.25rem; text-align: center; border-radius: .5rem; padding: .375rem 0; line-height: 1.1;
  background: var(--bs-primary-bg-subtle); color: var(--oncr-bleumarin, var(--bs-primary));
}
.ga-date--next { background: var(--oncr-bleumarin, var(--bs-primary)); color: var(--bs-white); }
.ga-date__day { display: block; font-size: 1.25rem; font-weight: 700; }
.ga-date__month { display: block; font-size: var(--vh-font-xs, .75rem); }

.ga-calendar__row--past { color: var(--bs-secondary-color); }
.ga-calendar__row--next { background: var(--vh-surface-muted, var(--bs-tertiary-bg)); }

.ga-agenda__order {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
  font-weight: 600;
}

/* The viewer's own structure, above the voting-rights list. */
.ga-own {
  border: 2px solid var(--oncr-bleumarin, var(--bs-primary)); border-radius: .75rem; padding: 1rem;
  background: var(--vh-surface, var(--bs-body-bg)); display: flex; flex-direction: column; gap: .5rem;
}
.ga-own__eyebrow { font-size: var(--vh-font-xs, .75rem); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }

/* A seat's progress, from designation to validation. */
.ga-progress { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.ga-progress__item { display: flex; gap: .75rem; align-items: flex-start; }
.ga-progress__mark {
  flex: 0 0 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--vh-font-sm, .8125rem);
  background: var(--bs-white); border: 2px solid var(--bs-gray-400, #9CA3AF); color: var(--bs-secondary-color);
}
.ga-progress__item--done .ga-progress__mark { background: var(--bs-success); border-color: var(--bs-success); color: var(--bs-white); }
.ga-progress__item--current .ga-progress__mark {
  background: var(--oncr-auriu, var(--bs-warning)); border-color: var(--oncr-auriu, var(--bs-warning)); color: var(--oncr-bleumarin, var(--bs-primary));
}
.ga-progress__item--failed .ga-progress__mark { background: var(--bs-danger); border-color: var(--bs-danger); color: var(--bs-white); }
.ga-progress__note { font-size: var(--vh-font-sm, .8125rem); color: var(--bs-secondary-color); }

/* The open vote, first on „Ședința". */
.ga-vote-now {
  border: 2px solid var(--oncr-auriu, var(--bs-warning)); border-radius: .75rem; padding: 1rem;
  background: var(--vh-surface, var(--bs-body-bg));
}

.ga-qr svg { width: 100%; max-width: 16rem; height: auto; }