/*
 * Ideal Spaces UI Clean v1.0.11.40
 *
 * PART A - desktop header end caps (was v1.0.11.38, now correctly scoped)
 * PART B - mobile menu contrast on the bone-white surface
 *
 * Every rule here is colour only. No dimensions, spacing, positioning,
 * typography, structure or behaviour is changed anywhere.
 *
 * A NOTE ON SPECIFICITY
 * ---------------------
 * modern-ui.css declares the original dark palette with very deep selectors,
 * all !important. When two declarations are both !important, specificity
 * decides, not load order. That is why every earlier palette stylesheet in
 * this plugin silently lost. The measured targets are:
 *
 *   .mainHeaderMenu background         0,4,1
 *   mobile top-level menu link         0,5,3
 *   mobile submenu panel link          0,10,4
 *
 * Part B therefore repeats .mainMenu in the selector chain to raise the class
 * count above 10. It is a deliberate specificity technique, not a typo.
 */

:root {
  --is40-bone-white: #f6f1ed;
  --is40-navy: #26314a;
  --is40-navy-strong: #111820;
  --is40-hairline: rgba(38, 49, 74, 0.14);
  --is40-tint: rgba(38, 49, 74, 0.07);
  --is40-navy-filter: brightness(0) saturate(100%) invert(14%) sepia(42%)
    saturate(1192%) hue-rotate(184deg) brightness(65%) contrast(77%);
  /* Readable stand-in for the old pale pink on a bone-white surface. */
  --is40-de-link: #9c4664;
}

/* ============================================================
   PART A - DESKTOP ONLY
   modern-ui.css line ~821 paints .mainHeaderMenu with
   rgba(5, 14, 25, .34) inside @media (min-width: 1200px). That layer sits
   over the bone-white header, is full width, and has padding 0 22px, so its
   opaque inner nav leaves a 22px strip of tinted bone white on each side:
     246*.66 +  5*.34 = 164
     241*.66 + 14*.34 = 164
     237*.66 + 25*.34 = 165   ->  exactly the #a3a4a5 seen on screen.
   The header geometry was never wrong. This media query must match the
   original one, otherwise the same rule paints an empty 70px bone-white
   band under the mobile logo row.
   ============================================================ */
@media only screen and (min-width: 1200px) {
  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu,
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu,
  html body.is-modern-ui-test .site-header .mainHeaderMenu,
  html body.isclean-loss-page .site-header .mainHeader .mainHeaderMenu,
  html body.isclean-loss-page header.mainHeader .mainHeaderMenu,
  html body.isclean-loss-page .site-header .mainHeaderMenu {
    background: var(--is40-bone-white) !important;
    background-color: var(--is40-bone-white) !important;
    background-image: none !important;
    border-top-color: var(--is40-bone-white) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu > nav,
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu > nav,
  html body.isclean-loss-page .site-header .mainHeader .mainHeaderMenu > nav,
  html body.isclean-loss-page header.mainHeader .mainHeaderMenu > nav {
    background: var(--is40-bone-white) !important;
    background-color: var(--is40-bone-white) !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* v37 added an outer shadow to a header that is already full width, so it
   * only ever painted off-screen. Remove it. */
  html body.is-modern-ui-test #masthead.site-header,
  html body.is-modern-ui-test .site-header > header.mainHeader,
  html body.isclean-loss-page #masthead.site-header,
  html body.isclean-loss-page .site-header > header.mainHeader {
    box-shadow: none !important;
  }
}

/* ============================================================
   PART B - MOBILE AND TABLET ONLY
   The mobile navigation in modern-ui.css was written for a near-black panel:
   links rgba(255,255,255,.80/.82/.84/.92), hairlines rgba(255,255,255,.085),
   arrows inverted to white. bonewhite-nav.css later repainted the panel
   surface bone white but could not reach those colour rules, so the text
   ended up white on bone white. Measured on the live page:
     text rgb(253,253,252) on rgb(246,241,237)  ->  contrast 1.03:1
   ============================================================ */
@media only screen and (max-width: 1199px) {

  /* ----------------------------------------------------------
   * The empty menu row under the mobile logo row.
   *
   * modern-ui.css line ~1797 gives .mainHeaderMenu::before
   * height: 70px with a transparent background. On mobile nothing
   * else sets a height on .mainHeaderMenu, so that pseudo-element
   * IS the row's height. The theme left it invisible; bonewhite-nav.css
   * line 97, final-sale-palette.css line 255/360 and
   * palette-surgical-fix.css line 106 then painted .mainHeaderMenu
   * bone white, which turned 70px of nothing into a solid block.
   * Measured: 70px logo row + 70px here = 139.3px of header.
   *
   * .mainMenu is position: fixed; top: 70px on mobile, so the open
   * menu panel is completely independent of this row. Collapsing it
   * cannot affect the panel.
   *
   * Height is removed on the pseudo-element only. The row's own top
   * edge does not move, so anything positioned against it stays put.
   * ---------------------------------------------------------- */
  html body.is-modern-ui-test .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu::before,
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu::before,
  html body.isclean-loss-page .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu::before,
  html body.isclean-loss-page .site-header .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  html body.is-modern-ui-test .site-header .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu,
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu,
  html body.is-modern-ui-test .site-header .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu > nav,
  html body.is-modern-ui-test .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu::after,
  html body.isclean-loss-page .site-header .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu,
  html body.isclean-loss-page header.mainHeader .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu,
  html body.isclean-loss-page .site-header .mainHeaderMenu.mainHeaderMenu.mainHeaderMenu.mainHeaderMenu > nav {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Every anchor in the mobile menu, at any depth, plus inner spans. */
  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a,
  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a *,
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a,
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a * {
    color: var(--is40-navy) !important;
    -webkit-text-fill-color: var(--is40-navy) !important;
    text-shadow: none !important;
  }

  /* Pressed and current states stay clearly darker, no white. */
  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a:hover,
  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a:focus,
  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu li.current-menu-item > a,
  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu li.current-menu-ancestor > a,
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a:hover,
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a:focus {
    color: var(--is40-navy-strong) !important;
    -webkit-text-fill-color: var(--is40-navy-strong) !important;
  }

  /* The external German site keeps its own accent, readable on bone white. */
  html body.is-modern-ui-test .site-header .mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a[href*="idealspaces.org"],
  html body.is-modern-ui-test header.mainHeader .mainHeaderMenu
    .mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu.mainMenu a[href*="idealspaces.org"] {
    color: var(--is40-de-link) !important;
    -webkit-text-fill-color: var(--is40-de-link) !important;
  }

  /* Row hairlines were white at 8.5 percent, invisible on bone white. */
  html body.is-modern-ui-test .mainHeaderMenu .mainMenu.mainMenu.mainMenu > li,
  html body.is-modern-ui-test .mainHeaderMenu .mainMenu.mainMenu.mainMenu ul.ismui-active-mobile-panel > li {
    border-bottom-color: var(--is40-hairline) !important;
    border-top-color: var(--is40-hairline) !important;
  }

  /* Section label: keep its blue, fix the two rules under it. */
  html body.is-modern-ui-test .mainMenu.mainMenu.mainMenu ul.ismui-active-mobile-panel > li.ismui-mobile-section-label {
    border-bottom-color: var(--is40-hairline) !important;
  }

  html body.is-modern-ui-test .mainMenu.mainMenu.mainMenu ul.ismui-active-mobile-panel > li.ismui-mobile-section-label::after {
    background: var(--is40-navy) !important;
    background-color: var(--is40-navy) !important;
  }

  /* Back breadcrumb and its arrow glyph. */
  html body.is-modern-ui-test .mainMenu.mainMenu.mainMenu ul.ismui-active-mobile-panel > li.ismui-mobile-breadcrumb,
  html body.is-modern-ui-test .mainMenu.mainMenu.mainMenu ul.ismui-active-mobile-panel > li.ismui-mobile-breadcrumb::before {
    color: var(--is40-navy) !important;
    -webkit-text-fill-color: var(--is40-navy) !important;
  }

  /* Row arrows were inverted to white; use the same navy filter as the logo. */
  html body.is-modern-ui-test .mainMenu.mainMenu.mainMenu li a .arrow::before,
  html body.is-modern-ui-test .mainMenu.mainMenu.mainMenu li > ul li.arrowBack::before {
    filter: var(--is40-navy-filter) !important;
    -webkit-filter: var(--is40-navy-filter) !important;
  }

  html body.is-modern-ui-test .mainMenu.mainMenu.mainMenu li a .arrow svg,
  html body.is-modern-ui-test .mainMenu.mainMenu.mainMenu li a .arrow svg * {
    fill: var(--is40-navy) !important;
    stroke: var(--is40-navy) !important;
    color: var(--is40-navy) !important;
  }

  /* Any leftover white inset marker on the active row becomes a navy tint. */
  html body.is-modern-ui-test .mainHeaderMenu .mainMenu.mainMenu.mainMenu > li > a:hover,
  html body.is-modern-ui-test .mainHeaderMenu .mainMenu.mainMenu.mainMenu > li.current-menu-item > a {
    box-shadow: inset 2px 0 0 var(--is40-navy) !important;
    background: var(--is40-tint) !important;
    background-color: var(--is40-tint) !important;
  }
}