/*
 Theme Name:   Blocksy Child
 Theme URI:    https://jouwwebsite.nl
 Description:  Child theme van Blocksy met SVG-menu iconen en aanpasbare footer
 Author:       Jouw Naam
 Template:     blocksy
 Version:      1.0.0
 Text Domain:  blocksy-child
*/

/* ============================================
   MENU: ICONEN
   ============================================
   Hoe werkt het?
   1. Ga naar Uiterlijk > Menu Iconen
   2. Voeg een sleutelwoord toe (bijv: 'home') en kies een SVG
   3. Ga naar Uiterlijk > Menu's, schakel CSS Classes in via
      Schermopties, en voeg 'menu-icon-home' toe aan het item
   - Het tekst-label wordt verborgen, het SVG-icoon getoond
   - De CSS-regels worden automatisch gegenereerd door PHP
   ============================================ */

/* Verberg de tekst van menu-items met een icoon-class */
.main-navigation .nav-menu li[class*="menu-icon-"] > a span.ct-menu-link-name,
#menu-main-menu li[class*="menu-icon-"] > a .ct-menu-link-name {
  display: none;
}

/* Basisstijl voor icoon-menu-items */
.main-navigation .nav-menu li[class*="menu-icon-"] > a,
#menu-main-menu li[class*="menu-icon-"] > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  position: relative;
}

/* SVG-icoon via CSS mask (werkt met alle kleuren) */
.main-navigation .nav-menu li[class*="menu-icon-"] > a::before,
#menu-main-menu li[class*="menu-icon-"] > a::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

/* ============================================
   ICOON-CLASSES
   Deze worden automatisch gegenereerd via
   Uiterlijk > Menu Iconen in het dashboard.
   Je hoeft hier niets handmatig aan te passen.
   ============================================ */

/* ============================================
   OPTIONEEL: Tooltip met de paginanaam
   bij hover over een icoon-menu-item
   ============================================ */
.main-navigation .nav-menu li[class*="menu-icon-"] > a {
  position: relative;
}

.main-navigation .nav-menu li[class*="menu-icon-"]:hover > a::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
}

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

/* Verberg standaard Blocksy footer credits */
.ct-footer-copyright .ct-power-by,
.ct-footer .ct-power-by,
.site-footer .ct-power-by {
  display: none !important;
}

/* Jouw eigen footer-tekst styling */
.ct-footer-copyright {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  color: #666;
}

/* Verberg de GEHELE footer op pagina's met de custom field */
body.hide-footer .site-footer,
body.hide-footer .ct-footer {
  display: none !important;
}

/* Verberg de eerste H1 visueel (blijft zichtbaar voor zoekmachines) */
body.hide-h1 h1:first-of-type,
body.hide-h1 .entry-title,
body.hide-h1 .page-title,
body.hide-h1 .ct-page-title h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}