/* Test-only layout guardrails. Control styling remains sourced from the approved shared styles. */
body.navigation-page {
  /* Keep the testing geometry derived from the shared bottom-control size. */
  --test-control-diameter: var(--plaza-plus-size);
  --test-dot-size: 10px;
  --test-dot-gap: calc((var(--test-control-diameter) - (3 * var(--test-dot-size))) / 2);
  --test-top-control-offset: var(--page-inset-top);
  --test-sidebar-gap: var(--design-boundary-x);
  --test-pill-item-height: var(--test-control-diameter);
  --test-pill-padding: var(--active-highlight-inset);
  --test-option-height: 34px;
  /* The values below are the existing top-bar glass tokens, scoped locally
     so the test controls inherit the same theme behavior without changing
     the shared components. */
  --s-composer-surface: rgba(255, 255, 255, .16);
  --s-composer-stroke: var(--s-glass-stroke);
  --s-composer-shadow: 0 2px 7px rgba(0, 0, 0, .045), 0 1px 1px rgba(0, 0, 0, .025);
  --s-composer-backdrop: blur(20px) saturate(125%);
}

body.navigation-page .plaza-navigation-fallback {
  position: fixed;
  inset-block-start: var(--page-inset-top);
  inset-inline-start: var(--page-inset-left);
  z-index: 1000;
  min-block-size: var(--test-control-diameter, 44px);
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 999px;
  background: var(--plaza-glass-background, rgba(255, 255, 255, .88));
  color: inherit;
  font: inherit;
  cursor: pointer;
}

body.navigation-page .plaza-navigation-fallback:disabled {
  cursor: progress;
  opacity: .7;
}

html.s-route.is-day-mode body.s-page.s-page--plaza.navigation-page {
  --s-composer-surface: rgba(224, 224, 236, .42);
  --s-composer-shadow: 0 2px 6px rgba(0, 0, 0, .022), 0 1px 1px rgba(0, 0, 0, .012);
}

body.test-page .plaza-page-shell {
  min-height: 100dvh;
}

body.test-page .plaza-main {
  min-height: 100dvh;
  pointer-events: none;
}

body.test-page .plaza-main__inner {
  min-height: calc(100dvh - 72px);
}

body.navigation-page .s-page__top-bar-reveal,
body.navigation-page .plaza-nav-panel,
body.navigation-page .plaza-main__hero-plus {
  pointer-events: auto;
}

/* Keep the full-width hit area and move only the visible control to the
   viewport's exact center axis, independent of asymmetric safe-area insets. */
body.s-page.s-page--plaza.navigation-page .s-page__top-bar-reveal {
  top: var(--test-top-control-offset);
}

body.s-page.s-page--plaza.navigation-page .s-page__top-bar-dots {
  position: absolute;
  left: 50%;
  gap: var(--test-dot-gap);
  transform: translateX(-50%);
}

body.s-page.s-page--plaza.navigation-page .s-page__top-bar-dots i {
  width: var(--test-dot-size);
  height: var(--test-dot-size);
  flex-basis: var(--test-dot-size);
  border: 0;
  background: var(--s-composer-surface);
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: var(--s-composer-backdrop);
  backdrop-filter: var(--s-composer-backdrop);
}

body.s-page.s-page--plaza.navigation-page .plaza-main__hero-plus {
  width: var(--test-control-diameter);
  height: var(--test-control-diameter);
  border: 0;
  background: var(--s-composer-surface);
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: var(--s-composer-backdrop);
  backdrop-filter: var(--s-composer-backdrop);
}

body.navigation-page .test-landscape-glass-pill {
  display: none;
  pointer-events: none;
}

body.navigation-page .test-landscape-option-panel {
  display: none;
  pointer-events: none;
}

body.s-page.s-page--plaza.navigation-page .s-page__top-bar-dots i:is(:hover, :active),
body.s-page.s-page--plaza.navigation-page .plaza-main__hero-plus:is(:hover, :active),
body.s-page.s-page--plaza.navigation-page .plaza-main__hero-plus::before,
body.s-page.s-page--plaza.navigation-page .plaza-main__hero-plus::after {
  border: 0;
  box-shadow: none;
  filter: none;
}

/* Keep keyboard focus visible while removing only decorative outlines. */
body.s-page.s-page--plaza.navigation-page .s-page__top-bar-reveal:not(:focus-visible),
body.s-page.s-page--plaza.navigation-page .plaza-main__hero-plus:not(:focus-visible) {
  outline: 0;
}

/* Test behavior keeps the approved sidebar content and layout, while making
   its position and state changes immediate. The top and left values are
   supplied by test.js from the dots' live bounding rectangle. */
body.s-page.s-page--plaza.navigation-page .plaza-nav-panel {
  top: calc(var(--test-dots-bottom, var(--page-inset-top)) + var(--test-sidebar-gap));
  max-height: calc(100dvh - var(--test-dots-bottom, var(--page-inset-top)) - var(--test-sidebar-gap) - var(--safe-area-bottom) - var(--design-boundary-x));
}

@media (orientation: portrait) {
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel {
    filter: blur(8px);
    transform: translateY(-12px) scale(1);
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, visibility 0s linear 180ms;
  }

  body.s-page.s-page--plaza.navigation-page.is-nav-open .plaza-nav-panel {
    filter: blur(0);
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }
}

@media (orientation: landscape) {
  /* Keep the approved landscape side-control composition; the sidebar is
     intentionally unavailable in this orientation. */
  body.s-page.s-page--plaza.navigation-page .s-page__top-bar-reveal {
    top: 50%;
    right: auto;
    bottom: auto;
    left: var(--page-inset-left);
    width: var(--test-control-diameter);
    height: var(--test-control-diameter);
    min-height: var(--test-control-diameter);
    transform: translateY(-50%);
  }

  body.s-page.s-page--plaza.navigation-page .s-page__top-bar-dots {
    top: 0;
    left: 0;
    width: var(--test-dot-size);
    height: var(--test-control-diameter);
    flex-direction: column;
    gap: var(--test-dot-gap);
    transform: none;
  }

  body.s-page.s-page--plaza.navigation-page .plaza-main__hero-plus {
    top: 50%;
    right: var(--page-inset-right);
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
  }

  /* Reuse the homepage's measured control-to-card bounds for every
     production page container. The inline edges are the outer boundary;
     internal card grids and their gaps remain page-owned. */
  body.s-page.s-page--plaza.navigation-page:not(.homepage-page):not(.test-page) [data-landscape-card-container] {
    padding-inline-start: var(--plaza-landscape-inline-start, calc(var(--page-inset-right) + var(--plaza-plus-size) + var(--design-boundary-x))) !important;
    padding-inline-end: var(--plaza-landscape-inline-end, calc(var(--page-inset-right) + var(--plaza-plus-size) + var(--design-boundary-x))) !important;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-glass-pill {
    display: block;
    position: fixed;
    z-index: 3;
    top: calc(var(--test-sidebar-gap) + var(--safe-area-top));
    /* The closed trigger and its dots share this exact viewport origin.
       Reusing it keeps the opening pill aligned with the dots' original
       left boundary instead of introducing a second horizontal offset. */
    left: var(--page-inset-left);
    width: var(--test-control-diameter);
    height: calc(100dvh - (2 * var(--test-sidebar-gap)) - var(--safe-area-top) - var(--safe-area-bottom));
    min-height: 0;
    border: 0;
    border-radius: 999px;
    background: var(--s-composer-surface);
    box-shadow: none;
    -webkit-backdrop-filter: var(--s-composer-backdrop);
    backdrop-filter: var(--s-composer-backdrop);
    box-sizing: border-box;
    padding: var(--test-pill-padding);
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    filter: blur(8px);
    transform: translateX(-12px);
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, visibility 0s linear 180ms;
  }

  body.s-page.s-page--plaza.navigation-page.test-landscape-open .test-landscape-glass-pill {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    filter: blur(0);
    transform: translateX(0);
    transition-delay: 0s;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-glass-pill::-webkit-scrollbar {
    display: none;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-pill-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--plaza-nav-item-gap, 12px);
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    justify-content: space-between;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-pill-item {
    flex: 0 0 var(--test-pill-item-height);
    width: 100%;
    height: var(--test-pill-item-height);
    min-height: var(--test-pill-item-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
    border: 0;
    border-radius: calc(var(--s-composer-radius) * .72);
    background: transparent;
    color: var(--plaza-ink);
    cursor: pointer;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-pill-item:is(:hover, :focus-visible, .is-active) {
    background: color-mix(in srgb, var(--plaza-ink) 12%, transparent);
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-pill-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--plaza-ink) 50%, transparent);
    outline-offset: -2px;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-pill-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
  }

  html.s-route.is-day-mode body.s-page.s-page--plaza.navigation-page .test-landscape-pill-icon {
    filter: brightness(0);
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-option-panel {
    display: block;
    pointer-events: none;
    position: fixed;
    z-index: 3;
    top: var(--test-landscape-pill-center-y, 50%);
    bottom: auto;
    /* Keep the panel attached to the pill using the existing pill-width plus
       sidebar-gap relationship after the pill moves to the dots' origin. */
    left: calc(var(--page-inset-left) + var(--test-control-diameter) + var(--test-sidebar-gap));
    right: calc(50vw - (100vw - 100%));
    width: auto;
    height: fit-content;
    min-height: 0;
    max-width: none;
    max-height: calc(100dvh - (2 * var(--test-sidebar-gap)) - var(--safe-area-top) - var(--safe-area-bottom));
    box-sizing: border-box;
    padding: var(--test-pill-padding);
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateY(-50%) translateX(-12px);
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    border: 0;
    border-radius: calc(var(--test-control-diameter) / 2);
    background: var(--s-composer-surface);
    box-shadow: none;
    -webkit-backdrop-filter: var(--s-composer-backdrop);
    backdrop-filter: var(--s-composer-backdrop);
    opacity: 0;
    visibility: hidden;
    filter: blur(8px);
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, visibility 0s linear 180ms;
  }

  body.s-page.s-page--plaza.navigation-page.test-landscape-open .s-page__top-bar-dots {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.s-page.s-page--plaza.navigation-page.test-landscape-open .test-landscape-option-panel:not(.is-empty) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    filter: blur(0);
    transform: translateY(-50%) translateX(0);
    transition-delay: 90ms, 90ms, 90ms, 0s;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-option-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--plaza-nav-item-gap, 12px);
    min-height: max-content;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-option-item {
    flex: 0 0 var(--test-option-height);
    width: 100%;
    min-width: 100%;
    height: var(--test-option-height);
    min-height: var(--test-option-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-inline-start: 12px;
    padding-inline-end: 10px;
    border: 0;
    border-radius: calc(var(--s-composer-radius) * .72);
    background: transparent;
    color: var(--plaza-ink);
    font: 400 clamp(11px, 1.5vw, 13.5px)/1 var(--font-arabic);
    white-space: nowrap;
    cursor: pointer;
  }

  html[lang="en"] body.s-page.s-page--plaza.navigation-page .test-landscape-option-item {
    font-family: var(--font-english);
  }

  html[dir="rtl"] body.s-page.s-page--plaza.navigation-page .test-landscape-option-item {
    direction: rtl;
    text-align: right;
  }

  html[dir="ltr"] body.s-page.s-page--plaza.navigation-page .test-landscape-option-item {
    direction: ltr;
    text-align: left;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-option-item:is(:hover, :focus-visible, .is-active) {
    background: color-mix(in srgb, var(--plaza-ink) 12%, transparent);
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-option-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--plaza-ink) 50%, transparent);
    outline-offset: -2px;
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-option-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
  }

  html.s-route.is-day-mode body.s-page.s-page--plaza.navigation-page .test-landscape-option-icon {
    filter: brightness(0);
  }

  body.s-page.s-page--plaza.navigation-page .test-landscape-option-label {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  /* Landscape keeps the approved dots visible but has no sidebar. */
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel {
    display: none !important;
    pointer-events: none !important;
  }

}

body.test-page .test-disabled-link {
  cursor: default;
}

@media (orientation: portrait) {
  /* The landscape wrappers are transparent in portrait so the approved
     single-column sequence remains unchanged after an orientation switch. */
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .test-landscape-primary-column {
    display: contents;
  }

  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel > .test-landscape-primary-column > * {
    grid-column: 1;
  }

  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-home { grid-row: 1; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-vision { grid-row: 2; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-directory { grid-row: 3; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-professionals { grid-row: 4; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-community { grid-row: 5; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-media { grid-row: 6; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-commerce { grid-row: 7; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .plaza-nav-contact-group { grid-row: 8; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-language { grid-row: 9; }
  body.s-page.s-page--plaza.navigation-page .plaza-nav-panel .homepage-nav-appearance { grid-row: 10; }
}