/**
 * Homepage header: room for the learner entrance beside the signup call to action.
 *
 * The nav previously held one button, and the mobile rules shrink only that one
 * (.nav-link-primary gets smaller padding, a smaller font and nowrap under 768px).
 * The entrance inherits .nav-link-secondary, whose desktop padding made it wrap onto two
 * lines on a phone and pushed the CTA into being truncated.
 *
 * Loaded with wise-learner-link.js and only on the homepage, which is the only page
 * carrying the entrance for now.
 */

/* The entrance carries a 2px border that the filled CTA does not. On identical padding that
   makes it 4px taller — 42px against 38px on desktop — so the pair never sat level at any
   width. Take the border back out of the vertical padding so both resolve to the same
   height; the horizontal padding is left alone so the shapes still match. */
.nav-links [data-wise-learner-link] {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 767px) {
  /* 2rem is a desktop gap; between two buttons on a 320px screen it is most of the room. */
  .nav-links {
    gap: 8px;
  }

  .nav-links [data-wise-learner-link],
  .nav-links .nav-link-primary {
    /* One shared width so the pair reads as a set, and so the row does not shift when the
       entrance relabels itself between "Đăng nhập" and the shorter "Học tiếp". */
    min-width: 96px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-links [data-wise-learner-link] {
    /* A pixel less than the CTA's 9px, to absorb the border this one carries and the other
       does not — otherwise the outlined button stands 2px taller and sits a pixel high. */
    padding: 8px 12px;
    border-width: 1px;
    font-size: 12px;
  }

  /* The CTA had the row to itself at calc(100vw - 124px). Hand back what the entrance
     now occupies so it keeps shortening itself instead of overflowing. */
  .nav-links .nav-link-primary {
    max-width: calc(100vw - 240px) !important;
  }
}

/* On the narrowest phones still in use, 96px each leaves only a few pixels over. Trim both
   together so the pair stays matched while the row keeps a usable margin — a device whose
   font renders a touch wider than this one must not push a button off the screen. */
@media (max-width: 359px) {
  .nav-links [data-wise-learner-link],
  .nav-links .nav-link-primary {
    min-width: 88px;
  }

  .nav-links [data-wise-learner-link] {
    padding-left: 10px;
    padding-right: 10px;
  }
}