/* All front-end rules are scoped to this feature. No visitor-facing JavaScript. */
.hap-category-heading { margin: 0 0 1.4rem; }
.hap-category-heading .hap-banner-media { position: relative; overflow: hidden; background: #f4f6f7; height: clamp(180px, 25vw, 300px); }
.hap-category-heading .hap-banner-image { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hap-category-heading.hap-focus-top .hap-banner-image { object-position: center top; }
.hap-category-heading.hap-focus-bottom .hap-banner-image { object-position: center bottom; }
.hap-category-heading.hap-banner-logo .hap-banner-media { height: clamp(150px, 25vw, 300px); }
.hap-category-heading.hap-banner-logo .hap-banner-image { object-fit: contain; box-sizing: border-box; padding: 24px; }
.hap-category-heading h1 { margin: 1.1rem 0 0; overflow-wrap: anywhere; }
.hap-category-heading.hap-banner-behind { position: relative; background: #17232b; }
.hap-category-heading.hap-banner-behind .hap-banner-media { height: auto; position: absolute; inset: 0; }
.hap-category-heading.hap-banner-behind .hap-banner-media::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 68%); }
.hap-category-heading.hap-banner-behind h1 { position: relative; box-sizing: border-box; display: flex; align-items: center; min-height: clamp(180px, 25vw, 300px); margin: 0; padding: clamp(24px, 4vw, 48px); color: #fff; }
.hap-category-description { margin-bottom: 1.5rem; }
/* Keep the control close to the first paragraph while retaining its touch area. */
.hap-category-description .hap-description-intro > :last-child { margin-bottom: 0.2em; }
.hap-category-description .hap-description-details { border: 0; padding: 0; background: transparent; }
.hap-category-description .hap-description-details > summary { display: list-item; width: fit-content; max-width: 100%; cursor: pointer; padding: 10px 4px; color: #064f86; text-decoration: underline; font: inherit; }
/* The browser's native disclosure remains the control. When open, place it
   after the expanded text visually and reserve space so no text overlaps. */
.hap-category-description .hap-description-details[open] { position: relative; padding-bottom: calc(2em + 24px); }
.hap-category-description .hap-description-details[open] > summary { position: absolute; bottom: 0; left: 0; }
.hap-category-description .hap-description-details > summary:focus-visible { outline: 3px solid #126ba3; outline-offset: 4px; }
.hap-category-description .hap-read-less { display: none; }
.hap-category-description details[open] > summary .hap-read-more { display: none; }
.hap-category-description details[open] > summary .hap-read-less { display: inline; }
.hap-category-description .hap-description-full { padding-top: 0; }
/* Add back paragraph spacing only while the rest of the text is open. */
.hap-category-description .hap-description-details[open] > .hap-description-full { padding-top: 1.3em; }
.hap-category-description .hap-description-full > :first-child, .hap-category-description .hap-description-intro > :first-child { margin-top: 0; }
/* Legacy fallback if the host lacks PHP's DOM extension; no stored content is changed. */
.hap-category-description .hap-description-full #description { max-height: none; overflow: visible; }
.hap-category-description .hap-description-full #description::before { display: none; }
.hap-category-description .hap-description-full #read-more-button { display: none; }
.hap-category-description .hap-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Photo layouts fill their slot on large screens. On phones, show the entire
   image instead of cropping either edge; banner artwork may be letterboxed. */
@media (max-width: 767px) {
  .hap-category-heading.hap-banner-logo .hap-banner-media { height: auto; }
  .hap-category-heading.hap-banner-logo .hap-banner-image { height: auto; padding: 16px; }
  .hap-category-heading.hap-banner-above .hap-banner-media { height: auto; }
  .hap-category-heading.hap-banner-above .hap-banner-image { height: auto; max-width: 100%; object-fit: contain; }
  .hap-category-heading.hap-banner-behind .hap-banner-image { object-fit: contain; }
}
@media print {
  .hap-category-description details > summary { display: none !important; }
  .hap-category-description details::details-content { content-visibility: visible; }
  .hap-category-description .hap-description-full { display: block !important; }
}
