/* =========================
   MOBILE / RESPONSIVE CSS
   ========================= */

/* Make sizing predictable */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent horizontal scrolling */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Responsive images, videos, etc. */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* General mobile adjustments */
@media (max-width: 700px) {

  body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px;
  }

  /* Main containers */
  .container,
  #container,
  .wrapper,
  #wrapper,
  main {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Two/three-column layouts become one column */
  .columns,
  .layout,
  .content,
  .main-layout {
    display: block;
    width: 100%;
  }

  /* Sidebars */
  aside,
  .sidebar,
  #sidebar {
    width: 100%;
    max-width: 100%;
    margin: 15px 0;
  }

  /* Navigation */
  nav,
  nav ul,
  .nav,
  .navbar {
    width: 100%;
    max-width: 100%;
  }

  nav ul,
  .nav ul,
  .navbar ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  nav li,
  .nav li,
  .navbar li {
    max-width: 100%;
  }

  nav a,
  .nav a,
  .navbar a {
    display: block;
    padding: 8px 10px;
  }

  /* Typography */
  h1 {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
  }

  h2 {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  h3 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }

  p,
  li {
    line-height: 1.6;
  }

  /* Forms */
  input,
  textarea,
  select,
  button {
    max-width: 100%;
    font-size: 16px;
  }

  input,
  textarea,
  select {
    width: 100%;
  }

  button {
    min-height: 44px;
  }

  /* Tables */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  /* Prevent long text from breaking the layout */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Iframes */
  iframe {
    width: 100%;
    max-width: 100%;
  }
}

/* Small phones */
@media (max-width: 400px) {

  body {
    padding: 6px;
  }

  nav ul,
  .nav ul,
  .navbar ul {
    display: block;
  }

  nav a,
  .nav a,
  .navbar a {
    width: 100%;
    text-align: center;
  }
}


/* ===== MOBILE CSS ===== */

@media screen and (max-width: 700px) {

  html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  body {
    font-size: 16px;
  }

  /* Main page */
  #container,
  #wrapper,
  .container,
  .wrapper,
  main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Header */
  header {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  /* Navigation */
  nav {
    width: 100%;
  }

  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  nav li {
    margin: 2px;
  }

  nav a {
    display: block;
    padding: 8px 10px;
  }

  /* Columns become vertical */
  .columns,
  .content,
  .layout {
    display: block !important;
    width: 100% !important;
  }

  /* Sidebars */
  aside,
  .sidebar,
  #sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 10px 0 !important;
  }

  /* Text */
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  p {
    line-height: 1.6;
  }

  /* Videos and embeds */
  iframe,
  video {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tables */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  /* Forms */
  input,
  textarea,
  select {
    max-width: 100%;
  }

  /* Prevent fixed desktop widths */
  [style*="width"] {
    max-width: 100%;
  }
}

/* ===== VERY SMALL PHONES ===== */

@media screen and (max-width: 400px) {

  body {
    font-size: 15px;
  }

  nav ul {
    display: block;
  }

  nav li,
  nav a {
    width: 100%;
    text-align: center;
  }

  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.35rem;
  }
}