/*
 * Everything Dancing native app shell contract.
 *
 * The packaged iOS app should open the site with ?ed_app=ios once. The head
 * script then persists the iOS shell and adds:
 * html.ed-app-shell.ed-app-shell--ios.ed-ios-app-shell.ed-native-app-shell
 *
 * Android support can use ?ed_app=android later without changing page CSS.
 */

:root {
  --ed-app-shell-top-safe: env(safe-area-inset-top, 0px);
  --ed-app-shell-bottom-safe: env(safe-area-inset-bottom, 0px);
  --ed-app-shell-native-top: 0px;
  --ed-app-shell-keyboard-space: 0px;
  --ed-app-shell-content-bottom: var(--section-spacing, 36px);
  --ed-app-shell-control-bottom: var(--ed-app-fixed-bottom, 12px);
  --ed-app-shell-radius: var(--ed-radius-lg, 20px);
  --ed-app-shell-radius-compact: var(--ed-radius-md, 14px);
  --ed-app-shell-transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ed-app-shell-transition-page: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.ed-app-shell {
  --admin-bar-height: 0px;
  --header-height: 0px;
  --ed-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --ed-app-shell-content-bottom: calc(var(--ed-app-bottom-space, 0px) + var(--ed-app-shell-keyboard-space, 0px) + 24px);
  --ed-app-shell-control-bottom: calc(var(--ed-app-bottom-space, 0px) + var(--ed-app-shell-keyboard-space, 0px) + 12px);
  background: var(--ed-color-body-bg);
  scrollbar-gutter: stable;
}

html.ed-app-shell--ios {
  --ed-app-shell-radius: 18px;
  --ed-app-shell-radius-compact: 13px;
}

html.ed-app-shell--android {
  --ed-app-shell-radius: 16px;
  --ed-app-shell-radius-compact: 12px;
}

html.ed-app-shell,
html.ed-app-shell body {
  min-height: 100dvh;
}

html.ed-app-shell body {
  background: var(--ed-color-body-bg);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

html.ed-app-shell body.admin-bar {
  --admin-bar-height: 0px;
}

html.ed-app-shell body.site-scroll-lock {
  width: 100%;
  padding-right: 0 !important;
}

html.ed-app-shell #wpadminbar,
html.ed-app-shell .site-header,
html.ed-app-shell .site-drawer,
html.ed-app-shell .site-overlay,
html.ed-app-shell :where(.site-footer, #colophon, footer[role="contentinfo"]) {
  display: none !important;
}

html.ed-app-shell .site-main {
  min-height: 100dvh;
  padding-top: var(--ed-app-shell-native-top) !important;
  padding-bottom: var(--ed-app-shell-content-bottom) !important;
  transition:
    opacity var(--ed-app-shell-transition-page),
    transform var(--ed-app-shell-transition-page),
    filter var(--ed-app-shell-transition-page);
}

html.ed-app-shell .site-content {
  padding-top: 0;
}

html.ed-app-shell :where(.entry-header, .page-footer, .post-navigation) {
  display: none !important;
}

html.ed-app-shell.ed-app-shell-is-navigating .site-main {
  opacity: 0.72;
  transform: translateY(4px);
  filter: saturate(0.96);
  pointer-events: none;
}

html.ed-app-shell :where(a, button, input, textarea, select, summary, [role="button"]) {
  -webkit-tap-highlight-color: rgba(var(--ed-color-primary-rgb, 117, 36, 219), 0.14);
}

html.ed-app-shell :where(button, [role="button"], input, textarea, select) {
  min-height: 44px;
  touch-action: manipulation;
}

html.ed-app-shell :where(.site-account__panel, .site-drawer, .site-overlay) {
  transition-duration: var(--ed-app-shell-transition);
}

html.ed-app-shell :is(
  .edm-profile-tabs,
  .edm-user-profile__nav,
  .edm-account-settings-page__nav,
  .w2d-nav,
  .ed-professional-profile__control
) {
  position: static !important;
  top: auto !important;
}

@media (max-width: 760px) {
  html.ed-app-shell .site-main {
    padding-bottom: var(--ed-app-shell-content-bottom) !important;
  }

  html.ed-app-shell :is(
    .edm-profile,
    .edm-user-profile,
    .edm-account-settings,
    .edm-directory,
    .edm-messages,
    .edm-auth,
    .edm-friends,
    .edm-notifications,
    .edm-local,
    .w2d-business-signup,
    .w2d-dance-style-hub,
    .w2d-public-event,
    .w2d-event-wrap,
    .w2d-provider-dashboard,
    .w2d-providers-dashboard,
    .w2d-organisation-dashboard,
    .w2d-organisation-invites,
    .w2d-provider-profile,
    .w2d-org-profile-wrap,
    .w2d-profp-wrap,
    .ed-professional-editor,
    .ed-professional-profile
  ) {
    padding-bottom: var(--ed-app-shell-content-bottom) !important;
  }

  html.ed-app-shell :is(
    .site-account__panel,
    .site-drawer,
    .site-overlay
  ) {
    bottom: calc(var(--ed-app-bottom-space, 0px) + var(--ed-app-shell-keyboard-space, 0px)) !important;
  }

  html.ed-app-shell :is(
    .edm-profile-tabs,
    .edm-user-profile__nav,
    .edm-account-settings-page__nav,
    .w2d-nav,
    .ed-professional-profile__control
  ) {
    scroll-padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ed-app-shell .site-main,
  html.ed-app-shell :where(.site-account__panel, .site-drawer, .site-overlay) {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  html.ed-app-shell.ed-app-shell-is-navigating .site-main {
    opacity: 1;
    transform: none;
    filter: none;
  }
}