/**
 * @file
 * Olivero specific CSS overrides.
 */

@font-face {
  font-family: 'Poppins';
  src: url("../fonts/poppins/Poppins-Medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url("../fonts/poppins/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url("../fonts/poppins/Poppins-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Life Savers';
  src: url("../fonts/lifesavers/LifeSavers-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Life Savers';
  src: url("../fonts/lifesavers/LifeSavers-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

.dialog-off-canvas-main-canvas {
  background-image: url('../wasp-background.png');
}

.site-header__inner {
  opacity: 2;
	background: linear-gradient(
		-45deg,
		#fde90d,
		#42d2fd,
		#8d03a3
	) !important;
}

.site-branding__text {
  font-family: Poppins;
  text-wrap: nowrap; 
  line-height: 1.2em;
}

@media (max-width: 1200px) {
  .site-branding__text {
    padding-top: 1.5rem;
  }
}

.site-branding__name {
  font-size: 3rem;
  font-weight: 900;
  color: #ffdd57;
}

.site-branding__slogan {
  font-size: 1.8rem;
  font-weight: 700;
  color: #56deff;
}

.site-branding__dates {
  font-size: 1.5rem;
  font-weight: 500;
}

@media (min-width: 320px) and (max-width: 768px) {
  .site-branding__name {
    font-size: 2rem;
  }

  .site-branding__slogan {
    font-size: 1.6rem;
  }

  .site-branding__dates {
    font-size: 1.2rem;
  }
}

@media (max-width: 320px) {
  .site-branding__name {
    font-size: 1.5rem;
  }

  .site-branding__slogan {
    font-size: 1.3rem;
  }

  .site-branding__dates {
    font-size: 1.1rem;
  }
}



h1, h2, h3, h4 {
  font-family: Life Savers;
  font-weight: bold;
  color: var(--color--primary-50);
}

.text-content, .cke_editable {
  font-family: var(--font-sans)!important;
}

.block-field-blocknodecat-of-honourfield-photo img {
  border: 2px solid var(--color--primary-50);
  border-radius: 1rem;
}

.committee-card {
  display: grid;
  grid-template-columns: 25% 75%;

  .member-name {
    grid-column-start: 2;

    h2 {
      margin-bottom: 0;
    }
  }

  .member-photo {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: span 3;
    margin: 1rem;

    img {
      border: 2px solid var(--color--primary-50);
      border-radius: 1rem;
    }
  }

  .member-part {
    grid-column-start: 2;
    font-family: Life Savers;
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: var(--color--primary-50);
  }

  .member-bio {
    grid-column-start: 2;
  }
}

.region--content-above {
  .block__title {
    font-size: 1.75rem;
  }
}

.region--sidebar {
  .block__title {
    font-size: 1.25rem;
  }
}

.view-guests {
  .views-field-field-photo {
    img {
      border: 2px solid var(--color--primary-50);
      border-radius: 1rem;
    }
  }
}

#block-eastercon2026-membershiprates .block__content {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    column-gap: 1em;
    list-style-type: none;
  }
  li {
    font-size: .9em;
    padding: 0 .5rem;
    margin: .25rem 0;
    background-color: var(--color--primary-80);
    border: 1px solid var(--color--primary-60);
    border-radius: 1rem;
  }
  p {
    display: flex;
    justify-content: space-evenly;    
    margin: 0px;
  }
}
  
input {
  background: var(--color--gray-20)!important;
  color: var(--color--gray-80);
}

body.darkmode--activated {
  color: var(--color--gray-95);

  .text-content, .cke_editable {
    color: var(--color--gray-95);
  }

  table {
    background: var(--color--gray-20)!important;
    color: var(--color--gray-80)!important;
  }

  .tabs__link {
    background: var(--color--gray-20)!important;
    color: var(--color--gray-80)!important;
  }

  .primary-nav__menu-link, .primary-nav__menu-link:hover, .secondary-nav__menu a {
    color: var(--color-text-neutral-loud)!important;
  }

  .primary-nav__menu--level-2 {
    background: var(--color--gray-10)!important;
    color: var(--color--gray-80)!important;
  }

  .primary-nav__menu--level-2 a {
    color: var(--color--gray-80)!important;
  }

  .primary-nav__menu--level-2 a:hover {
    color: var(--color--gray-100)!important;
  }

  .menu--sidebar .menu__link::after {
    border-top: solid 2px var(--color--gray-15);
  }

  .menu--sidebar .menu__link--link {
    color: var(--color--gray-50);
  }

  .menu--sidebar .menu__link--link:hover {
    color: var(--color--primary-60);
  }

  h1, h2, h3, h4 {
    color: var(--color--primary-60);
  }

  a {
    color: var(--color--primary-60);
  }

  a:hover {
    color: var(--color--primary-80);
  }  

  .text-content a:where(:not(.button)), .cke_editable a:where(:not(.button)) {
    color: var(--color--primary-50);
  }
  
  [type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="checkbox"], [type="radio"], [type="week"], select, textarea {
    background-color: var(--color--gray-10);
    color: var(--color--gray-80);
  }

  #edit-global, #members fieldset, #edit-payment, .form-wrapper {
    background-color: var(--color--gray-20);
  }

  #block-eastercon2026-membershiprates .block__content {
    li {
      background-color: var(--color--primary-30);
      border: 1px solid var(--color--primary-40);
    }
  }

  @supports (box-shadow: none) {
    .text-content a:where(:not(.button)):hover, .cke_editable a:where(:not(.button)):hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-decoration-color: currentcolor;
      color: var(--color--primary-80);
      box-shadow: inset 0 -2em 0 0 var(--color--primary-20);
      text-decoration-color: var(--color--primary-20);
    }
  }

  .social-bar {
    background-color: var(--color--gray-20)!important;
    color: var(--color--gray-80)!important;
  }
}

/* Make menu transparent, but only in full screen mode. */
@media (min-width: 62.5rem) {
  .header-nav {
    background-color: transparent !important;
  }
}