/* ==========================================================================
   mobile-app.css — app-like presentation for viewports under 768px
   --------------------------------------------------------------------------
   Everything here is inside @media (max-width:767px), so desktop is untouched.

   Specificity note: Tailwind utilities are single classes (0,1,0). Element-only
   selectors LOSE to them. Every override below is anchored on #main-content,
   .hrt-mobnav or .site-header so it wins on specificity (1,0,x) and no
   !important is needed anywhere in this file.

   Brand: amber #FFAD00, navy #05164D.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------- 1. Bottom nav clearance -------------------------------------
     The fixed nav is 62px + the iOS home-bar inset. Content and footer must
     clear it or the last element sits under the bar permanently. */
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }

  /* Rita's launcher is position:fixed bottom:16px right:16px (chatbot.min.css).
     Without this it lands on top of the nav. Raised, not moved, so the thumb
     still finds it in the usual corner. chatbot.min.css is a build artefact —
     overriding here rather than editing it, so a rebuild cannot undo this. */
  .cb-bubble {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    width: 52px;
    height: 52px;
  }

  /* ---------- 2. App-like header ------------------------------------------
     Compact and sticky, so vertical space goes to content the way it does in
     a native app. The desktop "Build Your Team" pill is dropped here because
     the bottom nav carries that action — two of them is clutter. */
  .site-header .hrt-header-inner {
    height: 56px;
    min-height: 56px;
  }
  .site-header .hrt-desktop-cta {
    display: none;
  }
  .site-header .hrt-logo-mark {
    width: 32px;
    height: 32px;
  }
  .site-header .hrt-logo-text {
    font-size: 1rem;
  }

  /* ---------- 3. Section rhythm -------------------------------------------
     py-20 (5rem top and bottom) reads as a desktop web page. Apps use a
     tighter, more consistent vertical beat. */
  #main-content section {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* The amber stat strip and the breadcrumb are deliberately thin bars. */
  #main-content nav.bg-gray-50 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  #main-content section.py-5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
  #main-content section.py-10 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  /* ---------- 4. Type scale ----------------------------------------------
     Desktop heading sizes overflow and force awkward wrapping at 375px. */
  #main-content h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
  }
  #main-content h2 {
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #main-content h3 {
    font-size: 1.0625rem;
    line-height: 1.3;
  }
  #main-content .hero-gradient p,
  #main-content section > div > p {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* ---------- 5. Hero ----------------------------------------------------- */
  #main-content .hero-gradient {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
  }
  #main-content .hero-gradient .grid {
    gap: 1.5rem;
  }

  /* ---------- 6. Grids and cards -----------------------------------------
     Cards are the primary mobile surface, so they get app-card treatment:
     less inner padding, tighter gaps, softer separation. */
  #main-content .grid {
    gap: 0.875rem;
  }
  #main-content section .rounded-xl,
  #main-content section .rounded-2xl {
    padding: 1.125rem;
    border-radius: 0.875rem;
  }
  #main-content section .rounded-xl.p-8,
  #main-content section .rounded-2xl.p-8 {
    padding: 1.25rem;
  }

  /* ---------- 7. Skill chips ---------------------------------------------
     Some pages carry 60+ chips. At desktop sizing that is a wall of pills
     several screens tall. Smaller pills keep the block scannable. */
  #main-content .flex.flex-wrap.gap-3 > span,
  #main-content .flex.flex-wrap.justify-center.gap-3 > span {
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
    border-width: 1px;
  }
  #main-content .flex.flex-wrap.justify-center.gap-3 {
    gap: 0.375rem;
  }

  /* ---------- 8. Tables --------------------------------------------------
     Already wrapped in .overflow-x-auto by the page templates. Add momentum
     scrolling and a snap so a swipe lands on a column edge, not mid-cell. */
  #main-content .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border-radius: 0.75rem;
  }
  #main-content .overflow-x-auto table th,
  #main-content .overflow-x-auto table td {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    scroll-snap-align: start;
  }

  /* ---------- 9. Buttons -------------------------------------------------
     44px minimum touch target, and full-width primary actions the way a
     native form sheet presents them. */
  #main-content button,
  #main-content a[style*="padding:1rem"] {
    min-height: 44px;
  }
  #main-content .hero-gradient .flex.flex-wrap.gap-4 > button,
  #main-content .hero-gradient .flex.flex-wrap.gap-4 > a {
    width: 100%;
    text-align: center;
  }

  /* ---------- 10. FAQ accordions ----------------------------------------- */
  #main-content [x-data] button {
    padding: 0.875rem 1rem;
  }
  #main-content [x-data] button span {
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  /* ---------- 11. Desktop footer ----------------------------------------
     Kept, but compressed. The bottom nav handles wayfinding now, so the
     footer is reference material rather than the primary navigation. */
  .site-footer .grid {
    gap: 1.5rem;
  }
  .site-footer {
    padding-bottom: 0.5rem;
  }
}

/* ==========================================================================
   Mobile bottom navigation — hidden at 768px and up
   ========================================================================== */

.hrt-mobnav {
  display: none;
}

@media (max-width: 767px) {

  .hrt-mobnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990; /* below Rita's launcher (9998), above page content */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    background: #ffffff;
    border-top: 1px solid #e8eaf0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 14px rgba(5, 22, 77, 0.07);
  }

  .hrt-mobnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 62px;
    padding: 8px 2px 7px;
    color: #7c8395;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .hrt-mobnav__item svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.9;
  }

  /* Active tab: navy, with a short amber rule above it. The indicator carries
     real information (which section you are in), it is not decoration. */
  .hrt-mobnav__item[aria-current="page"] {
    color: #05164D;
  }
  .hrt-mobnav__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    width: 26px;
    height: 2.5px;
    border-radius: 0 0 3px 3px;
    background: #FFAD00;
  }
  .hrt-mobnav__item {
    position: relative;
  }

  /* The centre action is the only lead-capture channel on the site, so it is
     the one place the nav raises its voice. Everything else stays quiet. */
  .hrt-mobnav__item--primary {
    color: #05164D;
  }
  .hrt-mobnav__chat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -16px;
    margin-bottom: 1px;
    border-radius: 50%;
    background: #FFAD00;
    color: #05164D;
    box-shadow: 0 3px 10px rgba(255, 173, 0, 0.42);
  }
  .hrt-mobnav__chat svg {
    width: 23px;
    height: 23px;
    stroke-width: 2;
  }

  /* Keyboard and switch-control users need to see focus. */
  .hrt-mobnav__item:focus-visible {
    outline: 2px solid #006EFF;
    outline-offset: -3px;
    border-radius: 6px;
  }

  .hrt-mobnav__item:active {
    background: #f6f7fa;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hrt-mobnav__item,
    .hrt-mobnav__chat {
      transition: color 140ms ease, background-color 140ms ease;
    }
  }
}