/*******************************************************
 * WHATCANYOUDO — BRANDING BLOCK (LOGO + SLOGAN) OVERRIDES
 *******************************************************/

/* 1) Remove Olivero's background/padding from branding region */
#block-whatcanyoudo-sitebranding,
.region--branding {
  background: none !important;
  background-image: none !important;
  box-shadow: none;
  border: 0;
  padding: 0;
  min-height: 0 !important;        /* kills Olivero's min-height */
  margin-bottom: 26px !important;  /* match WP spacing */
}

/* 2) Stack the logo and slogan vertically, left-aligned */
.site-branding__inner {
  display: flex;
  flex-direction: column;     /* logo on top, slogan below */
  align-items: flex-start;    /* left-align */
}

/* 3) Logo image behavior — matches old WP styles */
.site-branding__logo img {
  display: inline;
  max-width: 168px;
  height: auto;
  vertical-align: middle;
  margin: 0;
  border: 0;
  box-sizing: border-box;

  /* Smooth hover transition like WP */
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

/* 4) Slogan styling — matches old WordPress “site-description” */
.site-branding__slogan {
  display: block;
  max-width: 170px;
  margin: 8px 2px 16px 2px;   /* top/right/bottom/left */
  font-size: 14px;            /* WP used 12px */
  font-weight: 400;           /* WP used semi-bold */
  /* text-transform: uppercase; */  /* same as WP theme */
  line-height: 16px;
  color: #333333;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  box-sizing: border-box;
  white-space: normal !important;   /* allow wrapping */
  word-wrap: break-word;
  width: 100%;                      /* matches logo width */
}

/* Make the text container a full-width block under logo */
.site-branding__text {
  width: 100%;               /* take full width of logo container */
  display: block;            /* ensure wrapping */
  margin-top: 8px;
  max-width: 170px;          /* slogan column width */
  margin-inline-start: 6px !important;
}

header.site-header {
  --wcyd-header-min: 146px;
  min-height: var(--wcyd-header-min) !important;
}

@media (min-width: 75rem) {
  header.site-header {
    min-height: var(--wcyd-header-min) !important;
  }
}