/* ==========================================================================
   Fahavi Computers - site header
   ========================================================================== */

#header { position: relative; z-index: 500; }

/* ------------------------------------------------------------- top bar */
.fh-topbar {
  background: #101A5E; color: #fff;
  font-size: 12.5px; line-height: 1.4;
}
.fh-topbar__inner {
  max-width: 1600px; margin-inline: auto; padding: 9px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.fh-topbar__cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fh-topbar__cell svg { width: 14px; height: 14px; flex: none; color: var(--fh-gold); }
.fh-topbar b { font-weight: 700; }
.fh-topbar__sep { opacity: .38; padding-inline: 4px; }
.fh-topbar__addr { color: #DCE3FA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-topbar__tel { color: var(--fh-gold); font-weight: 800; text-decoration: none; white-space: nowrap; }
.fh-topbar__tel:hover { color: #fff; }

@media (max-width: 1180px) { .fh-topbar__mid { display: none; } }
@media (max-width: 720px) {
  .fh-topbar__inner { padding: 8px 14px; gap: 10px; font-size: 11.5px; }
  .fh-topbar__pay { display: none; }
}

/* -------------------------------------------------------------- main bar */
.fh-hd { background: #fff; border-bottom: 1px solid var(--fh-border); }
.fh-hd__inner {
  max-width: 1600px; margin-inline: auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 22px;
}

.fh-hd__logo { flex: none; display: inline-flex; align-items: center; }
.fh-hd__logo img { height: 42px; width: auto; display: block; }
.fh-hd__logo .fh-hd__wordmark { font-size: 20px; font-weight: 800; color: var(--fh-navy); letter-spacing: -.01em; }

/* search */
.fh-search {
  flex: 1 1 auto; max-width: 470px; position: relative;
  display: flex; align-items: center; gap: 8px;
  background: #F1F3F8; border: 1px solid #E4E7F0; border-radius: 30px;
  padding: 5px 5px 5px 16px;
}
.fh-search:focus-within { border-color: #B9C2E4; background: #fff; }
.fh-search__ico { width: 17px; height: 17px; color: #97A0B8; flex: none; }
.fh-search input[type=search] {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0;
  font-size: 13.5px; color: var(--fh-ink); padding: 8px 0;
  font-family: inherit;
}
.fh-search input[type=search]::placeholder { color: #98A1B7; }
.fh-search button {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  background: var(--fh-navy); color: #fff; border: 0; border-radius: 24px;
  padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.fh-search button svg { width: 14px; height: 14px; }
.fh-search button:hover { filter: brightness(1.12); }

/* nav */
.fh-nav { margin-left: auto; }
.fh-nav__list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.fh-nav__list li { margin: 0; }
.fh-nav__list a {
  font-size: 14px; font-weight: 600; color: #6E7382; text-decoration: none;
  padding: 6px 0; display: inline-block; transition: color .14s;
}
.fh-nav__list a:hover { color: var(--fh-navy); }
.fh-nav__list .current-menu-item > a,
.fh-nav__list .fh-nav--active > a { color: var(--fh-navy); font-weight: 700; }

/* actions */
.fh-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.fh-iconbtn {
  position: relative; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: #5C6480; text-decoration: none;
  transition: background .14s, color .14s;
}
.fh-iconbtn:hover { background: #F1F3F8; color: var(--fh-navy); }
.fh-iconbtn svg { width: 19px; height: 19px; }
.fh-iconbtn__count {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--fh-red); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.fh-callbtn {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 8px;
  background: var(--fh-navy); color: #fff; border-radius: 24px;
  padding: 11px 20px; font-size: 13.5px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.fh-callbtn svg { width: 15px; height: 15px; }
.fh-callbtn:hover { filter: brightness(1.12); color: #fff; }

/* mobile toggle */
.fh-burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--fh-ink); border-radius: 10px; cursor: pointer; place-items: center; }
.fh-burger svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .fh-nav__list { gap: 20px; }
  .fh-search { max-width: 340px; }
}
@media (max-width: 1080px) {
  .fh-hd__inner { flex-wrap: wrap; gap: 12px; }
  .fh-burger { display: grid; order: 3; margin-left: auto; }
  .fh-nav { order: 5; width: 100%; margin-left: 0; display: none; border-top: 1px solid var(--fh-border); padding-top: 10px; }
  .fh-nav.is-open { display: block; }
  .fh-nav__list { flex-direction: column; align-items: flex-start; gap: 2px; }
  .fh-nav__list a { padding: 10px 2px; width: 100%; font-size: 15px; }
  .fh-search { order: 4; max-width: none; flex-basis: 100%; }
  .fh-actions { order: 2; margin-left: 0; }
  .fh-callbtn { display: none; }
}
@media (max-width: 560px) {
  .fh-hd__inner { padding: 10px 14px; }
  .fh-hd__logo img { height: 34px; }
  .fh-search button span { display: none; }
  .fh-search button { padding: 10px 14px; }
}