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

@media screen and (max-width: 768px) {
  /* Ensure proper box sizing */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* 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: 0 auto !important;
    padding: 15px 20px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hide photo on mobile */
  #photo {
    display: none !important;
  }

  /* Sidebar (menu) comes AFTER name on mobile */
  #sidebar {
    order: 1 !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    border-left: none !important;
    border-bottom: 1px solid #ccc !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
  }

  /* Make menu horizontal and compact */
  #sidebar ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #sidebar li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.9em !important;
  }

  /* Social icons inline */
  #sidebar > div {
    margin-top: 10px !important;
  }

  /* Flatten content so children participate in flex layout */
  #content {
    display: contents !important;
  }

  /* Name comes FIRST (before sidebar) */
  h1#owain {
    order: -1 !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Sidebar (menu) between name and content */
  #sidebar {
    order: 0 !important;
  }

  /* All other content comes after sidebar */
  #content > p,
  #content > h2,
  #content > h3,
  #content > h4,
  #content > ul,
  #content > ol,
  #content > table,
  #content > div,
  #content > dl {
    order: 1 !important;
    width: 100% !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: 10px 15px !important;
    margin: 0 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;
  }
}