/* ==========================================================================
   Ally Property Inspections — site header
   Rebuilt from the hand-written header in the ally-geo-fixes plugin.

   Three things are corrected on the way across, each deliberate:

   1. The old header set its own font to Montserrat. Montserrat is not a brand
      font, and the header is one of the reasons the site was loading it. It
      now uses the brand faces like everything else.

   2. The old header hard-coded #0D1C45 for nav text and #F8AC1B for hover,
      buttons and submenu borders. Both are legacy strays — the brand yellow is
      #F2A900, and #0D1C45 is in no palette. They are tokens now, so the palette
      decision reaches the header for free.

   3. Submenus opened on hover only, with href="#" on the parents. They now open
      on hover, click and keyboard, and the parents that have no page behind
      them are buttons rather than dead links.
   ========================================================================== */

:root {
  /* --c-nav-ink moved to ally-tokens.css. A colour declared in a component
     file is a colour that does not appear when somebody reads the palette,
     which is exactly how a palette drifts. */

  /* The header's own measurements, kept together so the width budget is
     visible rather than scattered through the rules below. */
  /* 12px each side, the same as the current site. This was briefly a clamp()
     that compressed the padding to buy room for an eighth nav item; measuring
     showed an eighth does not fit at 1280px regardless, so the complexity
     bought nothing and the value matches the live site again. */
  --nav-item-pad: 12px;
  /* The nav's own alias for the chrome scale, kept because several rules
     read it and one of them is a padding calculation that has to move with
     it. It is an alias now, not a second opinion about what 13px means. */
  --nav-font: var(--f-ui-sm);
  --header-h: 96px;
  --header-h-mobile: 60px;
  --nav-breakpoint: 1259px;   /* below this the nav collapses to the toggle */
}

.ally-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-rule);
  box-shadow: var(--shadow-header);
}

.ally-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 10px 28px;

  /* Full bleed, matching the current site: the logo anchors to the left edge of
     the viewport and the buttons to the right, at 28px in from each. Capping
     this at a content width centres the whole bar and leaves the logo floating
     in from the edge on anything wider than the cap - which is what it did, and
     it was not a decision, it was a default carried over from the page wrapper.
     A header is chrome, not content; it spans the window. */
  max-width: none;
}

/* ---------- logo ---------- */

.ally-header__logo { display: block; flex: 0 1 auto; min-width: 0; line-height: 0; }
.ally-header__logo img { height: 77px; width: auto; display: block; }

.ally-header__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--f-ui-lg);
  line-height: 1.15;
  color: var(--c-nav-ink);
  display: block;
  white-space: nowrap;
}

/* ---------- the nav ---------- */

.ally-header__nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }

.ally-nav {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  align-items: center;
}

.ally-nav__item { position: relative; margin: 0; }

/* Astra styles every <button> on the site - a grey fill and a border at rest,
   and its theme blue on hover. A nav parent with no page behind it is a real
   <button>, which is what makes it reachable by keyboard, so it inherits all of
   that and renders as a grey box that turns blue when you point at it.

   The reset has to cover hover and focus explicitly, not just the resting
   state: Astra's `button:hover` has higher specificity than a single class, so
   a rule that only sets `color` on hover loses the background to it. Every
   state is stated here for that reason. */
.ally-nav__link,
.ally-nav__disclosure,
.ally-header__toggle,
.ally-nav__link:hover, .ally-nav__link:focus, .ally-nav__link:active,
.ally-nav__disclosure:hover, .ally-nav__disclosure:focus, .ally-nav__disclosure:active,
.ally-header__toggle:hover, .ally-header__toggle:focus, .ally-header__toggle:active {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}

.ally-nav__link {
  display: block;
  font-family: var(--font-chrome);   /* Montserrat 800, as live (Meredith, 26 Oct 2026) */
  font-size: var(--nav-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--c-nav-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 26px var(--nav-item-pad);
  line-height: 1.2;
  cursor: pointer;
  transition: color .2s ease;
}

.ally-nav__link:hover,
.ally-nav__link:focus,
.ally-nav__item:hover > .ally-nav__link,
.ally-nav__item.is-open > .ally-nav__link { color: var(--c-yellow); }

.ally-nav__item.is-current > .ally-nav__link { color: var(--c-yellow); }

/* The caret. On an item that has its own page the caret sits on the separate
   disclosure button, so the link itself stays a plain link. */
.ally-nav__item--has-sub > .ally-nav__link--button::after,
.ally-nav__disclosure::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  vertical-align: middle;
}

.ally-nav__disclosure {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 6px 4px;
  color: var(--c-nav-ink);
  cursor: pointer;
  line-height: 0;
  appearance: none;
}
.ally-nav__item:hover > .ally-nav__disclosure,
.ally-nav__item.is-open > .ally-nav__disclosure { color: var(--c-yellow); }

/* An item with its own page needs room on the right for the caret button. */
.ally-nav__item--has-sub > .ally-nav__link:not(.ally-nav__link--button) {
  padding-right: calc(var(--nav-item-pad) + 12px);
}

/* ---------- submenus ---------- */

.ally-subnav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  max-width: none;
  background: var(--c-bg);
  border-top: 3px solid var(--c-yellow);
  border-radius: 0 0 4px 4px;
  box-shadow: var(--shadow-menu);
  z-index: 10000;
}

.ally-nav__item:hover > .ally-subnav,
.ally-nav__item.is-open > .ally-subnav,
.ally-nav__item:focus-within > .ally-subnav { display: block; }

.ally-subnav__item { margin: 0; }

.ally-subnav__link {
  display: block;
  font-family: var(--font-text);
  font-size: var(--f-ui-sm);
  font-weight: 600;
  color: var(--c-nav-ink);
  text-decoration: none;
  padding: 12px 24px;
  transition: color .2s ease, background-color .2s ease;
}
.ally-subnav__link:hover,
.ally-subnav__link:focus-visible { color: var(--c-yellow); background: var(--c-bg-soft); }

/* ---------- call-to-action buttons ---------- */

.ally-header__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  flex: 0 0 auto;
}

/* Two classes so this outranks the shared .ally-btn rule in ally-components.css,
   which loads after this file and was resizing the buttons to 17px text and
   12px/24px padding. */
.ally-header__ctas .ally-header__cta {
  font-family: var(--font-chrome);   /* as live: asks for 900, renders Montserrat 800 */
  font-size: var(--nav-font);
  font-weight: 900;
  text-transform: uppercase;
  padding: 8px 32px;
  white-space: nowrap;
  line-height: 1.2;
  border-radius: 6px;

  /* 40px, matching the current site. The two buttons stacked plus the wrapper
     padding are what set the header height, so this is also what makes the
     header 109px rather than 100px. */
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- the mobile toggle ---------- */

.ally-header__toggle {
  display: none;
  order: 99;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 6px;
  width: 44px;            /* a real 44px touch target, which the old one was not */
  height: 44px;
  color: var(--c-nav-ink);
}

.ally-header__toggle-bar,
.ally-header__toggle-bar::before,
.ally-header__toggle-bar::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.ally-header__toggle-bar { position: relative; margin-inline: auto; }
.ally-header__toggle-bar::before { content: ""; position: absolute; top: -7px; }
.ally-header__toggle-bar::after  { content: ""; position: absolute; top: 7px; }

.ally-header__toggle[aria-expanded="true"] .ally-header__toggle-bar { background: transparent; }
.ally-header__toggle[aria-expanded="true"] .ally-header__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.ally-header__toggle[aria-expanded="true"] .ally-header__toggle-bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- the floating Book Now tab ---------- */

.ally-book-now {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
  background: var(--c-yellow);
  color: var(--c-bg);
  font-family: var(--font-text);
  font-size: var(--f-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 8px 0 0 8px;
  box-shadow: var(--shadow-tab);
  transition: background-color .2s ease, padding .2s ease;
}
.ally-book-now:hover { background: var(--c-yellow-deep); color: var(--c-bg); padding-right: 32px; }

@media print { .ally-book-now, .ally-header { position: static; } }

/* ==========================================================================
   BELOW THE NAV BREAKPOINT

   The old header collapsed at 1,259px in CSS but its submenu toggle script
   checked 1,024px, so between those two widths the menu was open but tapping a
   parent did nothing useful. One breakpoint now, shared by the CSS and the
   script, which reads it from this variable.
   ========================================================================== */

@media (max-width: 1259px) {

  .ally-header__inner { height: var(--header-h-mobile); padding: 0 20px; }
  .ally-header__logo img { height: 40px; }

  /* The wordmark is a placeholder until a logo image is set, but it still has
     to fit. nowrap is right on a laptop and wrong on a phone: at 390px the
     single line pushes the buttons and the toggle off the screen. Here it
     wraps inside a narrow column instead. */
  .ally-header__wordmark {
    font-size: var(--f-ui);
    line-height: 1.15;
    white-space: normal;
    max-width: 10ch;
  }

  .ally-header__toggle { display: block; }

  .ally-header__ctas { flex-direction: row; margin-left: auto; margin-right: var(--s-2); gap: 6px; }
  .ally-header__ctas .ally-header__cta { font-size: var(--f-ui-2xs); padding: 6px 14px; }

  .ally-header__nav {
    display: none;
    position: absolute;
    top: var(--header-h-mobile);
    left: 0;
    right: 0;
    background: var(--c-bg);
    border-top: 3px solid var(--c-yellow);
    box-shadow: var(--shadow-menu);
    max-height: calc(100vh - var(--header-h-mobile));
    overflow-y: auto;
  }
  .ally-header__nav.is-open { display: block; }

  .ally-nav { flex-direction: column; align-items: stretch; padding: 10px 0; }

  /* The item must stay positioned. The submenu is static here so it does not
     need it, but the disclosure caret is absolutely positioned - make the item
     static and the caret escapes to the nav container, landing on the far right
     of an unrelated row. */
  .ally-nav__item { position: relative; }

  /* One nav row: 14px padding top and bottom, plus one 14px line at 1.2.
     The link and the caret both use it, so they stay aligned by construction. */
  .ally-header { --nav-row: 45px; }

  .ally-nav__link {
    padding: 14px 24px;
    font-size: var(--f-ui);
    width: 100%;
    text-align: left;
    min-height: var(--nav-row);
  }
  .ally-nav__item--has-sub > .ally-nav__link:not(.ally-nav__link--button) { padding-right: 60px; }

  /* Anchored to the top of the item, not its middle. An open item is as tall as
     its whole submenu, so a caret centred on the item drifts down the list. */
  .ally-nav__disclosure {
    right: 10px;
    top: 0;
    transform: none;
    height: var(--nav-row);
    display: flex;
    align-items: center;
    padding: 0 16px;
  }

  /* Hover must not open a submenu on a touch screen — only the disclosure does. */
  .ally-subnav {
    position: static;
    display: none;
    box-shadow: none;
    border-top: 0;
    border-radius: 0;
    background: var(--c-bg-soft);
    min-width: 0;
    padding: 0;
  }
  .ally-nav__item:hover > .ally-subnav,
  .ally-nav__item:focus-within > .ally-subnav { display: none; }
  .ally-nav__item.is-open > .ally-subnav { display: block; }

  .ally-subnav__link { padding: 12px 40px; }

  .ally-book-now { font-size: var(--f-ui-xs); padding: 16px 10px; }
}