/* =========================
   Professional Edge — Canvas Catalog Storefront CSS (Streamlined)
   Copy/paste entire file
   ========================= */

:root{
  --pe-green: #007030;
  --pe-darkgreen: #104735;
  --pe-text: #343434;
  --pe-lightband: #f3f3f3;
  --pe-yellow: #FEE11A;
}

/* ---------- Header / Nav ---------- */
#app-header { background-color: #fff; }

#user-nav { padding-top: 25px; }
#user-nav > a { color: var(--pe-text); }

button#accountDropdown { padding: 5px 10px 5px 0; }

/* Header links injected by JS */
#page-links { display: inline-block; }
#page-links a{
  display: inline-block;
  padding: 6px 10px;
  font-size: 1em;
  color: var(--pe-darkgreen);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, text-decoration 0.2s ease;
}
#page-links a:hover{
  background-color: var(--pe-yellow);
  text-decoration: underline;
}
#page-links .piped-list{
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
#page-links .piped-list > li:after{
  content: "|";
  color: var(--pe-text);
  margin-left: 20px;
}
#page-links .piped-list > li:last-child:after{ content:""; margin:0; }

/* Safer: do NOT force flex on the whole header wrapper (Catalog may change structure) */
#header-menu{ padding: 10px 0; }

/* Make the Login link match our header links */
a[href*="/login"],
a[href*="sign_in"],
a[href*="sso"]{
  display: inline-block !important;
  padding: 6px 10px !important;
  font-size: 1em !important;
  color: var(--pe-darkgreen) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease, text-decoration 0.2s ease !important;
}
a[href*="/login"]:hover,
a[href*="sign_in"]:hover,
a[href*="sso"]:hover,
a[href*="/login"]:focus,
a[href*="sign_in"]:focus,
a[href*="sso"]:focus{
  background-color: var(--pe-yellow) !important;
  text-decoration: underline !important;
}

/* Remove the cart (Catalog DOM variations) */
#cart,
#cart-button,
.cart,
.cart-button,
a[href*="/cart"],
a[href*="cart"]{
  display: none !important;
}

/* ---------- Buttons / icons (global theme touches) ---------- */
.btn-info,
.Icon__CircleWrap--info,
.product-flag.product-flag-free,
.ProductIcon__LargeCircle--course,
.ProductIcon__SmallCircle--course{
  background: var(--pe-green);
}
.btn-info:hover,
.btn-info:focus,
.ProductIcon__LargeCircle--course:focus{
  background: var(--pe-green);
  filter: brightness(85%);
}

/* ---------- Storefront hero banner ---------- */
div#feature{
  height: 250px;
  background-image: url("https://raw.githubusercontent.com/jj-nnes/Canvas-Catalog/main/Catalog%20Banner%20(1250%20x%20250%20px)%20(1).svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(63,69,81,0.16);
  margin-top: 1.6em;
  margin-bottom: 0.9em;
  position: relative;
}
div#feature::after{
  content: "Professional Edge Trainings — develop cutting edge skills essential for the modern job market";
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Listings hover effect ---------- */
.product-link{
  transition: transform 0.25s ease;
  transform: none;
  color: #000000;
}
.product-link:hover{
  transform: scale(1.05);
  color: #2E1A47;
}
.product-results .product-tile:hover{
  box-shadow: inset 0px -5px 0px var(--pe-green);
}
.product-tile .product-footer{ color: var(--pe-text); }

/* ---------- Search bar band ---------- */
#search-form .search-form-container{
  background-color: var(--pe-green);
}

/* ===== Search Actions (Categories + Refine/Sort) =====
   Key: Style buttons without breaking the dropdown menus.
*/

/* Space between buttons */
.search-form__actions{
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
}

/* Force ONLY buttons visible if theme hides them (do NOT target * ) */
#search-refine-button--categories,
#search-refine-button--refine{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Button styling: white text + rounded square outline */
.search-form-container .search-refine-button{
  background: rgba(255,255,255,0.12) !important;
  border: 2px solid rgba(255,255,255,0.85) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.search-form-container .search-refine-button:hover{
  background: rgba(255,255,255,0.20) !important;
}
.search-form-container .search-refine-button:focus,
.search-form-container .search-refine-button:focus-visible{
  outline: 3px solid rgba(255,255,255,0.9) !important;
  outline-offset: 3px !important;
}

/* Ensure content alignment */
.search-form-container .search-refine-button__contents{
  display: inline-flex !important;
  align-items: center !important;
}

/* Caret/icon visibility */
.search-form-container .search-refine-button__icon{
  color: #ffffff !important;
  font-size: 20px !important;
}

/* Labels (distinct) */
.search-form-container #search-refine-button--categories .search-refine-button__contents:before{
  
  color: #ffffff;
  font-weight: 700;
  margin-right: 8px;
}
.search-form-container #search-refine-button--refine .search-refine-button__contents:before{

  color: #ffffff;
  font-weight: 700;
  margin-right: 8px;
}

/* Restore dropdown/menu layout so it doesn't become a grid */
.search-form-container .dropdown-menu,
.search-form-container .popover,
.search-form-container [role="menu"],
.search-form-container [role="listbox"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  z-index: 9999 !important;
}

/* Make menu items stack */
.search-form-container .dropdown-menu a,
.search-form-container .dropdown-menu li,
.search-form-container [role="menu"] a,
.search-form-container [role="menu"] li,
.search-form-container [role="listbox"] *{
  display: block !important;
  white-space: nowrap !important;
}

/* ---------- Notices (banners) ---------- */
#pe-notices{ width: 100%; margin-top: 10px !important; }

#banner{
  width: 100%;
  margin: 0;
  text-align: center;
  color: #ffffff;
  background-color: #8D1D58;
}
#banner p{
  font-size: 1.35em;
  font-weight: 440;
  margin: 0;
  padding: 10px 10px;
}
#banner a{
  color: #FFD7EA;
  text-decoration: underline;
  font-weight: 700;
}
#banner a:hover,
#banner a:focus{
  color: #FFEEAA;
}

#banner-2{
  width: 100%;
  margin: 6px 0 0 0;
  text-align: center;
  color: #ffffff;
  background-color: #154733;
}
#banner-2 p{
  font-size: 1.35em;
  font-weight: 440;
  margin: 0;
  padding: 10px 10px;
}

/* Independent banner toggles (default ON; switch to none when not needed) */
/* #banner { display: none; } */
/* #banner-2 { display: none; } */

/* ---------- Quicklinks (3-up cards) ---------- */
section#pe-quicklinks{
  background: var(--pe-lightband) !important;
  padding: 22px 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

section#pe-quicklinks .pe-intro{
  max-width: 1100px !important;
  margin: 0 auto 14px auto !important;
  padding: 0 18px !important;
  text-align: center !important;
}
section#pe-quicklinks .pe-intro,
section#pe-quicklinks .pe-intro *{
  color: #2b2b2b !important; /* protect against theme turning text white */
}
section#pe-quicklinks .pe-intro strong{
  color: var(--pe-darkgreen) !important;
  font-size: 1.2rem !important;
}
section#pe-quicklinks .pe-intro p{
  font-size: 1.15rem !important;
  line-height: 1.5 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

section#pe-quicklinks .pe-grid{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
  display: flex !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-content: center !important;
}

section#pe-quicklinks .pe-card{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-shadow: 0 2px 8px rgba(63,69,81,0.12) !important;
  border-left: 6px solid var(--pe-green) !important;
}

section#pe-quicklinks .pe-card h3{
  margin: 0 0 8px 0 !important;
  color: var(--pe-darkgreen) !important;
  font-size: 1.15rem !important;
}
section#pe-quicklinks .pe-card p{
  margin: 0 0 12px 0 !important;
  color: #2b2b2b !important;
  line-height: 1.35 !important;
}

section#pe-quicklinks a.pe-btn,
section#pe-quicklinks button.pe-btn{
  display: inline-block !important;
  background: var(--pe-green) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 1rem !important;
}
section#pe-quicklinks a.pe-btn:hover,
section#pe-quicklinks button.pe-btn:hover{
  filter: brightness(0.92) !important;
}

@media (max-width: 900px){
  section#pe-quicklinks .pe-grid{
    flex-direction: column !important;
  }
}

/* ---------- Enrollment sign-in button (backup styling) ---------- */
.Registration__SignInButton a{
  background-color: var(--pe-green) !important;
  color: #ffffff !important;
  text-align: center !important;
  display: inline-block !important;
  padding: 12px 24px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
/* =========================
   ANNOUNCEMENT TOGGLES (scoped)
   Set each to: block (ON) or none (OFF)
   ========================= */

#pe-notices #banner   { display: block !important; }  
#pe-notices #banner-2 { display: none  !important; }