/* --- Global ------------------------------------------------------------- */

html {font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; background: #121212;}

/* Full-viewport film-grain overlay */
html::after {content: ""; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1100; background-image: url("../img/overlay-warm-and-fuzzy.gif"); opacity: .05; pointer-events: none;}

/* --- Navbar --------------------------------------------------------------- */

.uk-navbar-transparent .uk-navbar-nav li a {color: rgba(255, 232, 217, 1); text-shadow: 0px 0px 5px rgba(0,0,0,0.6); font-size: 1.4rem; padding-left: 15px; padding-right: 15px;}
.uk-navbar-sticky .uk-navbar-nav li a {color: rgba(255, 232, 217, 1);}
.uk-navbar-transparent .uk-navbar-nav li a:hover {color: rgba(255, 232, 217, 1);}
.uk-navbar-sticky .uk-navbar-nav li a:hover {color: rgba(255, 232, 217, 1);}
.uk-navbar-transparent .uk-navbar-nav li.uk-active a {color: rgba(255, 232, 217, 1);}
.uk-navbar-sticky .uk-navbar-nav li.uk-active a {color: rgba(255, 232, 217, 1);}

/* uk-position-center bug fix */
:root {--uk-position-margin-offset: 0px;}

/* --- About Us ------------------------------------------------------------- */

.hhs-about-us .hh-logo {padding-right: 50px; padding-left: 50px;}
@media(min-width: 640px) {.hhs-about-us .hh-logo {padding-right: 0px; padding-left: 0px;}}
.hhs-about-us .hh-intro-text {max-width: 1000px; margin: 0 auto;}

/* --- Page builder: Swell logo intro ---------------------------------------- */

.hhs-pb-swell-logo-intro .hh-logo {padding-right: 50px; padding-left: 50px;}
@media(min-width: 640px) {.hhs-pb-swell-logo-intro .hh-logo {padding-right: 0px; padding-left: 0px;}}
.hhs-pb-swell-logo-intro .hh-intro-text {max-width: 1000px; margin: 0 auto;}

/* --- Page builder: article layouts (rich_text, faq, table, glossary) ------- */

/* Shared body-copy size for the article-grade layouts. Matches the site's
   other body text (1.3rem) but keeps the solid cream — deliberately NOT the
   uk-text-large utility, whose color the footer overrides to a dimmed
   rgba(255,255,255,.7) on every page. */
.hhs-article {font-size: 1.3rem; line-height: 1.5; color: #ffe8d9;}

/* Glossary terms as modest headers (Anton, matching the FAQ question size).
   Needs the extra class to beat .uk-description-list>dt's specificity. */
.hhs-glossary .uk-description-list > dt {font-family: Anton, sans-serif; font-size: 1.5rem; line-height: 1.4;}

/* More air around the divider line between entries (UIkit default is 20px
   margin + 20px padding, too tight next to the 1.5rem terms). */
.hhs-glossary .uk-description-list-divider > dt:nth-child(n+2) {margin-top: 40px; padding-top: 40px;}

/* --- Linked images (hover overlay + icon) ---------------------------------- */

/* Shared by the image_list banner and the image repeaters in swell_logo_intro,
   image_list, and image_grid (via swell_image_link_open()/_close()). A linked
   image reveals, on hover/focus only, a primary-color overlay and a
   bottom-right icon (link-external off-site, arrow-right internal). Touch
   devices never see it — the tap just navigates. */
.hh-img-link {display: block; position: relative;}
.hh-img-link img {display: block;}
.hh-img-link::after {content: ""; position: absolute; inset: 0; background: #ef4e24; opacity: 0; transition: opacity 0.2s ease; pointer-events: none;}
.hh-img-link:hover::after, .hh-img-link:focus-visible::after {opacity: 0.8;}
.hh-img-link-icon {position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 1; width: 3rem; height: 3rem; color: #ffe8d9; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5)); opacity: 0; transition: opacity 0.2s ease;}
.hh-img-link:hover .hh-img-link-icon, .hh-img-link:focus-visible .hh-img-link-icon {opacity: 1;}
.hh-img-link-icon svg {width: 100%; height: 100%;}
@media (max-width: 640px) {.hh-img-link-icon {right: 0.75rem; bottom: 0.75rem; width: 2rem; height: 2rem;}}

/* --- Misc ------------------------------------------------------------------ */

.hh-logo-color svg path {fill: #000000 !important;}

.uk-dotnav > * > * {
    border-color: #ffe8d9;
    background-color: transparent;
}
.uk-dotnav > .uk-active > * {
    border-color: #ffe8d9;
    background-color: #ffe8d9;
}