/* ==========================================================================
   TYRONEHARRISON - OVERLAY HEADER

   The header is transparent and sits on top of the page rather than above it,
   so the hero image behind it runs to the very top of the window. Two things
   make that work without content ever hiding under the bar:

     1. The shell is fixed at the top of the viewport with nothing in the
        normal flow, so it takes up no vertical space.
     2. Every hero reserves --th-header-stack of padding at its top. The
        front page hero does this in home.css, every other page does it in
        pages.css via template-parts/page-hero.php.

   Because the bar sits over dark hero imagery, its text is white. Once the
   page scrolls past the hero the bar turns solid charcoal so the same white
   text keeps its contrast, and the utility bar collapses to give the content
   more room.
   ========================================================================== */

.th-header-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background-color var(--transition), box-shadow var(--transition);
}

/* Clear the WordPress admin bar when it is showing. */
body.admin-bar .th-header-shell {
  top: 32px;
}

/* --------------------------------------------------------------------------
   Utility bar
   -------------------------------------------------------------------------- */
.th-topbar {
  height: var(--th-topbar-h);
  background-color: #000;
  overflow: hidden;
  transition: height var(--transition), opacity var(--transition);
}

.th-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.75rem;
  height: var(--th-topbar-h);
  font-size: 0.8125rem;
}

.th-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.th-topbar-item span {
  color: var(--color-text-light);
}

.th-topbar-item:hover,
.th-topbar-item:hover span {
  color: var(--color-primary);
}

/* Collapsed once scrolled: the fixed stack shrinks to just the main bar. */
.th-header-shell.is-scrolled .th-topbar {
  height: 0;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Main bar
   -------------------------------------------------------------------------- */
.th-header {
  transition: background-color var(--transition), box-shadow var(--transition);
}

.th-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--th-bar-h);
  transition: height var(--transition);
}

/* Solid state. Charcoal keeps the white logo and white nav readable without
   swapping either asset out. */
.th-header-shell.is-scrolled .th-header,
.th-header-shell.is-open .th-header {
  background-color: var(--color-bg-dark);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.th-header-shell.is-scrolled .th-header-inner {
  height: 74px;
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */
.th-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.th-logo-link,
.th-brand .custom-logo-link {
  display: block;
  line-height: 0;
}

.th-logo,
.th-brand .custom-logo {
  height: 52px;
  width: auto;
  max-width: none;
  transition: height var(--transition);
}

.th-header-shell.is-scrolled .th-logo,
.th-header-shell.is-scrolled .th-brand .custom-logo {
  height: 44px;
}

/* --------------------------------------------------------------------------
   Desktop navigation

   The nav takes the space between the logo and the button and centres its
   items inside it, which is what puts the menu near the middle of the bar.
   -------------------------------------------------------------------------- */
.th-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.th-nav-menu {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.th-nav-menu li {
  position: relative;
}

.th-nav-menu > li > a {
  display: block;
  padding: 0.4rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-light);
  white-space: nowrap;
}

.th-nav-menu > li > a:hover {
  color: var(--color-primary);
}

/* Current page marker: a short orange rule under the item. */
.th-nav-menu > li.current-menu-item > a,
.th-nav-menu > li.current_page_item > a,
.th-nav-menu > li.current-menu-ancestor > a,
.th-nav-menu > li.current-menu-parent > a {
  color: var(--color-primary);
}

.th-nav-menu > li.current-menu-item > a::after,
.th-nav-menu > li.current_page_item > a::after,
.th-nav-menu > li.current-menu-ancestor > a::after,
.th-nav-menu > li.current-menu-parent > a::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.3rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* --- Dropdowns (one level deep, as registered by depth => 2) --- */
.th-nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  min-width: 220px;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background-color: var(--color-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);

  /* Laid out but hidden, so the panel can fade rather than pop. */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.th-nav-menu li:hover > .sub-menu,
.th-nav-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.th-nav-menu .sub-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-sm);
}

.th-nav-menu .sub-menu a:hover {
  color: var(--color-text-light);
  background-color: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */
.th-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Charcoal pill against the hero photograph. */
.th-header-cta {
  padding: 1rem 2.25rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-light);
  background-color: rgba(29, 29, 31, 0.92);
  border-color: rgba(29, 29, 31, 0.92);
}

.th-header-cta:hover {
  color: var(--color-text-light);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* On the solid charcoal bar a charcoal button would disappear, so it takes
   the brand orange instead. */
.th-header-shell.is-scrolled .th-header-cta {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.th-header-shell.is-scrolled .th-header-cta:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* --------------------------------------------------------------------------
   Mobile toggle

   Three bars from one element: the middle is the element itself, the outer
   two are its pseudo-elements. On open they rotate into a cross.
   -------------------------------------------------------------------------- */
/*
 * No border box around it: the supplied icon is already drawn as two outlined
 * panels, so a frame around that reads as a box inside a box.
 */
.th-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  flex: 0 0 auto;
  padding: 0;
  background-color: transparent;
  border: 0;
}

.th-nav-toggle-icon,
.th-nav-toggle-close {
  width: 32px;
  height: 32px;
  transition: opacity var(--transition), transform var(--transition);
}

.th-nav-toggle:hover .th-nav-toggle-icon,
.th-nav-toggle:hover .th-nav-toggle-close {
  transform: scale(1.06);
}

/* Only one of the two shows at a time, keyed off the button's ARIA state so
   the visual and the announced state can never disagree. */
.th-nav-toggle-close {
  display: none;
}

.th-nav-toggle[aria-expanded="true"] .th-nav-toggle-icon {
  display: none;
}

.th-nav-toggle[aria-expanded="true"] .th-nav-toggle-close {
  display: block;
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.th-mobile-nav {
  background-color: var(--color-bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  max-height: calc(100vh - var(--th-header-stack));
  overflow-y: auto;
}

/* The script removes [hidden] to open the drawer. */
.th-mobile-nav[hidden] {
  display: none;
}

.th-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.th-mobile-menu li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.th-mobile-menu a {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-text-light);
}

.th-mobile-menu a:hover,
.th-mobile-menu .current-menu-item > a {
  color: var(--color-primary);
}

/* Second-level items sit indented under their parent. */
.th-mobile-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 1rem;
}

.th-mobile-menu .sub-menu a {
  padding: 0.6rem 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
}

.th-mobile-foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 0 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.th-mobile-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
}

.th-mobile-contact svg {
  width: 16px;
  height: 16px;
  fill: var(--color-primary);
  flex-shrink: 0;
}

.th-mobile-contact:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* Tighten the gaps before anything is dropped. */
@media (max-width: 1180px) {
  .th-nav-menu {
    gap: 1.75rem;
  }

  .th-header-cta {
    padding: 0.85rem 1.6rem;
  }
}

@media (max-width: 980px) {
  :root {
    /* The bar gets shorter, so heroes reserve less room for it. */
    --th-bar-h: 76px;
  }

  .th-nav,
  .th-header-actions {
    display: none;
  }

  .th-nav-toggle {
    display: inline-flex;
  }

  .th-logo,
  .th-brand .custom-logo {
    height: 44px;
  }

  .th-header-shell.is-scrolled .th-header-inner {
    height: 68px;
  }
}

@media (max-width: 782px) {
  body.admin-bar .th-header-shell {
    /* The admin bar is taller and stops being fixed at this width. */
    top: 46px;
  }
}

@media (max-width: 600px) {
  :root {
    --th-topbar-h: 36px;
    --th-bar-h: 68px;
  }

  .th-topbar-inner {
    gap: 1rem;
    font-size: 0.75rem;
  }

  /* Only the address itself is kept; the "Email:" label is dropped for room. */
  .th-topbar-item {
    gap: 0.25rem;
  }

  .th-logo,
  .th-brand .custom-logo {
    height: 38px;
  }
}