html {
  background-color: var(--white);
  color: var(--textColor);
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  margin: 0;
  padding: 0;
  /* Add scroll padding to account for sticky header on large screens */
  scroll-padding-top: 0;
}

/* Let JavaScript handle all anchor scroll offsets dynamically */
html {
  /* JavaScript will handle the offset based on actual header stickiness */
  scroll-padding-top: 0;
  /* Ensure smooth scrolling for anchor links */
  scroll-behavior: smooth;
}

/* Fix hyphenation issue - override Olivero theme's automatic hyphenation */
body {
  hyphens: none;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
}

/* Ensure all Views fields use the theme font */
.views-field,
.views-field a,
.field-content {
  font-family: var(--font-family-body);
}

img {}
.caption > figcaption {
  border: none;
  text-align: left;
}
.text-orange {
  color: var(--orange);
}
/* Tablet */
@media screen and (min-width: 768px) {
  img[data-align="left"],
  img.align-left,
  figure.align-left {
    /* display: inline-block; */
    float: left;
    margin: 0 var(--space-lg) var(--space-lg) 0;
  }
  img[data-align="right"],
  img.align-right,
  figure.align-right {
    /* display: inline-block; */
    float: right;
    margin: 0 0 var(--space-lg) var(--space-lg);
  }
  img[data-align="center"],
  img.align-center,
  figure.align-center {
    /* display: block; */
    margin: 0 auto var(--space-lg);
  }
  .paragraph {
    padding: var(--space-3xl) 0;
  }
}
/* Small desktop */
@media screen and (min-width: 960px) {
  .scroll-top {
    /* background-color: var(--white); */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    bottom: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    color: var(--orange);
    cursor: pointer;
    padding: var(--space-lg);
    position: fixed;
    right: 20px;
    transform: translate(200%, 0);
    transition: var(--transition);
    z-index: 80;
  }
  .scroll-top.active {
    transform: translate(0, 0);
  }
}
/* Large desktop */
@media screen and (min-width: 1200px) {
  body,
  html {}
  .view-header,
  .view-footer {
    max-width: 83.3333%;
  }
}
/* XLarge desktop */
@media screen and (min-width: 1400px) {
  .scroll-top {
    padding: var(--space-lg);
  }
}
/* Extra large desktop */
@media screen and (min-width: 1920px) {
}

@media (pointer: fine) {
  .scroll-top:hover,
  .scroll-top:focus {
    background-color: var(--greyDarker);
    color: var(--white);
  }
}
.user-img {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23485163" class="bi bi-person-fill" viewBox="0 0 16 16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 220px;
  overflow: hidden;
}
.user-role:not(:last-child)::after {
  content: "\002C";
}

.page-wrapper, .main-content{
  max-width: 100%;
}
@media (min-width: 75rem) {
  .main-content {
      width: 100%;
  }
}

/* Toast Messages */
.messages-list-wrapper {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 1050; /* Ensure it's above most elements */
  width: 350px;
  max-width: 90%;
}

.messages-list .messages {
  margin-bottom: var(--space-lg);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 0.25rem;
}

/* The original template has a layout-container wrapper that adds unnecessary constraints */
.messages-list-wrapper .layout-container {
  max-width: 100%;
  padding: 0;
}

.messages-list-wrapper .messages--info {
  background-color: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

.messages-list-wrapper .messages--info .messages__icon svg {
  fill: #3b82f6;
}

.messages-list-wrapper .messages--info a {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
  font-weight: var(--font-weight-semibold) !important;
}

.messages-list-wrapper .messages--info a:hover {
  color: #1e3a8a !important;
  text-decoration: none !important;
}

.messages-list-wrapper .messages--info a:focus {
  color: #1e3a8a !important;
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
}