/**
 * File Name: assets/css/custom-typography.css
 * Version: 1.1.1
 * Description: Custom typography overrides for headings, sidebar elements, and responsive font scaling
 * 
 * HOW THIS WORKS:
 * ===============
 * - Uses clamp() for fluid responsive scaling between breakpoints
 * - Media queries provide hard limits on tablets (768px) and mobile (480px)
 * - Post headings are 80% of standard heading sizes for better readability
 * - Sidebar headings maintain original 35px desktop size with responsive scaling
 * 
 * CLAMP() SYNTAX: clamp(min-size, scaling-formula, max-size)
 * - Example: clamp(1.4rem, 2.4vw + 1rem, 2.4rem) = 22.4px → 38.4px scaling
 */

/* ============================================
 * Table of Contents
 * ============================================
 * 1. Sidebar Heading Styling (H2)
 * 2. Post-Specific Typography (80% sizing)
 * 3. Future Typography Customizations (placeholder)
 */

/* ===========================================
 * 1. Sidebar Heading Styling (H2)
 * =========================================== */

/*
 * Sidebar Heading Styling (H2) with clamp() + media queries
 *
 * This restores the original 35px heading size inside sidebars on desktop,
 * scales fluidly between breakpoints using `clamp()`,
 * and locks down font sizes on tablets and smaller devices when needed.
 */

.sidebar h2.wp-block-heading {
    font-size: clamp(1.5rem, 2vw + 1rem, 2.1875rem); /* ~24px–35px scaling */
    line-height: 1.2;
    margin: 0.5em 0;
    font-weight: 400;
    text-transform: none;
}

/* Optional hard limits on tablets */
@media (max-width: 768px) {
    .sidebar h2.wp-block-heading {
        font-size: 1.75rem;  /* ~28px max on tablets */
    }
}

/* Lock it even smaller on narrow mobile screens */
@media (max-width: 480px) {
    .sidebar h2.wp-block-heading {
        font-size: 1.5rem;  /* ~24px max on phones */
    }
}

/* ===========================================
 * 2. Post-Specific Typography (80% sizing)
 * =========================================== */

/**
 * Post Content Headings - 80% of standard heading sizes for better readability
 * Applies to: Single posts, blog archive, and archive pages
 * Uses clamp() for fluid scaling + media query fallbacks for consistent sizing
 */

/* H1 in posts - 80% of standard (28.8px → 48px) */
.single-post .entry-content h1,
.single-post .entry-content .h1,
.blog .entry-content h1,
.archive .entry-content h1 {
    font-size: clamp(1.8rem, 3.2vw + 1.2rem, 3rem); /* 28.8px → 48px */
}

/* H2 in posts - 80% of standard (23px → 38px) */
.single-post .entry-content h2,
.single-post .entry-content .h2,
.blog .entry-content h2,
.archive .entry-content h2 {
    font-size: clamp(1.45rem, 2.4vw + 1rem, 2.4rem); /* 23px → 38px */
}

/* H3 in posts - 80% of standard (19.2px → 30.4px) */
.single-post .entry-content h3,
.single-post .entry-content .h3,
.blog .entry-content h3,
.archive .entry-content h3 {
    font-size: clamp(1.2rem, 2vw + 0.8rem, 1.9rem); /* 19.2px → 30.4px */
}

/* H4 in posts - 80% of standard (14.4px → 24px) */
.single-post .entry-content h4,
.single-post .entry-content .h4,
.blog .entry-content h4,
.archive .entry-content h4 {
    font-size: clamp(0.9rem, 1.6vw + 0.6rem, 1.5rem); /* 14.4px → 24px */
}

/* H5 in posts - 80% of standard (14px → 19.2px) */
.single-post .entry-content h5,
.single-post .entry-content .h5,
.blog .entry-content h5,
.archive .entry-content h5 {
    font-size: clamp(0.875rem, 1.2vw + 0.5rem, 1.2rem); /* 14px → 19.2px */
}

/* H6 in posts - 80% of standard (14px → 16px) */
.single-post .entry-content h6,
.single-post .entry-content .h6,
.blog .entry-content h6,
.archive .entry-content h6 {
    font-size: clamp(0.875rem, 0.8vw + 0.5rem, 1rem); /* 14px → 16px */
}

/* Post heading tablet hard limits (768px and below) */
@media (max-width: 768px) {
    .single-post .entry-content h1,
    .blog .entry-content h1,
    .archive .entry-content h1 { font-size: 2.4rem; }    /* 38.4px */
    
    .single-post .entry-content h2,
    .blog .entry-content h2,
    .archive .entry-content h2 { font-size: 1.9rem; }    /* 30px (80% of 38px) */
    
    .single-post .entry-content h3,
    .blog .entry-content h3,
    .archive .entry-content h3 { font-size: 1.5rem; }    /* 24px */
    
    .single-post .entry-content h4,
    .blog .entry-content h4,
    .archive .entry-content h4 { font-size: 1.2rem; }    /* 19.2px */
    
    .single-post .entry-content h5,
    .blog .entry-content h5,
    .archive .entry-content h5 { font-size: 0.9375rem; } /* 15px (80% of 19px) */
    
    .single-post .entry-content h6,
    .blog .entry-content h6,
    .archive .entry-content h6 { font-size: 0.875rem; } /* 14px - minimum readable size */
}

/* Post heading mobile hard limits (480px and below) */
@media (max-width: 480px) {
    .single-post .entry-content h1,
    .blog .entry-content h1,
    .archive .entry-content h1 { font-size: 1.8rem; }    /* 28.8px */
    
    .single-post .entry-content h2,
    .blog .entry-content h2,
    .archive .entry-content h2 { font-size: 1.45rem; }   /* 23px (80% of 29px) */
    
    .single-post .entry-content h3,
    .blog .entry-content h3,
    .archive .entry-content h3 { font-size: 1.15rem; }   /* 18px (80% of 23px) */
    
    .single-post .entry-content h4,
    .blog .entry-content h4,
    .archive .entry-content h4 { font-size: 0.9rem; }    /* 14px (80% of 18px) */
    
    .single-post .entry-content h5,
    .blog .entry-content h5,
    .archive .entry-content h5 { font-size: 0.875rem; }  /* 14px - minimum readable */
    
    .single-post .entry-content h6,
    .blog .entry-content h6,
    .archive .entry-content h6 { font-size: 0.875rem; }  /* 14px */
}

/* ===========================================
 * 3. Future Typography Customizations
 * =========================================== */

/* Add more custom typography overrides here as needed */