/*
Theme Name: Holicroc
Author: Dennis de Vogel | graphic design (c) 2025
Author URI: https://dennisdevogel.com/ and https://holicroc.com
Description: Frontend theme for the ph prelaunch website
Version: 0.1
*/

* {
    /* margin: 0;
    padding: 0; */
    box-sizing: border-box;
}

body {
    font-family: "segoe-ui", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2em;
	font-smooth: auto;
	-moz-osx-font-smoothing: auto; 
	-webkit-font-smoothing: antialiased;
	color: #373736;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

h1 {
	font-family: "segoe-ui", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #373736;
	padding-top:20px;
}
h2 {
	color: #373736;
	font-size: 2.4em;
}

a:link { 
	text-decoration: none;
	color: currentcolor;
} 
a:visited { 
	text-decoration: none;
	color: currentcolor;
} 
a:hover { 
	text-decoration: none; 
	color: currentcolor;
} 
a:active { 
	text-decoration: none;
	color: currentcolor;
}

p{
	padding: 0 5px 0 5px;
}

/* Header section from here */

@media screen and (max-width: 750px) {
	mainheader {
	padding: 0px 0px 20px 0px;
	position: fixed;
    z-index: 999;
    width: 100%;
	}
}
@media screen and (min-width: 751px) {
	mainheader {
	background-color:white;
	padding: 20px 0 0 0;
	position: fixed;
    z-index: 999;
    width: 100%;
	}
}

.navheader{
	width: 98vw;
	height: 80px;
	margin-left: auto;
	margin-right: auto;
	background-color: #008ECA;
	border-radius: 20px 20px 0 0;
	display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.menu{
	margin-left: auto;
	margin-right: auto;
	background-color: #008ECA;
	border-radius: 20px 20px 20px 20px;
}

#leftmenu{
    width: 250px;

    position:fixed;
    top: 160px;
    left: 20px;

    display: flex;
    justify-content: space-between;
    flex-direction: column;

    padding:20px 20px 20px 20px;
    margin-left: auto;
}

#admin_page{
    position:fixed;
    top: 160px;
    left: 270px;
    padding:0px 20px 20px 20px;
}

#header {
	width: 98vw;
	height: 60px;
	position:absolute;
    background: #008ECA;
	border-radius: 0 0 20px 20px;
    text-align: center;
    transition: all 0.3s ease;
}
    /* This class gets added by JavaScript when scrolled */
#header.sticky {
    position: fixed;
    top: 80px;
    min-width:1200px;
	max-width: 98vw;
    background: #008ECA;
    z-index: 99;
}


.logo{
  background: url("../images/logo_neg.png");
  background-size: 210px 80px;
  background-repeat: no-repeat;
  min-width: 210px;
  height: 80px;
  display: block;
  position: absolute;
  z-index: 999;
}

.nav-container {
}

#mainmenu{
	padding-right: 40px;
    margin-top: 20px;
	float: right;
	text-transform: uppercase;
	font-weight: 700;
}

#submenu{
	font-weight: 700;
	margin-top: 10px;
}

.nav-menu {
    list-style: none;
    display: flex;
    color: white;
    font-size: 19px;
}

.nav-menu li {
    display: inline;
	margin-right: 5px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 0.5rem;
    display: block;
}

.nav-menu a:hover {
	color:white;
}

.hamburger {
    display: none;
    font-size: 2.0rem;
	font-weight: 600;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding-left: 1.5rem;
}

/* Mobile Styles */
@media screen and (max-width: 900px) {
    .hamburger {
        display:block;
		margin-right: 20px;
        margin-left: auto;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        right: 0;
        background: #f2faff;
        padding: 2rem 1rem 1rem 1rem;
        margin-top: -20px;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        margin: 0.5rem 0;
    }
}

main {
	padding: 0 0 0 0;
	background-color:white;
	overflow:hidden;
}

@media screen and (max-width: 720px) {
	.blue_container {
    max-width: 98vw !important;
    margin-left: auto;
	margin-right: auto;
	padding: 40px 0px 20px 0px;
	background-color:#008ECA;
	color: white;
	}
}

@media screen and (min-width: 721px) {
	.blue_container {
	max-width: 98vw !important;
    margin-left: auto;
	margin-right: auto;
	padding: 40px 0px 20px 0px;
	background-color:#008ECA;
	color: white;
	}
	
	.main-content{
	padding-top: 100px;
	width:700px;
	min-height:400px;
	margin-left:auto;
	margin-right:auto;
	}
}

@media screen and (min-width: 1220px) {
	.blue_container {
	max-width: 98vw !important;
    margin-left: auto;
	margin-right: auto;
	padding: 40px 0px 20px 0px;
	background-color:#008ECA;
	color: white;
	}
	
	.main-content{
	padding-top: 100px;
	width:1200px;
	min-height:400px;
	margin-left:auto;
	margin-right:auto;
	}
}

.blue_container h1{
	color: white;
}
.blue_container h2, h3, h4{
	color: white;
	text-transform: uppercase;
}

.main_container p, h1, h2, h3{
	color:#373736;
}

.column_2{
	width:50%;
	column-gap: 1em;
}
.column_3{
	width:33.3333%;
	column-gap: 1em;
}
.column_4{
	width:25%;
	column-gap: 1em;
}
.column_5{
	width:20%;
	column-gap: 1em;
}

/* Custom header part between the navigations from here */
.hc-block-cover, .hc-block-cover-image {
    align-items: center;
    background-position: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-height: 430px;
    overflow: hidden;
    overflow: clip;
    padding: 1em;
    position: relative;
}

.hc-block-cover-image.has-parallax {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.hc-block-cover__image-background.has-parallax{
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.hc-block-cover .hc-block-cover__image-background {
    border: none;
    bottom: 0;
    box-shadow: none;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    object-fit: cover;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.hc-block-cover .hc-block-cover__background {
    bottom: 0;
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0;
}

.hc-block-cover .hc-block-cover__inner-container {
    color: inherit;
    position: relative;
    width: 100%;
}


/* Product section from here : 4 columns */
.product_post_grid.columns-4 {
	display: flex;
    flex-wrap: wrap;
	list-style-type: none;
	padding-inline-start: 0;
	column-gap: 30px;
}

@media screen and (max-width: 480px) {
	.product_post_grid.columns-4 li {
		width: 100%;
        max-width: 300px;
		background-color: #F1F1F1;
		color: #373736;
		border-radius: 20px 20px 20px 20px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
}
@media screen and (min-width: 481px) {
	.product_post_grid.columns-4 li {
		width: calc(50% - 25px);
        max-width: 300px;
		background-color: #F1F1F1;
		color: #373736;
		border-radius: 20px 20px 20px 20px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
}
@media screen and (min-width: 1220px) {
	.product_post_grid.columns-4 li {
		width: calc(25% - 25px);
        max-width: 300px;
	}
}

.product_post_grid.columns-4 img {
}

.posts_featured-image{
	overflow: hidden;
    aspect-ratio: 1.8 / 1;
	border-radius: 20px 20px 0 0;
}


.latest-posts, a:hover {
	color: #afca0b;
}

.post-title{
	padding: 0 10px 15px 10px;
	font-size: 0.9em;
	font-weight: 700;
	text-transform: uppercase;
	display: block;
}

.post-title:hover{
	color: #afca0b;
}

.post-date {
	padding: 0 10px 15px 10px;
    display: block;
    font-size: .8125em;
}

.post-excerpt{
	padding: 0 10px 0 10px;
	font-size: 1.6em;
	font-weight: 700;
}

/* forms */

		label {
            display: block;
            margin: 20px 0 8px;
            font-weight: 400;
        }
        input[type="text"],
        input[type="email"] {
            width: 100%;
            padding: 14px;
            border: 1px solid #ddd;
            font-size: 16px;
            box-sizing: border-box;
        }
        action_button {
            width: 100%;
            background: #008ECA;
            color: white;
            padding: 15px;
            border: none;
            border-radius: 15px;
            font-size: 20px;
            font-weight: 700;
			text-transform: uppercase;
			text-align:center;
            cursor: pointer;
            transition: background 0.3s;
			display: block;
        }
        action_button:hover {
            background: #373736;
        }
        .success {
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: center;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: center;
        }

/* Footer section from here */

footer {
	width:1200px;
	color:#373736
}
footer .copyright {
	max-width: 1200px;
	color: #373736;
}

.widget-area {
	color: #333;
	max-width: 1200px;
	margin: auto;
	padding: 50px 0 50px 0;
}


/* Divider for the columns */
#divider{
	display:flex;
}

/* ** SPECIAL ITEMS ** */

/* INTERACTIVE SLIDE BUTTON */
/* Basis opmaak slider container */
.slider-container {
    width: 300px;
    margin: 50px auto;
    position: relative;
    font-family: Arial, sans-serif;
}

/* De grijze track */
.slider-track {
    position: relative;
    height: 5px;
	margin-top: 5px;
    background: #008ECA;
    border-radius: 5px;
}

/* De blauwe geselecteerde range */
.slider-range {
    position: absolute;
    height: 5px;
    background: #008ECA;
    border-radius: 5px;
}

/* Standaard range inputs verbergen en custom thumbs maken */
input[type="range"] {
    position: absolute;
    width: 100%;
    margin-top: -5px;
    pointer-events: none;
    -webkit-appearance: none;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    background: #008ECA;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type="range"]::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    background: #008ECA;
    border-radius: 50%;
    cursor: pointer;
}

/* Labels onder de slider */
.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 16px;
}