/* Mobile responsiveness fixes for Minimal Mistakes Jekyll Theme */

/* Viewport fix */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Mobile viewport adjustments */
@media screen and (max-width: 768px) {
  /* Sidebar/Author profile fixes */
  .sidebar {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 1em !important;
    float: none !important;
    clear: both !important;
  }
  
  .author__avatar img {
    max-width: 80px !important;
  }
  
  /* Main content fixes */
  .page__content,
  .archive,
  .page {
    width: 100% !important;
    padding: 0 15px !important;
    float: none !important;
  }
  
  /* Navigation fixes */
  .greedy-nav {
    flex-wrap: wrap !important;
  }
  
  .greedy-nav .visible-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .greedy-nav a {
    padding: 0.5em !important;
    font-size: 0.9em !important;
  }
  
  /* Hide overflow from nav */
  .masthead {
    overflow: hidden !important;
  }
  
  /* Code blocks */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-size: 0.8em !important;
  }
  
  .highlight {
    margin: 0 -15px !important;
    padding: 1em 15px !important;
  }
  
  /* Images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .page__hero-image,
  .page__lead {
    max-width: 100% !important;
  }
  
  /* Tables */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
  
  /* Archive/post list */
  .archive__item-title {
    font-size: 1em !important;
    margin-top: 0 !important;
  }
  
  .archive__item-excerpt {
    font-size: 0.9em !important;
  }
  
  /* Grid fixes */
  .grid__item {
    width: 100% !important;
    margin-bottom: 1.5em !important;
  }
  
  .feature__wrapper {
    flex-direction: column !important;
  }
  
  .feature__item {
    width: 100% !important;
    margin-bottom: 1em !important;
  }
  
  /* Footer */
  .page__footer {
    padding: 1em !important;
  }
  
  .page__footer-follow ul {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  /* Page title */
  .page__title {
    font-size: 1.5em !important;
    line-height: 1.3 !important;
  }
  
  /* Pagination */
  .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  /* Embedded content */
  iframe, embed, object, video {
    max-width: 100% !important;
  }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
  .page__title {
    font-size: 1.3em !important;
  }
  
  .page__content {
    font-size: 0.95em !important;
  }
  
  pre, code {
    font-size: 0.75em !important;
  }
  
  .greedy-nav .site-title {
    font-size: 0.9em !important;
  }
}

/* Banner responsive */
#fsm-banner {
  padding: 8px !important;
}

@media screen and (max-width: 768px) {
  #fsm-banner > div {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  
  #fsm-banner a {
    padding: 6px 12px !important;
    font-size: 0.8em !important;
  }
  
  #fsm-banner button {
    position: static !important;
    transform: none !important;
    margin-top: 4px !important;
  }
}