/*
 * STAC Browser embed; host-side layout, scale & containment.
 * stopping Bootstrap from bleeding onto Material, and also Material's 
 * `.md-typeset` from bleeding into the stacbrowser app at BUILD time by
 * prefixing STAC's compiled CSS under `#stac-browser`
 */

/* STAC's own Bootstrap `.container` keeps its max-width
 * and centers the content, so we must NOT force it full-bleed here */
 body.waterpark-stac-page .md-main__inner,
 body.waterpark-stac-page .md-content,
 body.waterpark-stac-page .md-content__inner {
   max-width: none;
   margin: 0;
 }
 
 /*  Hide the <h1> Material auto-injects from the page title */
 body.waterpark-stac-page .md-content h1 {
   display: none;
 }
 body.waterpark-stac-page #stac-browser h1 {
   display: revert;
 }
 
 /* Mount host sizing (the inner #stac-browser only exists after load). */
 .waterpark-stac-wrapper {
   width: 100%;
 }
 body.waterpark-stac-page #stac-browser-mount,
 body.waterpark-stac-page #stac-browser {
   display: block;
   width: 100%;
   max-width: 100%;
   min-height: calc(100vh - var(--md-header-height, 48px));
   /* IMPORTANT: It must stay visible; STAC teleports its overlays into #stac-browser. */
   overflow: visible;
 }
 
 /* Make the Scale match to waterpark *
  * Material pins the page root to 125% (so 1rem = 20px), and STAC's Bootstrap
  * reads ~25% larger than the surrounding docs.
  * Important: We deliberately do NOT use `zoom`/`transform: scale` those reposition the
  * Popper popovers (Source / API / Share open in the wrong place).*/
 body.waterpark-stac-page #stac-browser .btn {
   font-size: 0.8rem;
   padding: 0.3rem 0.6rem;
 }
 /* Provider rows: tighter height + smaller role badge. */
 body.waterpark-stac-page #stac-browser .list-group-item {
   padding: 0.5rem 0.75rem;
 }
 body.waterpark-stac-page #stac-browser .badge {
   font-size: 0.72em;
 }
 
 /* Rein in the big content headings. */
 body.waterpark-stac-page #stac-browser h1 { font-size: 1.9rem; }
 body.waterpark-stac-page #stac-browser h2 { font-size: 1.3rem; }
 
 /* Match STAC's buttons to the Waterpark primary colour. */
 body.waterpark-stac-page #stac-browser .btn-primary {
   --bs-btn-bg: var(--md-primary-fg-color);
   --bs-btn-border-color: var(--md-primary-fg-color);
   --bs-btn-hover-bg: var(--md-primary-fg-color--dark, var(--md-primary-fg-color));
   --bs-btn-hover-border-color: var(--md-primary-fg-color--dark, var(--md-primary-fg-color));
   --bs-btn-active-bg: var(--md-primary-fg-color--dark, var(--md-primary-fg-color));
   --bs-btn-active-border-color: var(--md-primary-fg-color--dark, var(--md-primary-fg-color));
   --bs-btn-disabled-bg: var(--md-primary-fg-color);
   --bs-btn-disabled-border-color: var(--md-primary-fg-color);
 }
 body.waterpark-stac-page #stac-browser .btn-outline-primary {
   --bs-btn-color: var(--md-primary-fg-color);
   --bs-btn-border-color: var(--md-primary-fg-color);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--md-primary-fg-color);
   --bs-btn-hover-border-color: var(--md-primary-fg-color);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--md-primary-fg-color);
   --bs-btn-active-border-color: var(--md-primary-fg-color);
 }
 
 /* Make the imgs in the description fill the column */
 body.waterpark-stac-page #stac-browser .styled-description img {
   width: 100%;
   height: auto;
   max-width: 900px;
   border-radius: 12px;
 }
 
 /* Disable "Powered by STAC Browser …" line in the footer. */
 body.waterpark-stac-page #stac-browser .poweredby {
   display: none !important;
 }
 
 /* Disable The "Description" section heading */
 body.waterpark-stac-page #stac-browser .intro > h2 {
   display: none !important;
 }
 
 /* Disable The "Additional Resources" heading */
 body.waterpark-stac-page #stac-browser .links > h2 {
   display: none !important;
 }
 
 /* Provider logos: STAC providers have no logo field, so we
  * add one with CSS keyed on each provider's URL. */
 #stac-browser .provider[href*="awi.de"] .title::before,
 #stac-browser .provider[href*="hereon.de"] .title::before,
 #stac-browser .provider[href*="uni-hamburg"] .title::before,
 #stac-browser .provider[href*="mpimet.mpg.de"] .title::before,
 #stac-browser .provider[href*="www.dkrz.de"] .title::before,
 #stac-browser .provider[href*="freva"] .title::before {
   content: "";
   display: inline-block;
   width: 1.25em;
   height: 1.25em;
   margin-right: 0.5em;
   vertical-align: -0.25em;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 #stac-browser .provider[href*="awi.de"] .title::before { background-image: url(/assets/logos/awi.svg); }
 #stac-browser .provider[href*="hereon.de"] .title::before { background-image: url(/assets/logos/hereon.svg); }
 #stac-browser .provider[href*="uni-hamburg"] .title::before { background-image: url(/assets/logos/uni-hamburg.svg); }
 #stac-browser .provider[href*="mpimet.mpg.de"] .title::before { background-image: url(/assets/logos/mpi-m.svg); }
 #stac-browser .provider[href*="www.dkrz.de"] .title::before { background-image: url(/assets/logos/dkrz.svg); }
 
 
 /* The Browse drawer opacity */
 #stac-browser .offcanvas-backdrop {
   opacity: 0.25 !important;
 }
 

 body.waterpark-stac-page #stac-browser .offcanvas {
   /* Keep the drawer/tree clickable and scrollable above in-page content.
    * STAC's own offcanvas z-index ~1045 already exceeds Material's header*/
   pointer-events: auto;
 }