/* =========================
   MyPracticeExams Theme
   mpe.css
   ========================= */

:root {
  --mpe-navy: #0b2a4a;
  --mpe-teal: #1aa3b0;
  --mpe-gold: #f2b705;
  --mpe-light: #f8f9fb;
}

/* Global */
html,
body {
  height: 100%;
}

body {
  background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);
  margin: 0;
}

/* Only marketing pages use flex layout */
body:not(.exams-page) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content wrapper */
.site-main {
  flex: 1;
}

/* Header */
header {
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

.logo {
  max-width: 420px;
}

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

/* Badges */
.badge-soft {
  background: rgba(26,163,176,0.12);
  color: var(--mpe-teal);
  font-weight: 500;
}

/* Topic Cards */
.topic-card {
  border: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: transform 0.2s ease;
}

.topic-card:hover {
  transform: translateY(-4px);
}

/* Navbar */
.navbar-brand img {
  height: 44px;     /* fixed to prevent layout shift */
  width: auto;
}

.nav-link {
  color: var(--mpe-navy);
  font-weight: 500;
}

.nav-link:hover {
  color: var(--mpe-teal);
}

.navbar-light .navbar-toggler {
  border-color: rgba(0,0,0,0.1);
}

/* Buttons */
.mpe-btn-primary {
  background: linear-gradient(
    135deg,
    var(--mpe-teal),
    var(--mpe-navy)
  );
  border: none;
  color: #fff;
  padding: 0.45rem 0.9rem;
  font-weight: 500;
}

.mpe-btn-primary:hover {
  opacity: 0.92;
}

/* =========================
   Topic Cards – Stronger Teal Accent
   ========================= */

.topic-card {
  border: 1px solid rgba(11,42,74,0.12); /* subtle navy base */
  border-top: 4px solid var(--mpe-teal); /* visible brand accent */
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.topic-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(26,163,176,0.22);
}


/* =========================
   Teal Action Button
   ========================= */

.mpe-btn {
  border: 2px solid var(--mpe-teal);
  color: var(--mpe-teal);
  background: transparent;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  transition: all .2s ease;
}

.mpe-btn:hover {
  background: var(--mpe-teal);
  color: #fff;
}

/* visually disabled (not Bootstrap disabled) */
.mpe-btn.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Trust Strip */
.mpe-trust-strip {
  background: linear-gradient(
    180deg,
    rgba(26,163,176,0.08),
    rgba(26,163,176,0.02)
  );
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
  padding: 1rem 0;
}

.mpe-trust-strip .trust-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 500;
  color: var(--mpe-navy);
  white-space: nowrap;
}

.mpe-trust-strip .trust-item i {
  color: var(--mpe-teal);
  font-size: 1rem;
}

/* =========================
   Topic Card Action Button
   ========================= */

.mpe-btn {
  background-color: var(--mpe-teal);
  color: #fff;
  border: 2px solid var(--mpe-teal);
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.mpe-btn:hover {
  background-color: transparent;
  color: var(--mpe-teal);
}

/* Mortarboard icon styling */
.mpe-btn i {
  font-size: 0.95rem;
  line-height: 1;
}

.mpe-how-it-works {
  background: linear-gradient(
    180deg,
    rgba(26,163,176,0.04),
    rgba(26,163,176,0.00)
  );
}

/* =========================
   Topic Card Button Fix
   ========================= */

.topic-card .mpe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: 0.55rem 1rem;

  background-color: #1aa3a8; /* teal */
  color: #fff;

  border: 2px solid transparent;
  border-radius: 0.5rem;

  font-size: 0.85rem;
  font-weight: 500;

  transition: 
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hover state */
.topic-card .mpe-btn:hover {
  background-color: #ffffff;
  color: #1aa3a8;

  border-color: #1aa3a8;
  box-shadow: 0 6px 18px rgba(26, 163, 168, 0.25);
}

/* Prevent Bootstrap overrides */
.topic-card .btn-sm {
  line-height: 1.2;
}

/* Ensure spacing from image */
.topic-card img {
  margin-bottom: 0.75rem;
}

/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */
#backToTop{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:1050;
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background:#0b2a4a;
  color:#fff;
  font-size:1.25rem;
  display:none;              /* hidden until scroll */
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  cursor:pointer;
  transition:opacity .25s, transform .25s;
}

#backToTop:hover{
  background:#1aa3b0;
  transform:translateY(-2px);
}

/* Available Practice Exams – outline by default, fill on hover */
.exam-btn {
  background: transparent !important;
  color: #1fa3a6 !important;          /* your teal */
  border: 1px solid #1fa3a6 !important;

  width: 100%;
  max-width: 230px;
  margin-bottom: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover = filled */
.exam-btn:hover {
  background: #1fa3a6 !important;
  color: #ffffff !important;
}

/* Scroll container (keep this stable) */
.exam-list-scroll {
  max-height: 1250px;
  overflow-y: auto;
  background: #ffffff;
  padding: 12px 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.mpe-scroll-banner {
  overflow: hidden;
  white-space: nowrap;
  width: 890px; /* adjust width */
  font-size: 1.50rem;
  color: #1aa3b0;
  font-weight: 500;
  position: relative;
}

.mpe-scroll-text {
  display: inline-block;
  padding-left: 100%;
  animation: mpeScroll 18s linear infinite;
}

@keyframes mpeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Footer */
.mpe-footer {
  background: linear-gradient(135deg, #0b2a4a, #071a2e);
  color: #ffffff;
}

.footer-link {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.footer-link:hover {
  color: #1aa3b0;
  text-decoration: underline;
}

/* BIG mortarboard */
.footer-mortarboard {
  font-size: 5rem;
  color: rgba(255,255,255,0.12);
  display: block;
  margin-bottom: 10px;
}

/* Back to Top */
#backToTop {
  position: fixed;
  bottom: 60px;
  right: 20px;
  display: none;
  background: #1aa3b0;
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9998;
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(11,42,74,0.95);
  color: white;
  padding: 12px 0;
  z-index: 9999;
  display: none;
}

/* FORCE FOOTER COLORS (override Bootstrap + theme leaks) */
footer.mpe-footer,
footer .mpe-footer,
.mpe-footer,
.mpe-footer * {
  color: #ffffff !important;
}