/* HnEng: iPhone Notch, Dynamic Island and Home Indicator protection */
:root {
  --hneng-safe-top: env(safe-area-inset-top, 0px);
  --hneng-safe-right: env(safe-area-inset-right, 0px);
  --hneng-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hneng-safe-left: env(safe-area-inset-left, 0px);
}

html {
  background: #f8fafc;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  padding-left: var(--hneng-safe-left);
  padding-right: var(--hneng-safe-right);
}

header,
.navbar,
.site-header,
.hneng-header,
nav[role="navigation"] {
  padding-left: max(16px, var(--hneng-safe-left));
  padding-right: max(16px, var(--hneng-safe-right));
}

body > header:first-child,
body > .navbar:first-child,
body > .site-header:first-child,
body > .hneng-header:first-child {
  padding-top: var(--hneng-safe-top);
}

main,
.page-content,
.hneng-main,
.hneng-guide-page {
  padding-bottom: max(28px, var(--hneng-safe-bottom));
}

@supports (padding: max(0px)) {
  .container,
  .hneng-container,
  .hneng-guide-shell,
  .hneng-lesson-shell {
    padding-left: max(16px, calc(16px + var(--hneng-safe-left)));
    padding-right: max(16px, calc(16px + var(--hneng-safe-right)));
  }
}

@media (max-width: 700px) {
  html,
  body {
    max-width: 100%;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    font-size: max(16px, 1em);
  }

  .hneng-lesson-navigation,
  .hneng-real-lesson-card,
  .hneng-pattern-card,
  .hneng-vocabulary-card {
    overflow-wrap: anywhere;
  }
}

@media (display-mode: standalone) {
  body {
    padding-bottom: max(16px, var(--hneng-safe-bottom));
  }
}