/* /css/header.css */

:root{
  --site-max-width: 800px;          /* slab width */
  --banner-height: 220px;           /* banner box height */
  --welcome-font-size: 18px;        /* top bar text */
  --welcome-bar-height: 36px;       /* top bar height */
  --welcome-link-weight: 1800;       /* normal link weight */
  --welcome-link-hover-weight: 600; /* hover = bold */
}

#site-header{ width: 100%; }

/* cap the blocks above/below the full-bleed menu */
#GreetingAndHomeLinks,
#NameAndPhone,
.banner-box,
#banner-shadow{
  width: min(var(--site-max-width, 1000px), 100%);
  margin: 0 auto;
  box-sizing: border-box;
}

/* --- Welcome bar --- */
#WelcomeBar{
  background: var(--header-bg, #fff);
  color: var(--color-text, #4B4B4B);
  border-bottom: 1px solid #ccc;
  height: var(--welcome-bar-height);
  line-height: var(--welcome-bar-height);
}

#GreetingAndHomeLinks{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  font-size: var(--welcome-font-size);
}

#GreetingAndHomeLinks .HomeLinks{ display:flex; align-items:center; gap:6px; }

#GreetingAndHomeLinks a,
#GreetingAndHomeLinks a:visited{
  color: var(--color-act, #0f2e6d);
  text-decoration: none;
  font-weight: var(--welcome-link-weight);
}
#GreetingAndHomeLinks a:hover,
#GreetingAndHomeLinks a:focus-visible{
  text-decoration: none; /* no underline */
  font-weight: var(--welcome-link-hover-weight);
  outline: none;
}

/* --- Company name / hotline row --- */
#NameAndPhone{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

#NameAndPhone .CompanyName { flex: 1 1 75%; }
#NameAndPhone .PhoneNumber { flex: 1 1 25%; }

#NameAndPhone .CompanyName img,
#NameAndPhone .PhoneNumber img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 88px;       /* tweak if needed */
  object-fit: contain;
}

/* --- Banner + shadow --- */
.banner-box{
  height: var(--banner-height);
  overflow: hidden;
  background: var(--banner-bg, #fff);
}

.banner-box .bd,
.banner-box .bd ul{ margin:0; padding:0; }

.banner-box .bd li,
.banner-box .bd li a{
  display:block;
  width:100%;
  height: var(--banner-height);
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size: contain !important; /* show full image */
}

#banner-shadow{
  height: 11px;
  margin: -6px auto 10px; /* slight overlap to kill any gap */
  background: url('../images/20250702161313_1255032967.jpg') center top no-repeat;
  background-size: 100% auto;
}


/* Stack on narrow viewports */
/*
@media (max-width: 640px){
  #NameAndPhone{ flex-direction: column; align-items:center; gap:8px; }
  #NameAndPhone .CompanyName,
  #NameAndPhone .PhoneNumber{ flex: 0 1 auto; width: 100%; }
  #NameAndPhone .CompanyName img,
  #NameAndPhone .PhoneNumber img{ max-height: 72px; }
}
*/