/* 
    these are the defaults, override via theme css - only need to include items youre overriding, not everything
    needs to be used for both normal and mobile css
    newer footprint, "responsive" (locations/menu) doesnt use mobile css overrides, only "desktop" overrides
    so all changes made in mobile css need to be copied into mobile css media query in the desktop css, shown at the bottom
*/
:root {
    /* 
        content 
    */
    --content-background: #ffffff;
    --content-text-color: #222222;
    --content-text-font-family: "Libre Baskerville", serif;
    --content-border-radius: 0;
    /* 
        nav 
    */
    --nav-container-background: #2a2b37;
    --nav-scrolled-container-background: var(--nav-container-background); /* matches --nav-container-background */
    --nav-modal-container-background: #2a2b37;
    --nav-logo-max-width: 100%;
    --nav-logo-max-height: 200px; /* should never be taller than roughly this, kc is not a marketing website */
    --nav-item-font-family: "Montserrat", sans-serif;
    --nav-item-font-size: 18px;
    --nav-item-font-weight: 500;
    --nav-item-padding: 10px 20px;
    --nav-item-text: #ebe8d7;
    --nav-item-content-vertical-align: center; /* flex-start(top)|center|flex-end(bottom) */
    --nav-item-content-horizontal-align: flex-start; /* flex-start(left)|center|flex-end(right) */
    --nav-item-background: transparent;
    --nav-item-border-bottom: #cccccc;
    --nav-item-border-top: #a0a0a0;
    --nav-item-border-radius: 0;
    --nav-item-text-transform: none;
    --nav-item-hover-text: #ebe8d7;
    --nav-item-hover-background: transparent;
    --nav-item-hover-border-left: none;
    --nav-item-hover-border-right: none;
    --nav-item-hover-border-radius: none;
    --nav-item-active-text: var(--nav-item-hover-text);
    --nav-item-active-background: var(--nav-item-hover-background);
    --nav-item-active-border-radius: var(--nav-item-hover-border-radius);
    --nav-modal-logo-max-width: 100%;
    --nav-modal-item-font-size: 18px;
    --nav-modal-item-font-weight: 500;
    --nav-modal-item-padding: 15px 20px;
    --nav-floating-logo-min-height: 75px;
    --nav-floating-logo-max-height: 75px;
    --nav-floating-logo-horizontal: 20px; /* left pixel adjustment, ie, moves to right */
    --nav-floating-logo-vertical: 0; /* top pixel adjustment, ie, moves down */
    /* 
        home buttons  
        - border/bg/hover colors also being used as accent colors in some places
    */
    --home-button-background-color: #ffffff;
    --home-button-border-color: #ebe8d7;
    --home-button-border-size: 2px;
    --home-button-text-family: "Libre Baskerville", serif;
    --home-button-text-color: #2a2b37;
    --home-button-text-size: 32px; /* wouldnt go larger than this */
    --home-button-tag-text-family: sans-serif;
    --home-button-hover-background-color: var(--home-button-text-color);
    --home-button-hover-border-color: var(--home-button-text-color);
    --home-button-hover-text-color: var(--home-button-background-color);
    /* probably shouldnt modify these unless you drastically change the font size it should scale ok */
    --home-button-text-callout-size: calc(var(--home-button-text-size) * 1.5);
    --home-button-tag-text-size: calc(var(--home-button-text-size) * .50);
    --home-button-tag-text-callout-size: calc(var(--home-button-text-callout-size) * .50);
    /* 
        menu nav 
    */
    --menu-nav-item-font-family: var(--content-text-font-family);
    --menu-nav-item-size: 16px;
    --menu-nav-item-font-weight: 700;
    --menu-nav-item-color: var(--content-text-color);
    --menu-nav-item-border-color: transparent;
    --menu-nav-item-border-radius: 0;
    --menu-nav-item-background-color: transparent;
    --menu-nav-item-padding: 8px 12px;
    /* hover state is also active state */
    --menu-nav-item-hover-color: var(--home-button-hover-text-color);
    --menu-nav-item-hover-border-color: var(--home-button-hover-border-color);
    --menu-nav-item-hover-background-color: var(--home-button-hover-background-color);
    /* sub-items */
    --menu-nav-sub-item-font-family: var(--menu-nav-item-font-family);
    --menu-nav-sub-item-color: var(--menu-nav-item-color);
    --menu-nav-sub-item-font-weight: var(--menu-nav-item-font-weight);
    --menu-nav-sub-item-background-color: var(--menu-nav-item-background-color);
    --menu-nav-sub-item-size: calc(var(--menu-nav-item-size) - 2px);
    --menu-nav-sub-item-border-radius: var(--menu-nav-item-border-radius);
    --menu-nav-sub-item-padding: 5px 5px 5px 10px;
    /* hover state is also active state */
    --menu-nav-sub-item-hover-color: var(--menu-nav-item-hover-color);
    --menu-nav-sub-item-hover-border-color: var(--menu-nav-item-hover-border-color);
    --menu-nav-sub-item-hover-background-color: var(--menu-nav-item-hover-background-color);
    /* 
        menu 
    */
    --menu-categories-item-image-display: block; /* none to hide */
    /*
        footer
    */
    --footer-background: var(--content-background);
    --footer-text-align: center;
    --footer-text-color: var(--content-text-color);
    --footer-link-color: var(--content-text-color);
    --footer-link-font-weight: 700;
    --footer-link-text-decoration: underline;
    --footer-link-hover-color: var(--content-text-color);
    --footer-link-hover-text-decoration: none;
}

/* 
    how to specify "mobile" overrides in the "desktop" theme css overrides 
    for new "responsive" footprint. all mobile styles should be copied
    into this block
*/
@media (max-width: 768px) {
    :root {
        /* add mobile specific override items here for mobile */
        --nav-logo-max-height: 70px;
    }
}