/*
Theme Name:   China Rail Planner (Blocksy Child)
Theme URI:    https://chinarailplanner.com
Description:  Blocksy child theme for China Rail Planner. Refactored v2.0 — cluster-based architecture, dynamic nav, decoupled data.
Author:       China Rail Planner
Template:     blocksy
Version:      2.0.5
Text Domain:  crp
*/

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
    --crp-navy:        #1A3A5C;
    --crp-navy-dark:   #0F2540;
    --crp-navy-light:  #234E78;
    --crp-red:         #C1121F;
    --crp-red-dark:    #9A0E19;
    --crp-red-light:   #E8333F;
    --crp-gold:        #E9B84A;
    --crp-dark:        #1C2B3A;
    --crp-white:       #FFFFFF;
    --crp-gray-50:     #F8F9FA;
    --crp-gray-100:    #F1F3F5;
    --crp-gray-200:    #E9ECEF;
    --crp-gray-400:    #ADB5BD;
    --crp-gray-600:    #6C757D;
    --crp-gray-800:    #343A40;
    --crp-text:        #1C2B3A;
    --crp-text-body:   #2A3F52; /* body on white cards — ~7:1 on #fff */
    --crp-text-muted:  #3D4F5F; /* labels / tertiary — ~5.5:1 on #fff */
    --crp-blue-light:  #EBF3FA;

    /* Cluster colours */
    --crp-cluster-a:   #1D6FA4;
    --crp-cluster-b:   #2A9D8F;
    --crp-cluster-c:   #2D6A4F;
    --crp-cluster-d:   #5C4D91;
    --crp-cluster-e:   #E76F51;
    --crp-cluster-f:   #C1121F;

    /* Spacing (roomier sections & prose) */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.75rem;
    --space-lg:  3.5rem;
    --space-xl:  5.5rem;
    --space-section: 3.5rem;

    /* Typography */
    --font-heading: 'Outfit', 'Inter', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-serif:   'Lora', Georgia, serif;

    /* Layout */
    --container-max: 1200px;
    --crp-radius-ui: 8px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.16);
}

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

body {
    font-family: var(--font-body);
    color: var(--crp-text);
    background: var(--crp-white);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--crp-radius-ui, 8px); }

a { color: var(--crp-navy); transition: color .2s; }
a:hover { color: var(--crp-red); }

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--crp-dark);
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: var(--crp-radius-ui, 8px);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    cursor: pointer;
    border: none;
    line-height: 1.2;
}
.btn-primary   { background: var(--crp-navy);   color: #fff; }
.btn-primary:hover  { background: var(--crp-navy-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(15, 37, 64, 0.26); }
.btn-secondary { background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-secondary:hover { background: rgba(255,255,255,.25); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-outline   { background: transparent; color: var(--crp-navy); border: 1.5px solid var(--crp-navy); }
.btn-outline:hover   { background: var(--crp-navy); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-navy      { background: var(--crp-navy); color: #fff; }
.btn-navy:hover      { background: var(--crp-navy-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-sm  { padding: .5rem 1rem; font-size: .85rem; }
.btn-lg  { padding: .9rem 2rem; font-size: 1.05rem; }

/* ================================================================
   SECTION UTILITIES
   ================================================================ */
.section-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--crp-red);
    margin-bottom: .5rem;
}

/* ================================================================
   BLOG POST CONTENT STYLES
   ================================================================ */

/* Main content wrapper for all blog posts */
.entry-content,
.crp-post-content,
.china-travel-content {
    max-width: var(--container-max);
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--crp-text);
}

/* ================================================================
   HEADINGS (Consistent hierarchy)
   ================================================================ */
.entry-content h1,
.crp-post-content h1,
.china-travel-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--crp-navy);
    margin-top: 0;
    margin-bottom: var(--space-md);
    line-height: 1.15;
    border-bottom: 3px solid var(--crp-red);
    padding-bottom: var(--space-xs);
}

.entry-content h2,
.crp-post-content h2,
.china-travel-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    font-weight: 700;
    color: var(--crp-navy);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    line-height: 1.25;
}

.entry-content h3,
.crp-post-content h3,
.china-travel-content h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.6vw, 1.375rem);
    font-weight: 600;
    color: var(--crp-navy-light);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    line-height: 1.35;
}

.entry-content h4,
.crp-post-content h4,
.china-travel-content h4 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--crp-gray-800);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    line-height: 1.4;
}

/* ================================================================
   PARAGRAPHS & TEXT
   ================================================================ */
.entry-content p,
.crp-post-content p,
.china-travel-content p {
    margin-bottom: var(--space-md);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.entry-content p:last-child,
.crp-post-content p:last-child,
.china-travel-content p:last-child {
    margin-bottom: 0;
}

/* Intro paragraph (first paragraph after h1) */
.entry-content h1 + p,
.crp-post-content h1 + p,
.china-travel-content h1 + p {
    font-size: 1.2rem;
    color: var(--crp-text-muted);
    border-left: 4px solid var(--crp-gold);
    padding-left: var(--space-md);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* ================================================================
   LISTS
   ================================================================ */
.entry-content ul,
.entry-content ol,
.crp-post-content ul,
.crp-post-content ol,
.china-travel-content ul,
.china-travel-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.entry-content li,
.crp-post-content li,
.china-travel-content li {
    margin-bottom: 0.4rem;
    line-height: 1.7;
}

.entry-content li:last-child,
.crp-post-content li:last-child,
.china-travel-content li:last-child {
    margin-bottom: 0;
}

/* Checkmark lists for tips */
.entry-content ul.checklist,
.crp-post-content ul.checklist,
.china-travel-content ul.checklist {
    list-style: none;
    padding-left: 0;
}

.entry-content ul.checklist li,
.crp-post-content ul.checklist li,
.china-travel-content ul.checklist li {
    padding-left: 1.8rem;
    position: relative;
}

.entry-content ul.checklist li::before,
.crp-post-content ul.checklist li::before,
.china-travel-content ul.checklist li::before {
    content: "✓";
    color: var(--crp-cluster-b);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* ================================================================
   TABLES
   ================================================================ */
.entry-content table,
.crp-post-content table,
.china-travel-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: 0.95rem;
    overflow-x: auto;
    display: block;
}

.entry-content th,
.crp-post-content th,
.china-travel-content th {
    background: var(--crp-navy);
    color: var(--crp-white);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
}

.entry-content td,
.crp-post-content td,
.china-travel-content td {
    border: 1px solid var(--crp-gray-200);
    padding: 10px 16px;
    vertical-align: top;
}

.entry-content tr:nth-child(even),
.crp-post-content tr:nth-child(even),
.china-travel-content tr:nth-child(even) {
    background: var(--crp-gray-50);
}

/* ================================================================
   TIP, WARNING, NOTE BOXES
   ================================================================ */
.entry-content .tip,
.entry-content .warning,
.entry-content .note,
.entry-content blockquote,
.crp-post-content .tip,
.crp-post-content .warning,
.crp-post-content .note,
.crp-post-content blockquote,
.china-travel-content .tip,
.china-travel-content .warning,
.china-travel-content .note,
.china-travel-content blockquote {
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
    border-radius: var(--radius-md);
    font-size: 1rem;
    line-height: 1.6;
}

/* Tip box */
.entry-content .tip,
.crp-post-content .tip,
.china-travel-content .tip {
    background: #E8F5E9;
    border-left: 5px solid var(--crp-cluster-b);
    color: #1B5E20;
}

.entry-content .tip::before,
.crp-post-content .tip::before,
.china-travel-content .tip::before {
    content: "💡 Tip: ";
    font-weight: 700;
}

/* Warning box */
.entry-content .warning,
.crp-post-content .warning,
.china-travel-content .warning {
    background: #FFF3E0;
    border-left: 5px solid var(--crp-red);
    color: #BF360C;
}

.entry-content .warning::before,
.crp-post-content .warning::before,
.china-travel-content .warning::before {
    content: "⚠️ Warning: ";
    font-weight: 700;
}

/* Note box */
.entry-content .note,
.crp-post-content .note,
.china-travel-content .note {
    background: var(--crp-blue-light);
    border-left: 5px solid var(--crp-navy);
    color: var(--crp-navy-dark);
}

.entry-content .note::before,
.crp-post-content .note::before,
.china-travel-content .note::before {
    content: "📝 Note: ";
    font-weight: 700;
}

/* Blockquote (fallback) */
.entry-content blockquote,
.crp-post-content blockquote,
.china-travel-content blockquote {
    background: var(--crp-gray-50);
    border-left: 5px solid var(--crp-gold);
    font-style: normal;
    margin: var(--space-lg) 0;
    color: var(--crp-text-muted);
}

/* ================================================================
   IMAGES & CAPTIONS
   ================================================================ */
.entry-content img,
.crp-post-content img,
.china-travel-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--crp-radius-ui, 8px);
    margin: var(--space-md) 0;
}

.entry-content .wp-caption-text,
.entry-content figcaption,
.crp-post-content .wp-caption-text,
.crp-post-content figcaption,
.china-travel-content .wp-caption-text,
.china-travel-content figcaption {
    font-size: 0.85rem;
    color: var(--crp-gray-600);
    text-align: center;
    margin-top: -0.8rem;
    margin-bottom: var(--space-md);
}

/* ================================================================
   CODE & EXAMPLES
   ================================================================ */
.entry-content code,
.entry-content pre,
.crp-post-content code,
.crp-post-content pre,
.china-travel-content code,
.china-travel-content pre {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 0.9rem;
    background: var(--crp-gray-100);
    border-radius: var(--radius-sm);
}

.entry-content code,
.crp-post-content code,
.china-travel-content code {
    padding: 0.2rem 0.4rem;
    color: var(--crp-red-dark);
}

.entry-content pre,
.crp-post-content pre,
.china-travel-content pre {
    padding: var(--space-md);
    overflow-x: auto;
    margin: var(--space-md) 0;
    background: #1C2B3A;
    color: #E9ECEF;
    border-radius: var(--radius-md);
}

.entry-content pre code,
.crp-post-content pre code,
.china-travel-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* ================================================================
   HORIZONTAL RULE
   ================================================================ */
.entry-content hr,
.crp-post-content hr,
.china-travel-content hr {
    margin: var(--space-lg) auto;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--crp-gray-400), transparent);
    max-width: 100px;
}

/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */
@media (max-width: 768px) {
    .entry-content h1,
    .crp-post-content h1,
    .china-travel-content h1 {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }

    .entry-content h2,
    .crp-post-content h2,
    .china-travel-content h2 {
        font-size: clamp(1.35rem, 4vw, 1.65rem);
    }

    .entry-content h3,
    .crp-post-content h3,
    .china-travel-content h3 {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }

    .entry-content p,
    .crp-post-content p,
    .china-travel-content p {
        font-size: 1.0625rem;
    }

    .entry-content .tip,
    .entry-content .warning,
    .entry-content .note,
    .entry-content blockquote,
    .crp-post-content .tip,
    .crp-post-content .warning,
    .crp-post-content .note,
    .crp-post-content blockquote,
    .china-travel-content .tip,
    .china-travel-content .warning,
    .china-travel-content .note,
    .china-travel-content blockquote {
        padding: var(--space-sm) var(--space-md);
        margin: var(--space-md) 0;
    }

    .entry-content table,
    .crp-post-content table,
    .china-travel-content table {
        font-size: 0.85rem;
        display: block;
        overflow-x: auto;
    }

    .entry-content th,
    .entry-content td,
    .crp-post-content th,
    .crp-post-content td,
    .china-travel-content th,
    .china-travel-content td {
        padding: 8px 12px;
    }
}