/*
 * Shared landing pieces, loaded only on the Estate Planning and Probate
 * landing templates (see lib/landing-shared.php).
 *
 * The estate planning / probate switch: a two-option pill group in the
 * site header. Desktop shows it in the header bar (between the logo and
 * the phone button); phones show the same group at the top of the menu
 * overlay. Current page = aria-current="page", dark pill with white text,
 * so the state is not shown by colour alone.
 */

.landing-switch {
  align-items: center;
  background-color: #EEF1EC;
  border-radius: 999px;
  display: inline-flex;
  padding: 4px;
}

.landing-switch .landing-switch__item {
  align-items: center;
  border-radius: 999px;
  color: #1C2A39;
  display: inline-flex;
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
  white-space: nowrap;
}

.landing-switch .landing-switch__item:hover {
  background-color: rgba(28, 42, 57, 0.08);
  color: #1C2A39;
}

.landing-switch .landing-switch__item[aria-current="page"],
.landing-switch .landing-switch__item[aria-current="page"]:hover {
  background-color: #1C2A39;
  color: #FFFFFF;
}

.landing-switch .landing-switch__item:focus-visible {
  outline: 3px solid #E9A820;
  outline-offset: 2px;
}

/* Desktop: header bar. Phones: menu overlay only. */
.landing-switch--bar {
  display: none;
  margin-left: auto;
  margin-right: 12px;
}

/* The phone button list follows the switch, so it does not take the
   free space as well (the header's own ml-auto would split it). */
.landing-switch--bar + ul.ml-auto {
  margin-left: 0;
}

.landing-switch--menu {
  display: inline-flex;
  margin: 0 auto 24px;
}

@media (min-width: 1024px) {
  .landing-switch--bar {
    display: inline-flex;
  }

  .landing-switch--menu {
    display: none;
  }
}