/* Block - Header Start */
/* ------------------------------------------------*/
/* Shared header-control height. Fluid so the EN / Hire-us pills, the hamburger
   and the nav container all grow together on larger screens (and stay aligned),
   instead of sitting at one fixed compact size. ~48px on tablet, ~53px on a
   laptop, up to ~64px on large desktops. Used from header.css AND menu.css. */
:root {
  --db-ctrl-h: clamp(4.8rem, 4rem + 1vw, 6.4rem);
}
.db-header {
  position: absolute;
  top: 0px;
  left: 3rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  width: -moz-calc(100% - 11.6rem);
  width: calc(100% - 11.6rem);
  padding-top: 3rem;
  z-index: 101;
  -webkit-transform: scaleY(1);
     -moz-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
  opacity: 1;
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}
.db-header.is-hidden {
  -webkit-transform: scaleY(1.2);
     -moz-transform: scaleY(1.2);
      -ms-transform: scaleY(1.2);
          transform: scaleY(1.2);
  opacity: 0;
}
.db-header.menu-is-visible {
  z-index: 10;
}
@media only screen and (min-width: 768px) {
  .db-header {
    left: 6rem;
    width: -moz-calc(100% - 19.6rem);
    width: calc(100% - 19.6rem);
    padding-top: 4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .db-header {
    left: 9rem;
    width: -moz-calc(100% - 25.6rem);
    width: calc(100% - 25.6rem);
  }
}

.db-header__logo {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.db-header__logo img,
.db-header__logo svg {
  /* Drive the wordmark by a fluid HEIGHT (width follows the intrinsic ratio),
     capped at the admin logo height. A definite height is required — the logo
     SVG has a viewBox but no intrinsic width/height, so width:auto/height:auto
     collapses it to 0. Because height is real (not a fixed 80px box) there is no
     dead space above/below the glyph, and because width tracks the ratio there
     is no squish. The heights are tuned so the derived width still clears the
     header controls (incl. the tablet "Hire us" pill) without overflow. */
  height: clamp(3rem, 1.6rem + 2.1vw, min(6rem, var(--logo-max-h, 6rem)));
  width: auto;
  max-width: 100%;
  display: block;
}

.db-header__controls {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .db-header__controls {
    gap: 2rem;
  }
}

/* Header control buttons: keep them proportional to the logo instead of
   snapping to the theme's full 5.6rem/2.2rem desktop size. Phones → compact
   icon buttons (fixes the line-height that inflated them); tablet through
   desktop → a steady, compact 4.8rem pill (the theme default felt oversized on
   laptops next to the wordmark). */
@media only screen and (max-width: 767.98px) {
  .db-header__controls .btn-mobile-icon {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
  }
  .db-header__controls .btn-mobile-icon i { font-size: 1.7rem; }
}
@media only screen and (min-width: 768px) {
  .db-header__controls .btn-default,
  .db-header__controls .btn-mobile-icon {
    height: var(--db-ctrl-h);
    line-height: var(--db-ctrl-h);
    padding: 0 clamp(1.8rem, 1.2rem + 0.7vw, 3rem);
    font-size: clamp(1.8rem, 1.5rem + 0.35vw, 2.3rem);
    border-radius: calc(var(--db-ctrl-h) / 2);
  }
}

/* ------------------------------------------------*/
/* Block - Header End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/