/* ============================================================
   AADARSH AGARWAL - RESPONSIVE STYLESHEET
   Preserves minimalist academic aesthetic
   ============================================================ */

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  background-color: #FFFFFA;
  margin: 0;
  padding: 0;
}

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

/* ========================================
   DESKTOP LAYOUT IMPROVEMENTS
   ======================================== */

/* Center content with max-width on desktop */
body > table {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px;
}

/* Better spacing for main content */
body > table > tbody > tr > td[valign="top"]:first-child {
  padding-right: 60px;
}

/* Sidebar styling */
body > table > tbody > tr > td[valign="top"][style*="width: 200px"] {
  padding-top: 10px;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Desktop */
@media screen and (min-width: 768px) {
  body { font-size: 18px; }
}

/* Mobile */
@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* ========================================
   HOME PAGE
   ======================================== */

/* Mobile: Transform table to stacked layout */
@media screen and (max-width: 767px) {
  /* Make outer table behave like block elements */
  body > table,
  body > table > tbody,
  body > table > tbody > tr,
  body > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  /* Main content cell */
  body > table > tbody > tr > td[valign="top"]:first-child {
    padding: 15px !important;
  }

  /* Sidebar cell - moves below content */
  body > table > tbody > tr > td[valign="top"][style*="width: 200px"] {
    width: 100% !important;
    text-align: left !important;
    padding: 15px !important;
    border-top: 1px solid #eee;
    margin-top: 20px;
  }

  /* Navigation links become horizontal */
  body > table > tbody > tr > td[valign="top"][style*="width: 200px"] p {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 20px !important;
  }

  /* Hide line breaks in nav */
  body > table > tbody > tr > td[valign="top"][style*="width: 200px"] p br {
    display: none !important;
  }

  /* Profile section - stack image and text */
  #home-section table,
  #home-section table tbody,
  #home-section table tbody tr,
  #home-section table tbody tr td {
    display: block !important;
    width: 100% !important;
  }

  /* Profile image - scale down on mobile */
  #home-section img[src="profile.jpg"] {
    width: 180px !important;
    height: 180px !important;
  }
}

/* ========================================
   KNOWLEDGE PAGE
   ======================================== */

@media screen and (max-width: 767px) {
  body > h1 {
    font-size: 24px;
    padding: 0 15px;
  }

  body > a[href="index.html"] {
    display: block;
    padding: 0 15px;
  }

  /* Quote paragraphs */
  body > p[style*="font-size: 18px"] {
    padding: 0 15px;
    font-size: 16px !important;
  }

  /* Let text wrap naturally - hide forced breaks */
  body > p[style*="font-size: 18px"] br {
    display: inline;
  }

  body > p[style*="font-size: 18px"] br::before {
    content: " ";
  }
}

/* ========================================
   THOUGHTS PAGES
   ======================================== */

@media screen and (max-width: 767px) {
  div[style*="max-width: 800px"] {
    padding: 15px !important;
    max-width: 100% !important;
  }

  div[style*="max-width: 800px"] h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Date line */
  div[style*="max-width: 800px"] p[style*="font-size: 16px"] {
    font-size: 14px !important;
  }

  /* Content area */
  div[style*="line-height: 1.6"] {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}

/* ========================================
   LIBRARY / BOOKSHELF
   ======================================== */

@media screen and (max-width: 767px) {
  #library-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bookshelf {
    justify-content: flex-start;
    padding: 0 10px;
  }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Ensure tap targets are large enough */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Nav links don't need the large tap target */
  body > table > tbody > tr > td[valign="top"][style*="width: 200px"] p a,
  p a {
    min-height: auto;
    display: inline;
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media screen and (max-width: 767px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }
}