/* DGB theme overlay — LMS (tokens from BRAND_KIT.md / www.dgbcenter.com)
 * Aggressive !important overlays so classic Open edX blues lose on home chrome.
 * ALSO compiled into lms-main-v1 via sass/partials/lms/theme/_extras.scss
 * AND linked via templates/head-extra.html (belt-and-suspenders).
 * Built into image via `tutor images build openedx` (do not serve hot-edit alone).
 */

@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap");

:root {
  --dgb-primary: #0d7a7a;
  --dgb-primary-hover: #0a5f5f;
  --dgb-primary-contrast: #FFFFFF;
  --dgb-secondary: #7D5E3C;
  --dgb-accent: #F6B74A;
  --dgb-success: #1E7E34;
  --dgb-warning: #9A6700;
  --dgb-danger: #B42318;
  --dgb-background: #fcfcfc;
  --dgb-surface: #FFFFFF;
  --dgb-surface-muted: #fafafa;
  --dgb-text: #1A1D21;
  --dgb-muted: #5F6368;
  --dgb-border: #E8EAED;
  --dgb-font: Inter, "Inter Fallback", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Remap compiled edx CSS custom properties (were #0075b4 / #065683) */
  --primary: #0d7a7a !important;
  --blue: #0d7a7a !important;
  --blue-d1: #0a5f5f !important;
  --blue-d2: #084848 !important;
  --blue-s1: #0d7a7a !important;
  --action-primary-active-bg: #0d7a7a !important;
  --general-color-accent: #0d7a7a !important;
  --submitted: #0d7a7a !important;
  --link-color: #0d7a7a !important;
  --pgn-color-primary-base: #0d7a7a;
  --pgn-color-primary-500: #0d7a7a;
  --pgn-color-primary-700: #0a5f5f;
}

html,
body {
  background: var(--dgb-background) !important;
  color: var(--dgb-text) !important;
  font-family: var(--dgb-font);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dgb-primary);
  font-family: var(--dgb-font);
}

a,
.link-primary,
.nav-links a,
.course-link,
.btn-link {
  color: var(--dgb-primary) !important;
}

a:hover,
.btn-link:hover,
.btn-link:focus {
  color: var(--dgb-secondary) !important;
}

/* ---------- Kill leftover edx/indigo blues (utility + bootstrap) ---------- */
.bg-primary,
.has-background-blue,
.blue-button,
.badge-primary,
.btn-primary,
.btn-brand,
.action.action-primary.action-update {
  background: var(--dgb-primary) !important;
  background-color: var(--dgb-primary) !important;
  border-color: var(--dgb-primary) !important;
  color: var(--dgb-primary-contrast) !important;
}

.text-primary {
  color: var(--dgb-primary) !important;
}

.border-primary {
  border-color: var(--dgb-primary) !important;
}

/* ---------- Header / nav (classic global-header is white+blue by default) ---------- */
header,
header.global-header,
.navbar,
.global-header,
.header-global,
.wrapper-header,
.nav-wrapper,
.window-header,
.global-header .main-header {
  background: var(--dgb-primary) !important;
  background-color: var(--dgb-primary) !important;
  border-color: var(--dgb-primary) !important;
  border-bottom-color: var(--dgb-primary-hover) !important;
  box-shadow: none !important;
}

.global-header {
  border-bottom: 3px solid var(--dgb-primary-hover) !important;
}

.nav-wrapper a,
.header-global .nav-global a,
.header-global a,
.global-header a,
.global-header .nav-links a,
.global-header .nav-links .nav-item a,
.global-header .nav-links .main .nav-tab a,
.navbar a,
.wrapper-header a,
.nav-global li a {
  color: #fff !important;
}

.global-header .nav-links .main .nav-tab a:hover,
.global-header .nav-links .nav-item a:hover {
  color: #fff !important;
  border-bottom-color: var(--dgb-accent) !important;
}

.global-header .hamburger-menu .line {
  background: #fff !important;
}

.header-logo .logo,
.global-header .logo,
.navbar-brand img,
.header-global .logo,
.global-header .header-logo .logo {
  max-height: 40px;
}

/* Auth CTAs in header: white outline register + solid hover-teal sign-in */
.global-header .nav-links .secondary .register-btn,
.global-header a.register-btn,
a.register-btn.btn {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

.global-header .nav-links .secondary .sign-in-btn,
.global-header a.sign-in-btn,
a.sign-in-btn.btn {
  background: var(--dgb-primary-hover) !important;
  background-color: var(--dgb-primary-hover) !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}

.global-header .nav-links .secondary .register-btn:hover,
.global-header a.register-btn:hover,
.global-header .nav-links .secondary .sign-in-btn:hover,
.global-header a.sign-in-btn:hover {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--dgb-primary) !important;
  border-color: #fff !important;
}

/* ---------- Buttons ---------- */
button,
.btn,
.btn-brand,
.btn-primary,
.btn-blue,
.action-primary,
.login-button,
.register-button,
input[type="submit"],
input[type="submit"].btn-brand,
input[type="button"].btn-brand,
.form-actions .action,
.login-register .action-primary,
.login-register button[type="submit"],
.register .action-primary,
#login-form .login-button,
#register-form .register-button,
.course-actions .btn,
.enroll-btn,
.btn-enroll,
.btn-go-to-course {
  background: var(--dgb-primary) !important;
  background-color: var(--dgb-primary) !important;
  background-image: none !important;
  border-color: var(--dgb-primary) !important;
  color: var(--dgb-primary-contrast) !important;
  font-family: var(--dgb-font);
  box-shadow: none !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-brand:hover,
.btn-blue:hover,
.action-primary:hover,
.login-button:hover,
.register-button:hover,
input[type="submit"]:hover {
  background: var(--dgb-primary-hover) !important;
  background-color: var(--dgb-primary-hover) !important;
  border-color: var(--dgb-primary-hover) !important;
  color: var(--dgb-primary-contrast) !important;
}

.btn-secondary,
.btn-neutral,
.action-secondary,
.btn-default {
  background: var(--dgb-secondary) !important;
  background-color: var(--dgb-secondary) !important;
  border-color: var(--dgb-secondary) !important;
  color: #fff !important;
}

.badge,
.badge-accent,
.status-badge,
.highlight,
.tag-accent,
.course-status,
.label-accent {
  background: var(--dgb-accent) !important;
  color: var(--dgb-text) !important;
  border-color: var(--dgb-accent) !important;
}

.btn-accent,
.cta-accent {
  background: var(--dgb-accent) !important;
  border-color: var(--dgb-accent) !important;
  color: var(--dgb-text) !important;
}

/* ---------- Homepage hero / marketing banner / search ---------- */
.marketing-hero {
  background: var(--dgb-primary) !important;
}

.home > header,
.home>header,
section.home > header,
section.home>header,
.home > header .outer-wrapper,
.home>header .outer-wrapper {
  background: var(--dgb-primary) !important;
  background-color: var(--dgb-primary) !important;
  background-image: linear-gradient(180deg, #0d7a7a 0%, #0a5f5f 100%) !important;
  box-shadow: none !important;
  border: none !important;
}

.home > header .title,
.home>header .title,
.home > header .title .heading-group,
.home>header .title .heading-group {
  background: var(--dgb-surface) !important;
  color: var(--dgb-text) !important;
  border-color: var(--dgb-border) !important;
  box-shadow: 0 8px 24px rgba(13, 122, 122, 0.18) !important;
}

.home > header .title .heading-group h1,
.home>header .title .heading-group h1,
.home > header .title h1,
.home>header .title h1 {
  color: var(--dgb-primary) !important;
}

.home > header .title .heading-group p,
.home>header .title .heading-group p {
  color: var(--dgb-muted) !important;
}

.home .search-button,
button.search-button,
.course-search .search-button,
.home>header .title .course-search .search-button {
  background: var(--dgb-primary) !important;
  background-color: var(--dgb-primary) !important;
  border-color: var(--dgb-primary) !important;
  color: #fff !important;
}

.home .search-button:hover,
button.search-button:hover {
  background: var(--dgb-primary-hover) !important;
  border-color: var(--dgb-primary-hover) !important;
}

.home .search-input,
.course-search .search-input {
  border-color: var(--dgb-border) !important;
}

.home .search-input:focus,
.course-search .search-input:focus {
  border-color: var(--dgb-primary) !important;
  outline-color: var(--dgb-primary) !important;
  box-shadow: 0 0 0 2px rgba(13, 122, 122, 0.25) !important;
}

/* ---------- Course cards / find-courses listing ---------- */
.courses-listing .course,
.courses-listing-item .course,
article.course,
.find-courses .courses-listing .course,
.courses-container .courses .course,
.discovery-card {
  background: var(--dgb-surface) !important;
  border: 1px solid var(--dgb-border) !important;
  border-top: 4px solid var(--dgb-primary) !important;
  border-radius: 8px;
  color: var(--dgb-text);
}

article.course .course-title,
.courses-listing .course .course-title,
.course-info .course-title,
.course-name .course-title,
article.course h2,
article.course h2 span,
.courses-listing .course .course-name,
.courses-listing .course a,
article.course a {
  color: var(--dgb-primary) !important;
}

.cover-image .learn-more,
.course .learn-more,
article.course .learn-more {
  background: var(--dgb-primary) !important;
  background-color: var(--dgb-primary) !important;
  color: #fff !important;
}

.find-courses,
.courses-container,
.discovery-search,
.find-courses .wrapper-search-context,
.find-courses .discovery-input,
.find-courses .search-facets {
  border-color: var(--dgb-border);
}

.find-courses .discovery-submit,
.find-courses button[type="submit"],
.courses-container .discovery-submit {
  background: var(--dgb-primary) !important;
  border-color: var(--dgb-primary) !important;
  color: #fff !important;
}

/* ---------- Course about / dashboard widgets ---------- */
.dgb-about,
.course-about,
.course-info,
#course-about,
.about.course,
.courseware-results-wrapper .course-about,
.course-info header.course-profile,
.course-info .details,
.course-info .hero,
.dashboard-listings .course,
.wrapper-course-card,
.content-wrapper .wrapper-course-details,
.sidebar,
.course-sidebar,
.wrapper-preview-menu,
.wrapper-course-modes,
.card {
  background: var(--dgb-surface) !important;
  border-color: var(--dgb-border) !important;
  color: var(--dgb-text) !important;
}

.course-about .hero,
.course-info header.course-profile,
.course-info .intro-inner-wrapper,
.card-header,
.course-info .intro,
.wrapper-course-intro {
  background: linear-gradient(180deg, var(--dgb-surface-muted) 0%, var(--dgb-surface) 100%) !important;
  border-bottom: 1px solid var(--dgb-border) !important;
  box-shadow: none !important;
}

.course-about a,
.course-info a,
.dgb-about a,
.dashboard a {
  color: var(--dgb-primary) !important;
}

.course-about .btn,
.course-info .btn,
.course-about .register,
.course-info .register,
.course-info .register a,
a.register {
  background: var(--dgb-primary) !important;
  border-color: var(--dgb-primary) !important;
  color: var(--dgb-primary-contrast) !important;
}

.dashboard .main-container,
.dashboard .wrapper-course-details,
.dashboard .course-item,
.wrapper-preview-menu .preview-menu {
  border-color: var(--dgb-border);
}

/* ---------- Login / register surfaces (classic; MFE /login still indigo) ---------- */
.login-register,
.login-register-content,
.login-form,
.register-form,
.view-register,
.view-login,
.section-account,
#login,
#register,
.wrapper-login,
.wrapper-register,
.login-register .form-wrapper,
#login-and-registration-container,
section.login-register,
.view-signin,
.login,
.register {
  background: var(--dgb-surface) !important;
  color: var(--dgb-text);
  border-color: var(--dgb-border);
  --primary: #0d7a7a !important;
  --primary-hover: #0a5f5f !important;
}

.login-register input[type="text"],
.login-register input[type="email"],
.login-register input[type="password"],
.login-register select,
.login-register textarea,
.form-field input,
.form-field select {
  border-color: var(--dgb-border) !important;
  color: var(--dgb-text);
}

.login-register a,
.login-register .nav-item,
.form-toggle,
.login-form a,
.register-form a,
.view-signin a,
.view-register a {
  color: var(--dgb-primary) !important;
}

.login-register .focus,
.login-register input:focus,
.form-field input:focus,
.login-register select:focus,
.login-register textarea:focus,
#login-form input:focus,
#register-form input:focus {
  border-color: var(--dgb-primary) !important;
  outline-color: var(--dgb-primary) !important;
  box-shadow: 0 0 0 2px rgba(13, 122, 122, 0.25) !important;
}

.login-register button.action,
.login-register button[type="submit"],
.login-register .action-primary,
.login-register .login-button,
.login-register .register-button,
.login-register .btn-brand,
.login-register .btn-primary,
.login-register a.btn-brand,
.login-register a.btn-primary,
#login-form .action,
#register-form .action,
#login-form button[type="submit"],
#register-form button[type="submit"],
.form-actions button.action-primary,
.form-actions .action-primary,
button.login-button,
button.register-button,
.login .login-button,
.register .register-button,
.action.action-primary,
.login-register .form-field button {
  background-color: #0d7a7a !important;
  background-image: none !important;
  border-color: #0d7a7a !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.login-register button.action:hover,
.login-register button[type="submit"]:hover,
.login-register .action-primary:hover,
.login-register .btn-brand:hover,
.login-register .btn-primary:hover,
.btn-brand:hover,
.btn-primary:hover,
.action.action-primary:hover,
.form-actions button.action-primary:hover {
  background-color: #0a5f5f !important;
  border-color: #0a5f5f !important;
  color: #FFFFFF !important;
}

.login-register,
.login-register * {
  --pgn-color-primary-base: #0d7a7a;
  --pgn-color-primary-500: #0d7a7a;
  --pgn-color-primary-700: #0a5f5f;
}

/* ---------- Alerts ---------- */
.alert,
.status,
.message,
.notification,
.feedback-message {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
}

.alert-success,
.status.success,
.message.success,
.confirmation-message {
  background: #e8f5eb !important;
  border-color: var(--dgb-success) !important;
  color: var(--dgb-success) !important;
}

.alert-warning,
.status.warning,
.message.warning {
  background: #fff8e6 !important;
  border-color: var(--dgb-warning) !important;
  color: var(--dgb-warning) !important;
}

.alert-error,
.alert-danger,
.status.error,
.message.error,
.error-message,
.is-error,
.submission-error {
  background: #fdecea !important;
  border-color: var(--dgb-danger) !important;
  color: var(--dgb-danger) !important;
}

.alert-info,
.status.info,
.message.info {
  background: #e6f4f4 !important;
  border-color: var(--dgb-primary) !important;
  color: var(--dgb-primary) !important;
}

/* ---------- Footer ---------- */
footer,
.wrapper-footer,
.dgb-footer {
  background: var(--dgb-surface) !important;
  border-top: 1px solid var(--dgb-border) !important;
  color: var(--dgb-muted) !important;
  padding: 1.5rem;
  text-align: center;
}

footer a,
.dgb-footer a,
.wrapper-footer a {
  color: var(--dgb-primary) !important;
}

/* ---------- Focus rings ---------- */
:focus,
:focus-visible {
  outline: 2px solid var(--dgb-primary);
  outline-offset: 2px;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-color: var(--dgb-primary) !important;
}

/* ---------- Hide powered-by / Open edX marketing chrome (learner) ---------- */
.powered-area,
.wrapper-footer .powered-area,
.logo-list,
footer .logo-list,
#footer .powered-area,
a[href*="open.edx.org"],
a[href*="edx.org/"] img,
img[src*="openedx-logo"],
img[src*="tutor-logo"],
img[alt*="Open edX"],
img[alt*="Runs on Tutor"] {
  display: none !important;
}

/* ---------- Studio / CMS classic chrome extras ---------- */
.wrapper-mast,
.wrapper-header.wrapper-header-course,
.view-dashboard .wrapper-mast,
.nav-dd .title,
.nav-course .title,
.wrapper-mast .mast,
.content-primary .wrapper-mast {
  background: var(--dgb-primary) !important;
  border-color: var(--dgb-primary) !important;
}

.wrapper-mast a,
.wrapper-header a,
.nav-account a,
.nav-course a {
  color: #fff !important;
}

.view-dashboard .content-primary,
.wrapper-content,
.content-primary,
.content-secondary {
  background: var(--dgb-background) !important;
}

.wrapper-content .content-primary .wrapper-xblock,
.course-outline,
.subsection-list,
.unit-list,
.xblock-header {
  background: var(--dgb-surface) !important;
  border-color: var(--dgb-border) !important;
}

.action-button,
.button.action-primary,
.nav-actions .button,
.wrapper-actions .action-primary,
.view-dashboard .button.action-primary,
.view-outline .button.action-primary {
  background: var(--dgb-primary) !important;
  border-color: var(--dgb-primary) !important;
  color: var(--dgb-primary-contrast) !important;
}

body.view-dashboard .wrapper-mast,
body.view-outline .wrapper-mast,
body.view-unit .wrapper-mast,
.wrapper-comp-settings .action-primary {
  background: var(--dgb-primary) !important;
}

/* ---------- DGB about / unit chrome (teal-friendly; 2026-09-15 strengthen) ---------- */
.dgb-about,
section.dgb-about {
  display: block !important;
  background: var(--dgb-surface) !important;
  border: 1px solid var(--dgb-border) !important;
  border-left: 4px solid var(--dgb-primary) !important;
  border-radius: 8px !important;
  padding: 1.1rem 1.25rem !important;
  margin: 1rem 0 1.5rem !important;
  color: var(--dgb-text) !important;
  box-shadow: none !important;
}

.dgb-about p,
.dgb-about li {
  color: var(--dgb-text) !important;
  line-height: 1.55;
}

.dgb-about strong {
  color: var(--dgb-primary) !important;
}

.dgb-about em,
.dgb-about .dgb-about__note {
  color: var(--dgb-muted) !important;
}

.dgb-about__header,
.dgb-about h2,
.dgb-about h3 {
  color: var(--dgb-primary) !important;
  margin-top: 0 !important;
}

.dgb-unit,
div.dgb-unit {
  background: var(--dgb-surface) !important;
  border: 1px solid var(--dgb-border) !important;
  border-top: 3px solid var(--dgb-primary) !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
  margin: 0.75rem 0 !important;
}

.dgb-unit h2,
.dgb-unit h3 {
  color: var(--dgb-primary) !important;
}

.dgb-unit ul {
  margin: 0.5rem 0 0.75rem 1.25rem;
}

.course-info .details .dgb-about,
.course-info .about .dgb-about,
#course-about .dgb-about {
  max-width: 52rem;
}