/* ==========================================================================
   Young's Lubricants Blog
   Loaded after /assets/css/style-template.css. Adds blog-specific components
   only; it never restyles the shared header, footer or navigation.
   Values mirror the site stylesheet: red #ce1817, text #444, Open Sans body,
   League Spartan headings, mobile breakpoint 767px.
   ========================================================================== */

/* Accessibility
================================================== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);word-wrap:normal!important}
.skip-link:focus{top:5px;left:5px;z-index:100000;width:auto;height:auto;margin:0;padding:10px 15px;clip:auto;clip-path:none;background:#FFF;box-shadow:0 0 10px rgba(0,0,0,0.3);font:bold 14px/1.4em 'Open Sans',Arial,sans-serif;color:#ce1817;text-decoration:none}

/* Article banner (long titles)
================================================== */
h1.main-header.blog-article-header span{max-width:900px;font-size:36px;line-height:1.15em}
@media only screen and (max-width:767px){h1.main-header.blog-article-header span{font-size:24px}}

/* Listing
================================================== */
.blog-intro{margin:0 0 30px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px;margin:0 0 40px}

.blog-card{display:flex;flex-direction:column;position:relative;margin:0;background:#FFF;border:1px solid #EEE;box-shadow:0 1px 30px rgba(0,0,0,0.05);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease}
.blog-card:hover{box-shadow:0 5px 30px rgba(0,0,0,0.12)}

.blog-card-image{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;text-decoration:none}
.blog-card-image img{display:block;width:100%;height:100%;object-fit:cover;-webkit-transition:transform .5s ease;transition:transform .5s ease}
.blog-card:hover .blog-card-image img{transform:scale(1.04)}
.blog-card-fallback{display:block;position:absolute;inset:0;background:#000 url(/assets/images/theme/bg-h1.jpg) no-repeat center center;background-size:cover}
.blog-card-fallback:after{content:'';position:absolute;inset:15%;background:url(/assets/images/theme/youngs-lubricants-logo.png) no-repeat center center;background-size:contain}

.blog-card-body{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;padding:20px}
.blog-date{display:block;margin:0 0 8px;font:bold 12px/1.4em 'Open Sans',Arial,sans-serif;letter-spacing:0.08em;text-transform:uppercase;color:#777}
.blog-card-title{margin:0 0 10px;font-size:1.35em;line-height:1.25em}
.blog-card-title a,.blog-card-title a:visited{color:#ce1817;text-decoration:none}
.blog-card-title a:hover,.blog-card-title a:focus{color:#000}
.blog-card-excerpt{margin:0 0 15px;font-size:0.95em}
.blog-card-excerpt p{margin:0}
.blog-card a.blog-card-more{margin-top:auto}

/* Pagination */
.blog-pagination{margin:0 0 40px}
.blog-pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.blog-pagination .page-numbers{display:inline-block;min-width:20px;padding:5px 10px;border:1px solid #ce1817;border-radius:3px;font:16px/1.6em 'Open Sans',Arial,sans-serif;color:#ce1817;text-align:center;text-decoration:none}
.blog-pagination a.page-numbers:hover,.blog-pagination a.page-numbers:focus{border-color:#000;color:#000}
.blog-pagination .page-numbers.current{background:#ce1817;color:#FFF}
.blog-pagination .page-numbers.dots{border-color:transparent;color:#777}

.blog-empty .blog-search-form{max-width:400px}

/* Sidebar
================================================== */
.blog-sidebar-module{margin:0 0 30px;padding:20px}
.blog-sidebar-title{margin:0 0 10px;font-size:1.3em;line-height:1.2em}
.blog-sidebar-module .blog-search-form{margin:0 0 25px}
.blog-sidebar-module .blog-search-form:last-child{margin:0}
.page-content ul.blog-category-list{margin:0;list-style:none}
.blog-category-list li{margin:0;padding:6px 0;border-bottom:1px solid #EEE;font-size:0.9em;color:#777}
.blog-category-list li:last-child{border-bottom:0}
.blog-category-list a,.blog-category-list a:visited{font-size:1.1em;color:#444;text-decoration:none}
.blog-category-list a:hover,.blog-category-list a:focus,.blog-category-list .current-cat > a{color:#ce1817}

/* The static sidebar's side navigation has nothing to show on blog pages;
   hide it and the spacer after it, keeping only the image quicklinks. */
.yl-blog #sidebar .module.side-nav,.yl-blog #sidebar .module.side-nav + p{display:none}

/* Search form */
.blog-search-form{display:flex;align-items:stretch;gap:5px}
.blog-search-form input[type='search']{flex:1 1 auto;width:auto;min-width:0;margin:0;padding:6px 8px}
.blog-search-form button{margin:0;padding:5px 12px}

/* Article
================================================== */
.blog-meta{margin:0 0 25px;padding:0 0 15px;border-bottom:1px solid #EEE;font-size:0.9em;color:#777}
.blog-meta .blog-date{display:inline-block;margin:0 20px 0 0;font-size:13px}
.blog-categories a,.blog-categories a:visited{color:#ce1817;text-decoration:none}
.blog-categories a:hover,.blog-categories a:focus{color:#000;text-decoration:underline}

.blog-featured-image{margin:0 0 30px}
.blog-featured-image img{display:block;width:100%;height:auto}
.blog-featured-image figcaption{margin:8px 0 0;font-size:0.85em;line-height:1.5em;color:#777;text-align:center}

.blog-article-footer{margin:40px 0 0;padding:30px 0 0;border-top:1px solid #DDD}
.blog-post-nav .nav-links{display:flex;justify-content:space-between;gap:20px;margin:0 0 30px}
.blog-post-nav .nav-previous,.blog-post-nav .nav-next{flex:1 1 0}
.blog-post-nav .nav-next{margin-left:auto;text-align:right}
.blog-post-nav a{display:block;text-decoration:none}
.blog-post-nav-label{display:block;margin:0 0 4px;font:bold 12px/1.4em 'Open Sans',Arial,sans-serif;letter-spacing:0.08em;text-transform:uppercase;color:#777}
.blog-post-nav-title{display:block;font:18px/1.3em 'League Spartan',Arial,sans-serif;color:#ce1817}
.blog-post-nav a:hover .blog-post-nav-title,.blog-post-nav a:focus .blog-post-nav-title{color:#000}
.blog-back{margin:0}
@media only screen and (max-width:767px){
	.blog-post-nav .nav-links{flex-direction:column}
	.blog-post-nav .nav-next{text-align:left}
}

/* Article content (WordPress / block editor output)
================================================== */
.entry-content{word-wrap:break-word}
.entry-content:after{content:'';display:block;clear:both}
.entry-content > :first-child{margin-top:0}
.entry-content img,.entry-content video,.entry-content svg{max-width:100%;height:auto}
.entry-content h2,.entry-content h3,.entry-content h4{margin-top:35px}
.entry-content h5,.entry-content h6{margin:25px 0 10px}
.entry-content li{margin:0 0 5px}
.entry-content ol{list-style:decimal outside}
.entry-content ul[class*='wp-block-']:not(.wp-block-list){margin-left:0;list-style:none}
.entry-content pre{margin:0 0 20px;padding:15px;overflow-x:auto;background:#F5F5F5;border:1px solid #EEE;font:14px/1.5em Consolas,Monaco,'Courier New',monospace;white-space:pre-wrap}
.entry-content code,.entry-content kbd{padding:1px 4px;background:#F5F5F5;font:0.9em/1em Consolas,Monaco,'Courier New',monospace}
.entry-content pre code{padding:0;background:none;font:inherit}
.entry-content mark{padding:0 2px;background:#FFF3B0}

/* Media & captions */
.entry-content figure{margin:0 0 20px}
.entry-content figure img{display:block}
.entry-content figcaption,.entry-content .wp-element-caption,.entry-content .wp-caption-text{margin:8px 0 0;font-size:0.85em;line-height:1.5em;color:#777;text-align:center}
.entry-content .wp-caption{max-width:100%;margin-bottom:20px}
.entry-content .alignleft{float:left;max-width:50%;margin:5px 25px 15px 0}
.entry-content .alignright{float:right;max-width:50%;margin:5px 0 15px 25px}
.entry-content .aligncenter{display:block;margin-left:auto;margin-right:auto}
.entry-content .aligncenter img{margin-left:auto;margin-right:auto}
.entry-content .alignwide,.entry-content .alignfull{width:100%;max-width:100%}
@media only screen and (max-width:767px){
	.entry-content .alignleft,.entry-content .alignright{float:none;max-width:100%;margin:0 0 20px}
}

/* Embeds */
.entry-content .wp-block-embed{margin:0 0 20px}
.entry-content .wp-block-embed iframe{margin:0}

/* Tables */
.entry-content .wp-block-table{margin:0 0 20px;overflow-x:auto}
.entry-content table{width:100%;margin:0 0 20px;border:1px solid #DDD;font-size:0.95em}
.entry-content .wp-block-table table{margin:0}
.entry-content th,.entry-content td{padding:8px 12px;border:1px solid #DDD;text-align:left;vertical-align:top}
.entry-content th,.entry-content thead td{background:#F5F5F5;font-weight:bold;color:#222}
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:#FAFAFA}

/* Separators (the site's hr is a short centered rule; wide style spans the column) */
.entry-content hr.wp-block-separator{height:0;border:0;border-top:1px solid #DDD}
.entry-content hr.wp-block-separator.is-style-wide{max-width:none}
.entry-content hr.wp-block-separator.is-style-dots{border:0}

/* Buttons: match a.button.button-primary / a.button */
.entry-content .wp-block-buttons{margin:0 0 20px}
.entry-content .wp-block-button__link{display:inline-block;padding:8px 18px;border:1px solid #ce1817;border-radius:3px;font:16px/1.6em 'Open Sans',Arial,sans-serif;text-decoration:none;-webkit-transition:all .3s ease;transition:all .3s ease}
.entry-content .wp-block-button__link:not(.has-background){background:#ce1817}
.entry-content .wp-block-button__link:not(.has-text-color){color:#FFF}
.entry-content .wp-block-button__link:not(.has-background):hover,.entry-content .wp-block-button__link:not(.has-background):focus{background:#000;border-color:#000}
.entry-content .is-style-outline > .wp-block-button__link:not(.has-background){background:none}
.entry-content .is-style-outline > .wp-block-button__link:not(.has-text-color){color:#ce1817}
.entry-content .is-style-outline > .wp-block-button__link:not(.has-background):hover,.entry-content .is-style-outline > .wp-block-button__link:not(.has-background):focus{background:none;border-color:#000;color:#000}

/* Layout blocks */
.entry-content .wp-block-columns{margin-bottom:20px}
.entry-content .wp-block-gallery{margin-bottom:20px}
.entry-content .wp-block-group.has-background{padding:25px}
.entry-content .wp-block-cover{margin-bottom:20px}
.entry-content .wp-block-pullquote{margin:0 0 20px;padding:20px 0;border-top:4px solid #ce1817;border-bottom:4px solid #ce1817}
.entry-content .wp-block-pullquote blockquote{margin:0}

/* Editor color palette */
.has-youngs-red-color{color:#ce1817!important}.has-youngs-red-background-color{background-color:#ce1817!important}
.has-black-color{color:#000!important}.has-black-background-color{background-color:#000!important}
.has-body-text-color{color:#444!important}.has-body-text-background-color{background-color:#444!important}
.has-light-grey-color{color:#F5F5F5!important}.has-light-grey-background-color{background-color:#F5F5F5!important}
.has-white-color{color:#FFF!important}.has-white-background-color{background-color:#FFF!important}

/* Paged articles */
.blog-page-links{margin:20px 0;font-weight:bold}
.blog-page-links a,.blog-page-links > span{display:inline-block;margin:0 0 0 6px;padding:2px 9px;border:1px solid #ce1817;border-radius:3px;font-weight:normal;text-decoration:none}
.blog-page-links > span.post-page-numbers.current{background:#ce1817;color:#FFF}