/*!
Theme Name: Ohio-Child
Theme URI: http://ohio.colabr.io/
Author: Colabrio
Author URI: http://colabr.io/
Description: Ohio is a WordPress theme bundled with premium plugins to build a modern and functional website.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ohio
Text Domain: ohio-child
Tags: ajax, customizer, ecommerce, portfolio, minimal, page builder, responsive, multipurpose, shop, store, woocommerce, wpml

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/


/* Opleiding / studiedeel (headline component) */
.hva-opleiding-studiedeel{
  color:#d90a2c;
}

/* Extra ruimte onder namen */
.project-page.project.-layout7 .hva-project-names{
  margin-bottom: 20px;
}

/* ----------------
   Minder “Ohio lucht” boven content (desktop)
   ---------------- */
@media screen and (min-width: 769px){
  .project-page.project.-layout7
  .project-content:not(.-with-slider) .holder{
    padding-top: 0 !important; /* top padding uit */
  }
}

/* Minder bottom padding op deze layout */
.project-page.project.-layout7 .page-container.bottom-offset{
  padding-bottom: var(--clb-grid-gutter-2x) !important; /* pas aan: -1x / px als je wilt */
}

/* ----------------
   Row/kolommen: maak linkerkolom breder (jij had 75%)
   ---------------- */
.project-page.project.-layout7 .project-content .vc_row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}

/* Linker contentkolom (standaard 5/12) -> breder */
.project-page.project.-layout7 .project-content .vc_row > .vc_col-md-5{
  flex: 0 0 75%;
  max-width: 75%;
}

/* Rechterkolom (task/options) -> resterend */
.project-page.project.-layout7 .project-content .vc_row > .vc_col-md-push-1.vc_col-md-6{
  flex: 0 0 25%;
  max-width: 25%;
  left: auto; /* push neutraliseren */
}

/* Compactere overgang tekst -> gallery */
.project-page.project.-layout7 .project-details{
  margin-bottom: 12px !important;
}
.project-page.project.-layout7 .project-details > *:last-child{
  margin-bottom: 0 !important;
}

/* ----------------
   Gallery: onder de tekst, links marge behouden, rechts iets “uitlopen”
   ---------------- */
.project-page.project.-layout7 .project-gallery{
  margin-top: 100px;     /* minder ruimte boven foto’s */
  margin-bottom: 0;

  /* container-marge/padding links behouden (niet forceren naar 0) */
  margin-left: auto;
  margin-right: 60px;  /* rechts iets gebruiken; pas aan naar smaak */
  width: 100%;
  max-width: none;
  justify-content: left;

  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-start;
}

/* Gallery items: na jouw lightbox wijziging zijn dit meestal <a> direct children.
   Daarnaast is er een .first-image wrapper (div) voor de eerste afbeelding. */
.project-page.project.-layout7 .project-gallery > a,
.project-page.project.-layout7 .project-gallery .first-image{
  flex: 1 1 30%;
  max-width: min(30%, 300px);
  min-width: 400px; /* als het te krap wordt -> automatisch onder elkaar */
  margin: 0;

}

/* Zorg dat de eerste wrapper zich als tile gedraagt */
.project-page.project.-layout7 .project-gallery .first-image > a{
  display:block;
}


/* “Panorama” fallback (alleen als WP class meegeeft) -> 1 kolom */
.project-page.project.-layout7 .project-gallery img.size-full{
  flex-basis:100% !important;
  max-width:100% !important;
}

/* UX: klik hint */
.project-page.project.-layout7 .hva-lightbox-link{
  cursor: zoom-in;
  display:block;
}

/* ----------------
   Responsive
   ---------------- */
@media (max-width: 1100px){
  .project-page.project.-layout7 .project-content .vc_row > .vc_col-md-5,
  .project-page.project.-layout7 .project-content .vc_row > .vc_col-md-push-1.vc_col-md-6{
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* op kleinere schermen niet uitlopen */
  .project-page.project.-layout7 .project-gallery{
    margin-right: 0;
  }
}

@media (max-width: 900px){
  .project-page.project.-layout7 .project-gallery > a,
  .project-page.project.-layout7 .project-gallery .first-image{
    flex-basis:100%;
    max-width:100%;
    min-width:0;
  }
}



/*************** FILTER.PHP STYLING *************************/


/* Layout: blokken naast elkaar */
.portfolio-filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}


.portfolio-year-filter,
.portfolio-opleiding-filter,
.portfolio-labs-filter{
  margin-left:auto;
  margin-right:auto;
}

/* Jaar + Labs: horizontale lijst */
.portfolio-filter-row > .portfolio-year-filter ul.-unlist,
.portfolio-filter-row > .portfolio-labs-filter ul.-unlist{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
}

.portfolio-filter-row > .portfolio-year-filter li,
.portfolio-filter-row > .portfolio-labs-filter li{
  margin:0;
}

.portfolio-year-filter a{
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 999px;
}

/* ========= FORCE ACTIVE COLOR ========= */
.portfolio-year-filter a.active,
.portfolio-opleiding-filter a.active,
.portfolio-labs-filter a.active{
  background: #d90a2c !important;
  color: #fff !important;
}
.portfolio-year-filter a.active .name,
.portfolio-opleiding-filter a.active .name,
.portfolio-labs-filter a.active .name{
  color: #fff !important;
}

/* opleiding ul niet horizontaal */
.portfolio-filter-row > .portfolio-opleiding-filter ul.-unlist{
  display:block;
  margin:0;
  padding:0;
}

/* opleiding lijst verticaal */
.portfolio-opleiding-filter ul.opleiding-tree{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
}

/* iedere rij: 3 kolommen */
.portfolio-opleiding-filter li.opleiding-root-row,
.portfolio-opleiding-filter li.opleiding-leaf-row{
  display:grid !important;
  grid-template-columns: 140px 1px 1fr;
  column-gap:14px;
  align-items:center;
  margin:0;
}

.portfolio-opleiding-filter li.opleiding-root-row > a.opleiding-root,
.portfolio-opleiding-filter li.opleiding-leaf-row > a.opleiding-leaf{
  grid-column:1;
  justify-self:end;
}

.portfolio-opleiding-filter .opleiding-col-divider{
  grid-column:2;
  width:1px;
  height:100%;
  min-height:34px;
  background:#d7d7d7;
  justify-self:center;
  align-self:stretch;
  display:block;
}

.portfolio-opleiding-filter li.opleiding-root-row > ul.opleiding-children{
  grid-column:3;
  justify-self:start;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.portfolio-opleiding-filter .opleiding-col-empty{
  grid-column:3;
  display:block;
}

.portfolio-opleiding-filter input.ohio-opleiding-filter-checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* mobiel */


/* descriptions */
.portfolio-opleiding-filter .opleiding-child{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.portfolio-opleiding-filter .opleiding-desc-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid #d7d7d7;
  background:#fff;
  font-size:12px;
  line-height:1;
  padding:0;
  cursor:pointer;
}

.portfolio-opleiding-filter .opleiding-desc-tooltip{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  z-index:9999;
  max-width:280px;
  padding:10px 12px;
  border-radius:10px;
  background:#111;
  color:#fff;
  font-size:13px;
  line-height:1.35;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  display:none;
}



@media (hover:hover) and (pointer:fine){
  .portfolio-opleiding-filter .opleiding-child.has-desc .opleiding-desc-trigger:hover + .opleiding-desc-tooltip{
    display:block;
  }
}

/* mobile variants */
.portfolio-opleiding-filter .opleiding-child.has-desc.desc-open .opleiding-desc-tooltip{
  display:block;
}



/* parent button height */
.portfolio-opleiding-filter a.opleiding-root{
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  max-width: 100%;
  line-height: 1.15;
}

.portfolio-opleiding-filter a.opleiding-root .name{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* header row */
.portfolio-opleiding-filter .opleiding-head-row{
  display:grid;
  grid-template-columns: 140px 1px 1fr;
  column-gap:14px;
  align-items:end;
  margin:0 0 10px 0;
}

.portfolio-opleiding-filter .opleiding-head-left{
  justify-self:end;
  font-weight:600;
  opacity:.75;
  font-size:13px;
}

.portfolio-opleiding-filter .opleiding-head-divider{
  width:1px;
  height:14px;
  background:#d7d7d7;
  justify-self:center;
}

.portfolio-opleiding-filter .opleiding-head-right{
  justify-self:start;
  font-weight:600;
  opacity:.75;
  font-size:13px;
}


/* =========================
   Overlay filters (Labs/Thema)
   ========================= */

.ohio-filter-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  line-height:1;
}

.ohio-filter-toggle:focus{
  outline: none;
}

.ohio-filter-toggle-icon{
  font-size: 12px;
  transform: translateY(1px);
  opacity: .75;
}

.ohio-filter-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.ohio-filter-overlay.is-open{
  display: block;
}

.ohio-filter-overlay__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

.ohio-filter-overlay__panel{
  position:absolute;
  right: 18px;
  top: 18px;
  width: min(420px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow:auto;
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 16px;
}

.ohio-filter-overlay__title{
  font-weight: 600;
  font-size: 16px;
  margin: 4px 0 12px 0;
}

.ohio-filter-overlay__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}

.ohio-filter-overlay__list{
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.ohio-filter-overlay__list li{
  margin:0;
}

@media (max-width: 640px){
  .ohio-filter-overlay__panel{
    right: 12px;
    left: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-height: 70vh;
  }
}


/* Desktop: verberg i-knopjes */
@media (hover:hover) and (pointer:fine){
  .portfolio-opleiding-filter .opleiding-desc-trigger{
    display:none !important;
  }
}



/* Desktop: hover op chip toont tooltip */
@media (hover:hover) and (pointer:fine){
  .portfolio-opleiding-filter .opleiding-child.has-desc a.opleiding-leaf:hover ~ .opleiding-desc-tooltip{
    display:block;
  }
}

/* Opleiding overlay: extra breed (bijna full width) */
.ohio-filter-overlay[data-overlay="opleiding"] .ohio-filter-overlay__panel{
  left: 18px;
  right: 18px;
  width: auto;                 /* full width binnen marges */
  max-width: 1100px;           /* pas aan als je nóg breder wil */
  margin: 0 auto;              /* centreer */
}

/* Jaar overlay: iets compacter (optioneel) */
.ohio-filter-overlay[data-overlay="year"] .ohio-filter-overlay__panel{
  max-width: 520px;
}

/* =========================
   MOBILE: opleiding = boomstructuur (links + indent)
   ========================= */
@media (max-width: 640px){

  /* Forceer links uitlijnen (overlay/theme zet dit vaak op center) */
  .portfolio-opleiding-filter,
  .portfolio-opleiding-filter *{
    text-align:left !important;
  }

  /* header "Opleiding | Richting" verbergen op mobiel */
  .portfolio-opleiding-filter .opleiding-head-row{
    display:none !important;
  }

  /* zorg dat de tree niet meer “center” kan alignen via flex */
  .portfolio-opleiding-filter ul.opleiding-tree{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* root/leaf rows: geen grid meer */
  .portfolio-opleiding-filter li.opleiding-root-row,
  .portfolio-opleiding-filter li.opleiding-leaf-row{
    display:block !important;
    margin:0 0 12px 0 !important;
    padding:0 !important;
  }

  /* divider & placeholder weg */
  .portfolio-opleiding-filter .opleiding-col-divider,
  .portfolio-opleiding-filter .opleiding-col-empty{
    display:none !important;
  }

  /* ROOT chip: links, compact rond tekst */
  .portfolio-opleiding-filter li.opleiding-root-row > a.opleiding-root{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    padding:8px 12px !important;
    border-radius:999px !important;

    justify-content:flex-start !important;

    margin:0 0 8px 0 !important;
  }

  /* children list: onder root en ingesprongen */
  .portfolio-opleiding-filter li.opleiding-root-row > ul.opleiding-children{
    display:block !important;
    margin:0 0 14px 0 !important;
    padding:0 0 0 18px !important; /* indent */
  }

  /* ieder child als losse regel */
  .portfolio-opleiding-filter li.opleiding-root-row > ul.opleiding-children > li.opleiding-child{
    display:block !important;
    margin:0 0 8px 0 !important;
    width:auto !important;
  }

  /* child chip: links, compact rond tekst */
  .portfolio-opleiding-filter li.opleiding-child > a.opleiding-leaf{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;

    padding:7px 11px !important;
    border-radius:999px !important;

    justify-content:flex-start !important;
  }

  /* leaf row (root zonder children) ook links/compact */
  .portfolio-opleiding-filter li.opleiding-leaf-row > a.opleiding-leaf{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;

    padding:8px 12px !important;
    border-radius:999px !important;

    justify-content:flex-start !important;
    margin:0 !important;
  }

  /* ✅ Als je het (i) echt weg wil: zet dit aan */
  .portfolio-opleiding-filter .opleiding-desc-trigger,
  .portfolio-opleiding-filter .opleiding-desc-tooltip{
    display:none !important;
  }
  
	/* MOBILE: streepje voor sub-opleidingen */
	@media (max-width: 640px){
	  .portfolio-opleiding-filter li.opleiding-child > a.opleiding-leaf::before{
		content: "- ";
		margin-right: 4px;
		opacity: .6;
	  }
	}
}

.portfolio-filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.portfolio-filter-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

.ohio-filter-toggle{
  justify-self:center;
}

/* Rood uitklap-knopje als er actieve selecties zijn in dat blok */
.portfolio-filter.has-active > .ohio-filter-toggle{
  background: var(--clb-color-primary) !important;
  color: #fff !important;
  border-color: var(--clb-color-primary) !important;
}

/* ook icon wit */
.portfolio-filter.has-active > .ohio-filter-toggle .ohio-filter-toggle-icon{
  color: #fff !important;
}

/* hover blijft ook rood */
.portfolio-filter.has-active > .ohio-filter-toggle:hover{
  background: var(--clb-color-primary) !important;
  color: #fff !important;
}