/*
Theme Name: Hout Depot Nederland
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* =============================================
   FONTS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Black+Ops+One&display=swap');

/* =============================================
   CSS VARIABLES / BRAND COLORS
   ============================================= */
:root {
	--hd-orange:       #f37d0f;
	--hd-dark:         #1a1919;
	--hd-brown:        #9c5725;
	--hd-gold:         #b06f07;
	--hd-green:        #4db02b;
	--hd-red:          #a00000;
	--hd-grey:         #7b7b7b;
	--hd-grey-light:   #f2f2f2;
	--hd-text:         #2e2e2e;
	--hd-white:        #ffffff;
}

/* =============================================
   BASE TYPOGRAPHY
   ============================================= */
body {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: var(--hd-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
	color: var(--hd-dark);
	font-weight: 600;
	line-height: 1.1em;
}

h1 { font-size: 35px; line-height: 40px; }
h2 { font-size: 20px; font-weight: 800; }
h3 { font-size: 23px; font-weight: 400; }
h4 { font-size: 18px; font-weight: 700; }

p {
	font-size: 15px;
	line-height: 1.7em;
}

a {
	color: var(--hd-text);
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: var(--hd-orange);
}

/* =============================================
   TOP BAR  (#top-bar)
   ============================================= */
#top-bar {
	background-color: var(--hd-dark) !important;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: 600;
	min-height: 32px;
	line-height: 32px;
}

#top-bar .flex-row {
	min-height: 32px;
}

/* All text in top bar: white */
#top-bar,
#top-bar a,
#top-bar span,
#top-bar li {
	color: #fff !important;
}

/* Icons in top bar: gold accent */
#top-bar i,
#top-bar .icon {
	color: var(--hd-gold) !important;
}

/* Links hover: orange */
#top-bar a:hover {
	color: var(--hd-orange) !important;
}

/* =============================================
   MAIN HEADER  (#masthead / .header-main)
   ============================================= */
#masthead,
.header-main {
	background-color: var(--hd-white) !important;
	min-height: 105px;
}

#masthead .header-inner {
	min-height: 105px;
	display: flex;
	align-items: center;
}

/* Logo sizing */
#masthead #logo img,
.header-main #logo img {
	max-height: 80px;
	width: auto;
}

/* Search field in header */
.header-main .search-field,
.header-main input[type="search"] {
	border: 1px solid #ddd;
	border-radius: 2px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}

/* Cart icon color */
.header-main .cart-icon,
.header-main .header-cart-link {
	color: var(--hd-dark) !important;
}

.header-main .cart-count {
	background-color: var(--hd-green) !important;
}

/* =============================================
   BOTTOM NAV BAR  (#wide-nav / .header-bottom)
   ============================================= */
#wide-nav,
.header-bottom {
	background-color: var(--hd-orange) !important;
	min-height: 51px;
}

#wide-nav .flex-row {
	min-height: 51px;
}

/* Navigation links in bottom bar */
#wide-nav .nav > li > a,
.header-bottom .nav > li > a,
#wide-nav .header-bottom-nav > li > a,
.header-bottom .header-bottom-nav > li > a {
	color: #fff !important;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 21px;
	padding: 15px 10px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: border-color .1s ease-in-out;
}

/* Active / hover state: dark bottom border */
#wide-nav .nav > li > a:hover,
#wide-nav .nav > li.active > a,
#wide-nav .nav > li.current-menu-item > a,
.header-bottom .nav > li > a:hover,
.header-bottom .nav > li.active > a,
.header-bottom .nav > li.current-menu-item > a {
	color: #fff !important;
	background-color: transparent !important;
	border-bottom-color: var(--hd-dark) !important;
}

/* Dropdown menus from bottom nav */
#wide-nav .nav .sub-menu,
.header-bottom .nav .sub-menu {
	background-color: var(--hd-dark) !important;
	border-bottom: 2px solid var(--hd-orange) !important;
	border-radius: 0;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#wide-nav .nav .sub-menu li a,
.header-bottom .nav .sub-menu li a {
	color: #fff !important;
	font-size: 15px;
	font-weight: 300;
	padding: 10px 18px;
	transition: background-color .15s ease-in-out;
}

#wide-nav .nav .sub-menu li a:hover,
.header-bottom .nav .sub-menu li a:hover {
	background-color: rgba(255,255,255,0.08) !important;
	color: #fff !important;
}

/* =============================================
   MOBILE MENU
   ============================================= */
@media (max-width: 1024px) {
	/* Mobile hamburger menu open: white background */
	#wrapper .mobile-sidebar,
	#wrapper .nav-sidebar {
		background-color: #fff;
	}

	/* Mobile nav links */
	.mobile-nav li a {
		color: var(--hd-dark) !important;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		font-weight: 400;
		border-bottom: 1px solid #eaeaea;
		padding: 12px 20px;
	}

	/* Mobile menu toggle button lines: orange */
	.nav-toggle span,
	.nav-toggle span::before,
	.nav-toggle span::after {
		background-color: var(--hd-orange) !important;
	}

	#masthead .header-inner {
		min-height: 80px;
	}

	#masthead #logo img {
		max-height: 60px;
	}
}

@media (max-width: 767px) {
	#masthead #logo img {
		max-height: 50px;
	}

	h1 { font-size: 28px; line-height: 34px; }
	h3 { font-size: 20px; }
	h4 { font-size: 14px; }
}

/* =============================================
   BUTTONS
   ============================================= */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
	background-color: var(--hd-orange) !important;
	color: #fff !important;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 14px;
	border-radius: 2px !important;
	border: none !important;
	padding: 8px 20px;
	transition: background-color .2s ease-in-out, transform .1s ease-in-out;
	cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: #d96d08 !important;
	color: #fff !important;
}

/* =============================================
   SCROLLBAR (desktop)
   ============================================= */
@media (min-width: 1200px) {
	*::-webkit-scrollbar {
		width: 7px;
		background-color: #f2f2f2;
	}

	*::-webkit-scrollbar-thumb {
		background-color: var(--hd-orange);
	}
}

/* =============================================
   GENERAL FORM ELEMENTS
   ============================================= */
select,
textarea,
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
	font-family: 'Roboto', sans-serif;
	border: 1px solid #ddd;
	border-radius: 2px;
}

/* =============================================
   WOOCOMMERCE – PRICE COLORS
   ============================================= */
.woocommerce .price,
.woocommerce .amount {
	color: var(--hd-dark) !important;
}

.woocommerce ins .amount {
	color: var(--hd-orange) !important;
}

/* =============================================
   MOBILE ONLY CSS
   ============================================= */
@media only screen and (max-width: 48em) {

}