@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900");

/* CSS variables */

:root {
  --blue-900: #1a2e40; /* Trust Blue */
  --teal-500: #2cb1a1; /* Ethical Teal */
  --yellow-400: #ffc857; /* Positive Yellow */
  --light-50: #f8f9fa; /* Neutral Light */
  --dark-700: #343a40; /* Neutral Dark */

  /* Accessible variants */
  --teal-dark: #186057;
  --dark: #111315;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Global resets */

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
}

body {
  font-family: "Source Sans 3", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--dark-700);
}

/* Custom utility classes */

.img-fade-edges {
  /* blend the image by fading all edges */
  mask-image: radial-gradient(
    ellipse 60% 55% at center,
    black 40%,
    transparent
  );
  -webkit-mask-image: radial-gradient(
    ellipse 60% 55% at center,
    black 40%,
    transparent
  );
  margin-left: auto;
  display: block;
}

/* MetaEthics brand styles */

h1 {
  font-size: 2rem;
  line-height: 1.15;
  color: var(--light-50);
}

h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", Helvetica, sans-serif;
  font-weight: 600;
  color: var(--blue-900);
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem
}

section.content {
  /* styling for the main content of the page */
  border-radius: 6px;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.navbar-brand,
.btn {
  font-family: "Montserrat", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: none;
  -webkit-box-shadow: var(--shadow-sm);
          box-shadow: var(--shadow-sm);
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  -o-transition: filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:active {
  background-color: var(--yellow-400) !important;
  color: var(--dark-700) !important;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--teal-dark) !important;
  color: var(--light-50) !important;
}

.btn-primary:hover,
.btn-secondary:hover {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}

.fa-regular {
  color: var(--teal-500);
}

.fa-solid {
  color: var(--yellow-400);
}

.card {
  border-color: var(--yellow-400);
}

.card.secondary {
  border-color: var(--teal-500);
}

.accordion-button:not(.collapsed) {
  background-color: var(--teal-dark);
  color: var(--light-50);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.icon-link {
  text-underline-offset: 0.6rem;
  -webkit-text-decoration-color: inherit;
          text-decoration-color: inherit;
}

#signs .card .card-title, .accordion button {
  font-size: 1.3rem;
}

/* Functional */

html {
  scroll-padding-top: 80px; /* offset fixed header/nav to scroll the start of the section into view for anchor navigation */
}

a {
  text-underline-offset: 0.25rem; /* offset hyperlink underlines for better readability */
}

/* Site header */

header,
nav {
  background: #152635; /* slightly darker than primary to emphasize header */
}

main {
  margin-top: 105px;
}

main > header {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#061716d2), to(#241c0cac)),
     url("../../assets/images/hero.svg");
  background-image: -o-linear-gradient(#061716d2, #241c0cac),
     url("../../assets/images/hero.svg");
  background-image: linear-gradient(#061716d2, #241c0cac),
     url("../../assets/images/hero.svg");;
  background-size: cover;
  background-position: right;
}

.brand-logo {
  height: 40px;
}

.brand-name .meta {
  color: var(--teal-500);
}

.brand-name .ethics {
  color: var(--yellow-400);
}

a {
  color: var(--teal-dark);
}

a:hover,
a:focus {
  color: var(--dark-700);
}

nav a.nav-link {
  color: var(--light-50);
}

nav ul.navbar-nav > .nav-item a.nav-link.active {
  color: var(--light-50);
  font-weight: bold;
}

nav a.nav-link:hover,
nav a.nav-link:focus {
  color: var(--teal-500);
}

.navbar-nav {
  text-align: right;
  font-size: 1.2rem;
}

ul li::marker,
ol li::marker {
  color: var(--yellow-400);
}

/* Hero section */

.hero-section .lead {
  color: var(--light-50);
}

.hero-section .cta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* Footer */

footer {
  background: var(--blue-900);
  color: var(--light-50);
  padding: 1.25rem 0;
}

footer a {
  color: var(--yellow-400);
}

footer a:hover,
footer a:active,
footer a:focus {
  color: var(--teal-500);
}

/* Sections */

.inverse-style {
  /* alternate background and styles for emphasizing a section */
  background-color: var(--dark);
  color: var(--light-50);
}

.inverse-style a {
  color: var(--yellow-400);
}

.inverse-style h1,
.inverse-style h2,
.inverse-style h3,
.inverse-style h4,
.inverse-style h5,
.inverse-style h6 {
  font-family: "Montserrat", Helvetica, sans-serif;
  font-weight: 600;
  color: var(--teal-500);
}

.inverse-style .list-group-item {
  background-color: transparent;
  color: var(--light-50);
}

.inverse-style .list-group-item a:hover,
.inverse-style .list-group-item a:focus {
  color: var(--teal-500);
}

/* Media queries */

@media only screen and (min-width: 263px) {
  /* Styles for screens 263px and above */

  /* Site header */
  main {
    margin-top: 66px;
  }
}

@media (min-width: 768px) {
  /* Styles for screens 768px and above */

  body {
    font-size: 1.5rem;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  #signs .card .card-title, .accordion button {
    font-size: 1.75rem;
  }

}