/*
Theme Name: Bezoekhetnoorden
Template: generatepress
*/

body(

    background:#fff;

)

/* =============================================================
   TYPOGRAFIE & BASIS
   ============================================================= */

html {
	font-size: 18px;
	font-family: "Meta Serif Pro Book", "Circular Pro Book", Helvetica, Arial, sans-serif !important;
}

body {
	font-family: "Meta Serif Pro Book", "Circular Pro Book", Helvetica, Arial, sans-serif !important;
	background: #fff;
	color: #4a4a4a;
}

p {
	margin-top: 10px;
	font-size: 18px;
	line-height: 30px;
	font-weight: 100;
	font-family: "Meta Serif Pro Book", "Circular Pro Book", Helvetica, Arial, sans-serif !important;
}

h1 {
	font-size: 60px;
	font-family: 'Kanit', sans-serif;
}

h2 {
	font-size: 54px;
	font-family: 'Kanit', sans-serif;
}

h2, h3, h4, h5 {
	font-family: 'Vollkorn';
}

h4 {
	margin-top: 25px;
}

ul {
	list-style: none;
}

li {
	line-height: 22px;
}

a,
a:hover {
	color: #0071bd;
}

b {
	border: 1px solid #1e4f8a;
	margin: 5px;
	background: #1e4f8a;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
	padding: 6px 12px;
	line-height: 40px;
	border-radius: 8px;
}

blockquote {
	color: #0071bd;
	font-style: italic;
	border: none;
	font-size: 60px;
	font-weight: 600;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
}

iframe {
	margin: 40px 0;
	min-height: 150px;
	border: none;
}

figure {
	padding: 0;
}

select {
	border: 1px solid #d1cece;
	padding: 3px;
	border-radius: 3px;
	line-height: 18px;
}

option {
	font-weight: normal;
	line-height: 18px;
}

.fa {
	margin: 0 5px;
}

/* =============================================================
   NAVIGATIE
   ============================================================= */

.mobile-only,
.menu-text {
	display: none;
}

#mobile-nav-button {
    display: none!important;;
}

.menu-heading > a {
	font-size: 18px;
	letter-spacing: 0.5px;
	font-weight: 900 !important;
	cursor: default;
	pointer-events: none;
	display: block;
	border-bottom: 2px solid #000;
	padding-bottom: 5px;
	margin: 15px 0;
}

/* Verberg menu-heading op desktop */
@media (min-width: 769px) {
	.menu-heading {
		display: none;
	}
}

.head-menu {
	/* zichtbaar op desktop */
}

#main-menu {
	background: #fff;
	padding-left: 0;
}

#main-menu-container {
	background-color: #fff;
}

#main-navigation ul {
	margin-left: 150px;
	margin-top: -65px;
	float: right;
}

#main-navigation .main-nav ul li a {
	font-family: 'Poppins', sans-serif;
	color: #4a4a4a;
	background: none;
	display: block;
	padding: 3px 20px;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
}

#main-navigation .main-nav ul li a:hover {
	color: #1e4f8a;
}

#main-navigation .main-nav ul li ul {
	background: none;
	text-align: left;
	margin: 0;
	color: #000;
	border: 1px solid #ccc;
}

#main-navigation .main-nav ul li ul a {
	background: #efefef;
	text-align: left;
	padding: 3px 20px;
	margin: 0;
	color: #000;
	display: block;
}

#main-navigation .main-nav ul li ul a:hover {
	color: #fff;
	background: #1e4f8a;
}



/* HERO */

.hero-locatie {

    position: relative;

    min-height: 600px;

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: flex-end;

    padding: 60px 5%;

    color: #fff;

    overflow: hidden;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.25)
    );

}

.hero-content {

    position: relative;

    z-index: 2;

	padding:8px 0 8px 0;

    max-width: 100%;

}

.locatie-badge {

    display: inline-block;

    background: #2e7d32;

    color: #fff;

    padding: 10px 16px;

    border-radius: 50px;

    margin-bottom: 25px;

    font-size: 14px;

    font-weight: 700;

}

.hero-content h1 {

    font-size: 68px;

    line-height: 1.1;

    margin-bottom: 25px;

    color: #fff;

    font-weight: 800;

}

.hero-subtitle {

    font-size: 22px;

    line-height: 1.7;

    margin-bottom: 30px;

    color: rgba(255,255,255,.92);

    max-width: 650px;

}

.hero-meta {

    display: flex;

    gap: 20px;

    margin-bottom: 35px;

    flex-wrap: wrap;

    font-size: 18px;

}

.hero-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

/* =============================================================
   GUTENBERG BLOKKEN
   ============================================================= */

.wp-block-image figcaption {
	text-align: left !important;
	background: none !important;
	color: #1e4f8a;
	font-family: "Bebas Neue" !important;
	font-size: 24px !important;
	letter-spacing: 0.5px;
	font-weight: bold;
	padding: 0 0 5px 7px !important;
}

.wp-block-column {
	flex-grow: 1;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
	border: 1px solid #ccc !important;
	margin: 40px 0 !important;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.wp-block-column a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.wp-block-image img {
	box-sizing: border-box;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
	border-radius: 10px 10px 0 0;
}

.wp-block-buttons {
	box-sizing: border-box;
	margin-bottom: 15px;
}

.wp-element-caption-12158 {
	margin: -72px auto 0 !important;
}

.has-text-align-center {
	margin-bottom: 50px;
}

.cleared {
	margin: 30px 0 10px;
}

.wp-block-media-text {
	margin: 50px 0;
	border: 1px solid #ccc;
	border-radius: 10px;
}

.wp-block-coblocks-dynamic-separator {
	display: none;
}

.wp-block-columns {
	gap: 30px;
	margin: 30px 0;
	align-items: stretch;
}




/* =========================
   GRID
========================= */

.locatie-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .locatie-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   KAART
========================= */

.kaart {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: all 0.25s ease;

    display: flex;
    flex-direction: column;
    width:100%;
    min-width: 0;
    height: 100%;
}

.kaart:hover {
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}


.kaart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   CONTENT
========================= */

.kaart-content {
    padding: 24px;
}

/* TITEL */
.kaart h3 {
    font-size: 22px;
    line-height: 1.2;
    margin: 16px 0;
    color: #000;
}

/* LOCATIE */
.kaart-locatie {
    color: #444;
    font-size: 15px;
    margin-bottom: 20px;
}

/* LABEL */
.kaart-type {
    margin-bottom: 10px;
}

.kaart-label{
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    display:inline-block;
    letter-spacing:0.2px;
}

.kaart-label {
    display: inline-block;
    padding: 6px 12px;
    background: #f2f4f7;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

/* KNOP */
.kaart-knop {
    margin-top: 20px;
    color: #1d4ed8;
    font-weight: 600;
}

/* CONTENT */
.kaart-content {
    padding: 24px;
}

/* TITEL */
.kaart h3 {
    font-size: 22px;
    line-height: 1.2;
    margin: 16px 0;
    color: #000;
}

/* LOCATIE */
.kaart-locatie {
    color: #444;
    font-size: 15px;
    margin-bottom: 20px;
}

/* LABEL */
.kaart-type {
    margin-bottom: 10px;
}

.kaart-label {
    display: inline-block;
    padding: 6px 12px;

    background: #f2f4f7;
    border-radius: 30px;

    font-size: 13px;
    font-weight: 600;

    color: #333;
}

/* KNOP */
.kaart-knop {
    margin-top: 20px;
    color: #1d4ed8;
    font-weight: 600;
}


/* =========================
   🏨 OVERNACHTEN
========================= */

.kaart-label.hotel,
.kaart-label.vakantiepark,
.kaart-label.camping,
.kaart-label.bed-breakfast,
.kaart-label.chalet{
    background:#e8f1ff;
    color:#1e5eff;
}

/* =========================
   🍽 FOOD & DRINK
========================= */

.kaart-label.restaurants,
.kaart-label.pannenkoeken,
.kaart-label.cafe,
.kaart-label.eten-drinken,
.kaart-label.bistro{
    background:#fff3e6;
    color:#e67e22;
}

/* =========================
   💦 WATER & ZWEMMEN
========================= */

.kaart-label.zwemmen,
.kaart-label.strand,
.kaart-label.boottochten,
.kaart-label.watersport{
    background:#e6fbff;
    color:#0aa6c2;
}

/* =========================
   💆 WELLNESS & RELAX
========================= */

.kaart-label.wellness,
.kaart-label.sauna,
.kaart-label.spa{
    background:#e8f8ef;
    color:#1f8a4c;
}

/* =========================
   🎢 ATTRACTIES & UITJES
========================= */

.kaart-label.attractiepark,
.kaart-label.museum,
.kaart-label.dierentuin,
.kaart-label.activiteit,
.kaart-label.uitjes{
    background:#f3e8ff;
    color:#7e3ff2;
}

/* =========================
   🌲 NATUUR & BUITEN
========================= */

.kaart-label.natuur,
.kaart-label.wandelen,
.kaart-label.fietsen,
.kaart-label.natuurgebied{
    background:#eaf7e7;
    color:#2e7d32;
}

/* =========================
   🏙 STAD & OVERIG
========================= */

.kaart-label.stad,
.kaart-label.winkel,
.kaart-label.overnachten-stad{
    background:#f1f1f1;
    color:#333;
}

/* =============================================================
   GALERIJ
   ============================================================= */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

.gallery-grid img {
	width: 100%;
	height: 285px;
	object-fit: cover;
	border-radius: 10px;
}

.gallery-title {
	margin-bottom: 15px;
	color: #1e4f8a;
}


/* =============================================================
   KAARTEN / LOCATIELIJST
   ============================================================= */

.locatie-content {

    width: 100%;

    max-width: 1200px;

    margin: auto;

    padding: 80px 0;

}

.locatie-template {
    background: #fff;
}

.adres-blok {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;

    background: #fff;
    padding: 40px;
    border-radius: 24px;

    margin-top: 50px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.06);

    align-items: start;
}

/* LINKS & RECHTS niet laten “krimpen/overlopen” */
.adres-left,
.adres-right {
    min-width: 0;
}

/* LINKS tekst netjes laten breken */
.adres-left p {
    margin: 0 0 10px 0;
    word-break: break-word;
}

/* MOBILE FIX (belangrijk!) */
@media (max-width: 768px) {
    .adres-blok {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 25px;
        border-radius: 16px;
    }
}

/* INFO BAR */

.info-bar {

    display: grid;

   grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;

    background: #fff;

    margin:-50px auto 50px;

    padding:0 20px;

    position: relative;

    z-index: 10;

    width: 100%!important;

    margin-left: auto;

    margin-right: auto;

}

.info-item {

    background:#fff;

    border-radius:12px;

	font-size:14px;

    padding:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

    display:flex;

    align-items:flex-start;

    gap:10px;

}

.info-item span{
    font-size:14px;
    line-height:1.6;
    color:#666;
}

.info-item span p{
    margin:0;

	font-size:14px;
}

.info-item .icon {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    color: #2e7d32!!important;

    flex-shrink: 0;

}

.info-item strong {

    display: block;

    margin-bottom: 5px;

}

.icon {

    font-size: 28px;

}

/* BUTTONS */

.btn-primary,
.btn-secondary,
	.btn-outline{

    display: inline-block;

    padding: 16px 30px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 700;

    transition: .3s ease;

    font-size: 16px;

}

.btn-primary {

    background: #2f7d4f!important;

    color: #fff;

	border: 1px solid #2f7d4f!important;

}

.btn-primary:hover {

    background: #256428;

	color:#fff;

}

.btn-secondary {

    border: 2px solid rgba(255,255,255,.85);

    color: #fff;

    background: rgba(255,255,255,.08);

}

.btn-secondary:hover {

    background: rgba(255,255,255,.18);

	color:#fff!important;

}

.btn-outline {

    background: #f4a261!important;

    color: #fff;

	border: 1px solid #f4a261!important;

	margin-top: 10px;
}

.btn-primary:hover {

    background: #f4a261;

	color:#fff;

}

.adres-right .btn-primary,
.adres-right .btn-secondary,
.adres-right .btn-outline{

    width:75%;
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:54px;

    border-radius:10px;
}


/* =============================================================
   FOOTER
   ============================================================= */

..site-info{

    background:#fff;
    color:#000;

}