/*
Theme Name: Joplin Resource Guide
Template: Divi
Author: Josh Shackles
Author URI: http://joshuashackles.com
Description: Joplin Resource Guide
Version: 4.27.5
Updated: 2025-01-27 00:31:35
*/

/* Global box-sizing for consistency */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Global Container Spacing */
.container {
  padding: 80px !important; /* Increased container padding */
}

/* =====================================
   CATEGORIES PAGE STYLING
===================================== */
.categories-page {
  padding: 80px;
  background-color: #f9f9f9;
  font-size: 18px;
}

.page-title {
  font-size: 36px;
  text-align: center;
  margin-bottom: 40px;
  color: #2b2e90;
  font-weight: bold;
}

.categories-list {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.categories-list li {
  margin-bottom: 20px;
}

.categories-list a {
  font-size: 18px;
  font-weight: bold;
  color: #2b2e90;
  text-decoration: none;
  display: block;
  padding: 20px 0; /* Increased vertical padding */
  transition: color 0.3s ease-in-out;
}

.categories-list a:hover {
  color: #156082;
}

.category-description {
  font-size: 14px;
  color: #2b2e90;
  margin-top: 10px;
  display: block;
}

/* =====================================
   CATEGORY ARCHIVE PAGE
===================================== */
.category-archive {
  padding: 80px;
  background-color: #ffffff;
}

.category-title {
  font-size: 36px;
  text-align: center;
  margin-bottom: 40px;
  color: #2b2e90;
  font-weight: bold;
}

.category-description {
  font-size: 18px;
  text-align: center;
  margin-bottom: 40px;
  color: #2b2e90;
}

.category-organizations {
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  padding: 80px;
  font-weight: bold;
  list-style: disc;
}

/*
Theme Name: Joplin Resource Guide
Template: Divi
Author: Josh Shackles
Author URI: http://joshuashackles.com
Description: Joplin Resource Guide
Version: 4.27.5
Updated: 2025-01-27 00:31:35
*/

/* Global box-sizing for consistency */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Global Container Spacing */
.container {
  padding: 80px !important; /* Increased container padding */
}

/* =====================================
   CATEGORIES PAGE STYLING
===================================== */
.categories-page {
  padding: 80px;
  background-color: #f9f9f9;
  font-size: 18px;
}

.page-title {
  font-size: 36px;
  text-align: center;
  margin-bottom: 40px;
  color: #2b2e90;
  font-weight: bold;
}

.categories-list {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.categories-list li {
  margin-bottom: 20px;
}

.categories-list a {
  font-size: 18px;
  font-weight: bold;
  color: #2b2e90;
  text-decoration: none;
  display: block;
  padding: 20px 0; /* Increased vertical padding */
  transition: color 0.3s ease-in-out;
}

.categories-list a:hover {
  color: #156082;
}

.category-description {
  font-size: 14px;
  color: #2b2e90;
  margin-top: 10px;
  display: block;
}

/* =====================================
   CATEGORY ARCHIVE PAGE
===================================== */
.category-archive {
  padding: 80px;
  background-color: #ffffff;
}

.category-title {
  font-size: 36px;
  text-align: center;
  margin-bottom: 40px;
  color: #2b2e90;
  font-weight: bold;
}

.category-description {
  font-size: 18px;
  text-align: center;
  margin-bottom: 40px;
  color: #2b2e90;
}

.category-organizations {
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  padding: 80px;
  font-weight: bold;
  list-style: disc;
}

/* =====================================
   DESKTOP SEARCH RESULTS TABLE STYLING
===================================== */
.search-results-table {
  width: 100%;
  border-collapse: collapse;
  margin: 80px auto;
  background-color: #fff;
  border: 1px solid #ddd;
}

.search-results-table th,
.search-results-table td {
  padding: 60px; /* Increased cell padding */
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
  text-align: left;
}

/* Logo Column (Left 30%) */
.logo-column,
.logo-cell {
  width: 30% !important;
  text-align: center !important;
  padding: 60px !important;
}

.search-logo {
  max-height: 200px !important;  /* Adjust as needed; change to 150px if desired */
  width: auto !important;
  object-fit: contain; /* Preserves aspect ratio without cropping */
  border-radius: 8px;
  display: block;
  margin: 0 auto !important;
}

/* Info Column (Right 70%) */
.info-column,
.info-cell {
  width: 70% !important;
  padding: 60px !important;
}

/* Wrap inner info for extra spacing */
.info-inner {
  margin: 40px;  /* Extra margin inside info cells */
}

.org-name {
  margin: 0 0 20px 0;
  font-size: 22px;
}

.org-name a {
  text-decoration: none !important;
  color: #2b2e90 !important;
  transition: color 0.3s ease-in-out !important;
}

.org-name a:hover {
  color: #156082 !important;
}

/* Description Styling (With HTML Support) */
.org-description {
  font-size: 16px !important;
  color: #555 !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  max-width: 95% !important;
  margin: 60px !important; /* Increased margin for more spacing */
}

/* (Optional) Ellipsis – truncation handled in PHP */
.org-description::after {
  content: "...";
  display: inline;
}

.org-description p {
  margin: 30px 0 !important; /* Increased paragraph margin */
}

.org-description a {
  color: #2b2e90 !important;
  text-decoration: underline !important;
}

.org-description a:hover {
  color: #156082 !important;
}

.org-description ul,
.org-description ol {
  padding-left: 20px !important;
  margin: 30px 0 !important; /* Increased margin for lists */
}

.org-description li {
  margin-bottom: 10px !important;
}

.org-description strong {
  font-weight: bold !important;
}

.org-description em {
  font-style: italic !important;
}

.org-description blockquote {
  font-style: italic !important;
  border-left: 3px solid #2b2e90 !important;
  padding-left: 15px !important;
  margin: 30px 0 !important;
  color: #444 !important;
}

/* =====================================
   MOBILE SEARCH RESULTS (Non-table Layout)
===================================== */
@media (max-width: 768px) {
  /* Hide the desktop table */
  .search-results-table {
    display: none;
  }
  
  /* Mobile layout: Each search result becomes a block/card */
  .mobile-search-results {
    display: block;
    width: 100%;
    margin: 40px 0;
  }
  
  .mobile-search-result {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
  }
  
  .mobile-logo {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .mobile-logo img {
    max-height: 150px !important;  /* Adjust as desired for mobile */
    width: auto !important;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
  }
  
  .mobile-info {
    padding: 0 20px;
  }
  
  .mobile-info .org-name {
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
  }
  
  .mobile-info .org-description {
    font-size: 14px;
    margin: 10px 0;
    text-align: left;
  }
}