/*
 * mobile.css
 * Mobile navigation and bottom menu styles for Perfect English Child Theme
 * Uses 'btd-' prefix for all custom classes to avoid conflicts
 * Uses parent theme CSS variables for colors, fonts, etc.
 */

.btd-mobile-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--edublink-color-primary, #0ecd73);
  color: var(--edublink-color-white, #fff);
  padding: 12px 16px;
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 1000;
  border-radius: var(--edublink-radius-big, 24px)
    var(--edublink-radius-big, 24px) 0 0;
  box-shadow: var(--edublink-shadow-darker2, 0 4px 24px rgba(0, 0, 0, 0.13));
}

.btd-mobile-nav .btd-mobile-nav-link {
  color: var(--edublink-color-white, #fff);
  font-size: var(--edublink-h6, 1rem);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--edublink-radius-small, 8px);
  transition: background var(--edublink-transition, 0.3s);
}

.btd-mobile-nav .btd-mobile-nav-link.active,
.btd-mobile-nav .btd-mobile-nav-link:hover {
  background: var(--edublink-color-primary-alt, #ffb212);
  color: var(--edublink-color-dark, #222);
}

@media (min-width: 900px) {
  .btd-mobile-nav {
    display: none;
  }
}

/* Add more mobile styles as needed */