:root {
  --font-system-ui:   system-ui, sans-serif;
  --font-old-style:   'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --font-humanist:    Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;

  --font-headings:    var(--font-old-style);
  --font-body:        var(--font-system-ui);

  --colour-links:     #0564b8;
  --colour-lines:     #e1e1e1;

  --content-width:    96%;
}

@media (prefers-color-scheme: dark) {
  :root {
  }
}

html,
body {
  height: 100%;
}
html {
  scroll-behavior: smooth;
}
body {
  /*min-height: 100%;*/
  box-sizing: border-box;
  margin: 0;
  font-family: var(--font-body), sans-serif;
  font-weight: normal;
  color: #4a4a4a;
  background: #f3f3f3;
  font-size: 15px;
  line-height: 1.5;

  @media (min-width: 600px) {
    font-size: 16px;
  }
}
.dialog-off-canvas-main-canvas {
  height: 100%;
}
.layout-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 1 auto;
}

.page-max-width,
.text-max-width,
section,
main > .layout-content,
header > [role="banner"] {
  width: var(--content-width);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.text-max-width {
  max-width: 40em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings), sans-serif;
  font-style: normal;
  line-height: 1.1;
  color: #212121;

  a {
    color: inherit;
  }
}
h1 {
  margin-top: calc(0.8em + 1vw);
  margin-bottom: 0; /*calc(0.8em + 1vw);*/
}
h3 {
  font-size: 1.1em;

  @media (min-width: 900px) {
    font-size: 1.4em;
  }
}

img {
  max-width: 100%;
  height: auto;
}
figure {
  margin: 0;
  background: black;
  padding: 4px;
  color: #d4d4d4;
  border-radius: 4px;
}
figcaption {
  font-size: 0.75em;
  padding: 0.2em 0.4em;
}

.hidden {
  display: none !important;
}

a {
  &.is-active {
    color: inherit;
    font-weight: bold;
  }
}

button,
a.button {
  padding: 0.6em 1em;
  border-radius: 2em;
  border-width: 1px;
  background-color: white;
}
a.button {
  color: inherit;
  border: solid 1px #bebebe;
  text-decoration: none;
}
button,
a.button {
  &.flat {
    color: var(--colour-links);
    background: none;
    border: none;

    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }
}

/* Regions */
/* ================================================================================================================== */
header[role="banner"],
footer[role="contentinfo"] {
  a {
    color: inherit;
  }
}
header[role="banner"] {
  padding: 0.4em 1em;
  /*border-bottom: solid 1px gray;*/
  background: #0000000a;

  a {
    text-decoration: none;
  }
}
[id="brand-header"] {
  background: white;
  border-bottom: solid 1px grey;
  padding: 12px;

  img {
    height: 60px;
  }
}

footer[role="contentinfo"] {
  text-align: center;
  margin-top: calc(20px + 3vw);
  background-color: hsla(0, 0%, 0%, 0.03);
  padding: 1em;
}


/* ================================================================================================================== */
.block-page-title-block {
  text-align: center;
  display: flex;
  justify-content: center; /*space-between; -- use this when a timeline has a sponsor organisation */
  align-items: center;
  gap: 1.4em;

  h1 {
    margin-top: 0;
  }
  .partner {
    display: flex;
    gap: 1em;
    align-items: center;

    .intro {
      font-size: 0.75em;
      width: 6.2em;
    }
    .field--name-field-partner-logo {
      width: 19vw;
      @media (min-width: 550px) {
        width: 120px;
      }
    }
  }
}
header[role="banner"] {
  text-align: center;
  margin-bottom: calc(1em + 1vw);
}
.author {
  font-size: 0.7em;
  opacity: 70%;
  text-align: center;

  a {
    color: inherit;
  }
}

[id="filters"] {
  margin-bottom: 1em;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
  justify-content: center;
}
[id="presentation-buttons"] {
  position: sticky;
  top: 0;
  right: 0;
  z-index: 20;
  height: 0;
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
}


/* ================================================================================================================== */
.timeline {
  position: relative;
}
/*.timeline-overview,*/
.interval {
  text-align: center;
  position: relative;

  & > span {
    margin: -3em auto 3em;
    background: white;
    display: inline-block;
    padding: 0.1em 0.5em;
    box-shadow: 0 1px 3px #00000038;
    border-radius: 0.5em;
    font-size: 0.7rem;
  }
}
.view-timeline .attachment {
  --edge-offset: 3px;

  position: fixed;
  z-index: 90;
  top: calc(var(--drupal-displace-offset-top, 0px) + var(--edge-offset));
  left: var(--edge-offset);

  @media (max-width: 900px) {
    display: none;
  }
  @media (min-width: 700px) {
    --edge-offset: 6px;
  }

  .line {
    left: calc(50% - 1px);
  }
  .view-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
  }
  .event {
    background: initial;
    display: initial;
    border: initial;
    margin: initial;
    position: relative;
  }
  .pip {
    display: block;
    border-radius: 5px;
    width: 16px;
    height: 12px;
    background: linear-gradient(white, #dfdfdf);
    padding: 0;
    border: solid 1px #b6b6b6;
    box-sizing: border-box;
    box-shadow: 0 2px 2px #00000024;

    @media (min-width: 700px) {
      width: 14px;
      height: 10px;
    }
  }
  .node__content {
    position: absolute;
    background: white;
    border: solid 1px silver;
    width: max-content;
    max-width: 15em;
    left: 16px;
    top: 0;
    padding: 0.2em 0.4em;
    display: none;
    font-size: 0.85em;
    line-height: 1.2;
  }
  .event.scrolled {
    .pip {
      border-color: #ba1e1e;
      background: linear-gradient(#e5a2a2, #993939);
    }
  }
  .event:hover {
    .pip {
      border-color: var(--colour-primary);
      background: linear-gradient(#a29ee4, #474475);
    }
    .node__content {
      display: block;
    }
  }
}
.line {
  height: 100%;
  width: 2px;
  background-color: var(--colour-lines);
  position: absolute;
  left: calc(0px + 9px);

  @media (min-width: 900px) {
    left: calc(50% - 1px);
  }
}
.milestone {
  text-align: center;
  position: relative;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  background-color: #f4f4f4;
  background-image: linear-gradient(90deg, #fff0, white, #fff0);
  margin-top: calc(1em + 10vw);
  margin-bottom: calc(0.7em + 1.2vw);
  border-color: var(--colour-lines);
  border-style: solid;
  border-width: 1px 0;

  &:first-of-type {
    margin-top: 0;
  }
}
.event {
  display: grid;
  gap: 2px;
  grid-template-columns: 20px 2fr 4px 3fr;
  grid-template-areas: "line show gap tell";
  align-items: flex-start;
  margin-bottom: calc(20px + 3vw);
  transition: all 0.3s ease;
  scroll-margin: 40px;

  /*& + .event {
      margin-top: calc(20px + 3vw);
  }*/
  @media (min-width: 900px) {
    gap: 20px;
    grid-template-columns: 1fr 20px 1fr;
    grid-template-areas: "show line tell";

    .views-row:nth-child(2n) & {
      grid-template-areas: "tell line show";
    }
  }
  .show {
    grid-area: show;
    text-align: center;

    figure {
      /*display: inline-block;*/
      /*width: fit-content;*/
    }
    img {
      display: block;
      /*max-height: 380px;*/
      /*width: 100%;*/
      max-height: 400px;
      width: auto;
      object-fit: cover;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .tell {
    grid-area: tell;
    background: white;
    border: solid 1px #dadada;
    padding: 1em 1.1em;
    box-sizing: border-box;
    border-radius: 5px;

    h3 a {
      text-decoration: none;
    }
    &:hover h3 a {
      text-decoration: underline;
    }
    header {
      display: flex;
      align-items: center;
      gap: 0.6em;
      margin-bottom: 0.6em;
      font-size: 0.9em;

      & > * + * {
        border-left: solid 1px #c9c9c9;
        padding-left: 0.5em;
      }
    }
    .field--name-field-categories {
      display: flex;
      gap: 0.8em;
    }
  }
  &.active .tell {
    border: solid 1px var(--colour-links);
    box-shadow: 1px 1px 5px #00000026;
    border-bottom-width: 4px;
  }
  .date {
    /*font-weight: 600;*/
    /*opacity: 80%;*/
    font-weight: bold;
  }
  h3 {
    margin-top: 0;
    margin-bottom: 0.4em;
  }
  .marker {
    grid-area: line;
    background: #545454;
    border-radius: 50%;
    width: 12px;
    aspect-ratio: 1/1;
    position: relative;
    z-index: 1;
    border: solid 2px #ddd;
    background-clip: content-box;
    padding: 2px;
  }
  & > .tags {
    margin-top: 0.5em;
  }
  .description {
    @media (max-width: 600px) {
      font-size: 0.85em;
    }

  }
  &.scrolled {
    /*border: solid 4px red;*/
    .marker {
      background-color: #1671d2;
      border-color: #1671d242;
    }
    @media (min-width: 1000px) {
      transform: scale(1.08);
    }
    @media (min-width: 1400px) {
      transform: scale(1.12);
    }
  }
}
.views-row:first-child > .event {
  transform-origin: top;
}

/*.category {
    background: #505050;
    color: white;
    padding: 0 0.6em 0.08em;
    font-size: 0.85em;
    border-radius: 3px;
}
.category[data-category="National parks"]    {background-color: #537527;}
.category[data-category="Agreement / law"]   {background-color: #274b75;}
.category[data-category="Organisation"]      {background-color: #754527;}
.category[data-category="Translocation"]     {background-color: #277275;}
.category[data-category="Project / Op."]     {background-color: #752742;}
.category[data-category="Event"]             {background-color: #4d2775;}
.category[data-category="Transf. parks"]     {background-color: #756f27;}
.category[data-category="Animals"]           {background-color: #752727;}*/

.views-exposed-form {
  margin-top: 1em;
  margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
  justify-content: center;
}
.view,
.view-content {
  position: relative;
}


.field__label {
  font-weight: bold;
}
.field--label-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

[aria-label*="message"] {
  display: block;
  max-width: 40em;
  background: #ebebf9;
  border: solid 1px #8484c7;
  margin: 1em auto;
  border-radius: 3px;
  padding: 0.4em 0.8em;
}
[aria-label="Error message"] {
  background: #faebeb;
  border: solid 1px #c78484;
}
[aria-label="Warning message"] {
  background: #faf7eb;
  border: solid 1px #c7bc84;
}
[aria-label="Status message"] {
  background: #f2faeb;
  border: solid 1px #a2c784;
}
[aria-label="Info message"] {}

.tabs ul {
  padding-left: 0;
  list-style: none;
  border-bottom: solid 1px #cdcdcd;

  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  & > li > a {
    padding: 0.2em 0.3em;
    display: block;
    text-decoration: none;
  }
}

.node--type-timeline.node--view-mode-teaser {
  display: grid;
  gap: 40px;
  background: #232323;
  color: white;
  grid-template-columns: 1fr 1fr;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 30px;
  position: relative;
  transition: all 0.2s ease;

  &:hover,
  &:focus {
    background: #151515;
    transform: scale(1.05);
  }

  img {
    display: block;
  }
  .tell {
    padding-right: 1.2em;
  }
  h2 {
    color: inherit;
    font-weight: normal;

    a {
      text-decoration: none;

      &::before {
        content: '';
        position: absolute;
        inset: 0;
      }
    }
  }
  .field--name-field-date-range-text {
    opacity: 70%;
  }
}


/* ================================================================================================================== */
/* Themes */
.theme-usa_presidential {
  --colour-primary: #1d178a;
  a {
    color: var(--colour-primary);
  }
  .event {
    background: hsla(0, 0%, 100%, 0.76);
    border-top: solid 2px var(--colour-primary);
    margin-bottom: calc(20px + 5vw);

    figure {
      border-radius: 0;
      figcaption {
        text-align: initial;
        line-height: 1.3;
        font-size: 0.7em;
      }
    }
    .tell {
      background: none;
      border: none;
      border-radius: 0;
      padding-left: 6px !important;

      header {
        margin-bottom: 0.4em;

        .field--name-field-date-text {
          color: #b50000;
          font-size: 0.8em;
          font-weight: 600;
        }
      }
      h3 {
        color: #202020;
        font-weight: 500;
        font-size: calc(1.1em + 0.6vw);
      }
      .field--name-field-description {
        font-size: 0.8em;
      }
    }
    .marker {
      background-color: #1d178a;
      border-color: rgba(29, 23, 138, 0.22);
      top: -11px;
    }
    .links {
      font-size: 0.8em;
    }
  }
  .views-row:nth-child(2n-1) .event {
    .tell {
      padding-left: 0;
    }
  }
  .views-row:nth-child(2n) .event {
    .tell {
      @media (max-width: 900px) {
        padding-left: 0;
      }
      @media (min-width: 900px) {
        padding-right: 0;
      }
    }
  }
}