/* PSU Catalog CSS
 * Existing storefront styles merged with registration-page updates.
 */

:root {
  --psu-blue: rgb(30, 64, 124);
  --psu-light-blue: rgb(150, 190, 230);
  --psu-navy: #002d74;
}

/* Top gradient bar */
header[role="banner"] .banner,
header[role="banner"] {
  background: linear-gradient(to right, var(--psu-blue), var(--psu-light-blue)) !important;
  border: none !important;
}

/* Remove extra solid blue line if it exists */
#search-form {
  border-top: none !important;
}

/* Filter/search bar */
#search-form .search-form-container {
  background-color: var(--psu-blue) !important;
  padding: 1rem;
}

#search-form input[type="search"] {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 1rem;
}

/* Filter dropdowns */
#search-form .dropdown-toggle {
  background-color: transparent !important;
  border: none;
  color: #fff !important;
  font-size: 1rem;
  padding: 6px 10px;
}

#search-form .dropdown-toggle:hover,
#search-form .dropdown-toggle:focus-visible {
  text-decoration: underline;
}

/* Course cards */
.card.course {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.course:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card.course h3 {
  margin-top: 0.5rem;
  color: var(--psu-navy);
  font-size: 1.25rem;
}

.card.course .course-summary {
  color: #333;
  font-size: 1rem;
  line-height: 1.5;
}

.card.course .btn-primary {
  margin-top: 10px;
  background-color: var(--psu-blue);
  border-color: var(--psu-blue);
  color: #fff;
}

.card.course .btn-primary:hover,
.card.course .btn-primary:focus-visible {
  background-color: var(--psu-light-blue);
  border-color: var(--psu-light-blue);
  color: #000;
}

/* Header menu alignment */
#header-menu {
  margin-top: 17px;
}

/* Registration page: account-creation heading */
#registration > form > span > .RegistrationHeader__Title {
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
  text-align: center;
}

#registration > form > span > .RegistrationHeader__Title h1 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent duplicate or misplaced heading text */
#registration .RegistrationHeader__Title::after {
  content: none;
}

/* Remove empty element between title and account box */
#registration > form > span > .RegistrationHeader__DateInfo {
  display: none !important;
}

/* Returning-user section */
#registration > form > span > a[data-cid="BaseButton Button"] {
  display: block;
  margin: 0 !important;
  padding: 1.25rem 1.5rem 1.5rem;
  background-color: #d9dee3;
  border: 1px solid #c2cad2;
  border-radius: 8px;
  text-align: center;
}

#registration > form > span > a[data-cid="BaseButton Button"]::before {
  content: "Already Have An Account?";
  display: block;
  margin: 0 0 0.75rem;
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* Remove inner border while retaining the section background */
#registration > form > span > a[data-cid="BaseButton Button"] > span {
  display: block;
  width: 100%;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Button content area */
#registration > form > span > a[data-cid="BaseButton Button"] > span > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  overflow: visible;
  width: 100%;
  height: auto;
  padding: 0.625rem 1rem;
  background-color: var(--psu-blue);
  border-radius: 4px;
  color: #fff;
  font-size: 0;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

/* Fallback when the text must remain generated by ::before.
 * Keep this wrapper flush left; only the real list receives indentation.
 * Generated content is a visual fallback, not a replacement for semantic HTML.
 */
#registration > form > span > a[data-cid="BaseButton Button"] > span::before {
  content: "Sign in if:\A• You're a returning user, or\A• You have an active Penn State account (xyz123@psu.edu)";
  display: block;
  margin: 0 0 0.75rem;
  padding-inline-start: 1.5rem;
  text-indent: -1.5rem; /* “Sign in if:” stays flush; bullets are indented */
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
  white-space: pre-line;
}

/* Preferred: use real HTML with a heading/paragraph and an unordered list. */
.signin-prompt {
  margin: 0 0 0.75rem;
  padding: 0;
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
}

.signin-prompt ul {
  margin: 0;
  padding-inline-start: 1.5rem;
}

/* Button text */
#registration > form > span > a[data-cid="BaseButton Button"] > span > span::before {
  content: "Sign In";
  font-size: 1rem;
}

#registration > form > span > a[data-cid="BaseButton Button"]:hover > span > span,
#registration > form > span > a[data-cid="BaseButton Button"]:focus-visible > span > span {
  background-color: var(--psu-light-blue);
  color: #000;
}

#registration > form > span > a[data-cid="BaseButton Button"]:focus-visible {
  outline: 3px solid var(--psu-blue);
  outline-offset: 3px;
}

/* New-account section heading */
#registration .RegistrationBody__InputFields::before {
  content: "New Here?";
  display: block;
  margin: 1.25rem 0 0.5rem;
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Enroll footer */
#enroll-footer [class*="baseButton__content"] {
  background-color: var(--psu-blue);
  color: #fff !important;
  transition: background-color 150ms ease;
}

#enroll-footer button:hover [class*="baseButton__content"],
#enroll-footer button:focus-visible [class*="baseButton__content"],
#enroll-footer a:hover [class*="baseButton__content"],
#enroll-footer a:focus-visible [class*="baseButton__content"] {
  background-color: var(--psu-light-blue) !important;
  color: #000 !important;
}

/* Login links and logged-in user name */
a[href^="/login"] {
  color: var(--psu-blue) !important;
}

#header-menu-container > div > span > button > span {
  color: var(--psu-blue) !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .card.course {
    transition: none;
  }
}