/* ===========================================================================
   Persistent "Apply Now" navigation CTA
   ---------------------------------------------------------------------------
   The existing site hides .nav-actions .btn-primary on viewports ≤920px.
   This stylesheet overrides that behavior so the Apply Now button stays
   visible and prominent on every viewport (desktop and mobile), routing
   to /pages/apply.html. Uses the existing .btn.btn-primary brand styling
   (red pill) — no color or design-token changes.
   =========================================================================== */

/* Tablet & smaller: keep the Apply Now button visible alongside the hamburger.
   Compact slightly to fit alongside brand + language toggle + hamburger. */
@media (max-width: 920px) {
  .nav-actions .btn-primary {
    display: inline-flex !important;
    align-items: center;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    line-height: 1.1;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(193, 39, 45, 0.2);
  }
}

/* Mobile (≤640px): switch the visible label from "Apply Now" → "Apply"
   so the persistent CTA fits the row alongside brand + language + hamburger
   without horizontal overflow. The full text remains in the DOM and is
   announced by screen readers; only the rendered text is shortened.
   Also tightens brand, language toggle, hamburger to gain ~70–90px. */
@media (max-width: 640px) {
  /* Tighten the top-level nav row so brand + actions fit. */
  .header .wrap.nav { gap: 0.65rem; padding-inline: 0.85rem; }
  .header .brand span { font-size: 0.82rem; }
  .header .brand { gap: 0.4rem; min-width: 0; flex: 0 1 auto; }
  .header .brand .logo { width: 28px; height: 28px; flex: none; }
  .header .lang-toggle {
    font-size: 0.66rem;
    padding: 0 0.4rem;
    letter-spacing: 0.02em;
    min-height: 30px;
  }
  .header .nav-actions { gap: 0.35rem; }
  .header .nav-toggle { width: 38px; height: 38px; }
  .header .nav-toggle svg { width: 22px; height: 22px; }

  /* Replace "Apply Now" with "Apply" visually only. */
  .nav-actions .btn-primary {
    padding: 0.5rem 0.85rem;
    font-size: 0;             /* hide original text node */
    line-height: 1;
  }
  .nav-actions .btn-primary::before {
    content: "Apply";
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
  }
  html[lang="es"] .nav-actions .btn-primary::before {
    content: "Solicitar";
  }
}

/* Very narrow (≤360px) — final compact tier. */
@media (max-width: 360px) {
  .header .brand span { font-size: 0.76rem; }
  .nav-actions .btn-primary { padding: 0.45rem 0.7rem; }
  .nav-actions .btn-primary::before { font-size: 0.76rem; }
  .header .lang-toggle { font-size: 0.62rem; padding: 0 0.3rem; }
}
