/**
 * Thai Civil and Commercial Code - Consolidated Styles
 *
 * @package Thai_CCC
 * @version 2.0.0
 */

/* ============================================
   THEME INTEGRATION OVERRIDES
   Ensure CCC content gets full width within the
   WordPress theme's content area.
   ============================================ */

body.thai-ccc-page .site-content,
body.thai-ccc-page .entry-content,
body.thai-ccc-page .content-area,
body.thai-ccc-page .site-main,
body.thai-ccc-page .main-content,
body.thai-ccc-page #primary,
body.thai-ccc-page #content {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* Remove sidebar on CCC pages */
body.thai-ccc-page #secondary,
body.thai-ccc-page .sidebar,
body.thai-ccc-page aside.widget-area {
  display: none;
}

/* Wrapper for all CCC content */
.thai-ccc-wrapper {
  width: 100%;
  padding: 0;
}

/* ============================================
   BASE STYLES
   ============================================ */

.ccc-book-container,
.ccc-hub-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ccc-hub-container {
  max-width: 1200px;
}

/* ============================================
   HEADER STYLES
   ============================================ */

.ccc-header,
.ccc-intro {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  color: #fff;
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.ccc-header h1,
.ccc-intro h1 {
  font-size: 2.2em;
  margin-bottom: 10px;
  color: #fff;
}

.ccc-intro h1 {
  font-size: 2.5em;
}

.ccc-header .thai-title {
  font-size: 1.4em;
  opacity: 0.9;
  margin-bottom: 20px;
  font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
}

.ccc-header p,
.ccc-intro p {
  line-height: 1.8;
  opacity: 0.95;
}

/* ============================================
   SEARCH BOX
   ============================================ */

.ccc-search-box,
.ccc-search {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 10px;
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
}

.ccc-search-box input,
.ccc-search input {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.ccc-search-box input:focus,
.ccc-search input:focus {
  outline: none;
  border-color: #2d5a87;
}

.ccc-search-info {
  margin-top: 10px;
  color: #666;
  font-size: 0.9em;
}

#noResults {
  display: none;
  padding: 20px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  color: #856404;
  text-align: center;
  margin: 20px 0;
}

/* ============================================
   TABLE OF CONTENTS
   ============================================ */

.ccc-toc {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 30px;
}

.ccc-toc h2 {
  color: #1e3a5f;
  margin-bottom: 20px;
  font-size: 1.4em;
  cursor: pointer;
}

.ccc-toc-title {
  background: #f0f4f8;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  color: #1e3a5f;
  transition: background 0.2s;
}

.ccc-toc-title:hover {
  background: #e0e8f0;
}

.ccc-toc-chapters {
  padding-left: 20px;
  display: none;
}

.ccc-toc-chapters.active {
  display: block;
}

.ccc-toc-link {
  display: block;
  padding: 8px 12px;
  color: #2d5a87;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.ccc-toc-link:hover {
  background: #f0f4f8;
}

/* ============================================
   TITLE AND CHAPTER HEADERS
   ============================================ */

.ccc-title-header {
  background: #1e3a5f;
  color: #fff;
  padding: 20px 24px;
  border-radius: 10px;
  margin: 40px 0 20px;
}

.ccc-title-header h2 {
  margin: 0;
  font-size: 1.5em;
  color: #fff;
}

.ccc-chapter-header {
  background: #e8f0f7;
  padding: 16px 20px;
  border-radius: 8px;
  margin: 30px 0 16px;
  border-left: 4px solid #2d5a87;
}

.ccc-chapter-header h3 {
  margin: 0;
  color: #1e3a5f;
  font-size: 1.2em;
}

.ccc-part-header {
  background: #f0f4f8;
  padding: 14px 18px;
  border-radius: 6px;
  margin: 20px 0 12px;
  border-left: 3px solid #6c8eb5;
}

.ccc-part-header h4 {
  margin: 0;
  color: #2d5a87;
  font-size: 1.1em;
}

/* ============================================
   SUMMARY BOX
   ============================================ */

.ccc-summary {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0 24px;
  border: 1px solid #dee2e6;
}

.ccc-summary h4 {
  color: #1e3a5f;
  margin: 0 0 12px;
  font-size: 1.1em;
}

.ccc-summary p {
  color: #495057;
  line-height: 1.7;
  margin: 0 0 10px;
}

.ccc-summary ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: #495057;
}

.ccc-summary li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* ============================================
   ARTICLE STYLES
   ============================================ */

.ccc-article {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
  transition: box-shadow 0.2s;
}

.ccc-article:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ccc-article:target {
  border-color: #2d5a87;
  box-shadow: 0 0 0 3px rgba(45,90,135,0.2);
}

.ccc-article h3 {
  color: #1e3a5f;
  font-size: 1.2em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ccc-article .anchor-link {
  font-size: 0.8em;
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ccc-article .anchor-link:hover {
  opacity: 1;
}

/* Article Content - English */
.article-en {
  background: #f8fafb;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 12px;
  line-height: 1.8;
  border-left: 3px solid #2d5a87;
}

/* Article Content - Thai */
.article-th {
  background: #fefaf5;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 12px;
  line-height: 2;
  border-left: 3px solid #c9a227;
  font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
}

/* ============================================
   SUPREME COURT NOTES
   ============================================ */

.sc-notes {
  background: #f0fff4;
  padding: 16px;
  border-radius: 6px;
  border-left: 3px solid #2e7d32;
  font-size: 0.95em;
}

.sc-notes strong {
  color: #2e7d32;
}

/* ============================================
   HUB PAGE - BOOK CARDS
   ============================================ */

.ccc-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 50px;
}

.ccc-book-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ccc-book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: #2d5a87;
}

.ccc-book-card h3 {
  color: #1e3a5f;
  font-size: 1.4em;
  margin-bottom: 12px;
}

.ccc-book-card .book-number {
  display: inline-block;
  background: #e8f0f7;
  color: #2d5a87;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 15px;
}

.ccc-book-card p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 20px;
}

.ccc-book-card .article-count {
  color: #888;
  font-size: 0.9em;
  margin-bottom: 15px;
}

.ccc-book-card a.book-link {
  display: inline-block;
  background: #2d5a87;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s ease;
}

.ccc-book-card a.book-link:hover {
  background: #1e3a5f;
}

/* ============================================
   PART CARDS (Book 2, Book 3 hubs)
   ============================================ */

.ccc-parts {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 30px;
}

.ccc-parts h2 {
  color: #1e3a5f;
  margin-bottom: 20px;
  font-size: 1.4em;
}

.ccc-part-card {
  display: block;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 12px;
  text-decoration: none;
  border-left: 4px solid #2d5a87;
  transition: all 0.2s;
}

.ccc-part-card:hover {
  background: #e8f4fc;
  border-left-color: #1e3a5f;
  transform: translateX(4px);
}

.ccc-part-card h3 {
  color: #1e3a5f;
  margin: 0 0 8px 0;
  font-size: 1.1em;
}

.ccc-part-card .part-titles {
  color: #555;
  font-size: 0.9em;
  margin-bottom: 6px;
}

.ccc-part-card .part-sections {
  color: #888;
  font-size: 0.85em;
}

/* ============================================
   FAQ SECTION
   ============================================ */

.ccc-faq,
.ccc-faq-section {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 10px;
  margin-top: 40px;
}

.ccc-faq-section {
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 40px;
}

.ccc-faq h2,
.ccc-faq-section h2 {
  color: #1e3a5f;
  margin-bottom: 20px;
}

.ccc-faq-section h2 {
  font-size: 1.8em;
  margin-bottom: 30px;
}

.ccc-faq-item {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 12px;
  border-left: 4px solid #2d5a87;
}

.ccc-faq-section .ccc-faq-item {
  padding: 24px;
  margin-bottom: 16px;
}

.ccc-faq-item h4 {
  color: #1e3a5f;
  margin-bottom: 10px;
}

.ccc-faq-section .ccc-faq-item h4 {
  margin-bottom: 12px;
  font-size: 1.1em;
}

.ccc-faq-item p {
  color: #555;
  line-height: 1.7;
  margin: 0;
}

.ccc-faq-item a {
  color: #2d5a87;
  text-decoration: underline;
}

/* ============================================
   NAVIGATION
   ============================================ */

.ccc-nav {
  margin-top: 40px;
  padding: 20px;
  background: #f0f4f8;
  border-radius: 8px;
  text-align: center;
}

.ccc-nav a {
  color: #2d5a87;
  text-decoration: none;
  margin: 0 15px;
  font-weight: 500;
}

.ccc-nav a:hover {
  text-decoration: underline;
}

/* ============================================
   UTILITY STYLES
   ============================================ */

.no-results {
  text-align: center;
  padding: 40px;
  color: #666;
  display: none;
}

.ccc-pending {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 10px;
  padding: 30px;
  margin: 30px 0;
  text-align: center;
}

.ccc-pending h2 {
  color: #856404;
  margin-bottom: 15px;
}

.ccc-pending p {
  color: #856404;
  margin: 0;
}

.ccc-complete {
  background: #d4edda;
  border: 1px solid #28a745;
  border-radius: 10px;
  padding: 20px 30px;
  margin: 30px 0;
  text-align: center;
}

.ccc-complete p {
  color: #155724;
  margin: 0;
  font-size: 1.05em;
}

/* Thai text class */
.thai-text {
  font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
  color: #666;
}

/* Bilingual description */
.bilingual-desc {
  margin-bottom: 20px;
}

.bilingual-desc .en {
  color: #555;
  line-height: 1.7;
  margin-bottom: 10px;
}

.bilingual-desc .th {
  font-family: 'Sarabun', sans-serif;
  color: #666;
  line-height: 1.9;
  font-size: 0.95em;
  padding-left: 12px;
  border-left: 2px solid #c9a227;
}

/* ============================================
   CONSULTATION CTA
   ============================================ */

.ccc-consultation-cta {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  color: #fff;
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 30px;
  text-align: center;
}

.ccc-consultation-cta h3 {
  color: #fff;
  font-size: 1.6em;
  margin-bottom: 12px;
}

.ccc-consultation-cta p {
  font-size: 1.05em;
  opacity: 0.95;
  margin-bottom: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.ccc-consultation-cta .price {
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.ccc-consultation-cta a.cta-button {
  display: inline-block;
  background: #fff;
  color: #1e3a5f;
  padding: 14px 40px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.ccc-consultation-cta a.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.ccc-consultation-cta .availability {
  margin-top: 16px;
  font-size: 0.9em;
  opacity: 0.8;
}

/* ============================================
   PRINT: COPYRIGHT WATERMARK
   ============================================ */

@media print {
  body::after {
    content: "© ThaiLaw Online — thailawonline.com — All rights reserved";
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 10px;
    color: rgba(0,0,0,0.3);
    z-index: 9999;
  }

  .thai-ccc-wrapper::before {
    content: "© ThaiLaw Online";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 80px;
    color: rgba(30, 58, 95, 0.04);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
  }
}

/* ============================================
   AMENDMENT MARKERS
   ============================================ */

.ccc-article .sc-notes strong:first-child:has(+ p em),
.ccc-article .sc-notes > strong:first-of-type {
  display: block;
  margin-bottom: 8px;
}

.sc-notes em {
  color: #856404;
  background: #fff3cd;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ============================================
   CONTENT BLOCK SEPARATION
   ============================================ */

.ccc-article .article-en {
  border-left: 3px solid #2d5a87;
}

.ccc-article .article-th {
  border-left: 3px solid #4a9d4a;
}

.ccc-article .sc-notes {
  border-left: 3px solid #e0a800;
  margin-top: 12px;
}

.ccc-annotation {
  border-left: 3px solid #6c757d;
  margin-top: 12px;
  padding: 12px 16px;
  background: #f8f9fa;
}

.ccc-annotation-title {
  font-weight: 600;
  color: #1e3a5f;
  margin-bottom: 8px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .ccc-header,
  .ccc-intro {
    padding: 24px;
  }

  .ccc-header h1,
  .ccc-intro h1 {
    font-size: 1.8em;
  }

  .ccc-books-grid {
    grid-template-columns: 1fr;
  }

  .ccc-article {
    padding: 16px;
  }

  .article-en,
  .article-th {
    padding: 12px;
  }

  .ccc-nav a {
    display: block;
    margin: 10px 0;
  }

  .ccc-book-container,
  .ccc-hub-container {
    padding: 15px;
  }

  .ccc-faq-section {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .ccc-header h1,
  .ccc-intro h1 {
    font-size: 1.5em;
  }

  .ccc-book-card {
    padding: 20px;
  }

  .ccc-search-box,
  .ccc-search {
    padding: 16px;
  }

  .ccc-search-box input,
  .ccc-search input {
    padding: 12px 14px;
    font-size: 15px;
  }
}