.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

.footer-region-select {
  cursor: pointer;
}

#auth-menu {
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 0.5rem;
}

@media (max-width: 991.98px) {
  #upgrade-btn {
    display: none;
  }
}

@media (min-width: 992px) {
  .navbar>.container {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 3rem;
    width: 100%;
    max-width: none;
  }

  #navbarNav {
    display: flex;
    justify-content: center;
    flex-grow: 0;
    flex-basis: auto;
    min-width: 0;
  }

  #navbarNav .navbar-nav {
    flex-wrap: nowrap;
  }

  #navbarNav .nav-link {
    white-space: nowrap;
  }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    display: none;
  }

  .navbar-collapse.show {
    display: block;
  }
}

:root {
  --bs-primary: #42c4e3;
  --bs-secondary: #ffc107;
  --bs-tertiary: #849bff;
  --nav-color: #3a3939;
}

/* All navbar links use primary color */
.navbar .nav-link {
  color: var(--nav-color) !important;
}

/* Active nav-link (including active page) uses secondary color */
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link.show {
  color: var(--bs-secondary) !important;
}

/* Dropdown background uses secondary color */
.navbar .dropdown-menu {
  background-color: #fff !important;
}

/* Dropdown items default text color: white for contrast */
.navbar .dropdown-menu .dropdown-item {
  color: #000 !important;
}

/* Active dropdown item: use primary color as background */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Optional: hover effect for dropdown items */
.navbar .dropdown-menu .dropdown-item:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Submenu flyout (side dropdown) */
.dropdown-submenu {
  position: relative;
}

/* Active submenu group trigger: same primary bg as leaf items */
.navbar .dropdown-menu .dropdown-submenu>a.dropdown-item.active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 1px;
  border-radius: 0 0.375rem 0.375rem 0.375rem;
}

/* Right-arrow indicator on submenu trigger */
.dropdown-submenu>a.dropdown-toggle::after {
  display: inline-block;
  content: "";
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid currentColor;
  border-right: 0;
  margin-left: 0.5em;
  vertical-align: middle;
}

/* On mobile, sub-menu drops below instead of to the side */
@media (max-width: 991.98px) {
  .dropdown-submenu>.dropdown-menu {
    top: 100%;
    left: 0;
    margin-left: 0;
    border-radius: 0 0 0.375rem 0.375rem;
  }
}

.nav-container {
  max-width: 900px;
  /* adjust width as needed */
  margin: 0 auto;
}

.navbar {
  --bs-navbar-padding-y: 0rem;
  /* NO space between 0 and rem */
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-tertiary {
  background-color: var(--bs-tertiary) !important;
}

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

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

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-hover-secondary:hover {
  color: var(--bs-secondary) !important;
}

.text-tertiary {
  color: var(--bs-tertiary) !important;
}

.text-hover-tertiary:hover {
  color: var(--bs-tertiary) !important;
}

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-secondary:hover {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-tertiary {
  background-color: var(--bs-tertiary) !important;
  border-color: var(--bs-tertiary) !important;
}

.btn-tertiary:hover {
  background-color: var(--bs-tertiary) !important;
  border-color: var(--bs-tertiary) !important;
}

.btn-success {
  background-color: #198754 !important;
  border-color: #198754 !important;
}

.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: #fff !important;
}

.btn-outline-tertiary {
  color: var(--bs-tertiary) !important;
  border-color: var(--bs-tertiary) !important;
}

.btn-outline-tertiary:hover {
  background-color: var(--bs-tertiary) !important;
  border-color: var(--bs-tertiary) !important;
  color: #fff !important;
}

.shadow-primary {
  box-shadow: 0 0.125rem 0.25rem rgba(66, 196, 227, 0.5) !important;
}

.border-primary {
  border: 2px solid var(--bs-primary) !important;
}

.border-primary-top {
  border-top: 2px solid var(--bs-primary) !important;
}

.border-primary-bottom {
  border-bottom: 2px solid var(--bs-primary) !important;
}

.border-primary-left {
  border-left: 2px solid var(--bs-primary) !important;
}

.border-primary-right {
  border-right: 2px solid var(--bs-primary) !important;
}

.border-secondary {
  border: 2px solid var(--bs-secondary) !important
}

.border-secondary-top {
  border-top: 2px solid var(--bs-secondary) !important;
}

.border-secondary-bottom {
  border-bottom: 2px solid var(--bs-secondary) !important;
}

.border-secondary-left {
  border-left: 2px solid var(--bs-secondary) !important;
}

.border-secondary-right {
  border-right: 2px solid var(--bs-secondary) !important;
}

.border-tertiary {
  border: 2px solid var(--bs-tertiary) !important;
}

.border-tertiary-top {
  border-top: 2px solid var(--bs-tertiary) !important;
}

.border-tertiary-bottom {
  border-bottom: 2px solid var(--bs-tertiary) !important;
}

.border-tertiary-left {
  border-left: 2px solid var(--bs-tertiary) !important;
}

.border-tertiary-right {
  border-right: 2px solid var(--bs-tertiary) !important;
}

p a {
  color: var(--bs-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

p a:hover {
  color: var(--bs-secondary);
}

/* Language select — most option labels are "Language (Native script)" and
   would otherwise stretch the box; truncate the closed-box display with an
   ellipsis instead. The open dropdown list itself is native OS/browser
   chrome and always shows the full, untruncated option text regardless of
   this width, so nothing here makes two languages indistinguishable. */
.lang-select {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover for Subjects Cards */

.hover-lift {
  transition: all 0.2s ease-in-out;
}

.hover-lift:hover {
  transform: translateY(-4px);
  border-color: var(--bs-primary) !important;
  /* Bootstrap Primary */
  background-color: #f8fbff !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
}

.shadow-xs {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.tracking-wider {
  letter-spacing: 0.05em;
}

/* 2. The Skeleton Lines: The visual "bars" injected by JS */
.skeleton-line {
  height: 15px;
  background: #ececec;
  /* Light grey so it's visible on the bg-light background */
  margin-bottom: 10px;
  border-radius: 4px;
  width: 100%;
  /* Default width */
  animation: skeleton-loading 1s linear infinite alternate;
}

/* 3. The Animation: Makes the bars "pulse" so the user knows it's active */
@keyframes skeleton-loading {
  from {
    background-color: #f0f0f0;
  }

  to {
    background-color: #d1d1d1;
  }
}

/* adsense */
.ad-container {
  width: 100%;
  max-width: 100%;
}

/* footer links */
.footer-link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.footer-link:hover {
  color: #ffffff;
}

/* ==========================================================================
   Subject page component library (templates/subjects/_macros.html)
   Shared across every /ai-*-solver/, /*-homework-help/, etc. page so they
   stop drifting apart from each other one edit at a time.
   ========================================================================== */

.trust-strip svg {
  color: var(--bs-primary);
}

.step-card {
  height: 100%;
}

.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--bs-primary);
  color: var(--bs-primary);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.cap-icon,
.assign-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(66, 196, 227, 0.12);
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.assign-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.cap-example {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  background: #f6f8fa;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  display: inline-block;
}

.level-bar {
  height: 5px;
  width: 100%;
}

.level-bar-pri {
  background: var(--bs-primary);
}

.level-bar-sec {
  background: var(--bs-secondary);
}

.level-bar-ter {
  background: var(--bs-tertiary);
}
/* ==========================================================================
   Blog-only additions (blog.aihomeworkhelper.org)
   Everything above is copied verbatim from the main site so the shared
   navbar / footer stay pixel-consistent across both properties.
   ========================================================================== */

/* Skeleton loader container */
#answer-wrapper {
  min-height: 100px;
  display: block;
}

.ad-container {
  min-height: 250px;
}

/* ── Article typography ─────────────────────────────────── */
article h2 {
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.25;
}

article h3 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
}

article h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1.05rem;
}

article p {
  line-height: 1.8;
  font-size: 1.05rem;
  color: #2c2c2c;
}

article ul,
article ol {
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

article ul li,
article ol li {
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
}

article hr {
  margin: 2.5rem 0;
  opacity: 0.15;
}

/* ── Article hero image ─────────────────────────────────── */
.article-hero {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
}

@media (max-width: 767.98px) {
  .article-hero {
    border-radius: 0;
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    width: calc(100% + var(--bs-gutter-x, 1.5rem));
    max-width: none;
  }
}

/* Blog pages use a light-grey ground (see index.html); keep the shared navbar
   on a solid white bar so it reads the same as the main site. */
.navbar {
  background: #fff;
}