@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

/**
 * BookWeb color overrides for Stack base theme.
 *
 * Palette:
 *   Midnight:   #2b3350
 *   Royal:      #2f487a
 *   OG ABA:     #0055a3
 *   Terracotta: #d24823
 *   Terracotta Dark: #8e351d
 *   Turmeric:   #febd33
 *   Bone:       #e3ddd5
 *   Chalk:      #ede9e4
 */

/* =============================================
   01. Page background and default font
   ============================================= */
body {
  background: #ffffff;
  color: #444444;
  line-height: 1.35em;
  font-family: 'Red Hat Display', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}

body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Red Hat Display', 'Open Sans', 'Helvetica', 'Arial', sans-serif;

}

/* =============================================
   02. Links
   ============================================= */
a,
p a,
span a,
label a {
  color: #2f487a; /* Royal */
  text-decoration: underline;
  font-weight: normal;
}

a:hover,
a:focus,
p a:hover,
span a:hover,
label a:hover {
  color: #0055a3; /* OG ABA */
  text-decoration: none;
}

a strong,
p a strong,
span a strong,
label a strong {
  color: inherit;
}
.menu-horizontal > li > a,
.menu-horizontal > li:not(:hover) > a,
.menu-horizontal > li:not(:hover) > span,
.menu-horizontal > li:not(:hover) > .modal-instance > .modal-trigger {
  opacity: 1;
  font-family: 'Red Hat Display', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}

/* =============================================
   03. Headings
   ============================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #2b3350; /* Midnight */
}

/* =============================================
   04. Primary color overrides (replaces aqua #7adfbb)
   ============================================= */
.color--primary {
  color: #d24823 !important; /* Terracotta */
}

.bg--primary {
  background: #d24823; /* Terracotta */
}

.bg--primary p,
.bg--primary span,
.bg--primary ul,
.bg--primary a:not(.btn) {
  color: #fff;
}

.bg--primary h1,
.bg--primary h2,
.bg--primary h3,
.bg--primary h4,
.bg--primary h5,
.bg--primary h6,
.bg--primary i {
  color: #fff;
}

/* =============================================
   05. Dark background overrides (replaces #252525)
      BookWeb uses Midnight for dark sections
   ============================================= */
.bg--dark {
  background: #2b3350; /* Midnight */
}

/* =============================================
   06. Header / Navbar
   ============================================= */
.nav-bar,
.bar,
header {
  background-color: #FFF; /* WHITE */
  color: #2b3350;
}


/* =============================================
   07. Footer
   ============================================= */
footer {
  background-color: #ede9e4; /* Chalk */
  color: #444444;
}

footer a {
  color: #2f487a; /* Royal */
  text-decoration: underline;
}

footer:not(.bg--primary):not(.bg--dark) a:hover,
footer:not(.bg--primary):not(.bg--dark) a:focus {
  color: #2f487a; /* Royal */
  text-decoration: none;
}

footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6 {
  color: #444444; /* Midnight */
}

.bookweb-footer__links li::before {
  content: '>';
  margin-right: 0.4em;
  color: #2f487a; /* Royal */
  font-weight: bold;
}

.bookweb-footer h1,
.bookweb-footer h2,
.bookweb-footer h3,
.bookweb-footer h4,
.bookweb-footer h5,
.bookweb-footer h6 {
  color: #444444;
}

.bookweb-footer ul:not(.list-inline):not(.slides) > li {
  line-height: 1.35em !important;
  margin-bottom: 5px;
}

.bookweb-footer__main {
  padding-top: 30px;
}

.bookweb-footer__col:first-child {
  padding-right: 60px;
}

.bookweb-footer h5 {
  margin-bottom: 0.25em;
}

.bookweb-footer__bottom p {
  text-align: left;
  width: auto;
  margin: 0;
}

.bookweb-footer__bottom .container {
  display: flex;
  justify-content: flex-end;
  padding-bottom:25px;
}

.bookweb-footer__bottom p {
  text-align: left;
  width: auto;
  margin: 0;
}

.bookweb-footer__social .socicon {
  font-size: 2em;
}

.bookweb-footer__social.list-inline .list-inline-item {
  margin-right: 0.75em;
}

/* =============================================
   08. Buttons - primary (Terracotta)
   ============================================= */
.btn--primary,
.btn--primary:visited {
  background: #8e351d; /* Terracotta Dark*/
  border-color: #d24823;
}

.btn--primary .btn__text,
.btn--primary:visited .btn__text {
  color: #fff;
}

.btn--primary:hover {
  background: #b83d1e; /* Terracotta darkened */
}

.btn--primary:active {
  background: #a03519;
}

a.btn.btn--primary {
  color:#fff;
}

/* Pager and submit buttons */
.active > .page-link,
.page-link.active,
button#edit-submit,
button#edit-subscribe,
#block-sitewidecontactform input[type=submit],
#block-userlogin button#edit-submit,
.stack-search #search-block-form .input-group-btn button,
.search-block-form .form-actions input.form-submit {
  background-color: #d24823; /* Terracotta */
  border-color: #d24823;
}

input[type="submit"] {
  background: #8e351d; /* Terracotta Dark */
}

/* =============================================
   09. Testimonial section - diagonal gradient
   ============================================= */
.section--testimonial,
section.bg--testimonial {
  background: linear-gradient(
    135deg,
    #0055a3 0%,   /* OG ABA - top left */
    #2f487a 100%  /* Royal - bottom right */
  );
}

.section--testimonial p,
.section--testimonial blockquote,
.section--testimonial h1,
.section--testimonial h2,
.section--testimonial h3,
.section--testimonial h4,
.section--testimonial h5,
.section--testimonial h6,
.section--testimonial span {
  color: #fff;
}

/* =============================================
   10. Accent color - Turmeric
   ============================================= */
.color--accent {
  color: #febd33; /* Turmeric */
}

.bg--accent {
  background: #febd33; /* Turmeric */
}

hr.short {
  border-color: #d24823; /* Terracotta replaces aqua accent on hr */
}

/* =============================================
   11. Secondary / light backgrounds
   ============================================= */
.bg--secondary {
  background: #e3ddd5; /* Bone */
}

/* =============================================
   12. Active accordion, tabs, checkmarks
       (replaces aqua #7adfbb throughout Stack)
   ============================================= */
.accordion li.active .accordion__title {
  background: #d24823; /* Terracotta */
  border-color: #d24823;
}

.tabs li.active .tab__title,
.tabs li.active .tab__title span {
  color: #d24823; /* Terracotta */
}

.checkmark:not([class*='bg-']) {
  background: #d24823; /* Terracotta */
}

.input-checkbox.checked .inner,
.input-radio.checked .inner {
  background: #d24823;
  border-color: #d24823;
}

input[type]:focus,
select:focus,
textarea:focus {
  border-color: #2f487a; /* Royal */
}

/* =============================================
   13. Masonry filter active state
   ============================================= */
.masonry-filter-holder .masonry__filters ul li.active,
.masonry-filter-holder .masonry__filters ul li:hover {
  color: #d24823; /* Terracotta */
}

/* =============================================
   14. Process lines and markers
   ============================================= */
.process-1:before,
.process-2:before {
  background: #d24823; /* Terracotta */
}

.process__item:after {
  border-color: #d24823;
}

.process-3 li .process__number {
  border-color: #d24823;
}

.process-3 li .process__number span {
  color: #d24823;
}

/* =============================================
   15. Main navigation
   ============================================= */
.bar-1 .menu-horizontal > li > a,
.bar-1 .menu-horizontal > li > .dropdown__trigger {
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0;
  color: #2b3350;
  font-size: 1em; /* base 0.857em */
}

.bar-1 .menu-horizontal > li > a:hover,
.bar-1 .menu-horizontal > li > .dropdown__trigger:hover {
  color: #2f487a; /* Royal */
  text-decoration: none;
}

/* =============================================
   16. Article teasers
   ============================================= */
.article-teaser {
  border-bottom: 1px solid #e3ddd5; /* Bone */
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.article-teaser__inner {
  display: flex;
  gap: 1.5em;
}

.article-teaser--no-image .article-teaser__inner {
  display: block;
}

/* Image column */
.article-teaser__image {
  position: relative;
  flex-shrink: 0;
  width: 40%;
}

.article-teaser__image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  margin: 0;
}

/* Date box */
.article-teaser__date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #444444;
  color: #fff;
  padding: 0.3em 0.6em;
  min-width: 2.5em;
  text-align: center;
}

.article-teaser--has-image .article-teaser__date {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.article-teaser--no-image .article-teaser__date {
  float: left;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.article-teaser__day {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
}

.article-teaser__month {
  font-size: 0.75em;
  text-transform: uppercase;
}

/* Content column */
.article-teaser__content {
  flex: 1;
}

/* Category label */
.article-teaser__category a {
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #be421f; /* Dark Terracotta */
  text-decoration: none;
}

.article-teaser__category a:hover {
  color: #2f487a; /* Royal */
  text-decoration: none;
}

/* Title */
.article-teaser__title {
  margin-top: 0.25em;
  margin-bottom: 0.5em;
}

.article-teaser__title a {
  color: #2b3350; /* Midnight */
  text-decoration: none;
  font-weight: 700;
}

.article-teaser__title a:hover {
  color: #2f487a; /* Royal */
  text-decoration: none;
}

/* Summary */
.article-teaser__summary {
  color: #444444;
  margin-bottom: 1em;
}

/* Read more link */
.article-teaser .links a {
  display: inline-block;
  padding: 0.4em 1em;
  border: 1px solid #be421f; /* Dark Terracotta */
  color: #ffffff;
  text-decoration: none;
  font-size: 1em;
  font-weight:bold;
  background: #be421f; /* Dark Terracotta */
}

.article-teaser .links a:hover {
  background: #d24823;
  color: #fff;
  text-decoration: none;
}

.article-teaser--no-image .article-teaser__title {
  margin-left: 2.25em;
}

.article-teaser--no-image .article-teaser__summary {
  clear: both;
}
.article-teaser__category {
  margin-bottom: -20px;
}

/* =============================================
   17. Page title block
   ============================================= */
.title-wrapper {
  background-color: #f2efec; /* Royal */
  padding: 0.75em 0;
}

.title-wrapper h1,
.title-wrapper .page-header {
  color: #2f487a;
  margin: 0;
  font-weight: 500;
}

/* =============================================
   18. Resource paragraphs
   ============================================= */
.field--name-field-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
}

.resource-paragraph--compact {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e3ddd5;
  border-radius: 4px;
  padding: 1.25em;
}

.resource-paragraph--compact .field--name-field-file,
.resource-paragraph--compact .field--name-field-url {
  width: 100%;
}

.resource-paragraph--full {
  width: 100%;
  border: 1px solid #e3ddd5; /* Bone */
  border-radius: 4px;
  padding: 1.25em;
}

.resource-paragraph__label {
  color: #2b3350; /* Midnight */
  margin-bottom: 0.25em;
}

.resource-paragraph__description {
  color: #444444;
  margin-bottom: 0.75em;
  font-size: 0.9em;
}

.resource-paragraph__usage {
  font-size: 0.8em;
  color: #666666;
  margin-top: 0.5em;
  font-style: italic;
}

.field--name-field-resources .field--item {
  flex: 0 0 calc(50% - 0.75em);
  box-sizing: border-box;
  min-width: 0;
}

.field--name-field-resources .field--item:has(.resource-paragraph--full) {
  flex: 0 0 100%;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2f487a;
    --bs-btn-border-color: #2f487a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0055a3;
    --bs-btn-hover-border-color: #0055a3;
    --bs-btn-focus-shadow-rgb: 47, 72, 122;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0055a3;
    --bs-btn-active-border-color: #0055a3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2f487a;
    --bs-btn-disabled-border-color: #2f487a;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #8e351d;
    --bs-btn-border-color: #444;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bc3713;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bc3713;
    --bs-btn-active-border-color: #565e64;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-outline-primary {
    --bs-btn-color: #2f487a;
    --bs-btn-border-color: #2f487a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f487a;
    --bs-btn-hover-border-color: #2f487a;
    --bs-btn-focus-shadow-rgb: 47, 72, 122;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0055a3;
    --bs-btn-active-border-color: #0055a3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #2f487a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #2f487a;
    --bs-gradient: none;
}

.btn-outline-secondary {
    --bs-btn-color: #8e351d;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #8e351d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8e351d;
    --bs-btn-hover-border-color: #8e351d;
    --bs-btn-focus-shadow-rgb: 142, 53, 29;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bc3713;
    --bs-btn-active-border-color: #bc3713;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #8e351d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #8e351d;
    --bs-gradient: none;
}

a.btn-primary, a.btn--primary, a.btn-secondary, a.btn--secondary, a.btn-outline-primary, a.btn-outline-secondary {
  text-decoration: none;
}

/* =============================================
   19. Main navigation - button triggers
   ============================================= */
.bar-1 .menu-horizontal > li > button.dropdown__trigger {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0;
  color: #2b3350;
  font-size: 1em;
  font-family: 'Red Hat Display', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}

.bar-1 .menu-horizontal > li > button.dropdown__trigger:hover {
  color: #2f487a;
}
.bar-1 .menu-horizontal > li > button.dropdown__trigger {
  text-decoration: underline;
}

/* =============================================
   20. Dropdown child link overrides
   ============================================= */
.dropdown .dropdown__content .menu-vertical > li > a,
.dropdown .dropdown__content .menu-vertical > li > a:hover {
  opacity: 1;
  font-family: 'Red Hat Display', 'Open Sans', 'Helvetica', 'Arial', sans-serif;
  color: #2b3350!important;
  text-decoration: none;
}

.dropdown .dropdown__content .menu-vertical > li > a:hover {
  color: #2f487a!important;
}

.dropdown .dropdown__content .menu-vertical li {
  opacity: 1!important;
}

.dropdown .dropdown__content .menu-vertical > li > a {
  font-weight: 700;
  text-decoration: underline;
}

.dropdown .dropdown__content .menu-vertical > li > a:hover {
  text-decoration: none;
}

/* =============================================
   21. Main nav - log-in sensitive buttons
   ============================================= */

body.user-logged-in [id$="-mainnavigation"] ul li a[href="/user"].dropdown__trigger
{
    --bs-btn-color: #fff;
    --bs-btn-bg: #8e351d;
    --bs-btn-border-color: #444;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bc3713;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bc3713;
    --bs-btn-active-border-color: #565e64;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

body:not(.user-logged-in) [id$="-mainnavigation"] ul li a[href="/user/login"],
body.user-logged-in [id$="-mainnavigation"] ul li a[href^="/user/logout"]{
    --bs-btn-color: #2f487a;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f487a;
    --bs-btn-hover-border-color: #2f487a;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0055a3;
    --bs-btn-active-border-color: #0055a3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}

body.user-logged-in [id$="-mainnavigation"] ul li a[href="/user"],
body:not(.user-logged-in) [id$="-mainnavigation"] ul li a[href="/user/login"],
body.user-logged-in [id$="-mainnavigation"] ul li a[href^="/user/logout"]  {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    user-select: none;
    background-color: var(--bs-btn-bg);
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    transition: 0.1s linear;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    border-radius: 6px;
    padding-top: 0.46428571em;
    padding-bottom: 0.46428571em;
    padding-right: 2.78571429em;
    padding-left: 2.78571429em;
    border: 1px solid #252525;
    border-width: 1px;
    font-size: inherit;
    line-height: 1.85714286em;
  text-transform: uppercase;
}
body.user-logged-in .bar-1 [id$="-mainnavigation"] ul li a[href="/user"].dropdown__trigger{
   color:white !important;
}