/** * Blog Single Post Styles * Extracted from single.php template * * @package TravelerChildTheme * @since 2.0.0 */ @import url('tokens.css');@import url('base.css');/* Smooth scrolling for TOC navigation */ html{scroll-behavior:smooth}/* Override global body color for blog pages */ body.single-post{color:#212529!important}/* ============================================================================= Single Source of Truth:Center Column Used by hero,featured image - aligns with article (col-lg-6) ========================================================================== */ .blog-center-column{max-width:600px;margin:0 auto;padding-left:15px;padding-right:15px}/* Post Hero */ #primary.site-main .post-hero{background:#ffffff;padding:var(--space-xl) 0 0;margin-bottom:var(--space-lg);/* 24px gap to image */}/* Related posts - full width aligned with header */ #primary.site-main .related-posts-section .container{max-width:1200px;margin:0 auto;padding-left:15px;padding-right:15px}/* Hero container - single column,no author card */ #primary.site-main .post-hero-left{max-width:100%}#primary.site-main .post-hero h1{font-size:42px;font-weight:700;color:#212529;line-height:1.2;margin-bottom:var(--space-lg)}/* Subtitle/lead paragraph - uses design system tokens */ #primary.site-main .post-subtitle{font-family:var(--font-body);font-size:var(--fs-h4);color:var(--color-muted);line-height:var(--lh-body);margin-top:0;margin-bottom:var(--space-lg)}/* Compact meta layout */ #primary.site-main .post-meta-compact{font-size:14px;color:#6c757d;padding-top:var(--space-md);padding-bottom:var(--space-md);border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef;margin-top:var(--space-md)}#primary.site-main .meta-author{font-weight:500;margin-bottom:6px}#primary.site-main .meta-details{display:flex;align-items:center;flex-wrap:wrap}#primary.site-main .meta-sep{margin:0 8px;color:#adb5bd}#primary.site-main .meta-category-link{color:#324fbe;text-decoration:none;font-weight:600;transition:color 0.2s ease}#primary.site-main .meta-category-link:hover{color:#2a3f9e;text-decoration:underline}/* Featured Image */ #primary.site-main .featured-image-container{padding:0;margin-bottom:var(--space-xl);/* 32px gap to article */ background:#ffffff}#primary.site-main .featured-image-wrapper{/* Width/padding inherited from .blog-center-column */ border-radius:var(--radius-lg);overflow:hidden;/* Clips image to wrapper radius */ box-shadow:none;aspect-ratio:21 / 9;max-height:400px;/* Cap height on very wide screens */}#primary.site-main .featured-image{width:100%;height:100%;object-fit:cover;display:block;/* No border-radius needed - wrapper overflow:hidden handles clipping */}/* Main Content Area */ #primary.site-main .post-content-area{padding:var(--space-lg) 0 var(--space-2xl);/* Reduced top padding */}/* Match hero and featured image width (blog-center-column pattern) */ #primary.site-main .col-lg-6.col-md-8.col-sm-12 .article-content{max-width:600px;margin:0 auto;padding-left:15px;padding-right:15px}/* Article Content - Substack-style editorial typography */ #primary.site-main .article-content{font-family:var(--font-serif);font-size:18px;/* Reduced from 20px for proper heading hierarchy (H2 30px = 1.67x ratio) */ line-height:var(--lh-prose);color:rgb(54,55,55);-webkit-font-smoothing:antialiased}#primary.site-main .article-content p{margin-bottom:var(--space-md);overflow-wrap:break-word;word-break:break-word}/* First paragraph - Substack uses 32px line-height */ #primary.site-main .article-content > p:first-of-type{line-height:32px}#primary.site-main .article-content h2{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:var(--weight-bold);color:var(--color-heading);margin-top:var(--space-2xl);margin-bottom:var(--space-md);line-height:var(--lh-head)}#primary.site-main .article-content h3{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--weight-semibold);color:var(--color-heading);margin-top:var(--space-xl);margin-bottom:var(--space-md);line-height:var(--lh-head)}/* Scroll offset for TOC anchor links - accounts for sticky header */ #primary.site-main .article-content h2[id],#primary.site-main .article-content h3[id]{scroll-margin-top:120px}#primary.site-main .article-content ul,#primary.site-main .article-content ol{margin-bottom:var(--space-lg);padding-left:28px}#primary.site-main .article-content li{margin-bottom:var(--space-sm)}#primary.site-main .article-content img{max-width:100%;height:auto;border-radius:8px;margin:var(--space-xl) 0}#primary.site-main .article-content blockquote{border-left:4px solid var(--color-primary);padding-left:24px;margin:var(--space-xl) 0;font-style:italic;color:var(--color-muted);font-size:17px;/* Reduced proportionally with body (18px) */}/* Links in article content */ #primary.site-main .article-content a{color:var(--color-primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s ease,color 0.2s ease}#primary.site-main .article-content a:hover{color:var(--color-primary-hover);border-bottom-color:currentColor}#primary.site-main .article-content a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-xs)}/* External link indicator (optional visual cue) */ #primary.site-main .article-content a[target="_blank"]::after{content:"";display:inline-block;width:12px;height:12px;margin-left:4px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23324fbe'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;vertical-align:middle;opacity:0.7}/* Related Posts Section */ #primary.site-main .related-posts-section{padding:var(--space-2xl) 0;background:#f8f9fa;border-top:1px solid #e9ecef}#primary.site-main .related-posts-title{font-size:28px;font-weight:700;color:#212529;margin-bottom:var(--space-xl);text-align:center}#primary.site-main .related-posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:var(--space-xl)}#primary.site-main .related-post-card{background:#ffffff;border:1px solid #dee2e6;border-radius:8px;overflow:hidden;text-decoration:none;display:block;transition:all 0.2s ease}#primary.site-main .related-post-card:hover{border-color:#324fbe;transform:translateY(-2px);box-shadow:0 2px 8px rgba(50,79,190,0.15)}#primary.site-main .related-post-thumb{height:160px;overflow:hidden;background:#f8f9fa}#primary.site-main .related-post-thumb img{width:100%;height:100%;object-fit:cover}#primary.site-main .related-post-content{padding:20px}#primary.site-main .related-post-title{font-size:16px;font-weight:600;color:#212529;line-height:1.4;margin-bottom:8px}#primary.site-main .related-post-date{font-size:12px;color:#6c757d}#primary.site-main .view-all-category{text-align:center}#primary.site-main .btn-view-category{display:inline-block;padding:12px 28px;background:#324fbe;color:#ffffff;text-decoration:none;border-radius:6px;font-weight:600;font-size:15px;transition:all 0.2s ease}#primary.site-main .btn-view-category:hover{background:#2a3f9e;color:#ffffff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(50,79,190,0.3)}/* Breadcrumbs */ .pca-breadcrumbs{padding:16px 0;background:#ffffff;border-bottom:1px solid #f0f0f0;font-size:13px;color:#6c757d}.pca-breadcrumbs .container{max-width:1200px;/* Match header width */ margin:0 auto;padding-left:15px;padding-right:15px}.pca-breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center}.pca-breadcrumbs li{display:flex;align-items:center}.pca-breadcrumbs li:not(:last-child)::after{content:"/";margin:0 10px;color:#adb5bd;font-size:12px}.pca-breadcrumbs a{color:#6c757d;text-decoration:none;transition:color 0.2s ease}.pca-breadcrumbs a:hover{color:#324fbe}.pca-breadcrumbs li[aria-current="page"]{color:#212529;font-weight:500}/* Responsive */ @media (max-width:768px){#primary.site-main .post-hero h1{font-size:var(--fs-h1);/* 30px - down from 42px */}#primary.site-main .post-subtitle{font-size:var(--fs-body);/* 16px - down from 18px */}#primary.site-main .article-content{font-size:var(--fs-body-mobile);/* 18px - comfortable mobile reading */ line-height:var(--lh-prose)}#primary.site-main .article-content h2{font-size:var(--fs-h2);/* 24px - down from 28px */}#primary.site-main .article-content h3{font-size:var(--fs-h3);/* 20px */}#primary.site-main .related-posts-grid{grid-template-columns:1fr}#primary.site-main .post-content-area{padding:var(--space-xl) 0}#primary.site-main .related-posts-section{padding:var(--space-xl) 0}.pca-breadcrumbs{display:none}}/* Hide parent theme clutter (scoped to main content only) */ #primary.site-main .st-breadcrumb,#primary.site-main .st-blog--banner,#primary.site-main .st-banner-solo{display:none !important}/* ============================================================================= Blog FAQ Accordion Component Uses design system tokens from tokens.css and base.css ========================================================================== */ /* Container */ .pca-blog-faq{margin:var(--space-2xl) 0 var(--space-xl);padding:0}/* Heading - using display font stack with orange accent */ .pca-blog-faq__heading{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:var(--weight-bold);line-height:var(--lh-head);color:var(--color-heading);margin-bottom:var(--space-lg);margin-top:0;position:relative;padding-left:var(--space-md)}/* Orange accent bar before heading */ .pca-blog-faq__heading::before{background-color:var(--color-primary-orange);border-radius:var(--radius-xs);content:"";display:block;height:var(--fs-h1);left:0;position:absolute;top:2px;width:5px}/* FAQ List */ .pca-blog-faq__list{display:flex;flex-direction:column;gap:var(--space-sm)}/* FAQ Item - details element */ .pca-blog-faq__item{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-background);overflow:hidden;transition:border-color 0.2s ease}.pca-blog-faq__item:hover{border-color:var(--color-border-muted)}.pca-blog-faq__item[open]{border-color:var(--color-primary)}/* Summary - clickable header */ .pca-blog-faq__summary{list-style:none;display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);cursor:pointer;user-select:none;min-height:52px;transition:background-color 0.15s ease}.pca-blog-faq__summary::-webkit-details-marker{display:none}.pca-blog-faq__summary:hover{background-color:var(--color-background-light)}/* Question text */ .pca-blog-faq__q{font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--weight-semibold);color:var(--color-heading);line-height:var(--lh-head);flex:1}/* Chevron icon */ .pca-blog-faq__chev{margin-left:auto;flex-shrink:0;transition:transform 0.2s ease;opacity:0.6;fill:currentColor}.pca-blog-faq__item[open] .pca-blog-faq__chev{transform:rotate(180deg)}/* Answer panel */ .pca-blog-faq__a{padding:0 var(--space-lg) var(--space-lg) var(--space-lg);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-muted);border-top:1px solid var(--color-border);background:var(--color-background-light)}.pca-blog-faq__a p{margin:var(--space-sm) 0}.pca-blog-faq__a p:first-child{margin-top:var(--space-md)}.pca-blog-faq__a p:last-child{margin-bottom:0}.pca-blog-faq__a a{color:var(--color-primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s ease}.pca-blog-faq__a a:hover{border-bottom-color:currentColor}.pca-blog-faq__a ul,.pca-blog-faq__a ol{margin:var(--space-sm) 0;padding-left:var(--space-lg)}.pca-blog-faq__a li{margin-bottom:var(--space-xs)}/* Accessibility - focus styles */ .pca-blog-faq__summary:focus{outline:none}.pca-blog-faq__summary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-md)}/* Reduced motion */ @media (prefers-reduced-motion:reduce){.pca-blog-faq__chev{transition:none}}/* Mobile Responsive - FAQ */ @media (max-width:768px){.pca-blog-faq{margin:var(--space-xl) 0 var(--space-lg)}.pca-blog-faq__heading{font-size:var(--fs-h2);padding-left:var(--space-sm)}.pca-blog-faq__heading::before{height:var(--fs-h2);width:4px}.pca-blog-faq__summary{padding:var(--space-sm) var(--space-md)}.pca-blog-faq__q{font-size:var(--fs-body)}.pca-blog-faq__a{padding:0 var(--space-md) var(--space-md) var(--space-md);font-size:var(--fs-sm)}}/* ============================================================================= v1.0 - Accessibility & Media Polish (Medium-Style UX Enhancement) ========================================================================== */ /* Video/Embed Responsiveness */ #primary.site-main .article-content iframe,#primary.site-main .article-content video,#primary.site-main .article-content embed{max-width:100%;height:auto}/* 16:9 wrapper for YouTube/Vimeo embeds */ #primary.site-main .article-content .wp-block-embed,#primary.site-main .article-content .video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:var(--space-xl) 0}#primary.site-main .article-content .wp-block-embed iframe,#primary.site-main .article-content .video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}/* WordPress image figures with captions */ #primary.site-main .article-content figure{margin:var(--space-xl) 0;max-width:100%}#primary.site-main .article-content figure img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}#primary.site-main .article-content figcaption{font-size:var(--fs-sm);color:var(--color-muted);text-align:center;margin-top:var(--space-sm);font-style:italic}/* ============================================================================= v1.1 - Aesthetic "Medium Feel" Enhancements ========================================================================== */ /* Background paper effect - subtle gray page,white article */ body.single-post{background-color:#f5f5f5 !important}#primary.site-main article{background-color:var(--color-background)}/* Featured image rules consolidated in Featured Image section above */ /* TOC expanded by default on desktop - handled via JS to respect user toggle */ /* FAQ heading size adjustment - use H2 token for better hierarchy */ .pca-blog-faq__heading{font-size:var(--fs-h2)}.pca-blog-faq__heading::before{height:var(--fs-h2)}/* ============================================================================= 3-Column Blog Layout (v2.0) Left sidebar (TOC) + Main content + Right sidebar (CTA) ========================================================================== */ /* Override narrow constraint for 3-column layout */ #primary.site-main .post-content-area .container{max-width:1200px;padding-left:15px;padding-right:15px}/* Sidebar common styles */ .blog-sidebar{padding:var(--space-md) 0}.sticky-sidebar{position:sticky;top:100px;/* Account for fixed header */}/* Left Sidebar - TOC */ .blog-sidebar-left{padding-right:var(--space-md)}.blog-toc{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.blog-toc__title{font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--weight-bold);color:var(--color-heading);margin:0 0 var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}.blog-toc-nav{display:flex;flex-direction:column;gap:2px}.blog-toc-nav a{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-muted);text-decoration:none;display:block;padding:8px 12px;border-left:2px solid transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0;transition:all 0.15s ease;line-height:1.4}.blog-toc-nav a:hover{color:var(--color-primary);background-color:var(--color-background-light);border-left-color:var(--color-primary)}.blog-toc-nav a.active{color:var(--color-primary);background-color:rgba(50,79,190,0.08);border-left-color:var(--color-primary);font-weight:var(--weight-medium)}/* Right Sidebar - CTA */ .blog-sidebar-right{padding-left:var(--space-md)}/* Responsive:3-column layout adjustments */ @media (max-width:991px){/* Tablet:2-column (TOC + content),hide right sidebar */ #primary.site-main .post-content-area .container{max-width:900px}}@media (max-width:767px){/* Mobile:Single column,sidebars hidden via Bootstrap d-none classes */ #primary.site-main .post-content-area .container{max-width:100%}}