/*
Theme Name: LBHF
Author: Svend Meyland Nicolaisen
Description: Theme for LBHF
Version: 1.7
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: LBHF
*/
/* Base mobile styles */
body
{
  font-family: Arial, Helvetica, sans-serif;
}

main
{
}
.site-content {
    padding: 1rem;
    max-width: 100%;
}

.main-navigation {
    display: none; /* Hide desktop menu */
}

.mobile-menu {
    display: block;
}

img.logo 
{
    display: none;
    border-style: solid;
    border-color: #880014;
}

img.hamburger
{
    display: block;
    position: absolute;
    top: 20px;   /* Distance from top of container */
    left: 20px;  /* Distance from left of container */
    z-index: 1;  /* Ensures it appears above the base image */
}



div.sitebar
{
    display: none;
    position: absolute;
    background-color: white;
    opacity: 1;
    z-index: 1;
    padding: 16px;
  	max-width: 200px;
}

div.main-area
{
    margin: 16px;
    position: absolute;
}

div.main-area a
{
    text-decoration: none;
    color: black;
}


div.main-area-overlay
{
    display: none;
    position: absolute;
    background-color: black;
    opacity: 0.7;
}

ul.wp-block-list
{
	list-style-image: url(/wp-content/themes/lbhf/assets/images/g3.png);
}
ul.wp-block-list li
{
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Mobile typography */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
p { font-size: 1rem; line-height: 1.6; }

ul.menu
{
    list-style-type: none;
    padding-left: 20px;
}

ul.menu li
{
    padding-top: 8px;
    padding-bottom: 8px;
}

ul.menu li a
{
    text-decoration: none;
    cursor: default;
    font-weight: bold;
    color: black;
}

ul.sub-menu
{
    list-style-type: none;
    padding-left: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
}

ul.sub-menu li
{
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 4px;
    padding-right: 0px
}

ul.sub-menu li a
{
    text-decoration: none;
    cursor: default;
    font-weight: unset;
    cursor: pointer;
}

ul.sub-menu li a:hover
{
    font-weight: bold;
}

footer
{
    margin-top: 8px;
    margin-left: 16px;
}

div.event-date
{
    background-color: #800000;
    align: center;
    text-align: center;
    padding: 3px;
}

div.event-title
{
    background-color: #800000;
    align: center;
    text-align: center;
    margin-bottom: 1px;
    padding: 3px;
}

div.event-date a
{
    text-decoration: none;
    font-weight: bold;
    color: white;
}

div.event-title a
{
    text-decoration: none;
/*    font-weight: bold;*/
    color: white;
}


/* Tablet (768px and up) */
@media screen and (min-width: 48em) {
    .site-content {
        padding: 2rem;
        max-width: 720px;
        margin: 0 auto;
    }

    .mobile-menu {
        display: none;
    }

    .main-navigation {
        display: block;
    }

}

/* Desktop (1024px and up) */
@media screen and (min-width: 64em) 
{
    .site-content 
    {
        max-width: 960px;
    }
    html
    {
    }
    body
    {
  /*      position: relative;*/
        max-width: 960px; 
        min-width: 960px;
        margin: auto !important;
    }

    footer
    {
        margin-left: 0px;
    }

  div.sitebar
    {
        display: block !important;
        position: relative;
        min-width: 200px;
        max-width: 200px;
        padding-top: 75px;
        padding-left: 16px;
        margin-top: -4px;
        background-color: #ececec;
        z-index: 0;
    }

    div.main-area 
    {
       margin: 16px;
       position: relative;
    }

    div.main-area-overlay
    {
        display: none !important;
    }

    img.logo 
    {
        display: block;
        border-radius: 75px;
        position: absolute;
        top: 317px;   /* Distance from top of container */
        left: 37px;  /* Distance from left of container */
        width: 150px;
        height: 150px;
        z-index: 1;  /* Ensures it appears above the base image */
    }

    img.hamburger
    {
        display: none;
    }

    ul.menu
    {
      padding-left: 0px;
    } 

}

body
{
    margin: 0px;
}

main
{
    display: flex;
}



    div.image-container 
    {
        position: relative; /* Needed for absolute positioning inside */
        display: inline-block;
    }

    img.header 
    {
        display: block;
    }