/*
# MOBILE RESPONSIVE
*/

/*
## Typography
*/

@media (max-width: 768px) {

  .report-section h1 {
    font-size: 2rem !important;
  }

  .report-section h2 {
    font-size: 1.75rem !important;
  }

  .report-section h3 {
    font-size: 1.4rem !important;
  }

  .report-section h4 {
    font-size: 1.2rem !important;
  }

  .report-section h5 {
    font-size: 1.05rem !important;
  }

  .report-section h6 {
    font-size: 0.95rem !important;
  }

  .hero-content h1 {
    font-size: 1.75rem !important;
  }

  .hero-content h2 {
    font-size: 1.35rem !important;
  }

  .hero-content h3 {
    font-size: 1.1rem !important;
  }

  .data-card-content h4 {
    font-size: 1.05rem !important;
  }

}


/*
## Header
*/

@media (max-width: 768px) {

  .navbar {
    padding: 0.5rem 0rem !important;
  }

  .report-logo {
    height: 30px !important;
  }

}

/*
## Hero
*/

@media (max-width: 768px) {

  .hero-wrapper {
    padding: 2rem 1rem !important;
  }

}

/*
## Report Content
*/

@media (max-width: 768px) {

  .report-section {
    padding: 0rem 1rem !important;
  }

  .floating-buttons {
    bottom: 1rem;
    right: 1rem;
  }

  /* Content padding on mobile */
  .content-wrapper {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }

}

/*
## Report Elements
*/

@media (max-width: 768px) {

  /* Data Cards */

  .data-card-grid {
    grid-template-columns: 1fr !important;
  }  

  .data-card {
    padding: 1.25rem;
  }
  
  .data-card-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .data-card-btn {
    margin-left: 52px;
  }

  .data-card-content {
    margin-left: 52px;
  }  
}

/*
## ToC
*/

@media (max-width: 768px) {

  /* Mobile ToC - Full screen overlay drawer */
  .toc-sidebar {
    width: 100% !important;
    max-width: 100%;
    box-shadow: none;
    z-index: 1200;
    background: white !important;
  }

  /* ToC header adjustments for mobile */
  .toc-header {
    padding: 1rem 1.25rem;
  }

  .toc-header h3 {
    font-size: 1.1rem;
  }

  /* Make close button more prominent and touch-friendly on mobile */
  .toc-close-btn {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  /* Increase font sizes for better mobile readability */
  .toc-link-level-1 .toc-title {
    font-size: 1rem;
  }

  .toc-link-level-2 .toc-title {
    font-size: 0.92rem;
  }

  .toc-link-level-3 .toc-title {
    font-size: 0.88rem;
  }

  /* Increase touch targets for mobile */
  .toc-item-row {
    align-items: center !important;
  }

  .toc-link {
    padding: 1rem 1.5rem !important;
    min-height: 44px;
    align-items: center !important;
  }

  .toc-toggle {
    width: 32px !important;
    height: 32px !important;
    padding: 0.5rem !important;
    margin: 1rem !important;
    background: #e0e0e06e !important;
  }

  .toc-link.active {
  }

  .toc-toggle i {
    font-size: 0.85rem;
  }

  .toc-toggle-spacer {
    width: 32px !important;
    height: 32px !important;
    padding: 0.5rem !important;
    margin: 1rem !important;
    background: transparent !important;
  }

  /* Adjust indentation for mobile - less nesting space */
  .toc-level-1 > .toc-item > .toc-item-row {
    padding-left: 1rem;
  }

  .toc-level-2 {
    margin-left: 1.2rem;
  }

  .toc-level-3 {
    margin-left: 1.2rem;
  }

  .toc-level-4 {
    margin-left: 1.2rem;
  }  

}

/*
## Footer
*/

@media (max-width: 768px) {
  
  .footer-content {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .footer-right {
    text-align: left !important;
}

  .footer-buttons {
    justify-content: flex-start !important;
  }

}