/*
 * Blog Foundations
 * Design tokens (CSS variables) + global resets and Astra overrides.
 * This must load FIRST - every other blog stylesheet depends on these variables.
 */

:root {
    /* ===== COLORS ===== */
    --primary-blue: #1a3e6c;
    --secondary-blue: #6EC1E4;
    --success-green: #28a745;
    --background-gray: #f5f5f5;
    --background-light: #f8f9fa;
    --background-off-white: #fefefe;
    --text-dark: #333;
    --text-light: #6c757d;
    --light-gray: #6c757d;
    --border-gray: #eaeaea;
    --white: #fff;
    --black: #000000;

    /* ===== SHADOWS ===== */
    --shadow-light: 0 5px 15px rgba(0,0,0,0.08);
    --shadow-hover: 0 15px 40px rgba(0,0,0,0.1);
    --shadow-dark: rgba(26, 62, 108, 0.2);
    --shadow-soft: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);

    /* ===== SPACING ===== */
    --spacing-xs: 12px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 60px;

    /* ===== BORDER RADIUS ===== */
    --border-radius: 12px;
    --border-radius-small: 8px;
    --radius-sm: 15px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-round: 50px;

    /* ===== TRANSITIONS ===== */
    --transition: all 0.3s ease;

    /* ===== TYPOGRAPHY ===== */
    --font-family: 'Manrope', sans-serif;
    --font-size-xs: 13px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 26px;
    --font-size-4xl: 32px;
    --font-size-5xl: 48px;

    /* ===== LAYOUT ===== */
    --content-max-width: 730px;
    --image-height: 350px;
    --image-width: 650px; /* no longer used by .pts-blog-image now that it's full-width, kept in case anything else references it */
    --card-min-height: 400px;
    --thumbnail-height: 200px;
    --content-min-height: 120px;

    /* ===== TOC & FAQ SHARED TOKENS ===== */
    --toc-faq-primary-blue: #1a3e6c;
    --toc-faq-secondary-blue: #6EC1E4;
    --toc-faq-bg-white: #ffffff;
    --toc-faq-text-dark: #000000;
    --toc-faq-text-gray: #4a5568;
    --toc-faq-border-light: #f0f4f9;
    --toc-faq-shadow-light: rgba(0, 0, 0, 0.05);
    --toc-faq-shadow-medium: rgba(0, 0, 0, 0.1);
    --toc-faq-success-green: #28a745;
    --toc-faq-cta-yellow: #FFD700;
    --toc-faq-cta-yellow-hover: #FFC400;

    --toc-faq-radius-sm: 8px;
    --toc-faq-radius-md: 20px;
    --toc-faq-radius-lg: 25px;
    --toc-faq-spacing-xs: 10px;
    --toc-faq-spacing-sm: 15px;
    --toc-faq-spacing-md: 20px;
    --toc-faq-spacing-lg: 30px;

    --toc-faq-font-family: 'Manrope', sans-serif;
    --toc-faq-font-size-xs: 10px;
    --toc-faq-font-size-sm: 11px;
    --toc-faq-font-size-base: 12px;
    --toc-faq-font-size-md: 14px;
    --toc-faq-font-size-lg: 16px;
    --toc-faq-font-size-xl: 18px;
    --toc-faq-font-size-2xl: 22px;

    --toc-height: 300px;
    --toc-sticky-top: 20px;
    --toc-scrollbar-width: 6px;
    --toc-bullet-size: 6px;

    --faq-answer-max-height: 1000px;
    --faq-link-blue: #0000EE;
    --faq-link-hover: #0000CC;

    --cta-card-height: 400px;
    --cta-card-image-height: 320px;
    --cta-card-content-height: 80px;
    --cta-card-sticky-top: 150px;
}

/* ===== GLOBAL RESETS / ASTRA OVERRIDES ===== */

/* Reset any conflicting styles */
.pts-single-post-container * {
    box-sizing: border-box;
}

/* Strengthen white background override for Astra */
body, .ast-separate-container, .site-content {
    background-color: white !important;
    font-family: 'Manrope', sans-serif !important;
}

/* Override Astra container width limitations */
.ast-container, 
.site-content .ast-container, 
.ast-plain-container.ast-no-sidebar .entry-content {
    max-width: 1200px !important;
    padding: 0 20px !important;
    font-family: 'Manrope', sans-serif;
}

.pts-blog-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: 'Manrope', sans-serif;
}

.pts-single-post-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: 'Manrope', sans-serif;
}

/* Fix header spacing for both desktop and mobile */
.site-content {
    margin-top: 0px !important;
    padding-top: 70px !important; /* clears the fixed desktop header so breadcrumbs aren't hidden underneath it; adjust this number to match your header's actual rendered height if it's not quite right */
}

@media (max-width: 768px) {
    .site-content {
        padding-top: 70px !important;
    }
}