/*
Theme Name:   Total Child
Theme URI:    https://clpoule.nl/
Description:  Child theme for CL Poule
Author:       Aldert Smits
Author URI:   https://smits.frl/
Template:     total
Version:      1.0.0
*/
/* Add custom styles below this line */

#ht-bottom-footer,
.ht-main-header {
    display: none;
}

.ht_no_sidebar #primary{
	width: auto;
	float: none;
	display: grid;
	margin-top: 5%;
	margin-bottom: 5%;
	background: url(images/footer-bg.jpg);
	position: relative;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 15px;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,.8);
	box-shadow: 0 0 15px rgba(0,0,0,.8);
	padding: 26px 26px 6px 26px;
}


#ht-main-footer {
    bottom: 0px;
    width: 100%;
    z-index: 1000;
}

#ht-content {
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 100vh;
	padding-bottom: 2%;
	max-width: 100%;
}

.ht-header {
	padding: 1%
	width: 100%;
}

strong,
.widget-title,
.wp-block-heading {
	font-weight: bold;
	border-spacing: 0 20px;
	border-collapse: separate;
	color: white;
	background-color: red;
	font-weight: bold;
	float: none;
	position: relative;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 15px;
	-webkit-box-shadow: 15px 15px 15px rgba(0,0,0,.8);
	box-shadow: 0 0 15px rgba(0,0,0,.8);
	padding: 6px 26px 6px 26px;
	vertical-align: middle;
	text-align: center;
}

a,
.content-area, 
.widget-area {
	color: white;
}

img.flag  {
	max-height: 50px;
}

img.pie-chart-icon  {
	max-height: 50px;
}

.ht-fluid .ht-container {
    width: 100%;
    max-width: 1200px;
}

.ht-menu ul.children {
    display: none; /* Hide all submenus by default */
}

.ht-menu li.open > ul.children {
    display: block; /* Show the submenu when the 'open' class is added */
}

/* Style for the main menu items */
.ht-menu > ul > li > a {
    color: green; /* Set the text color of main menu items to green */
    text-decoration: none; /* Optional: Remove underline from links */
    padding: 10px 15px; /* Optional: Add some padding for better spacing */
    display: block; /* Ensure the clickable area covers the entire menu item */
}

/* Style for the submenu items */
.ht-menu ul.children {
    background-color: lightgreen; /* Set the background color of the submenu to light blue */
    padding: 10px; /* Optional: Add some padding inside the submenu */
    border-radius: 5px; /* Optional: Add rounded corners to the submenu */
}

/* Style for submenu links */
.ht-menu ul.children li a {
    color: green; /* Set the text color of submenu items to green */
    text-decoration: none; /* Optional: Remove underline from links */
    display: block; /* Ensure the clickable area covers the entire submenu item */
    padding: 5px 10px; /* Optional: Add some padding for better spacing */
}

/* Optional: Change the background color of submenu items on hover */
.ht-menu ul.children li a:hover {
    background-color: #a0c4ff; /* Lighten the background color when hovering over submenu items */
}

/* Optional: Change the text color of main menu items on hover */
.ht-menu > ul > li > a:hover {
    color: #004d00; /* Darken the text color on hover */
}

@media only screen and (max-width: 768px) {
*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
    width: 100%;
	}

.toggle-bar {
	float: right;
    margin-right: 30px;
	}

}