/* Universal Responsive Styles for JSCI Website */

/* === Base Responsive Settings === */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

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

/* === Viewport-specific Typography === */
@media (max-width: 1200px) {
  h1 {
    font-size: 3.5em;
  }
  h2 {
    font-size: 2.2em;
  }
  h3 {
    font-size: 1.6em;
  }
}

@media (max-width: 992px) {
  h1 {
    font-size: 3em;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1.5em;
  }
  p {
    font-size: 1em;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.5em;
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 1.4em;
  }
  .lead {
    font-size: 1.1em;
  }
}

@media (max-width: 576px) {
  h1 {
    font-size: 2.2em;
  }
  h2 {
    font-size: 1.6em;
  }
  h3 {
    font-size: 1.3em;
  }
  h4 {
    font-size: 1.2em;
  }
  p {
    font-size: 0.95em;
  }
  .lead {
    font-size: 1.05em;
  }
}

/* === Header Responsiveness === */
@media (max-width: 992px) {
  header {
    padding: 10px 15px !important;
  }

  header .logo img {
    max-height: 40px;
  }

  header .main-menu {
    padding-top: 15px;
  }
}

@media (max-width: 576px) {
  header {
    padding: 8px 10px !important;
  }

  header .logo img {
    max-height: 35px;
  }

  .dropdown-menu,
  .nested-dropdown {
    min-width: 100%;
  }
}

/* === Hero Section Responsiveness === */
@media (max-width: 992px) {
  .jsci-hero-section {
    padding-top: 25px !important;
    padding-bottom: 40px !important;
    margin-top: 110px !important;
  }

  .jsci-hero-section h1 {
    padding: 0 15px;
  }

  .hero-badge {
    font-size: 0.8rem;
  }

  .tagline {
    padding: 0 20px;
  }

  .hero-action-btn {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .jsci-hero-section {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
    margin-top: 90px !important;
  }

  .tagline {
    padding: 0 10px;
  }
}

@media (max-width: 576px) {
  .jsci-hero-section {
    padding-top: 15px !important;
    padding-bottom: 25px !important;
    margin-top: 80px !important;
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 3px 10px;
  }
}

/* === Content Section Responsiveness === */
@media (max-width: 992px) {
  .ptb-50 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .mb-30 {
    margin-bottom: 25px !important;
  }

  .mt-50 {
    margin-top: 40px !important;
  }

  .p-30 {
    padding: 25px !important;
  }

  .card-body {
    padding: 20px !important;
  }
}

@media (max-width: 768px) {
  .ptb-50 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .mb-30 {
    margin-bottom: 20px !important;
  }

  .mt-50 {
    margin-top: 30px !important;
  }

  .p-30 {
    padding: 20px !important;
  }

  .card-body {
    padding: 15px !important;
  }
}

@media (max-width: 576px) {
  .ptb-50 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  .mb-30 {
    margin-bottom: 15px !important;
  }

  .mt-50 {
    margin-top: 25px !important;
  }

  .p-30 {
    padding: 15px !important;
  }
}

/* === Form Elements Responsiveness === */
@media (max-width: 768px) {
  input,
  textarea,
  select,
  button {
    font-size: 0.95em;
  }

  .contact-form button,
  .hero-action-btn {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .btn {
    padding: 8px 15px;
    font-size: 0.9em;
  }
}

/* === Card and Grid Responsiveness === */
@media (max-width: 768px) {
  .card-view {
    margin-bottom: 20px;
  }

  .row [class*='col-'] {
    margin-bottom: 20px;
  }

  .row [class*='col-']:last-child {
    margin-bottom: 0;
  }
}

/* === Table Responsiveness === */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table th,
  table td {
    white-space: nowrap;
  }
}

/* === Footer Responsiveness === */
@media (max-width: 768px) {
  footer {
    text-align: center;
  }

  footer .list-hover-underline li {
    display: block;
    margin-bottom: 10px;
  }

  footer .mb-30 {
    margin-bottom: 30px !important;
  }
}

/* === AI Chat Bot Responsiveness === */
@media (max-width: 768px) {
  .chat-container {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .chat-message {
    padding: 10px;
  }

  .chat-input {
    padding: 8px;
  }
}

/* === Contact Page Specific Responsiveness === */
@media (max-width: 768px) {
  .contact-card {
    margin-bottom: 20px;
  }

  .contact-info-item {
    padding: 8px 0;
  }

  .map-container iframe {
    height: 300px;
  }
}

/* === Archive Page Specific Responsiveness === */
@media (max-width: 768px) {
  .archive-card {
    padding: 15px !important;
  }
}

/* === Editorial Board Page Responsiveness === */
@media (max-width: 768px) {
  .board-card {
    margin-bottom: 20px;
  }

  .board-card-header {
    padding: 15px;
  }

  .board-stat {
    margin-bottom: 15px;
  }
}

/* === Author Guidelines Page Responsiveness === */
@media (max-width: 768px) {
  .page-navigation {
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 0;
  }

  .page-navigation .card-body {
    padding: 10px !important;
  }
}

/* === Accessibility Improvements === */
@media (hover: none) {
  a:hover,
  button:hover {
    opacity: 1 !important;
  }

  .dropdown:hover .dropdown-menu {
    display: none; /* Prevent hover menus on touch devices */
  }

  .dropdown.touch-open .dropdown-menu {
    display: block; /* Show on tap instead */
  }
}

/* === Print Styles === */
@media print {
  header,
  footer,
  .hero-action-btn,
  .chat-container {
    display: none !important;
  }

  body,
  .card,
  .card-body {
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .jsci-hero-section {
    margin-top: 0 !important;
    padding: 1cm 0 !important;
  }

  a {
    text-decoration: underline !important;
    color: #000 !important;
  }

  a[href]:after {
    content: ' (' attr(href) ')';
  }
}