/* =========================
This CSS was rewritten 9/10/25  by chatGPT to not rely on react dynamic CSS changes with future updates

HEADER: background + base
   ========================= */
#app-header {
  background-color: #00274c;
  background-image: url("https://umich-tl-catalog-new.s3.us-east-2.amazonaws.com/olli-banner_w_logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  color: #fff;
}

/* Header links default to white */
#app-header a { color: #fff; }

/* Keep Catalog dropdown bits readable */
#app-header .Dropdown__ToggleIcon--header:after,
#app-header .Dropdown__ToggleTextWrapper { color: #fff; }

/* Hide header logo image (new container) */
.logo-customized img { visibility: hidden; }

/* =========================
   RIGHT HEADER: Login / Username / Cart
   ========================= */

/* Login (when logged out) OR Username (when logged in) */
#header-menu #header-menu-container a,
#header-menu [data-testid="user-menu"] {
  background: transparent !important;
  border: none !important;
  color: #fff !important;           /* white text */
  font-size: 20px;                  /* larger text */
  font-weight: 700;                 /* bold */
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  padding: 0;                       /* no extra box feel */
}
#header-menu #header-menu-container a:hover,
#header-menu [data-testid="user-menu"]:hover,
#header-menu [data-testid="user-menu"]:focus {
  color: #ddd !important;           /* lighter on hover/focus */
  text-decoration: underline;
  outline: none;
}

/* Cart: default = transparent bg + white icon; hover = white bg + blue icon */
#header-menu [data-testid="open-shopping-cart-button"] {
  background-color: transparent !important;  /* no box on load */
  border: none !important;
  border-radius: 6px;                         /* rounded on hover too */
  padding: 6px 10px;
  color: #fff !important;                     /* white icon by default */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color .2s, color .2s;
}

/* Ensure the SVG paints with currentColor and isn't dimmed */
#header-menu [data-testid="open-shopping-cart-button"] *,
#header-menu [data-testid="open-shopping-cart-button"] svg,
#header-menu [data-testid="open-shopping-cart-button"] svg * {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Hover: white background, brand-blue icon */
#header-menu [data-testid="open-shopping-cart-button"]:hover {
  background-color: #fff !important;
  color: #0b5cab !important;               /* brand blue */
}

/* Keyboard focus ring for cart */
#header-menu [data-testid="open-shopping-cart-button"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* =========================
   SEARCH / HERO / PRODUCT AREAS
   ========================= */
.search-form-container { background-color: #00274c; }
#search-form.callout-region { background-color: #fff; }

.feature-region {
  background-image: none;
  background-color: #ffcf45;
}

#main.product-results {
  background-color: #e4e1df;
  padding-top: 30px;
}

.product-bg { background-color: #989c97; }

.hero-region,
.hero-region h1,
.hero-region .h1,
.hero-region .AdminSynopsis__Title { color: #fff; }

.ProductEnrollment__Notice { color: #fff; }

/* =========================
   MISC (kept from your file)
   ========================= */
#ember908 { font-weight: bold !important; }

.wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10%; }
.wrapper .column { flex: 1; min-width: 400px; }

.button-row {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  background-color: #fff;
}

.button {
  background-color: #00274c;
  color: #fff;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px; /* fixed typo */
  border-radius: 15px;
  font-size: 15px;
}

.clearfiltersbutton {
  background-color: #00274c;
  color: #FFCB05;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px; /* fixed typo */
  border-radius: 15px;
  font-size: 15px;
}

.welcome-message { background-color: #fff; color: #000; text-align: center; }

/* Hide bulk enroll divider and button on enrollment page */
#bulk-checkout-divider-hero { display: none; }
span#add-to-bulk-checkout-hero div { display: none; }

/* My courses link on home page */
#mycourses { float: right; margin-top: 9px; margin-left: 5px; }
a.mycourseslink:link, a.mycourseslink:visited { color: #fff; }

/* Hide the dashboard navigation (not used) */
.DashboardNavigation { display: none; }

/* “Back to OLLI Video Catalog” link area */
#catalogHome { float: right; margin-top: 9px; padding-right: 25px; }
#catalogHome a { color: #fff; text-decoration: underline; }

/* Move the sticky_header down to accommodate taller header */
div#main.ember-application { margin-top: 60px; }