/* ********************************************************************** */
/* COLORS */

/* #header has no background color, all is set in subheaders */

#subheader-1,
#subheader-1 a,
#subheader-1 a:visited {
    background:#150;
    color:#eaeaea;
}

/* hover only applies to .menu links to exclude site logo */
#subheader-1 .menu a:hover {
    background:#195909;
    color:#eee;
}

#subheader-1 .menu.highlight a,
#subheader-1 .menu.highlight a:visited {
    background:#fff;
    color:#e80;
}

#subheader-1 .menu.highlight a:hover {
    background:#fff;
    color:#f18d05;
}

#subheader-2 {
    background:#256615;
}

#subheader-2 a,
#subheader-2 a:visited {
    color:#eaeaea;
}

/* hover only applies to .menu links to exclude site logo */
#subheader-2 .menu a:hover {
    background:#307220;
    color:#eee;
}



/* ********************************************************************** */
/* FONTS */



/* ********************************************************************** */
/* OTHER CONFIG */

/* ************************************************** */
/* HEADER */

#header {
    position:sticky;
    top:0;
    z-index:99;
}

/**
 * Make links to ids (like toc links to h2, h3 in content) 
 * scroll correctly with fixed header.
 * Offset height must be adjusted based on actual heading size
 * (should work for h2, h3, h4):
 * https://stackoverflow.com/questions/10732690/
 * offsetting-an-html-anchor-to-adjust-for-fixed-header
 * Other solutions with h2::before... were causing disruption to elements before the h2.
 * Must test if this also works with booking bform calendars.
 */
:target::before {
    content:'';
    display:block;
    height:4em;  /* orig 3em, before orig 2.4em, keep some reserve now */
    /**
     * margin-top should be negative number smaller than height, 
     * not bigger than margin-top of the heading that is target - 
     * test that clicking a target/tocfaq link does not overlap previous element,
     * e.g. pre
     */
    margin-top:-1.2em;  
    pointer-events:none;
}

@media all and (max-width:848.68px){
    /**
     * #subheader-2 not shown on narrow screens,
     * so :target::before only needs space for #subheader-1 height
     */
    :target::before {
        height:2em;
    }
}



/* ************************************************** */
/* SUBHEADER-1 */

#subheader-1 .wrap {
    font-size:70%;
    max-width:96%;
}

#subheader-1 .menu a {
    padding:1.2em 1em 1em 1em;
    line-height:1;
}

#subheader-1 a.hamburger {
    font-size:200%;
    padding:0.35em 1em 0.35em 1em;
}

/**
 * If there are multiple menus, add some margin between them.
 * Refer by id, e.g.:
 * #subheader-1 #main-menu {
 *     margin-right:3em;
 * }
 */



/* ************************************************** */
/* SUBHEADER-2 */

#subheader-2 .wrap {
    font-size:75%;
    max-width:96%;
}

#subheader-2 .menu a {
    padding:0.6em 1em 0.6em 1em;
    line-height:1;
}

#subheader-2 .menu a.hamburger {
    font-size:180%;
    line-height:0;
    padding:0.55em 1em 0.85em 1em;
}



/* ********************************************************************** */
/* CONSTANTS */

#header,
#subheader-1,
#subheader-2 {
    display:block;
    clear:both;
    width:100%;
    font-size:100%;
}

#subheader-1 a,
#subheader-2 a {
    text-decoration:none;
}

#subheader-1,
#subheader-2 {
    line-height:1;
    overflow:hidden;
}

@media all and (min-width:848.68px) {
    #mobile-menu-icon {
        display:none;
    }
}

/**
 * On narrow screens:
 * - Show mobile menu icon
 * - Hide all menus
 * - Hide entire #subheader-2
 */
@media all and (max-width:848.68px) {
    
    #subheader-1 .menu,
    #subheader-2,
    #subheader-2-sep {
        display:none;
    }
    
    #mobile-menu-icon {
        display:inline-block;
        float:right;
    }
    
    /**
     * #subheader-2 not shown,
     * :target::before only needs space for #subheader-1 height
     */
    :target::before {
        height:2em;
    }
}



/* ********************************************************************** */
/* END */