/* ==========================================================================
   GLOBAL: Root declarations
   lib/platform-only/css/shared.css is for styling that plugins would never want/need
   (otherwise, use lib/global/css/global.css)
   ========================================================================== */
/* #region root declarations and defaults */

:root {
  --beag-hero-logo-size: min(8vw, 4rem);
  --beag-hero-tagline-size: min(4vw, 1.5rem);
  --beag-app-track-width: 100%;
}
@media (min-width: 576px) {
  :root {
    --beag-app-track-width: 90%;
  }
}
@media (min-width: 992px) {
  :root {
    --beag-app-track-width: 80%;
  }
}

/* ==========================================================================
   Layout
   ========================================================================== */
/* #region layout */

/* so that scrollbar appearing won't shift the page */
html {
  scrollbar-gutter: stable;
}

/* #endregion */

/* #endregion */

/* ==========================================================================
   FooterComponent
   ========================================================================== */
/* #region root declarations and defaults */

.beag-app-footer {
  width: 100%;
  text-align: center;
  padding: 0 0.5em 0.5em 0.5em;
  font-size: 0.875em;
  color: rgba(0, 0, 0, 0.6);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  /* Ensure it doesn't stretch wider than intended if parent is wide */
  box-sizing: border-box;   
}
footer.beag-app-footer {
  z-index: 1049;  /* above all except modals */
}
.beag-footer-banner-row {
  position: relative;
  z-index: 1049;   /* above all except modals */
}

/* #endregion */

/* ==========================================================================
   NavBar
   ========================================================================== */
/* #region navbar */

.navbar-brand {
  display: flex;
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
}

.navbar-toggler {
  font-size: 1.5em;
  line-height: 1;
}

/* #endregion */

/* ==========================================================================
   PLATFORM ONLY: HomePage
   ========================================================================== */
/* #region HomePage */

body[data-page="home"][data-view="landing"] .navbar .navbar-brand {
  visibility: hidden;
}
body[data-page="home"][data-view="app"] .navbar .navbar-brand {
  visibility: visible;
}
body[data-page="home"][data-view="landing"] .beag-org__results-list {
  display: none;
}
body[data-page="home"][data-view="landing"] .beag-org-query-builder__collapse-toggle {
  display: none !important;
}

/* #endregion */

/* ==========================================================================
   PLATFORM ONLY: OrgsAsHomeComponent
   ========================================================================== */
/* #region OrgsAsHomeComponent */

.orgs-as-home-container {
  flex: 1;             /* Grow to fill .beag-app-container */
  min-height: 0;       /* Allow flex shrinking */
  display: flex;       /* Ensure it acts as a flex parent for its children */
  flex-direction: column;
  height: 100%;        /* Fallback/Double assurance */
}

/* #endregion */

/* ==========================================================================
   COMPONENT: AppStageComponent
   ========================================================================== */
/* #region center stage */
/* 
   1. Centered on the page.
   2. Full width on mobile.
   3. Constrained width on desktop (for readability/focus).
*/

.beag-app-stage {
  width: var(--beag-app-track-width);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;

  /* Ensure it fills the container vertically */
  flex: 1; 
  display: flex;
  flex-direction: column;
  min-height: 0;  
}

.beag-app-stage__inner {
  flex: 1; /* This tells the inner div to take up all remaining space */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* #endregion */

/* ==========================================================================
   PLATFORM ONLY: LogoBlockComponent
   ========================================================================== */
/* #region LogoBlockComponent */

.beag-tagline {
  font-size: var(--beag-hero-tagline-size);
  margin-top: 0rem;
  padding-top: 0rem;
  color: var(--beag-grey-rgb-base);
}

.beag-tagline .contrast-text {
  color: var(--beag-logo-rgb-base);
}

.beag-tagline__word--interactive {
  cursor: help;
}

.beag-logo-named {
  display: flex;
  align-items: stretch;
  color: var(--beag-logo-rgb-base);
}

.beag-logo-name-text {
  letter-spacing: -0.15em;
  display: flex;
  align-items: center;
  height: var(--beag-hero-logo-size);
}

.beag-logo-name {
  font-size: var(--beag-hero-logo-size);
  line-height: 1;
  white-space: nowrap;
}

img.beag-logo-svg {
  height: var(--beag-hero-logo-size);
}

.navbar-brand .beag-logo-named {
  display: flex;
  align-items: center;
}

.navbar .beag-logo-name {
  font-size: 1.5em;  
}

.navbar-brand img.beag-logo-svg {
  height: 1.5em;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.navbar-brand .beag-logo-name-text {
  height: 1.5em;
}

/* #endregion */

/* ==========================================================================
   PLATFORM ONLY: CallToBuyWizard
   ========================================================================== */
/* #region CallToBuyWizard */

.beag-call-to-buy-wizard {
  margin-bottom: 1em;
  width: var(--beag-app-track-width);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}

/* #endregion */

/* ==========================================================================
   PLUGIN HOSTING
   ========================================================================== */
/* #region plugin hosting */

.beag-plugin-iframe {
  width: 100%;
  min-height: 150px;  /* just so we can see it while loading, but the actual height is via messaging */
  border: none;
  display: block;
}

.beag-plugin-adapter {
  width: 100%;
  display: block;
  height: auto; 
}

/* #endregion */

/* ==========================================================================
   PLATFORM ONLY: BeagSongComponent
   Scope: This component is exclusive to the platform shell. 
   ========================================================================== */
/* #region BeagSongComponent */

/* Container for the image and overlays */
.beag-song-player__image-container {
  aspect-ratio: 800 / 460;
  min-width: 200px;
}

/* The lyric image itself */
.beag-song-player__image {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: contain;
  cursor: pointer;
}

/* The play/pause overlay */
.beag-song-player__overlay {
  cursor: pointer;
}

/* #endregion */