/* Base font sizes for mobile/small screens */
body {
  font-size: 16px;
}

p, li, td, th, input, select, textarea, .form-control, .btn {
  font-size: 1rem; /* 16px by default */
}

h1, .h1 {
  font-size: 1.875rem; /* 30px */
}

h2, .h2 {
  font-size: 1.5rem; /* 24px */
}

h3, .h3 {
  font-size: 1.25rem; /* 20px */
}

h4, .h4 {
  font-size: 1.125rem; /* 18px */
}

.fs-5 {
  font-size: 1.125rem !important; /* 18px */
}

.fs-4 {
  font-size: 1.25rem !important; /* 20px */
}

.title-font {
  /* Keep whatever other styles are already applied */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  body {
    font-size: 17px;
  }
  
  p, li, td, th, input, select, textarea, .form-control, .btn {
    font-size: 1.0625rem; /* 17px */
  }
  
  h1, .h1 {
    font-size: 2rem; /* 32px */
  }
  
  h2, .h2 {
    font-size: 1.625rem; /* 26px */
  }
  
  h3, .h3 {
    font-size: 1.375rem; /* 22px */
  }
  
  h4, .h4 {
    font-size: 1.1875rem; /* 19px */
  }
  
  .fs-5 {
    font-size: 1.1875rem !important; /* 19px */
  }
  
  .fs-4 {
    font-size: 1.375rem !important; /* 22px */
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body {
    font-size: 18px;
  }
  
  p, li, td, th, input, select, textarea, .form-control, .btn {
    font-size: 1.125rem; /* 18px */
  }
  
  h1, .h1 {
    font-size: 2.25rem; /* 36px */
  }
  
  h2, .h2 {
    font-size: 1.75rem; /* 28px */
  }
  
  h3, .h3 {
    font-size: 1.5rem; /* 24px */
  }
  
  h4, .h4 {
    font-size: 1.25rem; /* 20px */
  }
  
  .fs-5 {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .fs-4 {
    font-size: 1.5rem !important; /* 24px */
  }
  
  /* Modal styles */
  .modal-title {
    font-size: 1.5rem;
  }
  
  .modal-body {
    font-size: 1.125rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  body {
    font-size: 19px;
  }
  
  p, li, td, th, input, select, textarea, .form-control, .btn {
    font-size: 1.1875rem; /* 19px */
  }
  
  h1, .h1 {
    font-size: 2.5rem; /* 40px */
  }
  
  h2, .h2 {
    font-size: 2rem; /* 32px */
  }
  
  h3, .h3 {
    font-size: 1.625rem; /* 26px */
  }
  
  h4, .h4 {
    font-size: 1.375rem; /* 22px */
  }
  
  .fs-5 {
    font-size: 1.375rem !important; /* 22px */
  }
  
  .fs-4 {
    font-size: 1.625rem !important; /* 26px */
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  body {
    font-size: 20px;
  }
  
  p, li, td, th, input, select, textarea, .form-control, .btn {
    font-size: 1.25rem; /* 20px */
  }
  
  h1, .h1 {
    font-size: 2.75rem; /* 44px */
  }
  
  h2, .h2 {
    font-size: 2.25rem; /* 36px */
  }
  
  h3, .h3 {
    font-size: 1.75rem; /* 28px */
  }
  
  h4, .h4 {
    font-size: 1.5rem; /* 24px */
  }
  
  .fs-5 {
    font-size: 1.5rem !important; /* 24px */
  }
  
  .fs-4 {
    font-size: 1.75rem !important; /* 28px */
  }
  
  /* Special case styles */
  #adminHeader {
    font-size: 3.5rem !important; /* 56px */
  }
  
  #teacherHeader {
    font-size: 3.5rem !important; /* 56px */
  }
  
  .navbar-brand {
    font-size: 2.5rem !important;
  }
  
  /* Modal styles */
  .modal-title {
    font-size: 1.75rem;
  }
  
  .modal-body {
    font-size: 1.25rem;
  }
  
  /* Form controls */
  .form-control {
    padding: 0.5rem 0.75rem;
  }
}

/* Specific fixes for certain elements */
.navbar .nav-link {
  font-size: 1.1em;
}

/* Make buttons more readable on larger screens */
@media (min-width: 1200px) {
  .btn {
    padding: 0.5rem 1rem;
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
  }
}

/* FAQ */
@media (min-width: 992px) {
  .answer {
    font-size: 1.2rem !important;
  }
  
  .question {
    font-size: 1.4rem !important;
  }
}

@media (min-width: 1400px) {
  .answer {
    font-size: 1.4rem !important;
  }
  
  .question {
    font-size: 1.6rem !important;
  }
}

/* Adjust conference modals */
@media (min-width: 992px) {
  #confModal .modal-body p {
    font-size: 1.125rem;
  }
  
  #confModal .fw-bold {
    font-size: 1.2rem;
  }
}

@media (min-width: 1200px) {
  #confModal .modal-body p {
    font-size: 1.25rem;
  }
  
  #confModal .fw-bold {
    font-size: 1.3rem;
  }
  
  #confModal .btn {
    font-size: 1.25rem;
  }
}

/* Increase modal size on larger screens */
@media (min-width: 1200px) {
  .modal-dialog {
    max-width: 600px;
  }
}

@media (min-width: 1400px) {
  .modal-dialog {
    max-width: 700px;
  }
}