/*
 * application_public.css
 */


/* Variables */

:root {
  --color-black: #000;
  --color-blue: #00f;
  --color-white: #fff;

  --font-monospace: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
  --font-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif;

  --font-weight-semibold: 600;

  --background-color: var(--color-white);
  --font-family: var(--font-sans-serif);
  --font-size: 1.6rem;
  --text-color: var(--color-black);

  --brand-background-color: #faf5ef; /* #f4ecdf */
  --brand-background-color_lightened: var(--color_white); /* #fbf5e9 */
  --brand-primary-color: #d97b66;
  --brand-primary-color_darkened: rgb(207,88,61);
  --brand-secondary-color: #3b6a66;
  --brand-font-family-display: "Lexend Deca", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  --brand-font-family-text: "Lora", Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif;

  /* Bootstrap overwrites */
  --bs-nav-link-color: var(--brand-secondary-color);
}


/* Document */

html,
body {
  cursor: default;
  background-color: var(--brand-background-color);
  font-family: var(--brand-font-family-text);
  font-weight: 400;
  color: var(--color-black);
}

html {
}

body {
  margin-top: 60px;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

a,
a:link,
a:visited {
  color: var(--brand-primary-color);
}

a:hover,
a:focus,
a:active,
a:focus {
  color: var(--brand-primary-color_darkened);
}


/*
 * Navigation
 */

nav#main_navigation.navbar {

  background-color: var(--color-white);

  a.navbar-brand,
  a.navbar-brand:link,
  a.navbar-brand:visited {
    min-width: 130px; /* avoids .navbar-nav jumping around on :hover */
  } /* / a.navbar-brand */

} /* /nav */

.nav-link,
a.nav-link,
a.nav-link:link,
a.nav-link:visited {
  font-family: var(--brand-font-family-display);
  font-weight: 500;
  color: var(--brand-secondary-color);
} /* /.nav-link */



/*
 * Buttons
 */

/* Brand Button */

a.btn-brand,
a.btn-brand:link,
a.btn-brand:visited,
button.btn-brand {
  border: 1px solid var(--brand-primary-color_darkened);

  background-color: var(--brand-primary-color);

  font-family: var(--brand-font-family-display);
  font-weight: 400;
  color: var(--color-white);

  &:active,
  &:focus,
  &:hover {
    border-color: var(--brand-primary-color_darkened);
    background-color: var(--brand-primary-color_darkened);
    color: var(--color-white);
  }
}

.bg-brand { background-color: var(--brand-primary-color); }

.text-brand,
.link-brand,
.link-brand:link,
.link-brand:visited {
  color: var(--brand-primary-color);
}

.link-brand:hover,
.link-brand:active,
.link-brand:focus {
  color: var(--brand-primary-color_darkened);
}

.nav-link:hover .bg-brand,
.nav-link:active .bg-brand,
.nav-link:focus .bg-brand {
  background-color: var(--brand-primary-color_darkened);
}

a.btn-outline-brand,
a.btn-outline-brand:link,
a.btn-outline-brand:visited {
  border: 1px solid var(--brand-primary-color_darkened);
  background-color: var(--color-white);
  color: var(--brand-primary-color);
}


/*
 * Content area
 */

main {
  h2:not(.accordion-header) {
    padding-top: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 2.8rem;
  }

  ul li,
  ol li,
  p {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
}

.text-sans-serif {
  font-family: var(--brand-font-family-display);
}



/* Accordion */

.accordion-headline {
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-size: 1rem;
}

.accordion {
  .accordion-button {
    transition: all .2s ease-out;
    background-color: var(--brand-background-color_lightened);
    font-weight: var(--font-weight-semibold);
    font-size: 1.2rem;

    &:focus { box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); }
  }

  .accordion-button:not(.collapsed) {
    background-color: var(--color-white);
    color: var(--color-black);
  }
}


/* Backdrop */

.backdrop {
  box-sizing: border-box;
  padding: 128px 32px;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;

  color: var(--color-white);

  h2 {
    text-shadow: 0 1px 3px rgba(0,0,0,.75);
  }

  p {
    font-weight: 500;
  }
}


main h2.lead-headline {
  font-weight: 600;
}


/* MQ: lg */
@media (min-width: 992px) {
  main h2.lead-headline {
    padding-top: 12.5%;
  }
}

main p.lead-text {
  font-family: var(--brand-font-family-display);
  color: var(--brand-secondary-color);
}

main img.lead-image {
}

main figcaption.lead-caption {
  font-family: var(--brand-font-family-display);
  text-align: center;
  color: var(--brand-secondary-color);
}

main h2.inline-headline {
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}



/*
 * Footer
 */

footer {
  padding: 32px;
  background-color: var(--brand-secondary-color);
  font-family: var(--brand-font-family-display);
  color: var(--color-white);

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: block;
      /&:not(:last-child) { margin-bottom: 8px;}

      a,
      a:link,
      a:visited {
        border-bottom: 2px solid transparent;
        transition: border .1s ease-out;
        text-decoration: none;
        color: var(--color-white);

        &.active {
          border-bottom-color: var(--color-white);
        }
      }

      a:hover,
      a:active,
      a:focus {
        border-bottom-color: var(--color-white);
      }
    }
  }
}