/* ==========================================================================
   sliding-banner-static.css
   Styles for partials/sliding-banner-static.hbs.
   ========================================================================== */

/* ==========================================================================
   Dependencies borrowed from the certification-microsite stylesheets
   (assets/certification-microsite/css/*.css)

   The banner's markup reuses .btn, .custom-dropdown* and .jump-links-container,
   which are only defined in the microsite CSS. Pages that include this partial
   without loading that stylesheet (e.g. page-team-certifications.hbs) need the
   rules here. Everything is scoped to .sliding-banner so nothing leaks into the
   host page, and so the banner's own rules further down still win.
   ========================================================================== */

/* --primary-color / --secondary-color are defined by the microsite stylesheet; scoped to the
   banner so the host page's own palette is left untouched. */


.sliding-banner .btn {
   text-align: center;
}

/* Dropdown */
.sliding-banner .custom-dropdown {
   position: relative;
}

.sliding-banner .custom-dropdown-selected {
   display: block;
   user-select: none;
}

.sliding-banner .custom-dropdown-selected .dropdown-icon {
   color: white;
   transition:
      transform 0.3s ease,
      color 0.3s ease;
}

.sliding-banner .custom-dropdown.open .custom-dropdown-selected .dropdown-icon {
   color: var(--primary-color);
   transform: rotate(180deg);
}

.sliding-banner .custom-dropdown .btn.btn-primary-outline {
   border: 1px solid var(--white) !important;
   color: var(--white) !important;
}

.sliding-banner .custom-dropdown.open .btn.btn-primary-outline {
   border: 1px solid var(--primary-color) !important;
   color: var(--primary-color) !important;
}

/* Jump-links panel */
.sliding-banner .jump-links-container {
   background-color: var(--white);
   border-radius: 12px;
   min-width: 300px;
   max-width: 300px;
   height: 100%;
   padding: 32px 40px;
   box-shadow: 1px 3px 5px -1px #00000029;
   display: flex;
   flex-direction: column;
   gap: 24px;
   position: relative;
}

.sliding-banner .jump-links-container .heading {
   font-size: 20px;
   font-weight: 600;
   padding-bottom: 24px;
   border-bottom: 1px solid var(--primary-color);
   color: var(--black);
   margin: 0;
}

.sliding-banner .jump-links-container .jump-links,
.sliding-banner .jump-links-container .cta-group {
   display: flex;
   gap: 16px;
   flex-direction: column;
}

.sliding-banner .jump-links-container .jump-links .jump-link {
   color: var(--black);
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
   font-size: 16px;
}

.sliding-banner .jump-links-container .jump-links .jump-link svg {
   width: 24px;
   color: var(--dark-grey);
}

.sliding-banner .jump-links-container .jump-links .jump-link:hover {
   text-decoration: none;
   color: var(--primary-color);
}

.sliding-banner .jump-links-container .jump-links .jump-link:hover svg {
   color: var(--primary-color);
}

.sliding-banner .jump-links-container .foot-text {
   font-size: 12px;
   font-style: italic;
   text-align: center;
}

/* Dropdown panel.
   The element carries both .custom-dropdown-options and .jump-links-container.
   .jump-links-container above styles it as the microsite's in-flow sidebar
   (position: relative, height: 100%, display: flex) — every one of those has to
   lose here so the panel floats below the trigger instead of sitting inside the
   banner row. Matching on both classes wins on specificity, not source order.
   The open rule further down (.custom-dropdown.open .custom-dropdown-options)
   is more specific still, so it always wins when the dropdown is open. */
.sliding-banner .custom-dropdown-options.jump-links-container {
   display: none;
   position: absolute;
   top: calc(100% + 12px);
   right: 0;
   height: auto;
   margin: 0;
   padding: 32px 40px 32px 40px;
   list-style: none;
   background: #fff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
   border-radius: 12px !important;
   z-index: 2000;
}

@media only screen and (max-width: 600px) {
   .sliding-banner .custom-dropdown-options {
      border-radius: 0 0 12px 12px !important;
   }

   .sliding-banner .custom-dropdown-options.jump-links-container {
      top: 82px;
      right: 0;
      left: 0;
      width: 100%;
      max-width: 100%;
      border-radius: 0px;
   }

   .sliding-banner .custom-dropdown {
      position: unset;
   }
}

@media (min-width: 1200px) and (max-width: 1600px) {
   .sliding-banner-content {
      max-width: 100% !important;
      padding-left: 5%;
      padding-right: 5%;
   }
}

/* ==========================================================================
   Banner styles (moved out of the partial's inline <style> block)
   ========================================================================== */

.sliding-banner {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   background: var(--black);
   color: #fff;
   text-align: center;
   padding: 24px 0;
   z-index: 9999;
   /* Hidden by default */
   transform: translateY(-125%);
   transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
   font-size: 1.1rem;
}

.sliding-banner.dashboard-sliding-banner {
   width: 100%;
   margin-top: -100px;
   position: sticky;
}

/* Logged-in banner is mobile/tablet only */
@media screen and (min-width: 1025px) {
   .sliding-banner.dashboard-sliding-banner {
      display: none;
   }
}

.sliding-banner.show-banner {
   transform: translateY(0);
}

.sliding-banner-logo img {
   width: 100%;
}

.sliding-banner-logo .sliding-banner-logo-mobile {
   display: none;
}

/* Dropdown trigger — plain-CSS equivalents of the Tailwind utilities that used
   to sit on the markup (inline-flex! items-center! gap-2! whitespace-nowrap!
   on the trigger, w-10! h-10! shrink-0! on the caret). Values are the ones
   output.css resolved to (--spacing: 0.4rem), so the partial no longer needs
   Tailwind loaded. */
.sliding-banner .custom-dropdown-selected {
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
   white-space: nowrap;
}

.sliding-banner .custom-dropdown-selected .dropdown-label {
   white-space: nowrap;
}

.sliding-banner .custom-dropdown-selected .dropdown-icon {
   width: 2.6rem;
   height: 2.6rem;
   flex-shrink: 0;
}

.sliding-banner-content {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   max-width: 1192px;
   margin: 0 auto;
   align-items: center;
}

.sliding-banner-logo {
   width: 180px;
}

.sliding-banner-ctas {
   display: flex;
   align-items: center;
   gap: 12px;
}

/* Caret is an invert(1)-filtered image in the microsite CSS, so it stays
   white; render it via mask + currentColor so it follows the button's
   text color (white → coral on hover/open) */
.sliding-banner .custom-dropdown-selected:after {
   background: currentColor;
   filter: none;
   -webkit-mask: url(/assets/img/dropdown-16-16.svg) no-repeat center;
   mask: url(/assets/img/dropdown-16-16.svg) no-repeat center;
}

.sliding-banner .custom-dropdown.open .custom-dropdown-selected {
   color: var(--primary-color);
   border-color: var(--primary-color);
}

/* .custom-dropdown-options overrides .jump-links-container's flex with
   display: block when open — restore the column layout */
.sliding-banner .custom-dropdown.open .custom-dropdown-options {
   display: flex;
   flex-direction: column;
   gap: 24px;
   padding: 32px 24px;
   text-align: left;
}

.sliding-banner .cert-reward {
   width: 100%;
}

.sliding-banner .banner-back-to-top {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 18px;
   border: 1px solid var(--black);
   border-radius: 8px;
   color: var(--black);
   font-size: 14px;
}

.sliding-banner .banner-back-to-top:hover {
   text-decoration: none;
   color: var(--primary-color);
}

@media screen and (max-width: 1600px) {
   .sliding-banner-content {
      padding-left: 32px;
      padding-right: 32px;
   }
}

@media screen and (max-width: 1024px) {
   .sliding-banner.show-banner {
      display: block;
   }

   .sliding-banner-content {
      padding: 0 32px;
   }

   /* Logged-in view: overlay .mobile-nav (z-index up to 999999).
       sliding-banner.js reparents this to <body> below 1024px so it
       escapes #site-main's stacking context (z-index 99 !important
       from algolia-search-dashboard.css) */
   .sliding-banner.dashboard-sliding-banner {
      position: fixed;
      top: 0;
      margin-top: 0;
      z-index: 1000000;
   }
}

@media screen and (max-width: 600px) {
   .sliding-banner-ctas .btn {
      font-size: 12px;
      padding: 8px 12px;
   }

   .sliding-banner-logo {
      width: 35px;
   }

   .sliding-banner-logo .sliding-banner-logo-mobile {
      display: block;
   }

   .sliding-banner-logo .sliding-banner-logo-desktop {
      display: none;
   }
   .sliding-banner .custom-dropdown.open .custom-dropdown-options {
      padding: 32px 24px;
   }
   .sliding-banner .custom-dropdown-options.jump-links-container {
      border-radius: 0 0 12px 12px !important;
   }
}