/* Exact visual alignment with the established hh-solution.com design. */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/montserrat-400.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/montserrat-700.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/open-sans-400.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/open-sans-700.woff2") format("woff2");
}

:root {
    --hhs-brand: #7b0e20;
    --hhs-footer: #404042;
    --hhs-content-text: #2e2e2e;
    --hhs-menu-text: #777;
}

html,
body {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
}

body,
:is(#tm-main, .tm-main) .uk-container {
    color: var(--hhs-content-text);
}

:is(#tm-main, .tm-main) .uk-container {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
}

/*
 * YOOtheme calls this heading size `uk-heading-small`. Keep the legacy typo
 * `uk-header-small` as an alias in case it was entered manually in a layout.
 * The values match the current production website exactly.
 */
.uk-heading-small,
.uk-header-small {
    color: var(--hhs-footer);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    text-transform: inherit;
}

@media (min-width: 960px) {
    .uk-heading-small,
    .uk-header-small {
        font-size: 50px;
    }
}

/* Desktop navigation: values from the current production theme. */
.tm-header .uk-navbar-nav > li > a {
    position: relative;
    z-index: 1;
    min-height: 60px;
    padding: 0 15px;
    color: var(--hhs-menu-text);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.6px;
    text-decoration: none;
    text-transform: none;
}

.tm-header .uk-navbar-nav > li > a::before {
    position: absolute;
    right: calc(102% - 20px);
    bottom: 16px;
    left: 20px;
    z-index: -1;
    display: block;
    height: 0;
    background-color: var(--hhs-brand);
    content: "";
    transition: right 0.2s ease-in-out, height 0.2s ease-in-out;
}

.tm-header .uk-navbar-nav > li:hover > a,
.tm-header .uk-navbar-nav > li > a:focus,
.tm-header .uk-navbar-nav > li > a.uk-open,
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-nav > li.current-menu-item > a,
.tm-header .uk-navbar-nav > li.current-menu-ancestor > a {
    color: var(--hhs-menu-text);
}

.tm-header .uk-navbar-nav > li:hover > a::before,
.tm-header .uk-navbar-nav > li > a:focus::before,
.tm-header .uk-navbar-nav > li > a.uk-open::before,
.tm-header .uk-navbar-nav > li.uk-active > a::before,
.tm-header .uk-navbar-nav > li.current-menu-item > a::before,
.tm-header .uk-navbar-nav > li.current-menu-ancestor > a::before {
    right: 20px;
    height: 2px;
}

.tm-header .uk-navbar-dropdown,
.tm-header .uk-navbar-dropdown-nav,
.tm-header .uk-navbar-dropdown-nav > li > a {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

/* Page and shop navigation: white surface with red active entries. */
:is(#tm-main, .tm-main) ul.uk-nav > li,
:is(#tm-main, .tm-main) .widget_nav_menu .menu > li {
    background-color: #fff;
}

:is(#tm-main, .tm-main) ul.uk-nav li.uk-active,
:is(#tm-main, .tm-main) .widget_nav_menu .current-menu-item {
    background-color: var(--hhs-brand) !important;
}

:is(#tm-main, .tm-main) .uk-nav > li.uk-active > a,
:is(#tm-main, .tm-main) .uk-nav-sub > li.uk-active > a,
:is(#tm-main, .tm-main) .widget_nav_menu .current-menu-item > a {
    color: #fff !important;
}

:is(#tm-main, .tm-main) .uk-nav > li > a,
:is(#tm-main, .tm-main) .uk-nav-sub > li > a,
:is(#tm-main, .tm-main) .widget_nav_menu .menu a {
    color: var(--hhs-menu-text);
}

:is(#tm-main, .tm-main) .uk-nav > li > a:hover,
:is(#tm-main, .tm-main) .uk-nav > li > a:focus-visible,
:is(#tm-main, .tm-main) .uk-nav-sub > li > a:hover,
:is(#tm-main, .tm-main) .uk-nav-sub > li > a:focus-visible,
:is(#tm-main, .tm-main) .widget_nav_menu .menu a:hover,
:is(#tm-main, .tm-main) .widget_nav_menu .menu a:focus-visible {
    color: #fff;
    background-color: var(--hhs-brand);
}

:is(#tm-main, .tm-main) .uk-nav .uk-parent:not(.uk-active),
:is(#tm-main, .tm-main) .widget_nav_menu .menu-item-has-children:not(.current-menu-item) {
    background-color: #fff !important;
}

:is(#tm-main, .tm-main) .uk-nav .uk-parent:not(.uk-active) > a,
:is(#tm-main, .tm-main) .widget_nav_menu .current-menu-ancestor:not(.current-menu-item) > a {
    color: var(--hhs-brand) !important;
}

:is(#tm-main, .tm-main) .uk-nav-sub {
    padding-left: 0 !important;
}

:is(#tm-main, .tm-main) .uk-nav-sub a {
    padding-left: 35px;
}

/* Footer and cookie-settings button. */
.tm-footer,
footer,
.tm-footer .uk-section,
footer .uk-section,
.tm-footer .uk-section-secondary,
footer .uk-section-secondary {
    background-color: var(--hhs-footer) !important;
}

.tm-footer .uk-section-secondary,
footer .uk-section-secondary {
    border-top: 5px solid var(--hhs-brand);
}

#cookie-law-info-again {
    width: 50px !important;
    height: 50px !important;
    background-color: #fff !important;
    background-image: url("/wp-content/uploads/fingerprint_sm.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 50px 50px !important;
}

#cookie_hdr_showagain {
    width: 50px !important;
    height: 50px !important;
}