/*
Theme Name:     Bopea Child
Theme URI: 		https://jellywp.com/wp/bopea_preview/
Description: 	Wordpress Theme for Blogs & Magazines
Author:         Jellywp
Author URI: 	http://themeforest.net/user/jellywp
Template:       bopea
Version:        1.0.0
*/

/* Hide post publish date on the home page and category/author archive pages */
body.home .post-date,
body.category .post-date,
body.author .post-date {
	display: none !important;
}

/* ===== Tires by Brand mega menu ===== */
.navigation_wrapper .jl_main_menu > .menu-item > .jl_megal_bw.sub-menu .jl_megal_bu {
	max-width: calc(var(--jl-main-width) - 40px);
	margin: 0 auto;
	background: var(--jl-sub-bg-color, #fff);
	box-shadow: 0 0 25px 0 rgba(0,0,0,.08);
	border-radius: var(--jl-sub-m-radius, 8px);
	overflow: hidden;
	pointer-events: none;
}
.navigation_wrapper .jl_main_menu > .menu-item:hover > .jl_megal_bw.sub-menu .jl_megal_bu {
	pointer-events: visible;
}
.trl-brand-mega {
	padding: 36px 40px 30px;
}
.trl-brand-mega__grid {
	display: grid;
	grid-template-columns: repeat(var(--trl-cols, 6), minmax(0, 1fr));
	grid-template-rows: repeat(var(--trl-rows, 9), auto);
	grid-auto-flow: column;
	column-gap: 30px;
	row-gap: 4px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.trl-brand-mega__grid li {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0 !important;
}
.navigation_wrapper .jl_main_menu .trl-brand-mega__grid li a {
	display: block;
	padding: 8px 0 !important;
	color: var(--jl-sub-menu-color);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent !important;
	transition: color .2s ease;
}
.navigation_wrapper .jl_main_menu .trl-brand-mega__grid li a:hover,
.navigation_wrapper .jl_main_menu .trl-brand-mega__grid li a:focus {
	color: var(--jl-sub-hcolor, var(--jl-main-color)) !important;
}
.navigation_wrapper .jl_main_menu .trl-brand-mega__grid li a::after {
	display: none !important;
}
/* ===== FAQ accordion questions (single posts) ===== */
/* Content font instead of headline font; a step larger than the answer text */
.jl_content .wp-block-accordion .wp-block-accordion-heading,
.content_single_page .wp-block-accordion .wp-block-accordion-heading {
	font-family: var(--jl-body-font);
	font-size: calc(var(--jl-content-font-size, 17px) + 2px);
	font-weight: 700;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}
@media only screen and (max-width: 767px) {
	.jl_content .wp-block-accordion .wp-block-accordion-heading,
	.content_single_page .wp-block-accordion .wp-block-accordion-heading {
		font-size: 17px;
	}
}
/* ===== Post-list dropdowns: Best Tires, Tire Comparison ===== */
.navigation_wrapper .jl_main_menu > li > .sub-menu:has(> .trl-auto-post) {
	width: 360px;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.navigation_wrapper .jl_main_menu > li > .sub-menu > .trl-auto-post > a {
	white-space: normal;
	line-height: 1.4;
}
/* Best Tires mega menu: longer labels wrap instead of truncating, normal case */
.navigation_wrapper .jl_main_menu .trl-brand-mega--posts .trl-brand-mega__grid li a {
	white-space: normal;
	overflow: visible;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}
.trl-brand-mega--posts .trl-brand-mega__grid {
	width: 100%;
	grid-template-columns: repeat(4, 25%);
	column-gap: 0;
}
.navigation_wrapper .jl_main_menu .trl-brand-mega--posts .trl-brand-mega__grid li a {
	padding-right: 24px !important;
}

/* ===== Pros & Cons comparison table (wrap h3+list pairs in .trl-proscons .trl-pc-pros / .trl-pc-cons) ===== */
.trl-proscons { margin: 28px 0 36px; }
.trl-proscons > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 70px;
	align-items: stretch;
}
.trl-proscons .trl-pc-col {
	margin: 0 !important;
	padding: 0 0 12px;
	border-radius: 22px;
	background: #edf9f9;
}
.trl-proscons .trl-pc-cons { background: #fdf1f3; }
.trl-proscons .trl-pc-col > .wp-block-group__inner-container > :first-child {
	margin: 0 !important;
	padding: 15px 20px;
	border-radius: 22px 22px 0 0;
	background: linear-gradient(90deg, #57ada2 0%, #3e8e85 100%);
	box-shadow: 0 10px 16px -10px rgba(37, 110, 100, 0.6);
	color: #fff !important;
	font-family: var(--jl-body-font);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.trl-proscons .trl-pc-cons > .wp-block-group__inner-container > :first-child {
	background: linear-gradient(90deg, #c8304b 0%, #e6576e 100%);
	box-shadow: 0 10px 16px -10px rgba(190, 40, 70, 0.6);
}
.trl-proscons .trl-pc-col > .wp-block-group__inner-container > :first-child strong { color: inherit; font-weight: inherit; }
.trl-proscons .trl-pc-col ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 22px 0 !important;
}
.trl-proscons .trl-pc-col li {
	position: relative;
	margin: 0 !important;
	padding: 14px 0 14px 18px;
	border-bottom: 1px solid #bfe7e5;
	list-style: none;
	font-size: 16px;
	line-height: 1.5;
	color: #2b2f33;
}
.trl-proscons .trl-pc-cons li { border-bottom-color: #f2cbd3; }
.trl-proscons .trl-pc-col li:last-child { border-bottom: 0; }
.trl-proscons .trl-pc-col li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: calc(14px + 0.75em - 2.5px);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #2b2f33;
}
/* Round badge sitting in a white notch cut into the panel edge */
.trl-proscons .trl-pc-col li::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 0 0 9px #fff;
}
.trl-proscons .trl-pc-pros li::after {
	right: -50px;
	background:
		linear-gradient(#2f7d75, #2f7d75) center / 13px 3px no-repeat,
		linear-gradient(#2f7d75, #2f7d75) center / 3px 13px no-repeat,
		linear-gradient(180deg, #ffffff 0%, #f2f2f2 50%, #d6d6d6 100%);
}
.trl-proscons .trl-pc-cons li::after {
	left: -50px;
	background:
		linear-gradient(#cc2f4b, #cc2f4b) center / 13px 3px no-repeat,
		linear-gradient(180deg, #ffffff 0%, #f2f2f2 50%, #d6d6d6 100%);
}
@media only screen and (min-width: 768px) {
	.trl-proscons .trl-pc-col li {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		min-height: 76px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.trl-proscons .trl-pc-col li::before { top: 50%; margin-top: -2.5px; }
	/* Shared row tracks so each pro row lines up with its con row */
	.trl-proscons .trl-pc-col,
	.trl-proscons .trl-pc-col > .wp-block-group__inner-container,
	.trl-proscons .trl-pc-col ul {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: subgrid;
	}
	.trl-proscons .trl-pc-pros { grid-column: 1; grid-row: 1 / span 30; }
	.trl-proscons .trl-pc-cons { grid-column: 2; grid-row: 1 / span 30; }
	.trl-proscons .trl-pc-col > .wp-block-group__inner-container { grid-row: 1 / -1; }
	.trl-proscons .trl-pc-col > .wp-block-group__inner-container > :first-child { grid-row: 1; }
	.trl-proscons .trl-pc-col ul { grid-row: 2 / -1; align-content: start; }
	.trl-proscons .trl-pc-col li { min-height: 68px; }
}
@media only screen and (max-width: 767px) {
	.trl-proscons > .wp-block-group__inner-container { grid-template-columns: 1fr; row-gap: 22px; }
	.trl-proscons .trl-pc-col ul { padding: 4px 16px 0 !important; }
	.trl-proscons .trl-pc-col li { padding-left: 40px; font-size: 15px; }
	.trl-proscons .trl-pc-col li::before { display: none; }
	.trl-proscons .trl-pc-pros li::after,
	.trl-proscons .trl-pc-cons li::after { left: 0; right: auto; width: 26px; height: 26px; margin-top: -13px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); }
}

/* ===== FAQ accordion, minimal list style (accordion block with class .trl-faq) ===== */
.jl_content .wp-block-heading:has(+ .trl-faq),
.content_single_page .wp-block-heading:has(+ .trl-faq) {
	text-align: left;
	font-size: 42px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
}
.trl-faq.wp-block-accordion { margin: 0 0 40px; border: 0; }
/* FAQs split into several consecutive accordion blocks read as one list */
.trl-faq.wp-block-accordion:has(+ .trl-faq) { margin-bottom: 0 !important; }
.trl-faq + .trl-faq.wp-block-accordion { margin-top: 0 !important; }
.trl-faq .wp-block-accordion-item {
	margin: 0 !important;
	border: 0;
	border-bottom: 1px solid #cdcac5;
}
.jl_content .trl-faq.wp-block-accordion .wp-block-accordion-heading,
.content_single_page .trl-faq.wp-block-accordion .wp-block-accordion-heading {
	margin: 0;
	font-family: var(--jl-body-font);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.01em;
}
.trl-faq .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible;
	padding: 26px 0 !important;
	background: none !important;
	box-shadow: none !important;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	border: 0;
	color: #1b1b1b;
	text-align: left;
	cursor: pointer;
}
.trl-faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; opacity: 0.75; }
.trl-faq .wp-block-accordion-heading__toggle:focus-visible { outline: 2px solid #1b1b1b; outline-offset: 4px; }
.trl-faq .wp-block-accordion-heading__toggle-title { flex: 1; max-width: 85%; transition: opacity 0.2s ease; }
.trl-faq .wp-block-accordion-heading__toggle-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	font-size: 0;
	line-height: 0;
	background:
		linear-gradient(#1b1b1b, #1b1b1b) center / 18px 1.5px no-repeat,
		linear-gradient(#1b1b1b, #1b1b1b) center / 1.5px 18px no-repeat;
	transition: transform 0.25s ease;
}
.trl-faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon,
.trl-faq .wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }
.trl-faq .wp-block-accordion-panel { padding: 0 15% 26px 0; }
.trl-faq .wp-block-accordion-panel p { margin: 0 0 12px; color: #4a4744; font-size: 17px; line-height: 1.65; }
.trl-faq .wp-block-accordion-panel p:last-child { margin-bottom: 0; }
@media only screen and (max-width: 767px) {
	.jl_content .wp-block-heading:has(+ .trl-faq),
	.content_single_page .wp-block-heading:has(+ .trl-faq) { font-size: 30px; }
	.jl_content .trl-faq.wp-block-accordion .wp-block-accordion-heading,
	.content_single_page .trl-faq.wp-block-accordion .wp-block-accordion-heading { font-size: 18px; }
	.trl-faq .wp-block-accordion-heading__toggle { gap: 20px; padding: 20px 0 !important; }
	.trl-faq .wp-block-accordion-heading__toggle-title { max-width: none; }
	.trl-faq .wp-block-accordion-panel { padding: 0 0 20px; }
}
/* ===== Dark mode fixes (theme adds .options_dark_skin to body) ===== */
/* Tables: theme stripes odd rows light grey */
.options_dark_skin .wp-block-table tr:nth-child(2n+1) td { background: #0e1529; }
.options_dark_skin .wp-block-table th,
.options_dark_skin .wp-block-table td { border-color: rgba(255, 255, 255, 0.14); }
/* Table of contents box (Customizer CSS sets #EFF0F4) */
.options_dark_skin .table-content { background: #0e1529; }
/* AI summary title is black by default */
.options_dark_skin .blog-ai-summarize-title { color: var(--jl-txt-color, #fff); }
/* In-content links: brand purple #7118ff is too dark on the dark background */
.options_dark_skin .post_content a:not(.wp-block-button__link):not(.wp-block-table-of-contents__entry) { color: #a98bff; }
.options_dark_skin .post_content a:not(.wp-block-button__link):not(.wp-block-table-of-contents__entry):hover { color: #c7b4ff; }
/* Pink callout paragraphs (inline background #fbedeb) */
.options_dark_skin p.has-background[style*="fbedeb" i] {
	background-color: #2a141a !important;
	color: #f2dfe1;
}
.options_dark_skin p.has-background[style*="fbedeb" i] a { color: #ff9aa9; }
/* Pros & Cons */
.options_dark_skin .trl-proscons .trl-pc-pros { background: rgba(87, 173, 162, 0.11); }
.options_dark_skin .trl-proscons .trl-pc-cons { background: rgba(230, 87, 110, 0.11); }
.options_dark_skin .trl-proscons .trl-pc-col li { color: #e4e7ee; border-bottom-color: rgba(87, 173, 162, 0.28); }
.options_dark_skin .trl-proscons .trl-pc-cons li { border-bottom-color: rgba(230, 87, 110, 0.26); }
.options_dark_skin .trl-proscons .trl-pc-col li:last-child { border-bottom: 0; }
.options_dark_skin .trl-proscons .trl-pc-col li::before { background: #e4e7ee; }
.options_dark_skin .trl-proscons .trl-pc-col li::after { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), 0 0 0 9px var(--jl-bg-color, #010617); }
.options_dark_skin .trl-proscons .trl-pc-pros li::after {
	background:
		linear-gradient(#6fc7ba, #6fc7ba) center / 13px 3px no-repeat,
		linear-gradient(#6fc7ba, #6fc7ba) center / 3px 13px no-repeat,
		linear-gradient(180deg, #2c3550 0%, #1b2236 55%, #121829 100%);
}
.options_dark_skin .trl-proscons .trl-pc-cons li::after {
	background:
		linear-gradient(#f26c82, #f26c82) center / 13px 3px no-repeat,
		linear-gradient(180deg, #2c3550 0%, #1b2236 55%, #121829 100%);
}
@media only screen and (max-width: 767px) {
	.options_dark_skin .trl-proscons .trl-pc-col li::after { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
}
/* FAQ */
.options_dark_skin .trl-faq .wp-block-accordion-item { border-bottom-color: rgba(255, 255, 255, 0.16); }
.options_dark_skin .trl-faq .wp-block-accordion-heading__toggle { color: #f1f2f6; }
.options_dark_skin .trl-faq .wp-block-accordion-heading__toggle:focus-visible { outline-color: #f1f2f6; }
.options_dark_skin .trl-faq .wp-block-accordion-heading__toggle-icon {
	background:
		linear-gradient(#f1f2f6, #f1f2f6) center / 18px 1.5px no-repeat,
		linear-gradient(#f1f2f6, #f1f2f6) center / 1.5px 18px no-repeat;
}
.options_dark_skin .trl-faq .wp-block-accordion-panel p { color: #b9bfcc; }
/* ===== Sticky header (Elementor template 22454): stop the menu overflowing onto the logo ===== */
.jlc-stick-main-w .elementor-element-f8abc4c { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
.jlc-stick-main-w .elementor-element-4b28cfc8 { flex: 0 0 auto !important; width: auto !important; }
.jlc-stick-main-w .elementor-element-5a315597,
.jlc-stick-main-w .elementor-element-3c532cad { flex: 0 0 auto !important; }
.jlc-stick-main-w .elementor-element-3c532cad .logo_small_wrapper_table { width: auto; }
.jlc-stick-main-w .elementor-element-4cb07082 { flex: 1 1 auto !important; min-width: 0; }
@media only screen and (max-width: 1366px) {
	.jlc-stick-main-w .jl_main_menu > li { margin-right: 20px !important; }
}
@media only screen and (max-width: 1240px) {
	.jlc-stick-main-w .jl_main_menu > li { margin-right: 16px !important; }
	.jlc-stick-main-w .jl_main_menu > li > a { font-size: 15px !important; }
}
@media only screen and (max-width: 1120px) {
	.jlc-stick-main-w .jl_main_menu > li { margin-right: 12px !important; }
	.jlc-stick-main-w .jl_main_menu > li > a { font-size: 14px !important; }
}

/* Newsletter form: email row spans the full form width so its left edge
   lines up with the consent checkbox and the response message below it. */
.jl-cf7 .wpcf7-form .jl-c7sub { flex: 1 1 100%; width: 100%; }
.jl-cf7 .wpcf7-form .jl-c7sub [data-name="your-email"] { flex: 1 1 auto; }
/* Pin the Sign Up button inside the email box with an even 4px inset on every side. */
.jl-cf7 .wpcf7-form .jl-c7sub { position: relative; }
.jl-cf7 .wpcf7-form .jl-c7sub .wpcf7-submit { top: 4px; right: 4px; bottom: auto; }