/* Rural Utopias */
/* Setup */

:root {

  /** Colours */
  --c-primary: #DBCE3C; /* wattle */
  --c-secondary: #545796; /* blue  */
  --c-heading: black;
}

/** Base elements and typography */

p {
  margin-top: 0;
  margin-bottom: 0;
}

.content-area {
  hyphens: auto;

  h1, h2, h3,
  h4, h5, h6 {
    font-weight: 500;
    font-size: var(--s15);
  }
}

.content-area p {
  margin-top: var(--s16);
  margin-bottom: 0;

  &:first-child {
    margin-top: 0;
  }
}

.content-area p + p:not([class^="lead-"]):not(.no-indent) {
  text-indent: 0;
}

a {
  transition: background-color 0.1s linear;
}

a:hover,
a:focus {
  background-color: var(--c-primary);
}

/* Double line separator */
hr.separator {
  border-color: var(--c-grey-light-1);
}

blockquote {
  margin-top: var(--s40);
}

/* Components */

/* Content Area */
.content-area figcaption button:hover,
.content-area figcaption button:focus {
  background-color: var(--c-primary);
}

.content-area .no-indent {
  text-indent: 0;
}

.lead-paragraph {
  padding-left: var(--s-1fr-column);

  &::before {
    content: none;
  }
}

.page-type-catalogue-project .content-area .meta-table {
  margin-top: var(--s20);
}

.footnotes {
  margin-top: var(--s40);

  li {
    list-style-position: inside;
    font-size: var(--s14);
    margin-bottom: 4px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  p {
    font-size: var(--s14);
  }
}

/** Poem */

.poem {
  display: grid;
  grid-template-columns: auto;
  grid-gap: var(--s16);
  padding-top: var(--s40);
  padding-bottom: var(--s40);

  header {

    h2 {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  footer {
    align-content: end;
    grid-column: auto;
    margin-top: 0;
    grid-column: auto;
  }

  .author {
    display: block;
    margin-top: 0;
    font-size: var(--s12);
    color: var(--c-subhead);
  }
}

.poem-buried-deep {
  grid-template-columns: 1fr 1fr;

  header {
    grid-column: span 2;
  }
}

@media screen and (min-width: 750px) {

  .poem-buried-deep {
    grid-template-columns: 1fr 2fr;

    footer {
      text-align: right;
    }
  }

}

@media screen and (min-width: 1200px) {

  .page-content .poem footer {
    grid-column: span 1;
  }

  .poem-buried-deep {
    grid-template-columns: 1fr 1fr;
  }
}

/* Logo Grid */

.host-partner-group  {
  margin-bottom: var(--s40);
}

.logo-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: var(--s20);
  grid-gap: var(--s20);
  align-items: center;

  .creative-australia-logo,
  .arts-narrogin-logo,
  .pica-logo,
  .uwa-logo {
    grid-column: span 2;
  }

  .arts-narrogin-logo,
  .pica-logo {
    width: 90%;
  }

  .arts-narrogin-logo,

  .uwa-logo {
    width: 78%;
  }
}

.host-partner-group .logo-grid  {
  grid-template-columns: repeat(3, 1fr);
}

.program-footer {

  .host-partner-group h2,
  .supporter-group h2 {
    margin-bottom: var(--s14);
    color: var(--c-black);
    font-size: var(--s12);
  }

  .content-area p {
    font-size: var(--s12);
    margin-top: var(--s8);
  }

  .host-partner-group,
  .supporter-group {
    margin-top: var(--s40);
  }
}

@media screen and (min-width: 1000px) {

  .program-footer .host-partner-group {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: var(--s20);
  }

  .page-content footer .host-partner-group h2,
  .page-content footer .supporter-group h2 {
    margin-top: var(--s8);
    margin-bottom: 0;
    padding-right: var(--s20);
    font-size: var(--s12);
  }

  .logo-grid {
    grid-row-gap: var(--s20);
  }
}


@media screen and (min-width: 1200px) {

  .supporter-group .logo-grid,
  .host-partner-group .logo-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: var(--s20);
  }
}

/* Page Cover */

.page-cover {
  position: relative;
  background-size: cover;
  background-position: center;
}

/*.page-cover h1 {
  margin-top: auto;
  margin-bottom: auto;
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--s18);
  letter-spacing: 0.02rem;
  text-align: center;
}

.page-cover h1 a {
  color: var(--c-heading);
  text-decoration: none;
}

.page-cover h1 a:hover,
.page-cover h1 a:focus {
  padding-left: var(--s4);
  padding-right: var(--s4);
  background-color: black;
  color: white;
}*/

/** Catalogue Header */

.catalogue-header {
  display: block;
  position: absolute;
  top: var(--s40);
  left: 0;
  right: 0;
}

.catalogue-header .spaced-logo {
  width: 33vw;
  left: calc(-1 * var(--s4));
  background-color: var(--c-secondary);
  border: var(--s2) solid var(--c-secondary);
}

.page-index .catalogue-header .spaced-logo {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}

.full-page-cover:not(.page-index) .page-cover {
  height: 70svh;
}

.full-page-cover:not(.page-index) .page-content {
  margin-top: calc(70svh - var(--s-header-offset));
}

@media screen and (min-width: 750px) {

  .catalogue-header .spaced-logo {
    width: 50%;
  }

  .page-cover {
    padding-top: var(--s40);
    padding-bottom: var(--s40);
  }

  .full-page-cover:not(.page-index) .page-cover {
    height: 100svh;
  }

  .full-page-cover:not(.page-index) .page-content {
    margin-top: 0;
  }
}

@media screen and (min-width: 1200px) {

  .catalogue-header .spaced-logo {
    width: 33%;
  }

  .page-cover h1 {
    font-size: var(--s20);
  }
}

/* Table of Contents */

.catalogue-toc button {
  padding-left: var(--s20);
  text-align: center;
}

@media screen and (min-width: 750px) {

  .catalogue-toc button {
    padding-left: 0;
    text-align: left;
  }
}

/* Page Content */

.page-header {
  grid-row-gap: var(--s8);
  min-height: auto;
}

.page-header .exhibition-location,
.page-header .exhibition-date {
  grid-column-start: 2;
}

.page-content {
  padding-left: var(--s20);
  padding-right: var(--s20);
}

.project-credits p + .credits {
  margin-top: var(--s20);
}

@media screen and (min-width: 750px) {

  .page-header {
    margin-top: var(--s40);
  }

  .page-content {
    display: flex;
    flex-direction: column;
    padding-left: var(--s40);
  }

  .page-type-catalogue-index .page-content .content-area {
    margin-top: auto;
    margin-bottom: 0;
  }

  .page-type-catalogue-index .program-footer {
    margin-top: var(--s40);
  }
}

@media screen and (min-width: 1000px) {

  .page-header {
    grid-row-gap: 0;
  }

  .page-header .page-title {
    margin-bottom: var(--s20);
  }

  .page-header .exhibition-date br {
    display: none;
  }

  .page-content {
    padding-left: var(--s60);
    padding-right: var(--s40);
  }
}


@media screen and (min-width: 1200px) {

  .page-content .content-area footer {
    /*grid-column: 1/3;*/
  }

  .page-content footer section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: var(--s20);
  }

  .page-content footer section > * {
    grid-column-start: 2;
  }

  .page-content footer h2 {
    color: var(--c-subhead);
  }

  .page-content footer .highlight {
    color: var(--c-black);
  }

  .page-content footer .aside-heading {
    grid-column-start: 1;
    margin-top: 0;
  }
}

/* Epilogue */

.page-essay-epilogue .content-area h2:first-child {
  margin-bottom: 0;
}

/* Page Covers */

.page-cover {
  background-repeat: no-repeat;
  background-color: var(--c-secondary);
  background-position: center center, top left;
  background-size: 113%, cover;
  background-image: url("../images/circular-economies/orbs.png"),
                    url("../images/circular-economies/program-background-blue.svg");
}

.page-index .page-cover {
  background-color: var(--c-primary);
  background-image: url("../images/circular-economies/orbs.png"),
                    url("../images/circular-economies/program-background-yellow.svg");
}