/*
 * Belenios serves this file after its own stylesheets on every page, booth included.
 * It overrides the design tokens upstream declares on :root, rather than the classes
 * that use them, so that it keeps working when Belenios changes its markup; a token
 * left out keeps upstream's value.
 * Colours are AIF's (associazioneitalianaformatori.it), and every pair meets WCAG AA:
 * 4.5:1 for text, 3:1 for control borders and the focus ring. AIF's green is 2.7:1 on
 * white, so it is only decoration here, never text or a control's only cue.
 */
:root {
  --aif-blue: #004b8f;
  --aif-blue-dark: #064278;
  --aif-blue-darker: #00345f;
  --aif-blue-soft: #e6eef6;
  --aif-green: #72ad2d;
  --aif-green-soft: #ddebcf;
  --aif-green-soft-hover: #cfe3bb;
  --aif-text: #303030;

  --font-dark: var(--aif-text);
  --font-muted: #595959;
  --alert-text: #b33a00;

  --body-background: #eef2f6;
  --border-input: #767676;
  --border-input-hover: #4d4d4d;

  --accent: var(--aif-blue);
  --accent-hover: var(--aif-blue-dark);
  --accent-active: var(--aif-blue-darker);
  --accent-soft: var(--aif-blue-soft);
  --box-blue: var(--aif-blue-soft);

  --header-background: linear-gradient(180deg, var(--aif-blue) 0%, var(--aif-blue-dark) 100%);
  --header-background-solid: var(--aif-blue);
  --footer-font: #d9d9d9;
  --footer-background: var(--aif-text);

  /* Also the colour of the labels of the steps not yet reached, hence text contrast. */
  --progress-inactive: #6b6b6b;
  --vote-nav-background: var(--aif-text);

  --button-default: #e4e7eb;
  --button-default-hover: #d2d6dc;
  --button-default-active: #b6bcc4;
  --button-white-hover: #f1f4f7;
  --button-white-active: #e4e7eb;
  --button-grey: #4d4d4d;
  --button-grey-hover: #3d3d3d;
  --button-grey-active: var(--aif-text);

  --candidate-background: #f1f4f7;
  --candidate-background-hover: #e4e8ed;
  --candidate-background-checked: var(--aif-green-soft);
  --candidate-background-checked-hover: var(--aif-green-soft-hover);
  --candidate-checkbox-border: #6b6b6b;

  --button-shadow-hover:
    0 4px 12px -2px rgba(0, 75, 143, 0.25),
    0 2px 6px -1px rgba(15, 23, 42, 0.12);
  --focus-ring: 0 0 0 3px rgba(0, 75, 143, 0.7);
}

/* No token reaches these: upstream writes its own colours into each rule. */

body {
  background-image:
    radial-gradient(at 0% 0%, rgba(0, 75, 143, 0.06) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(114, 173, 45, 0.06) 0px, transparent 50%);
}

.progress__step--current .progress__step__dot {
  box-shadow: 0 0 0 4px rgba(0, 75, 143, 0.15);
}

.page-header {
  border-bottom: 4px solid var(--aif-green);
}

/* Upstream's a:hover gives every link the accent, and it outranks the text colour a
   link styled as a button takes from its variant: the grey "see accepted ballots"
   turned dark blue on dark grey. */
a.nice-button--blue:hover,
a.nice-button--grey:hover {
  color: var(--font-light);
}

a.nice-button--white:hover,
a.nice-button--default:hover {
  color: var(--font-dark);
}

/* The link under the language selector asks visitors to translate Belenios, which
   is not something a voter comes here to do. */
.contribute-to-translations {
  display: none;
}

/*
 * The election setup menu marks each step with a symbol drawn over the start of its
 * item, so the symbol needs 3:1 on the item's background: upstream's orange has 1.9:1
 * on the light menu, and its green and red about 2:1 on the selected item, the one
 * Belenios wraps in .positioned.
 */
.main-menu__wip::before {
  color: #b35c00;
}

:is(.main-menu__ddone, .main-menu__done, .main-menu__todo, .main-menu__wip):has(+ .positioned)::before {
  color: var(--font-light);
}

/*
 * The footer shows AIF's name, large, then one small line saying that the server runs
 * Belenios, with the link to its source code, which the AGPL asks the server to offer.
 * The rest of Belenios's own footer text (its name and version, "restricted mode", and
 * links to a specification this server does not ship, the terms and the administration)
 * means nothing to a voter, and Belenios writes it as bare text and links with no wrapper
 * to style, so the footer has no font size, its blocks (AIF's from footer.html, the
 * election page's audit links) get one back, and the line about Belenios is this file's
 * own. #a6a6a6 on the footer's #303030 is 5.4:1.
 */
/* Unitless, so that the blocks inside do not inherit a line height computed from the
   footer's own size of 0. A row that wraps, with every block on a line of its own, so
   that the source link, which Belenios writes before AIF's block, can be moved to the
   last line, beside the words about Belenios. */
.page-footer {
  font-size: 0;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page-footer > a,
.page-footer > span {
  display: none;
}

.page-footer > div,
.page-footer::before {
  flex-basis: 100%;
}

.page-footer > div {
  font-size: 0.7rem;
  color: #a6a6a6;
}

/* Underlined, since its colour is the text's around it. */
.page-footer > a[href$="/belenios.tar.gz"] {
  display: block;
  order: 2;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: #a6a6a6;
  text-decoration: underline;
}

.page-footer:has(> a[href$="/belenios.tar.gz"])::after {
  content: "Powered by Belenios\00a0\00b7\00a0";
}

.page-footer a {
  color: inherit;
}

/* Upstream fades a footer link on hover, which takes the small links under 4.5:1; the
   underline already marks the hover. */
.page-footer a:hover {
  opacity: 1;
}

.page-footer::after {
  content: "Powered by Belenios";
  display: block;
  order: 1;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: #a6a6a6;
}

/* The election pages and the booth build their footer in the browser, without the
   footer hook: they lose the audit links, which voters have no use for, and get AIF's
   name. The booth's election identifier and fingerprint, in classed blocks, stay. */
.page-footer > div:not([class]) {
  display: none;
}

.page-footer:not(:has(.aif-footer))::before {
  content: "Associazione Italiana Formatori";
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

.page-footer > .aif-footer {
  font-size: 0.95rem;
  color: var(--footer-font);
}

.aif-footer__name {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

/* The test environment's banner (test-banner.html), under the header of every page. */
.test-banner {
  padding: 0.75em 1em;
  background: #fff1e0;
  border-bottom: 4px solid var(--alert-text);
  color: var(--aif-text);
  text-align: center;
}