/* ==========================================
   1. BASISTEKEN & MOBIEL (< 768px)
   ========================================== */

/* Layout onder elkaar op mobiel */
.block-system-branding-block,
.site-branding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* Logo schaalt proportioneel (geen vervorming!) */
.site-branding__logo img,
.logo img,
img.logo {
  height: auto !important;
  max-height: 80px; /* Bovenste grens voor mobiel */
  width: auto !important;
  max-width: 100%;
  display: block;
}

.site-branding__text {
  width: 100%;
}

/* Titel op mobiel */
.site-name a,
.site-branding__name a {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  display: block;
  white-space: normal; /* Op mobiel mag de titel wel omklappen */
}

/* Slogan op mobiel: netjes als één blok tekst zonder rare regelbreaks */
.site-slogan,
.site-branding__slogan {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-top: 5px;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal; /* Zorgt dat lange volzinnen vloeiend omslaan op schermbreedte */
}


/* ==========================================
   2. DESKTOP & TABLET (>= 768px)
   ========================================== */
@media (min-width: 768px) {
  /* Naast elkaar op grotere schermen */
  .block-system-branding-block,
  .site-branding {
    flex-direction: row;
    align-items: center;
    gap: 25px;
  }

  /* Groter logo op desktop, behoudt aspect-ratio */
  .site-branding__logo img,
  .logo img,
  img.logo {
    max-height: 140px; /* Pas aan voor gewenste desktop-hoogte */
    height: auto !important; /* Voorkomt vervorming/stretchen */
  }

  /* Titel op 1 regel op desktop */
  .site-name a,
  .site-branding__name a {
    font-size: 2.4rem;
    white-space: nowrap; /* Blijft op 1 regel op desktop */
  }

  /* Slogan op 1 regel op desktop */
  .site-slogan,
  .site-branding__slogan {
    font-size: 1.05rem;
    white-space: nowrap; /* Slogan ook op 1 regel op desktop */
  }
}