@charset "UTF-8";

/* ============================================================
   Tablet Breakpoint (768px+)
   ============================================================ */
@media (min-width: 768px) {
  body {
    font-size: 14px;
  }

  .content {
    margin-left: 20px;
    margin-right: 20px;
  }

  .content-box {
    margin-left: 20px;
    margin-right: 20px;
  }

  .page-content {
    padding-bottom: 90px;
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   Desktop Breakpoint (1200px+)
   ============================================================ */
@media (min-width: 1200px) {
  body {
    font-size: 15px;
    line-height: 26px !important;
  }

  h1 { font-size: 28px; line-height: 34px; }
  h2 { font-size: 24px; }
  h3 { font-size: 22px; }
  h4 { font-size: 20px; }

  /* Hide mobile bottom navigation */
  #footer-bar {
    display: none !important;
  }

  /* Remove extra bottom padding since footer-bar is gone */
  .page-content {
    padding-bottom: 40px !important;
  }

  /* Wider content margins on desktop */
  .content {
    margin-left: 24px;
    margin-right: 24px;
  }

  .content-box {
    margin-left: 24px;
    margin-right: 24px;
  }
}