/* header */
header.header {
    --headerbg: transparent;
    background-image: linear-gradient(to right, #fff, transparent), url(../../cassiopeia_extended/images/bottom-view-sky-with-clouds.webp);
    background-repeat: repeat-x;
}
/* logo effect */
.container-header .navbar-brand .brand-logo {
    display: inline-block;
    align-items: center;
    container-type: inline-size;
}
.container-header .navbar-brand .brand-logo span {
    font-weight: bolder;
    background: linear-gradient(#008c00,transparent) , url(../../cassiopeia_extended/images/grass.webp) repeat-x;
    background-clip: text;
    color: transparent;
    animation: panning 15s linear infinite alternate;
    animation-timing-function: ease-in-out;
}
.container-header .navbar-brand .brand-logo span::before {
    content: " ";
    color:transparent;
    display: inline-block;
    background-image: url(/favicon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    height:2cqh;
    width: 2cqh;
}
@keyframes panning {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}
/* breadcrumb home icon */
.icon-location:before {
    content: "\f06c";
    color: #008c00;
}
/* ratio additions */
.ratio-16x7 {
    aspect-ratio: 16 / 7;
}
/* faq styles */
/* faq indentation */
ul.fields-container:has(> li.list-unstyled) {
    padding-left: unset;
}
/* faq smoothing */
summary {
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker { display: none; }

/* Container */
details {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 1rem 0;
  overflow: hidden;
  /* width: 320px; */
  font-family: system-ui, sans-serif;
}

/* Summary styling */
summary {
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  font-weight: 600;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
summary::after {
  content: "▼";
  font-size: 0.8em;
  transition: transform 0.25s ease;
}
details[open] summary::after {
  transform: rotate(180deg);
}

/* Content wrapper */
details > div {
  padding: 0 1rem;
  max-height: 0;
  overflow: hidden;
  transition: 
    max-height 0.35s ease,
    padding-top 0s 0.35s,
    padding-bottom 0s 0.35s;
}

/* Open state */
details[open] > div {
  padding: 1rem;
  max-height: 1000px; /* Must be ≥ tallest possible content */
  transition: 
    max-height 0.35s ease,
    padding-top 0s,
    padding-bottom 0s;
}
/* menu style */
.container-header .metismenu>li.active>button:before {
    background: initial;
}
header nav.navbar button.navbar-toggler {
    border-color: #008c00;
    color: #008c00;
}
/* leading article image */
.blog-items figure.w-100 img {
    width: 100%;
    height: auto;
}