@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');

:root {
  --purple-light: #E9D8FD;
  --brown-dark: #6B4C41;
  --accent-color: #B794F4;
  --text-color: #333333;
  --bg-color: #FFFFFF;
  --muted-bg: #F7FAFC;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Quicksand', sans-serif;
  background-color: var(--muted-bg);
  color: var(--text-color);
  line-height: 1.6;
}

header {
  background-color: var(--purple-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px; /* Matches larger logo for better vertical alignment */
}
/* Group navigation toggle and menu for right-aligned nav */
.site-nav {
  display: flex;
  align-items: center;
}

.logo {
  height: 80px; /* Increased size for improved visibility */
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-left: 0.5rem;
  color: var(--brown-dark);
}

.nav-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--brown-dark);
}

.nav-menu {
  display: none;
}

.nav-menu.nav-open {
  display: block;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--purple-light);
}

.nav-list li + li {
  margin-top: 0.5rem;
}

.nav-list a {
  text-decoration: none;
  color: var(--brown-dark);
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.nav-list a:hover {
  color: var(--accent-color);
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
  .nav-menu {
    display: block;
  }
  .nav-list {
    flex-direction: row;
  }
  .nav-list li + li {
    margin-top: 0;
    margin-left: 1rem;
  }
}

main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

section {
  background-color: var(--bg-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--brown-dark);
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--brown-dark);
}

p {
  margin-bottom: 1rem;
}

.submit-paper,
button {
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;

  /* Add vertical spacing so the button isn't cramped against surrounding text */
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.submit-paper:hover,
button:hover {
  background-color: var(--brown-dark);
}

.form-item {
  margin-bottom: 1rem;
}

.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

thead tr {
  background-color: var(--purple-light);
}

th,
td {
  padding: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}

tbody tr:nth-child(odd) {
  background-color: var(--muted-bg);
}

tbody tr:hover {
  background-color: #f0f0f0;
}

/* Visual indicator for the actively sorted column */
th.sorted-asc,
th.sorted-desc {
  background-color: var(--accent-color);
  color: #ffffff;
}

a {
  color: var(--accent-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.search-container {
  margin-top: 1rem;
}

.search-container input[type="text"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Filter and Search Layout */
.filter-search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
#filter-form {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.filter-search-container .form-item {
  margin-bottom: 0;
}
.search-container input[type="text"] {
  width: 200px;
}

/* Filter Form: Ensure dropdowns have consistent sizing with other text */
#filter-form select {
  font-size: 1rem; /* Match base text size */
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 140px; /* Give the select a reasonable width */
}

/* ----------------------------------------------------
 * Topic Tabs (archive.php)
 * --------------------------------------------------*/
.topic-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Base style of each tab – override the generic button
 * styling so that inactive tabs are visually distinct.
 */
.topic-tabs .tab {
  background-color: var(--purple-light);
  color: var(--brown-dark);
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.topic-tabs .tab:hover {
  background-color: var(--accent-color);
  color: #ffffff;
}

/* Currently-selected tab */
.topic-tabs .tab.active {
  background-color: var(--brown-dark);
  color: #ffffff;
}

/* Podcast app badges (RSS, Apple, Spotify, etc.) */
.podcast_app {
  height: 40px;       /* Uniform, reasonable height */
  width: auto;        /* Preserve aspect ratio */
  margin-right: 15px; /* Spacing between badges */
}

/* Subscribe label and badge row styling */
.subscribe-label {
  font-weight: 600;
  margin: 0.75rem 0 0.25rem 0;
}

.subscribe-icons {
  display: inline-flex;       /* Shrinks width to content, enabling partial underline */
  align-items: center;
  flex-wrap: wrap;            /* Icons wrap on small screens */
  margin-bottom: 1rem;
  padding-top: 0.5rem;        /* Space between label and divider */
  border-top: 2px solid var(--brown-dark); /* Brown divider spanning icons width */
}

/* Additional spacing inside Supporting Analysis blocks on summary.php */
.summary-section > .summary-section {
  margin: 1rem 0; /* Add vertical spacing above and below each analysis block */
}

/* Archive Table: fixed layout with wrapping */
.archive-table {
  table-layout: fixed;
  width: 100%;
}
.archive-table th,
.archive-table td {
  overflow-wrap: break-word;
}

/* Submit Form Styling */
.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.form-container .form-item {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}
.form-container .form-item input,
.form-container .form-item select,
.form-container .form-item textarea,
.form-container .form-item button {
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.form-container .form-item button {
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  cursor: pointer;
}
.form-container .form-item button:hover {
  background-color: var(--brown-dark);
}

/* Bullet list indentation */
ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

footer {
  background-color: var(--purple-light);
  text-align: center;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--brown-dark);
}

footer a {
  color: var(--brown-dark);
  text-decoration: none;
  margin: 0 0.5rem;
}

footer a:hover {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  main {
    margin: 1rem;
  }
  .form-item {
    margin-bottom: 1rem;
  }
  input,
  select,
  button {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
 * Enhanced mobile experience
 * ------------------------------------------------------------------*/

@media (max-width: 600px) {
  /* ---------------- Navigation ---------------- */
  .nav-container {
    height: 80px;           /* Reduce header height on small screens */
    padding: 0 0.75rem;
    position: relative;     /* Basis for absolute-positioned dropdown */
  }

  .logo {
    height: 60px;           /* Smaller logo so it doesn’t dominate */
  }

  .site-title {
    font-size: 1.25rem;     /* Slightly smaller title */
  }

  /* Mobile dropdown navigation (shown when the hamburger is toggled) */
  .nav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: auto;
    background-color: var(--purple-light);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .nav-list li + li {
    margin-top: 0.25rem;
  }

  /* ---------------- Typography ---------------- */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  /* ---------------- Filter/Search ---------------- */
  .filter-search-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-container input[type="text"] {
    width: 100%;
  }

  /* ---------------- Tables ---------------- */
  /* Instead of hiding columns (which can make data hard to discover), we
     keep the full table and allow the user to scroll horizontally.  This
     preserves all information while avoiding an overly cramped layout. */
  .table-responsive {
    overflow-x: auto;
  }

  /* Prevent the table from shrinking so that the overflow scrollbar
     activates as needed. */
  .archive-table {
    min-width: 800px; /* Wider than most phones → triggers horizontal scroll */
  }

  /* Keep star ratings on a single line */
}

/* Ensure popularity stars always stay on a single line (all viewports) */
.archive-table td.popularity,
.archive-table th.popularity_label {
  white-space: nowrap;
  min-width: 120px;   /* Slightly wider for breathing room */
}
}

/* ----------------------------------------------------
 * Global tweaks that apply regardless of viewport
 * --------------------------------------------------*/

/* Prevent the site title from wrapping onto two lines */
.site-title {
  white-space: nowrap;
}

/* Ensure the mobile dropdown covers the full width without leaving gaps or
   artifacts.  Using `fixed` positioning keeps it anchored to the viewport
   even when the user scrolls. */
@media (max-width: 600px) {
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;               /* Pin the menu to the right edge */
    width: 50%;
    max-height: calc(100vh - 80px); /* Limit height to available viewport space */
    padding-top: 80px;      /* Push items below header */
    background-color: var(--purple-light);
    display: none;          /* Hidden until toggled */
    z-index: 1000;          /* Above page content */
    overflow-y: auto;       /* Scroll if menu exceeds available space */
  }

  .nav-menu.nav-open {
    display: block;
  }
  /* Center mobile dropdown items and add padding */
  .nav-list a {
    display: block;
    text-align: center;
    padding: 0.75rem 1rem;
  }
}

/* ------------------------------------------------------------------*/
/* Sticky header for mobile devices */
/* ------------------------------------------------------------------*/
@media (max-width: 600px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  main {
    margin-top: calc(80px + 1rem);
  }
}

/* Mobile: improve subscribe icons spacing under "Subscribe" on summary.php */
@media (max-width: 600px) {
  .subscribe-icons {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
  }
  .subscribe-icons .podcast_app {
    margin-right: 0;
    margin-bottom: 0.75rem;
  }
}