/*
  App-like mobile navigation for the marketing site. Loaded after
  custom.css (see (site)/layout.tsx) so it can override the ~991px
  slicknav breakpoint without editing that vendor file directly.
*/

.mobile-tab-bar {
  display: none;
}

.mobile-home-hero {
  display: none;
}

.mobile-header-cta {
  display: none;
}

/* Hidden everywhere — web and mobile — not just below the 991px breakpoint. */
.our-team {
  display: none !important;
}

@media (max-width: 991px) {
  /* Compact app-toolbar logo — the desktop 112px wordmark is oversized
     once the nav lives in the bottom tab bar instead of next to it. Sized
     up slightly from an earlier smaller pass for more brand presence. */
  .navbar-brand img {
    height: 56px !important;
  }

  .mobile-header-cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background-image: linear-gradient(263deg, var(--accent-color) 0.16%, var(--dark-color) 99.84%);
    color: var(--white-color);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize;
  }

  /* Suppress slicknav's hamburger + drawer (custom.css:4866-4869 sets
     these to display:block at this breakpoint) — replaced by the tab bar
     below. This file loads after custom.css so the override already wins
     on source order; !important kept as a deliberate, documented
     override of vendor CSS, not a fix for a specificity fight. */
  .navbar-toggle,
  .responsive-menu {
    display: none !important;
  }

  /* Room for the fixed tab bar so the footer isn't covered by it. */
  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* BackToTop already exists (custom.css:6845, 6878) — lift it above the
     new tab bar across the whole mobile range. */
  .back-to-top-btn {
    bottom: calc(84px + 16px + env(safe-area-inset-bottom)) !important;
  }

  /* custom.css:6473 sets padding:100px 0 with no mobile override anywhere
     in that file — every other section drops to 50px 0 at this breakpoint,
     this one was just never given the same treatment. Was always there;
     more noticeable now that a shorter mobile-home-hero replaces the tall
     photo hero above it. */
  .who-we-are {
    padding: 40px 0;
  }

  .mobile-tab-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 1000;
    display: flex;
    padding: 6px;
    background: rgba(26, 14, 4, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(26, 14, 4, 0.25);
    backdrop-filter: blur(18px);
  }

  .mobile-tab-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 2px 7px;
    border-radius: 16px;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    position: relative;
  }

  .mobile-tab-item svg {
    display: grid;
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
  }

  .mobile-tab-item.active {
    background: var(--white-color);
    color: var(--primary-color);
  }

  .mobile-tab-item.active svg {
    color: var(--dark-color);
    stroke-width: 2.35;
  }

  /* Mobile home — replaces the full-bleed desktop hero below this
     breakpoint. Desktop hero markup is untouched, just hidden here. */
  .hero.bg-section.parallaxie {
    display: none;
  }

  .mobile-home-hero {
    display: block;
    padding: 16px 0 8px;
  }

  .mhh-search-wrap {
    position: relative;
    margin-bottom: 16px;
  }

  .mhh-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    color: var(--text-color);
    font-size: 14px;
  }

  .mhh-search i {
    color: var(--dark-color);
  }

  .mhh-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--primary-color);
  }

  .mhh-search input::placeholder {
    color: var(--text-color);
  }

  .mhh-search-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    box-shadow: 0 16px 32px -12px rgba(26, 14, 4, 0.2);
    overflow: hidden;
  }

  .mhh-search-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider-color);
    color: var(--primary-color);
  }

  .mhh-search-item:last-child {
    border-bottom: none;
  }

  .mhh-search-item:active {
    background: var(--secondary-color);
  }

  .mhh-search-item-name {
    font-size: 14px;
    font-weight: 700;
  }

  .mhh-search-item-meta {
    font-size: 12px;
    color: var(--text-color);
  }

  .mhh-search-empty {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-color);
  }

  .mhh-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 20px;
    scrollbar-width: none;
  }

  .mhh-pills::-webkit-scrollbar {
    display: none;
  }

  .mhh-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
  }

  .mhh-pill i {
    color: var(--dark-color);
    font-size: 12px;
  }

  .mhh-promo {
    position: relative;
    overflow: hidden;
    padding: 24px 20px;
    margin-bottom: 24px;
    border-radius: 20px;
    /* Cover photo (same one the desktop hero uses) with the brand gradient
       as a tint on top — keeps the gold/orange identity while showing the
       photo through it, and keeps white text legible. */
    background-image: linear-gradient(263deg, rgba(232, 185, 35, 0.88) 0.16%, rgba(192, 79, 7, 0.88) 99.84%), url("/images/hero-bg.jpg");
    background-size: cover;
    background-position: center;
  }

  .mhh-promo-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--white-color);
    opacity: 0.85;
    margin-bottom: 8px;
  }

  .mhh-promo-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--white-color);
    margin-bottom: 18px;
  }

  .mhh-promo-title span {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 3px;
  }

  .mhh-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--white-color);
    color: var(--primary-color);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 700;
  }

  .mhh-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .mhh-section-head h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-color);
  }

  .mhh-section-head a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark-color);
  }

  .mhh-course-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .mhh-course-row::-webkit-scrollbar {
    display: none;
  }

  .mhh-course-card {
    flex-shrink: 0;
    width: 168px;
    padding: 16px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    color: var(--primary-color);
  }

  .mhh-course-level {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 10px;
    border-radius: 100px;
    background: var(--secondary-color);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--dark-color);
  }

  .mhh-course-card h4 {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 6px;
    min-height: 36px;
  }

  .mhh-course-card p {
    font-size: 12px;
    color: var(--text-color);
    margin-bottom: 10px;
  }

  .mhh-course-price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
  }
}