:root
{
    --tpl-width: min(100%, 1200 * var(--cms-factor));
    --tpl-head-height: calc(120 * var(--cms-factor));
    --tpl-head-padding: calc(10 * var(--cms-factor));
}

HTML
{
    OVERFLOW-X: clip;
}

BODY
{
    DISPLAY: flex;
    FLEX-DIRECTION: column;
    MARGIN: 0;
    MIN-HEIGHT: 100vh;
}

#head
{
    BACKGROUND: linear-gradient(0deg, #88a71d 0%, #88a61d 40%, #5a700c 100%);
    BORDER-BOTTOM: calc(5 * var(--cms-factor)) solid #f1870e;
    BOX-SIZING: border-box;
    PADDING: var(--tpl-head-padding);
}

#head > DIV
{
    ALIGN-ITEMS: flex-end;
    DISPLAY: flex;
    JUSTIFY-CONTENT: space-between;
    MARGIN: 0 auto;
    WIDTH: var(--tpl-width);
}

#logo
{
    HEIGHT: calc(var(--tpl-head-height) - 2 * var(--tpl-head-padding));
}

#logo > IMG
{
    HEIGHT: 100%;
}

#menu
{

}

#menu UL
{
    LIST-STYLE: none;
    MARGIN: 0;
}

#menu LI
{
    MARGIN: 0;
}

#menu > UL > LI
{
    DISPLAY: inline-block;
}

SPAN:has(#search-button)
{
    FILTER: drop-shadow(var(--cms-factor) var(--cms-factor) var(--cms-factor) rgba(24, 23, 22, 0.75));
}

#search-button
{
    ALL: unset;
    BACKGROUND: var(--cms-color-alt);
    COLOR: transparent;
    CURSOR: pointer;
    DISPLAY: block;
    HEIGHT: calc(30 * var(--cms-factor));
    MASK-IMAGE: url("/design/twh/search.svg");
    MASK-REPEAT: no-repeat;
    MASK-SIZE: contain;
    OVERFLOW: clip;
    USER-SELECT: none;
    WIDTH: calc(30 * var(--cms-factor));
}

#search-button:is(:focus-visible, :hover)
{
    BACKGROUND: var(--cms-link-color-alt);
}

#search-form
{
    OPACITY: 0;
    POINTER-EVENTS: none;
    POSITION: absolute;
    RIGHT: 0;
    TOP: calc(100% + 5 * var(--cms-factor));
    TRANSFORM: translateY(calc(-10 * var(--cms-factor)));
    TRANSITION: opacity 0.25s, transform 0.25s;
    WIDTH: calc(200 * var(--cms-factor));
    Z-INDEX: 10000;
}

#search:focus-within #search-form
{
    OPACITY: 1;
    POINTER-EVENTS: auto;
    TRANSFORM: translateY(0);
}

#search-form INPUT
{
    BOX-SHADOW: var(--cms-box-shadow);
    PADDING-RIGHT: calc(35 * var(--cms-factor));
}

#search-form BUTTON
{
    ALL: unset;
    COLOR: transparent;
    CURSOR: pointer;
    HEIGHT: calc(30 * var(--cms-factor));
    OVERFLOW: clip;
    POSITION: absolute;
    RIGHT: calc(5 * var(--cms-factor));
    TOP: calc(5 * var(--cms-factor));
    USER-SELECT: none;
    WIDTH: calc(30 * var(--cms-factor));
}

#search-form BUTTON:after
{
    ALIGN-CONTENT: center;
    CONTENT: "➔";
    COLOR: var(--cms-color);
    INSET: 0;
    POSITION: absolute;
    TEXT-ALIGN: center;
}

#body
{
    ALIGN-CONTENT: center;
    BOX-SIZING: border-box;
    FLEX: 1;
    MARGIN: 0 auto;
    PADDING: var(--cms-vspacing) var(--cms-hpadding);
    WIDTH: var(--tpl-width);
}

#foot,
#foot2
{
    BACKGROUND: var(--cms-h1-color);
}

#foot *,
#foot2 *
{
    COLOR: var(--cms-color-alt);
}

#foot A:is(:focus-visible, :hover),
#foot2 A:is(:focus-visible, :hover)
{
    COLOR: var(--cms-link-color-alt);
}

#foot > NAV
{
    BOX-SIZING: border-box;
    MARGIN: 0 auto;
    PADDING: var(--cms-vspacing) var(--cms-hpadding);
    TEXT-SHADOW: var(--cms-factor) var(--cms-factor) var(--cms-factor) rgba(24, 23, 22, 0.75);
    WIDTH: var(--tpl-width);
}

#foot UL
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vpadding) var(--cms-hpadding);
    JUSTIFY-CONTENT: space-between;
    LIST-STYLE: none;
    MARGIN: 0;
}

#foot LI
{
    MARGIN: 0;
}

#foot LI:before
{
    DISPLAY: none;
}

#foot A
{
    DISPLAY: block;
    TEXT-DECORATION: none;
}

#foot UL UL A:hover
{
    TEXT-DECORATION: underline;
}

#foot > NAV > UL
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vspacing) var(--cms-hspacing);
}

#foot > NAV > UL > LI
{
    FLEX-GROW: 1;
}

#foot > NAV > UL > LI > A
{
    FONT-FAMILY: var(--cms-h3-font-family);
    FONT-SIZE: var(--cms-h3-font-size);
    FONT-WEIGHT: var(--cms-h3-font-weight);
    LINE-HEIGHT: var(--cms-h3-line-height);
    MARGIN-BOTTOM: var(--cms-vpadding);
    PADDING-BOTTOM: var(--cms-vpadding);
}

#foot2
{
    BOX-SIZING: border-box;
    PADDING: var(--cms-vspacing) var(--cms-hpadding);
    TEXT-ALIGN: center;
}

#facebook,
#email
{
    ALIGN-ITEMS: center;
    DISPLAY: inline-flex;
    FILTER: drop-shadow(var(--cms-factor) var(--cms-factor) var(--cms-factor) rgba(24, 23, 22, 0.75));
    GAP: 0.5ch;
}

#facebook:before,
#email:before
{
    BACKGROUND: var(--cms-color-alt);
    CONTENT: "";
    HEIGHT: calc(20 * var(--cms-factor));
    MASK-IMAGE: url("/design/twh/facebook.svg");
    MASK-POSITION: center;
    MASK-REPEAT: no-repeat;
    MASK-SIZE: contain;
    WIDTH: calc(20 * var(--cms-factor));
}

#email:before
{
    MASK-IMAGE: url("/design/twh/email.svg");
}

#foot2 A:is(:focus-visible, :hover):before
{
    BACKGROUND: var(--cms-link-color-alt);
}

#contact,
#info
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: 0 2ch;
    JUSTIFY-CONTENT: center;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

#info
{
    TEXT-SHADOW: var(--cms-factor) var(--cms-factor) var(--cms-factor) rgba(24, 23, 22, 0.75);
}

#copyright:after
{
    CONTENT: "|";
    PADDING-LEFT: 2ch;
}

@media (width <= 500px)
{
    #copyright
    {
        WIDTH: 100%;
    }

    #copyright:after
    {
        DISPLAY: none;
    }
}