/* Linha do Tempo do Feminismo em Moçambique.
   Bootstrap 3 (from the CDN) provides .container and the base reset. */

section {
  padding: 100px 0;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  background-color: #F5F6F7;
  color: #26282B;
}

a { color: #8460C3; text-decoration: underline; }
a:hover { color: #5E3B9B; text-decoration: underline; }

/* ---- header: back link, title, legend ---- */
header {
  color: #26282B;
  padding: 30px 50px 0 20px;
}

/* link back to the Feminismo page */
.voltar {
  display: inline-block;
  padding-left: 60px;
  font-size: 15px;
  font-weight: 500;
}

/* page title, same font and colour as the site headings */
.titulo {
  margin: 24px 0 0;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  color: #2a3662;
}

/* legend in a white box, flat (no shadow, unlike the cards) */
.texto {
  width: fit-content;
  margin: 40px auto 0;
  padding: 24px 32px;
  border-radius: 4px;
  background: #ffffff;
  color: #26282B;
  font-size: 16px;
}

.texto h2 {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0 0 16px;
}

.legenda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.legenda-lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.legenda-lista li:last-child { margin-bottom: 0; }

.legenda-cor {
  flex: 0 0 28px;
  height: 14px;
  width: 28px;
  margin-top: 3px;
}

.legenda-cor-laranja { background: #F26754; }
.legenda-cor-roxa { background: #8460C3; }
.legenda-cor-verde { background: #CAEF6C; }

/* ---- timeline ---- */
.timeline {
  position: relative;
}

/* the spine */
.timeline::before {
  content: '';
  position: absolute;
  top: 100px;
  width: 8px;
  background: #26282B;
  transform: translateX(-50%);
}

.timeline-item::after {
  content: '';
  display: block;
  clear: both;
}

/* ---- flow layout, all screen sizes (task 7.4) ----
   The template placed every card and year marker by hand (absolute positions,
   per-card margins), measured against two different boxes: the spine sits in the
   middle of the page, the cards at fixed distances from the left of a container
   whose width changes with the window. They only lined up at one window width,
   so on most desktops right-side cards sat on the spine, and on phones several
   cards were off screen. The HTML nesting is also uneven (from 1998 on, some items
   fall outside .container). The rules below ignore all of that: every card and
   marker is in the normal flow, in HTML order (chronological), whatever its parent.
   Side follows the legend: red cards (organisations and movements) on the left of
   the spine, purple and green cards (government, strategic actions) on the right.
   New cards need no positioning rule. */

/* spacer line breaks used to push cards around */
.timeline br:not(p br) { display: none; }

/* card: every timeline-content* class looks the same */
.timeline [class^="timeline-content"] {
  position: relative;
  margin: 0 0 30px;
  padding: 10px 30px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
  font-size: 15px;
}

/* a few plain cards have no <br> before their first line: extra room under the bar */
.timeline .timeline-item:nth-child(even) .timeline-content { padding-top: 40px; }

/* year marker on the spine, pulled up so its first card starts beside it */
.timeline [class^="timeline-img"] {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 0 -50px;
  padding-top: 10px;
  border-radius: 50%;
  background: #26282B;
  color: #fff;
  text-align: center;
}

.timeline .timeline-img-mais { margin-bottom: 0; }

/* small dark square and coloured bar across the top of each card, stretched to its width */
.date,
.date-right {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: #26282B;
  color: #26282B;   /* some carry a "." placeholder, hidden */
}

.barra-vermelha,
.barra-verde,
.barra-verde-clara {
  position: absolute;
  top: 0;
  height: 20px;
}

.barra-vermelha { background: #F26754; }
.barra-verde { background: #8460C3; }        /* purple despite the name: government, laws */
.barra-verde-clara { background: #CAEF6C; }  /* Green Flash: strategic actions */

/* arrow pointing at the spine */
.timeline [class^="timeline-content"]::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 0;
  height: 0;
  border-style: solid;
}

/* cards on the left of the spine (red): square on the right, arrow on the right */
.timeline [class^="timeline-content"]:has(.barra-vermelha) .date,
.timeline [class^="timeline-content"]:has(.barra-vermelha) .date-right { left: auto; right: 0; }
.barra-vermelha { left: 0; right: 20px; }
.timeline [class^="timeline-content"]:has(.barra-vermelha)::after {
  left: auto;
  right: -15px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #ffffff;
}

/* cards on the right of the spine (purple, green): square on the left, arrow on the left */
.timeline [class^="timeline-content"]:not(:has(.barra-vermelha)) .date,
.timeline [class^="timeline-content"]:not(:has(.barra-vermelha)) .date-right { left: 0; right: auto; }
.barra-verde,
.barra-verde-clara { left: 20px; right: 0; }
.timeline [class^="timeline-content"]:not(:has(.barra-vermelha))::after {
  left: -15px;
  right: auto;
  border-width: 10px 15px 10px 0;
  border-color: transparent #ffffff transparent transparent;
}

/* leftover element after the last card */
.barra-roxa { display: none; }

/* desktop: two columns around the spine in the middle */
@media screen and (min-width: 769px) {
  /* spine from the first year marker to the "+" at the end */
  .timeline::before { left: 50%; bottom: 100px; }

  .timeline [class^="timeline-content"] {
    width: calc(50% - 60px);
    max-width: 420px;
  }

  .timeline [class^="timeline-content"]:has(.barra-vermelha) {
    margin-left: auto;
    margin-right: calc(50% + 40px);
  }

  .timeline [class^="timeline-content"]:not(:has(.barra-vermelha)) {
    margin-left: calc(50% + 40px);
    margin-right: auto;
  }

  .timeline [class^="timeline-img"] { margin-left: calc(50% - 25px); }
}

/* mobile: one column, spine on the left, every card to its right */
@media screen and (max-width: 768px) {
  header { padding: 24px 20px 0; }
  .voltar { padding-left: 0; }
  .titulo { font-size: 28px; }
  .texto { margin-top: 32px; padding: 20px; }

  /* spine on the left, from the first marker to the end of the last card (30px card margin + 100px section padding) */
  .timeline::before { left: 35px; bottom: 130px; }

  /* the "+" at the end is not needed in one column */
  .timeline .timeline-img-mais { display: none; }

  .timeline [class^="timeline-content"],
  .timeline [class^="timeline-content"]:has(.barra-vermelha) {
    width: auto;
    margin-left: 55px;
    margin-right: 0;
  }

  .timeline [class^="timeline-img"] { margin-left: -5px; }

  /* from 1998 on, the uneven nesting leaves items outside .container (no 15px side padding) */
  .timeline > [class^="timeline-content"],
  .timeline > .timeline-item > [class^="timeline-content"],
  .timeline > [class^="timeline-content"]:has(.barra-vermelha),
  .timeline > .timeline-item > [class^="timeline-content"]:has(.barra-vermelha) { margin-left: 70px; margin-right: 15px; }
  .timeline > [class^="timeline-img"],
  .timeline > .timeline-item > [class^="timeline-img"] { margin-left: 10px; }

  /* every card is right of the spine here: arrow on the left */
  .timeline [class^="timeline-content"]:has(.barra-vermelha)::after {
    left: -15px;
    right: auto;
    border-width: 10px 15px 10px 0;
    border-color: transparent #ffffff transparent transparent;
  }
}