/*
======================================================================
HEADER TOP REGION

EDIT HERE for:
- the upper strip above the menu
- dummy fallback styling
- spacing of phone / follow us / social icons
- responsive behavior of the upper strip

Structural output is in:
For main colors and fonts, check css/design-tokens.css first.

- templates/page.html.twig
- templates/page--front.html.twig
======================================================================
*/
/* Header-top region support with visible dummy fallback. */
/* EDIT HEADER TOP: wrapper layer */
#header-top {
  position: relative;
  z-index: 1002;
}

/* EDIT HEADER TOP LAYOUT: right-align or center the content */
#header-top .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#header-top .header-top-region-wrapper,
#header-top .header-top-dummy {
  width: 100%;
}

/* EDIT HEADER TOP CONTENT LAYOUT: spacing between REACH US / phone / FOLLOW US */
#header-top .header-top-dummy,
#header-top .header-top-region-wrapper .block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  min-height: var(--site-header-top-min-height);
}

/* EDIT COLORS / EDIT FONTS: actual strip look */
#header-top .header-top-dummy,
#header-top .header-top-region-wrapper .block {
  background: var(--site-bg-header-top);
  color: var(--site-color-primary);
  font-family: var(--site-font-ui);
  padding: 8px 16px;
}

#header-top a {
  color: var(--site-color-primary);
}

#header-top a:hover {
  color: var(--site-color-menu-active);
}

#header-top .header-top-dummy .social-icons .social,
#header-top .header-top-region-wrapper .social-icons .social {
  background: var(--site-color-accent-strong);
  color: var(--site-color-white);
}

/* EDIT FONTS: labels like REACH US / FOLLOW US */
#header-top .header-top-dummy .label,
#header-top .header-top-region-wrapper .label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#header-top .header-top-dummy .phone,
#header-top .header-top-region-wrapper .phone {
  display: inline-flex;
  align-items: center;
}

#header-top .header-top-dummy .social-icons,
#header-top .header-top-region-wrapper .social-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* EDIT COLORS / SHAPES: icon circles */
#header-top .header-top-dummy .social-icons .social,
#header-top .header-top-region-wrapper .social-icons .social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--site-social-icon-size);
  height: var(--site-social-icon-size);
  border-radius: 50%;
}

#header-top .header-top-region-wrapper .block > h2,
#header-top .header-top-region-wrapper .block .contextual,
#header-top .header-top-region-wrapper .block .visually-hidden {
  display: none !important;
}

/* EDIT RESPONSIVE HEADER TOP */
@media (max-width: 991px) {
  #header-top .container {
    justify-content: center;
  }

  #header-top .header-top-dummy,
  #header-top .header-top-region-wrapper .block {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    text-align: center;
    padding: 8px 0;
  }
}