/* App overrides for Browse template */

/* Give navbar a light background to ensure readability over dark images */
.site-navbar {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 20px -10px rgba(0,0,0,.5);
  backdrop-filter: saturate(160%) blur(6px);
}

/* Make navbar links dark for visibility on light backgrounds */
.site-navbar .site-navigation .site-menu > li > a {
  color: #222 !important;
}
.site-navbar .site-logo a {
  color: #222 !important;
}
.site-menu-toggle {
  color: #222 !important;
}

/* Keep active/hover states readable */
.site-navbar .site-navigation .site-menu .active > a span,
.site-navbar .site-navigation .site-menu > li > a:hover > span {
  background: #f38181;
  color: #fff !important;
}

/* Language selector styling */
.site-navbar .nav-lang form {
  display: inline-block;
  margin-left: 10px;
}
.site-navbar .nav-lang .lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ddd;
  background: rgba(255,255,255,0.9);
  color: #222;
  border-radius: 20px;
  padding: 4px 28px 4px 12px;
  line-height: 1.2;
}

/* Adaptive contrast on Courses header/filter */
.adaptive-contrast { color: #111; }
.adaptive-contrast .choose-label { color: rgba(0,0,0,.8); }
.adaptive-contrast .btn.btn-outline-primary { border-color: rgba(0,0,0,.35); color: #222; }
.adaptive-contrast .btn.btn-outline-primary.active { background: #f38181; border-color: #f38181; color: #fff; }
.adaptive-contrast.on-dark { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.adaptive-contrast.on-dark .choose-label { color: rgba(255,255,255,.9); }
.adaptive-contrast.on-dark .btn.btn-outline-primary { border-color: rgba(255,255,255,.75); color: #fff; }
.adaptive-contrast.on-dark .btn.btn-outline-primary.active { background: #f38181; border-color: #f38181; color: #fff; }

/* Offset main content to avoid navbar overlap */
main { padding-top: 90px; }
@media (min-width: 992px) {
  main { padding-top: 110px; }
}
@media (max-width: 767.98px) {
  main { padding-top: 80px; }
}

/* Semi-transparent footer like navbar */
.site-footer {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: saturate(160%) blur(6px);
  box-shadow: 0 -4px 20px -10px rgba(0,0,0,.25);
}
.site-footer, .site-footer a {
  color: #222;
}
.site-footer .footer-heading {
  color: #111;
}

/* Footer social icons alignment */
.footer-social {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: #222;
  text-decoration: none;
}
.footer-social .social-icon:hover {
  background: rgba(0, 0, 0, 0.1);
}
.footer-social .social-icon .icon-instagram {
  font-size: 20px;
  line-height: 1;
}
.footer-social .social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Blog feed and article readability */
.blog-feed .card,
.blog-article {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
}
.blog-feed .card-body,
.blog-article .card-body,
.blog-content {
  font-size: 1.125rem; /* ~18px */
  line-height: 1.75;
  color: #222;
}
.blog-content h1,.blog-content h2,.blog-content h3 { margin-top: 1.25em; margin-bottom: .5em; line-height: 1.25; }
.blog-content p { margin: 0 0 1em 0; }
.blog-content ul, .blog-content ol { margin: 0 0 1.25em 1.25em; }
.blog-content li { margin: .25em 0; }
.blog-content blockquote { margin: 1em 0; padding: .75em 1em; background: rgba(0,0,0,.035); border-left: 4px solid #f38181; }
.blog-content pre { background: #2e2e2e; color: #f5f5f5; padding: .75em 1em; border-radius: 6px; overflow-x: auto; }
.blog-content code { background: rgba(0,0,0,.06); padding: .15em .35em; border-radius: 4px; }
.blog-content img { max-width: 100%; height: auto; border-radius: 6px; }
.blog-feed .card-title a { color: #111; text-decoration: none; }
.blog-feed .card-title a:hover { text-decoration: underline; }

/* Increase font size in Courses section */
body.page-courses main { font-size: 1.0625rem; /* ~17px */ }
body.page-courses h2 { font-size: 2rem; }
body.page-courses .lh-content p { font-size: 1.0625rem; }