/* Kill header centering from the template */
#header,
#header .logo,
#header .sitename {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Make logo + counter share the same left edge */
#header .brand-block {
  display: inline-block;
}

.sd-brand,
.sd-logo,
.sd-sitename,
.sd-counter {
  display: block !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0;
}

.sd-brand {
  /* make sure it hugs the left, not centered as a block */
  margin-left: 0 !important;
}

/* Add clean spacing for the header content */
#header .sd-brand {
  margin-top: 20px !important;   /* adjust to taste */
  padding-left: 20px !important; /* adjust to taste */
}

/* FORCE the header to stop centering its children */
#header,
#header .container-fluid,
#header .row,
#header .col-auto,
#header .col-12 {
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

/* Remove the theme's forced left margin on the logo text */
.header .logo h1 {
  margin-left: 0 !important;
}

/* Apply your desired spacing to the wrapper instead */
.sd-brand {
  margin-top: 20px;
  margin-left: 20px;
}

/* Counter aligns perfectly under the logo */
.sd-counter {
  margin-left: 0 !important;
}

/* Row that holds clock + counter */
.sd-info-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important; /* space between clock and counter */
  margin-top: 5px;
}

.sd-info-row span {
  white-space: nowrap !important;
}

/* Clock styling */
#sd-clock {
  display: inline-block;
  width: 260px; /* enough space for full date + time */
  font-family: monospace !important;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Counter styling */
.sd-counter {
  font-size: 0.7rem;
}