/* Shared responsive fixes for all role templates */

img {
  max-width: 100%;
  height: auto;
}

.content {
  padding-top: 0 !important;
}

.page-header {
  margin-top: 0 !important;
}

.topbar {
  margin-bottom: 0 !important;
}

/* Student template fix: avoid extra top offset from positioned children */
/* .main-wrapper > * {
  position: unset !important;
  z-index: auto !important;
} */

.logo__image {
  display: block;
  height: clamp(34px, 5vw, 50px);
  width: auto;
  max-width: min(220px, 52vw);
  object-fit: contain;
}

.inst-brand .logo__image,
.corp-brand .logo__image,
.brand .logo__image {
  height: clamp(30px, 4.5vw, 44px);
  max-width: min(200px, 48vw);
}

.topbar__brand-logo,
.inst-topbar-logo,
.corp-topbar-logo,
.nav-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Header account dropdown items — match each module's primary nav menu */
#navigation .dropdown-menu .dropdown-item,
.header-profile-dropdown .dropdown-menu .dropdown-item,
.student-programme-nav__menu .dropdown-item {
  font-family: 'Roboto Slab', 'Times New Roman', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.top-nav .dropdown-menu .dropdown-item {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
}

.inst-topbar .inst-dropdown-menu .dropdown-item {
  font-size: 0.81rem !important;
  font-weight: 600 !important;
}

.corp-topnav .corp-dropdown .dropdown-item {
  font-size: 0.83rem !important;
  font-weight: 600 !important;
}

.topbar .dropdown-menu .dropdown-item,
.admin-topbar .dropdown-menu .dropdown-item {
  font-size: 15px !important;
  font-weight: 600 !important;
}

@media (max-width: 991.98px) {
  #navigation .dropdown-menu .dropdown-item,
  .header-profile-dropdown .dropdown-menu .dropdown-item,
  .student-programme-nav__menu .dropdown-item {
    font-size: 15px !important;
  }
}

@media (max-width: 991.98px) {
  .top-nav__inner,
  .inst-topbar,
  .corp-topnav,
  .admin-topbar {
    min-height: 64px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px;
  }

  .top-nav__menu,
  .inst-topmenu,
  .corp-topmenu {
    display: none !important;
  }

  .logo__image {
    height: clamp(30px, 6vw, 42px);
    max-width: min(170px, 56vw);
  }

  .topbar__brand-logo .logo__image,
  .inst-topbar-logo .logo__image,
  .corp-topbar-logo .logo__image,
  .nav-brand-logo .logo__image {
    height: clamp(28px, 6vw, 40px);
    max-width: min(150px, 52vw);
  }

  .main-content,
  .inst-content,
  .corp-content,
  .admin-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 575.98px) {
  .content {
    padding-top: 0 !important;
  }

  .logo__image {
    height: 30px;
    max-width: 145px;
  }

  .page-head,
  .inst-pagehead,
  .corp-pagehead {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-head .btn,
  .inst-pagehead .btn,
  .corp-pagehead .btn {
    width: 100%;
  }

  .table-responsive {
    overflow-x: auto;
  }
}

/*
 * Student cart (cart.php): thead must use theme green + white text.
 * ID + !important beats Bootstrap 5.3 .table > :not(caption) > * > * on th/td.
 * Loaded after student-dashboard.css so :root --green is defined.
 */
#studentCartTable thead th {
  --bs-table-bg: var(--green, #059669) !important;
  --bs-table-color: #fff !important;
  --bs-table-border-color: rgba(255, 255, 255, 0.28) !important;
  background-color: var(--green, #059669) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}

/* Placeholder text only: 3px smaller than field text (typed values unchanged) */
.form-control::placeholder,
textarea.form-control::placeholder,
.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
  font-size: calc(1rem - 3px);
  opacity: 1;
}

.form-control-sm::placeholder,
.form-control-sm::-webkit-input-placeholder {
  font-size: calc(0.875rem - 3px);
  opacity: 1;
}

.form-control-lg::placeholder,
.form-control-lg::-webkit-input-placeholder {
  font-size: calc(1.25rem - 3px);
  opacity: 1;
}

/* Global form fields: label above input, black label text (placeholder styling unchanged above) */
.form-label,
label.form-label,
.form-group > label:not(.form-check-label):not(.btn),
.form-group > .form-label,
.lms-form-field > .form-label,
.lms-form-field > label:first-child:not(.form-check-label),
.student-reg-file-field__label,
.register label:not(.form-check-label),
form label.col-form-label,
.control-label {
  display: block;
  color: #000 !important;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-check-label {
  color: inherit;
  font-weight: inherit;
}

.form-check-label a {
  color: #000;
  font-weight: 600;
  text-decoration: underline;
}

.form-check-label a:hover {
  color: #0891b2;
}

.lms-form-field .form-control,
.lms-form-field .form-select {
  width: 100%;
}

.auth-card__content .form-label,
.auth-card__content .lms-form-field > label:first-child {
  color: #000 !important;
}

/*
 * Section taglines (e.g. "Continue Your Top Courses") — keep on one line in app
 * pages with sidebar/catalog layouts. Landing pages use their own scoped styles.
 */
.content .section-title,
.best-cpurse .section-title,
.course-catalog-page .section-title,
.col-xl-9 .section-title,
.col-lg-8 .section-title {
  margin-bottom: 30px;
}

.content .section-title p,
.best-cpurse .section-title p,
.course-catalog-page .section-title p,
.col-xl-9 .section-title p,
.col-lg-8 .section-title p {
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  font-size: clamp(1.35rem, 2.6vw, 2.35rem);
  line-height: 1.25;
}

@media (max-width: 575.98px) {
  .content .section-title p,
  .best-cpurse .section-title p,
  .course-catalog-page .section-title p,
  .col-xl-9 .section-title p,
  .col-lg-8 .section-title p {
    white-space: normal;
    font-size: 1.35rem;
  }
}