/*
Theme Name: Baarsjes
Theme URI: https://baarsdev.local
Description: GeneratePress child theme for Baarsjes.
Author: Louwrens
Template: generatepress
Version: 1.0.0
Text Domain: baarsjes
*/

/* Base state */
#menu-menu-1 > li > a{
  transition: background-color 1.2s ease, color 1.2s ease;
  font-size: 65px;
  padding-left: max(40px, calc((100% - 1200px) / 2 + 40px)) !important;
  padding-right: max(40px, calc((100% - 1200px) / 2 + 40px)) !important;
}
/* submenu items */
#menu-menu-1 > li > ul > li > a{
  transition: background-color 1.2s ease, color 1.2s ease;
  font-size: 35px;
  padding-left: max(40px, calc((100% - 1200px) / 2 + 40px)) !important;
  padding-right: max(40px, calc((100% - 1200px) / 2 + 40px)) !important;
}

/* Map each top-level button to its color on hover */
#menu-menu-1 > li:nth-child(1) > a:hover { background-color: #25B59A; color: #333; }
#menu-menu-1 > li:nth-child(2) > a:hover { background-color: #FF966C; color: #333; }
#menu-menu-1 > li:nth-child(3) > a:hover { background-color: #FFF4C6; color: #333; }
#menu-menu-1 > li:nth-child(4) > a:hover { background-color: #FFE8DA; color: #333; }
#menu-menu-1 > li:nth-child(5) > a:hover { background-color: #B0CCE0; color: #333; }
#menu-menu-1 > li:nth-child(6) > a:hover { background-color: #E1EEF8; color: #333; }
/* submenu items */
#menu-item-39-sub-menu, #menu-item-39-sub-menu a:hover{
  background-color: #FF966C;
  color: #333;
}

.top-bar {
  color: #ffffff;
  height:30px;
}
.top-bar .inside-top-bar .widget {
  padding: 0;
  display: inline-block;
  margin-top: -6px;
}

body.home,.home .site-header, .home .inside-header.grid-container, .home .site-footer, .main-navigation{
  background-color:#FEFBF9 ;
}
.home .entry-title {
  display:none;
}

.entry-title{
  padding-left: 2px;
}
body {
  font-size: 19px;
  line-height:1.3em;
}
a {
  color: #333;
}
#page a {
  text-decoration: none;
  border-bottom: 1px solid #333;
  font-weight: 600;
}
#page a.wp-element-button{
  background-color: #ffffff;
  border: 2px solid #333;
}

/* ---------------------------------------------- */
body.page.page-id-24{
  background-color: #FFE79B !important;/* baarsjes */
}
body.page.page-id-24 #masthead{
  background-color: #FFE79B !important;/* baarsjes */
}

body.page.page-id-24 .main-navigation{
  background-color: #FFE79B !important;/* baarsjes */
}
body.page.page-id-24 .inside-article{
  background-color: #FFE79B !important;/* baarsjes */
}
body.page.page-id-24 .site-info{
  background-color: #FFE79B !important;/* baarsjes */
}


/* ---------------------------------------------- */
body.page.page-id-31, body.page.page-id-33, body.page.page-id-35, body.page.page-id-241, body.page.page-id-244{
  background-color: #FF966C !important;/* ruimtes */
}
body.page.page-id-31 #masthead, body.page.page-id-33 #masthead, body.page.page-id-35 #masthead, body.page.page-id-241 #masthead, body.page.page-id-244 #masthead{
  background-color: #FF966C !important;/* ruimtes */
}

body.page.page-id-31 .main-navigation, body.page.page-id-33 .main-navigation, body.page.page-id-35 .main-navigation, body.page.page-id-241 .main-navigation, body.page.page-id-244 .main-navigation{
  background-color: #FF966C !important;/* ruimtes */
}
body.page.page-id-31 .inside-article, body.page.page-id-33 .inside-article, body.page.page-id-35 .inside-article, body.page.page-id-241 .inside-article, body.page.page-id-244 .inside-article{
  background-color: #FF966C !important;/* ruimtes */
}
body.page.page-id-31 .site-info, body.page.page-id-33 .site-info, body.page.page-id-35 .site-info , body.page.page-id-241 .site-info, body.page.page-id-244 .site-info{
  background-color: #FF966C !important;/* ruimtes */
}

#menu-item-39 > a[aria-expanded="true"],
#menu-item-39:hover > a {
  background-color: #FF966C;
  color: #333;
}

/* ---------------------------------------------- */
body.page.page-id-22{
  background-color: #FFE8DA !important;/* over ons */
}
body.page.page-id-22 #masthead{
  background-color: #FFE8DA !important;/* over ons */
}

body.page.page-id-22 .main-navigation{
  background-color: #FFE8DA !important;/* over ons */
}
body.page.page-id-22 .inside-article{
  background-color: #FFE8DA !important;/* over ons */
}
body.page.page-id-22 .site-info{
  background-color: #FFE8DA !important;/* over ons */
}



/* ---------------------------------------------- */
body.page.page-id-19{
  background-color: #B0CCE0 !important;/* contact */
}
body.page.page-id-19 #masthead{
  background-color: #B0CCE0 !important;/* contact */
}

body.page.page-id-19 .main-navigation{
  background-color: #B0CCE0 !important;/* contact */
}
body.page.page-id-19 .inside-article{
  background-color: #B0CCE0 !important;/* contact */
}
body.page.page-id-19 .site-info{
  background-color: #B0CCE0 !important;/* contact */
}

/* ----------------------------------------------- */
 body.wp-singular.page-template-default.page.page-id-37.full-width-content, .page-id-37 .entry-content, .page-id-37 #site-navigation, .page-id-37 #masthead{
  background-color: #FF966C !important; 
}



body{
  font-family: "Elms Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

img.header-image {
  height: auto;
  max-width: 65%;
}

.site-logo{
  text-align: left ;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-logo > a[rel="home"]{
  max-width: 65%;
}
img.header-image{
  max-width: 100%;
}
.baarsjes-menu-link{

  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  padding: .4em 1em;
  border: 2px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: auto; /* push to the right edge of .site-logo */
}
/* Set by the script in functions.php: stays in its header spot while scrolling */
.baarsjes-menu-link.is-fixed{
  position: fixed;
  transform: translateY(-50%); /* top = logo's middle, see functions.php */
  margin: 0;
  z-index: 1000;
  background: #fff;
}

.main-title {
  font-size: 65px;
  line-height: 1.2em;
  word-wrap: break-word;
  font-weight: 400;
  text-transform: none;
  margin-left:112px;
}


.main-navigation a {
  text-transform: uppercase;
}
h1.entry-title{
  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  /*font-size: 35px;*/
  font-style: normal;
  text-transform: uppercase;
}
/* Content section headings are H2 (one H1 per page for SEO), but keep the
   H1 look set in the Customizer (Dosis 38px). */
.entry-content h2.wp-block-heading {
  font-family: "Dosis", sans-serif;
  font-size: 38px;
  line-height: 1.2;
}

.main-navigation .main-nav > ul {
  display: block;

}

.main-navigation .main-nav ul li a {
 /* padding-left: 20px;
  padding-right: 20px;*/
  line-height: 80px;
}

.main-navigation ul ul {
  box-shadow: none !important;
}
.sub-menu li{
	padding-left:5px ;
}

.main-nav li a{
	font-size: 55px;
	padding:0 !important;

}

.main-nav{
  margin-left: 0;
  margin-right: 0;
  
  width: 100%;
  font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-size: 55px !important;
  font-style: normal; 
}

#menu-menu-1 > li > a {

  font-size: 55px;
}

.main-nav ul > li:first-child {
  border-top: 1px solid #333;
}
.main-nav li{
  border-bottom: 1px solid #333;
}

.main-navigation .main-nav ul ul li a {
	font-size: 35px;
}

.main-navigation .sub-menu li {
  margin-bottom: 0;
}

.dropdown-menu-toggle{
	display:none !important;

}

/* Desktop flyout is position:absolute by default (floats over content).
   Match GP's own mobile .toggled-on override so the open sub-menu sits
   in normal flow and pushes the following li's down instead. */
.main-navigation:not(.toggled) ul li:hover > ul,
.main-navigation:not(.toggled) ul li.sfHover > ul {
  position: relative;
  left: auto;
  top: 0;
  float: none;
  width: 100%;
}

/* intro header */
.baarsjes-after-header {
	display: flex;
	gap: 20px;
}

.baarsjes-after-header-col {
	flex: 1;
}
/* The intro now sits after </header> (see functions.php); use the same side and
   bottom padding as .inside-header so it lines up with the logo as before. */
.baarsjes-intro .baarsjes-after-header {
	padding: 0 40px 20px;
}
@media (max-width: 768px) {
	.baarsjes-intro .baarsjes-after-header {
		padding-left: 30px;
		padding-right: 30px;
	}
}
#topper{
	/* fluid: 16px on small phones, grows with the viewport, max 19px (unchanged on desktop) */
  font-size: clamp(16px, 7vw, 19px);
  line-height:1.3em;
  text-align: left;
}
#botter{
	/*background-color:#ccc ;*/
}
.entry-content .wp-block-columns.baarsjes-columns {
  padding-top: 20px;
  gap: 20px;
}
.wp-block-image figcaption {
  /*font-size: 13px;*/
  text-align: left;
}
/* accordion vormgeving */
h3.wp-block-accordion-heading {
  border-bottom: 1px solid #000 ;
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{
  text-decoration: none ;
}

/* ruimtes code */
.wp-block-columns #smalltxt p.wp-block-paragraph{
  font-size: 12px;
}
.wp-block-columns #smalltxt p.wp-block-paragraph strong{
  font-size: 19px;
}
.wp-block-columns .info-small{
  font-size: 14px;
  line-height: 1.25em;
}

.rb-map { max-width: 900px; margin: 0 auto; }
  .rb-map svg { display: block; width: 100%; height: auto; }
  .rb-map text {
    font-family: 'Dosis', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 34px;
    letter-spacing: .02em;
    fill: #111;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
  }
  .rb-map .rb-label { font-size: 20px; }
  .rb-map .rb-sub { font-family: 'Elms Sans', sans-serif; font-size: 24px; font-weight: 500; text-transform: none; fill: #333; }
  .rb-room text { text-anchor: start; }
  .rb-room polygon {
    fill: transparent;
    transition: fill .2s;
    cursor: pointer;
  }
  .rb-room:hover polygon,
  .rb-room:focus-visible polygon { fill: rgba(255, 238, 200, .18); }
  .rb-room:hover text,
  .rb-room:focus-visible text { fill: #ffffff; }
  .rb-room:hover .rb-sub,
  .rb-room:focus-visible .rb-sub { fill: #ffffff; }
  .rb-room:focus { outline: none; }
  /* Mobile: scale each text group up from its own centre */
  .rb-txt { transform-box: fill-box; transform-origin: center; }


p {
  margin-bottom: 0.7em;
}
h3 {
  margin-bottom: 0.7em;
}
.wp-block-columns{
  /*border: 2px dashed #000;*/
}
.ruimte-kop{
  padding: 35px;
  max-width: 600px;
}
.ruimte-een{
  padding: 35px;
  max-width: 600px;
  border: 2px solid #000;
}
.ruimte-twee{
  padding: 35px;
  max-width: 600px;
  border: 2px solid #000;
}
.ruimte-drie{
  padding: 35px;
  max-width: 600px;
  border: 2px solid #000;
}
.ruimte-vier{
  padding: 35px;
  max-width: 600px;
  border: 2px solid #000;
}
.ruimte-vijf{
  padding: 35px;
  /*border: 2px solid #fff;*/
  border: 2px solid #000;
}


@media (max-width: 600px) {
    .rb-txt { transform: scale(1.5); }
}
@media (max-width: 768px) {
    .ruimte-een{

    padding: 15px;
    max-width: 600px;
    border: 2px solid #000;
  }
  .ruimte-twee{
    padding: 15px;
    max-width: 600px;
    border: 2px solid #000;
  }
  .ruimte-drie{
    padding: 15px;
    max-width: 600px;
    border: 2px solid #000;
  }
  .ruimte-vier{
    padding: 15px;
    max-width: 600px;
    border: 2px solid #000;
  }
  .ruimte-vijf{
    padding:  15px;
    /*border: 2px solid #fff;*/
    border: 2px solid #000;
  }

  #post-37 h3 {
  font-size: 22px;
  }

  .top-bar{
    display:none;
  }
	.baarsjes-after-header {
		flex-direction: column;
	}
  img.header-image {
  height: auto;
  max-width: 100%;
  }
	#topper {
		line-height: 1.3;
	}
	#topper > :last-child {
		margin-bottom: 0;
	}
  .main-navigation .menu-toggle,
  .mobile-menu-control-wrapper { display: none !important; }
  .main-navigation .main-nav > ul { display: block !important; }
  .main-nav li a{
  font-size: 40px !important;

  }
  .main-navigation .main-nav ul ul li a {
  font-size: 25px !important;
  }
  h1.entry-title, h1, .entry-content h2.wp-block-heading{
  font-size: 35px;
  }
  .sub-menu li{
  padding-left:0px ;
  }
  /* Touch screens have no hover: show the same colours while a button is pressed,
     and fade fast so the colour is visible before the page changes. */
  #menu-menu-1 > li > a { transition-duration: 0.2s; }
  #menu-menu-1 > li:nth-child(1) > a:active { background-color: #198E78; color: #333; }
  #menu-menu-1 > li:nth-child(2) > a:active { background-color: #FFE79B; color: #333; }
  #menu-menu-1 > li:nth-child(3) > a:active { background-color: #FF966C; color: #333; }
  #menu-menu-1 > li:nth-child(4) > a:active { background-color: #FFE8DA; color: #333; }
  #menu-menu-1 > li:nth-child(5) > a:active { background-color: #B0CCE0; color: #333; }
  /* align button text with the content edge (.grid-container has 30px side padding) */
  #menu-menu-1 > li > a,
  #menu-menu-1 > li > ul > li > a {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* Front page (body.home): show every top-level menu item.
   Any other page: hide unselected top-level items, keep the current
   item and its parent/ancestor (so an open sub-menu's section stays). */
body:not(.home) .main-navigation .main-nav > ul > li {
	display: none;
}

body:not(.home) .main-navigation .main-nav > ul > li.current-menu-item ,
body:not(.home) .main-navigation .main-nav > ul > li.current-menu-ancestor,
body:not(.home) .main-navigation .main-nav > ul > li.current-menu-parent {
	display: list-item;
}

/* WP also marks custom links to an anchor on the current page
   (e.g. /ruimtes/#praktisch) as current-menu-item; keep those hidden
   so only the page itself is shown. */
body:not(.home) .main-navigation .main-nav > ul > li.menu-item-type-custom.current-menu-item:has(> a[href*="#"]) {
	display: none;
}

/* GP's "Navigation alignment: Center" centers .main-nav inside a flex
   container, and .main-nav shrinks to fit whatever items are visible.
   Hiding items above then shrinks the box and re-centers it, shifting
   the remaining items sideways. Left-align instead so the box (and its
   items) stay anchored regardless of how many items are shown. */
.main-navigation .inside-navigation {
	justify-content: flex-start;
}
/* The current top-level menu item already shows the page name on inner pages,
   so hide the entry-title H1 visually. Keep it in the DOM (not display:none)
   so it stays available to search engines and screen readers.
   Sub-menu pages are excluded: their menu item is only a small link inside the
   open sub-menu, so they keep the visible entry title. */
body:not(.home):not(:has(.main-nav .sub-menu .current-menu-item)) .entry-header .entry-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* smooth scroll to the Home menu item, with some space above it */
html{
  scroll-behavior: smooth;
}
#home{
  scroll-margin-top: 40px;
}


/* Desktop: make the page tall enough for #home to scroll up to the top
   (the menu + footer are shorter than the viewport, so it stopped short). */
@media (min-width: 769px) {
  body.home #site-navigation {
    /* 40px = scroll offset, 176px = footer height (176px at 800px wide, 196px
       on wide screens; the smallest value keeps the scroll working everywhere) */
    min-height: calc(100vh - 40px - 176px);
  }

}
/* Mobile: same idea, the footer is taller here (276-309px) */
@media (max-width: 768px) {
  body.home #site-navigation {
    min-height: calc(100vh - 40px - 276px);
  }
}

/* Front page: its text lives in the intro section, so hide the empty content
   box (white article + margins) under the menu. The class is only added while
   the Home page itself has no content (see functions.php). */
body.baarsjes-no-content #page {
  display: none;
}