/* Django-only fixes where the old theme's stylesheets reach into the new
   header and footer. Rom's styles.css (the handover) stays untouched, so the
   next handover drops in unchanged; this file is loaded right after it.

   The old theme gives every focused text box a border and a shadow; the
   handover's boxes have neither, and these rules outrank the theme's. */
.okc-header .okc-search-input:focus,
.okc-mobile-menu .okc-mobile-search-input:focus,
.okc-footer .okc-newsletter-input:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

/* The old theme also gives every text box 15px type on a 50px line. The phone
   menu's search box takes the size of its pill instead (18px on a 28px line):
   below 16px iPhones zoom in on tap, and a 50px line overflows the 48px pill. */
.okc-mobile-menu .okc-mobile-search-input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Profile pages: the old tab bar (Intro, Specialties, ...) sticks to the top of
   the window once scrolled past (jquery.tacky gives it the class "tacked").
   The header slides up out of its way while it is stuck, and back down when
   the reader scrolls up past it. */
.okc-header {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

body:has(#navbar-inner.tacked) .okc-header {
  transform: translateY(calc(-100% - var(--okc-header-top, 0px) - 8px));
}

/* The old theme sets the root font size to 10px, and the handover picks the
   newsletter box's placeholder wording by rem widths (8.5, 11.25, 13.5rem),
   which Next measures at 16px. The same widths in px, so Django picks the
   same wording as Next instead of one too long for the box. */
.okc-footer .okc-newsletter-hint-xs {
  display: inline;
}

.okc-footer .okc-newsletter-hint-sm,
.okc-footer .okc-newsletter-hint-md,
.okc-footer .okc-newsletter-hint-lg {
  display: none;
}

@container (min-width: 136px) {
  .okc-footer .okc-newsletter-hint-xs {
    display: none;
  }

  .okc-footer .okc-newsletter-hint-sm {
    display: inline;
  }
}

@container (min-width: 180px) {
  .okc-footer .okc-newsletter-hint-sm {
    display: none;
  }

  .okc-footer .okc-newsletter-hint-md {
    display: inline;
  }
}

@container (min-width: 216px) {
  .okc-footer .okc-newsletter-hint-md {
    display: none;
  }

  .okc-footer .okc-newsletter-hint-lg {
    display: inline;
  }
}