/* Mobile-friendly styles for owainevans.github.io */

@media screen and (max-width: 768px) {
  /* Increase base font size for mobile readability */
  body {
    font-size: 100% !important;
  }

  #content {
    font-size: 100% !important;
  }

  /* Make wrap responsive */
  #wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto !important;
    padding: 0 15px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Make content flex to reorder h1 to top */
  #content {
    display: flex !important;
    flex-direction: column !important;
    order: -1 !important;
  }

  /* Move name (h1) to the very top */
  #content h1#owain {
    order: -1 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  /* Sidebar comes after content on mobile */
  #sidebar {
    order: 0 !important;
  }

  /* Stack sidebar and content vertically on mobile */
  #sidebar {
    float: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: none !important;
    border-top: 2px solid #ccc !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
  }

  #content {
    width: 100% !important;
    padding-right: 0 !important;
  }

  /* Make all images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Make headshot responsive */
  #photo img {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
  }

  /* Make highlight table images smaller on mobile */
  table:not(.tg) img {
    max-width: 80px !important;
    width: auto !important;
  }

  /* Make highlights table responsive */
  table:not(.tg) {
    width: 100% !important;
    table-layout: auto !important;
  }

  table:not(.tg) td {
    padding: 8px 4px !important;
    vertical-align: top !important;
  }

  table:not(.tg) td:first-child {
    width: auto !important;
    min-width: 80px !important;
  }

  /* Handle table overflow with horizontal scroll for mentees table */
  /* Technique: Make table block-level but preserve table structure for thead/tbody/tr */
  table.tg {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  table.tg thead,
  table.tg tbody,
  table.tg tr {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  table.tg thead {
    display: table-header-group !important;
  }

  table.tg tbody {
    display: table-row-group !important;
  }

  table.tg {
    min-width: 600px !important;
  }

  /* Adjust spacing for mobile */
  h1 {
    font-size: 2em !important;
    margin: 15px 0 15px 0 !important;
  }

  h2 {
    font-size: 1.5em !important;
    margin: 25px 0 15px 0 !important;
  }

  h3 {
    font-size: 1.3em !important;
    margin: 20px 0 10px 0 !important;
  }

  /* Better spacing for lists and paragraphs */
  p {
    margin: 0 0 15px 0 !important;
  }

  ul, dl {
    margin: 0 0 15px 0 !important;
  }

  /* Adjust sidebar list spacing */
  #sidebar ul {
    padding: 10px 0 0 0 !important;
  }

  #sidebar li {
    margin: 0 0 8px !important;
    padding: 0 0 8px 0 !important;
  }
}

/* Smaller mobile devices */
@media screen and (max-width: 480px) {
  #wrap {
    padding: 0 10px !important;
    margin: 10px auto !important;
  }

  h1 {
    font-size: 1.8em !important;
  }

  h2 {
    font-size: 1.3em !important;
  }

  h3 {
    font-size: 1.2em !important;
  }

  /* Make table scroll container more obvious */
  table.tg {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
  }

  /* Make highlight images even smaller on very small screens */
  table:not(.tg) img {
    max-width: 70px !important;
  }

  /* Reduce table cell padding further */
  table:not(.tg) td {
    padding: 6px 3px !important;
  }
}