/* Header chrome. Enqueued globally from inc/enqueue.php.
   Layout mirrors the old header-footer-elementor template: a brand-blue
   contact strip, then a white bar with the logo centred above a centred nav.

   There is no burger: the menu is three short items and the old header kept
   them inline at every width. Removing it also removes the only reason this
   theme would need JS in the header. */

/* --------------------------------------------------------------------------
   Contact strip
   -------------------------------------------------------------------------- */

.beechlynette-topbar {
  background: var(--beechlynette-brand);
  color: var(--beechlynette-text-invert);
  font-size: .95rem;
}

.beechlynette-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 28px;
  min-height: 46px;
  padding-block: 8px;
}

.beechlynette-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: inherit;
  text-decoration: none;
}
.beechlynette-topbar__item:hover { text-decoration: underline; }
.beechlynette-topbar .beechlynette-icon { flex: none; }

/* --------------------------------------------------------------------------
   Logo + nav bar
   -------------------------------------------------------------------------- */

.beechlynette-header {
  background: var(--beechlynette-bg);
  border-bottom: 1px solid var(--beechlynette-border);
}

.beechlynette-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-block: 12px;
}

.beechlynette-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
  color: var(--beechlynette-text-heading);
}
.beechlynette-header__logo img {
  width: auto;
  max-height: 76px;
}

.beechlynette-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.beechlynette-nav__list a {
  display: block;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--beechlynette-accent);
  transition: color .2s var(--beechlynette-ease), border-color .2s var(--beechlynette-ease);
}
.beechlynette-nav__list a:hover { color: var(--beechlynette-brand); }

/* The old nav underlined the current page. */
.beechlynette-nav__list .current-menu-item > a,
.beechlynette-nav__list .current_page_item > a,
.beechlynette-nav__list .current-menu-ancestor > a {
  border-bottom-color: var(--beechlynette-accent);
}

/* Second-level items: only three top-level pages today, but a client adding a
   child page must not blow the header apart. */
.beechlynette-nav__list li { position: relative; }
.beechlynette-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: none;
  min-width: 200px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--beechlynette-bg);
  border: 1px solid var(--beechlynette-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
}
.beechlynette-nav__list li:hover > .sub-menu,
.beechlynette-nav__list li:focus-within > .sub-menu { display: block; }
.beechlynette-nav__list .sub-menu a { padding: 8px 16px; border-bottom: 0; text-align: left; }

@media (max-width: 600px) {
  .beechlynette-topbar { font-size: .8rem; }
  .beechlynette-topbar__inner { justify-content: center; gap: 6px 16px; }
  .beechlynette-header__logo img { max-height: 58px; }
  .beechlynette-nav__list a { padding: 8px 10px; font-size: .95rem; }
}

/* the_custom_logo() supplies its own <a class="custom-logo-link">. */
.beechlynette-header__logo .custom-logo-link { display: block; }
.beechlynette-header__logo .custom-logo { max-height: 111px; width: auto; }
@media (max-width: 600px) {
  .beechlynette-header__logo .custom-logo { max-height: 78px; }
}