:root {
    --primary-color: #0066cc; /* TommyClarke Blue */
    --primary-hover: #0052a3;
    --dark-bg: #111111;
    --light-bg: #f8f9fa;
    --gray-lite-bg: #f5f5f5;
    --text-on-primary: #ffffff;
    --header-font-stack: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@keyframes sweep {
	0%    { opacity: 0; transform: translateX(-10px); }
	100%  { opacity: 1; transform: translateX(0); }
}

/* Base Layout Tweaks for Responsiveness */
.main-container {
    overflow: hidden;
}

/* Grid Layout matching tommycars blog-area .grid */
.tc-grid {
    gap: 1.4rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Media Queries for Grid */
@media (max-width: 768px) {
    .tc-grid {
        grid-template-columns: repeat(1, 1fr);
    }

	.blog-area .grid {
		margin: 0;
		width: 100%;
	}
}

/* Header & Nav Responsiveness - matching tommycars mobile behavior */
@media (max-width: 768px) {
    .bar.bar-toggle {
        padding: 10px 0;
    }
    .bar__module .header-logo img {
        max-width: 140px;
    }
    .modal-container.menu-fullscreen .modal-content {
        padding: 2rem;
    }
}

/* Component: Featured Items (similar to .exc-featured-item) */
.tc-featured-item {
    border-radius: .6rem;
    overflow: hidden;
    background: var(--light-bg);
    margin-bottom: 1.5rem;
}
.tc-featured-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.tc-featured-item .content {
    padding: 1rem;
}
.tc-featured-item .content h3 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    color: var(--primary-color);
}

/* Link Colors - TommyClarke Blue */
a { color: var(--primary-color); }
a:hover { color: var(--primary-hover); }

/* Article / Blog Styles - Adapted from tommycars custom.css */
section.video-area { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.video-area-wrap { padding:1.2rem 0; }
.video-area-wrap .line { margin-top: 5px; }
.video-area-wrap .section-title .title { text-transform: none; font-size: 1.8rem; margin-bottom: 0; line-height: 1.1; }
.blue-bg { background-color: var(--dark-bg); border-bottom: 3px solid var(--primary-color); }
.blue-bg .section-title.white-title .title { color: #fff; margin-top: 5px; }
.blue-bg .section-title.white-title .sub-title { color: #fff; font-size: 1.1rem; font-weight: 700; display: block; margin-bottom: 0; }
.blue-bg .blog--post--tag .date { color: #ccc; }
.blue-bg .blog--post--tag i { color: var(--primary-color); }

.gray-lite-bg { background-color: var(--gray-lite-bg); }
.pt-60 { padding-top: 60px !important; }
.pb-60 { padding-bottom: 60px; }
.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.mb-30 { margin-bottom: 30px; }

.blog-sidebar.slim { padding: 0; }
.widget-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 25px; position: relative; padding-bottom: 15px; }
.widget-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background: var(--primary-color); }

.sidebar-cat ul { padding: 0; margin: 0; }
.sidebar-cat ul li { margin-bottom: 8px; list-style: none; }
.sidebar-cat ul li a { padding: 10px 15px; display: block; color: #444; background: #eee; position: relative; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; border-radius: 4px; }
.sidebar-cat ul li a:hover { background: var(--primary-color); color: #fff; }
.sidebar-cat ul li.selected a { background: var(--primary-color); color: #fff; }

.grid-item.blog--post { margin-bottom: 25px; }
.blog--post--content h2 { font-size: 1.2rem; margin: 12px 0 8px; line-height: 1.3; }
.blog--post--content h2 a { color: var(--dark-bg); text-decoration: none; }
.blog--post--content h2 a:hover { color: var(--primary-color); }
.blog--post--content p { color: #666; font-size: 0.85rem; line-height: 1.4; }
.blog--post--thumb { margin-bottom: 12px; }
.blog--post--thumb img { width: 100%; height: auto; border-radius: 4px; display: block; }

.blog-area .grid {
    gap: 1.4rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .blog-area .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.blog-details-content { font-family: var(--header-font-stack); color: #444; }
.blog-details-content p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; color: #444; }
.blog-details-content h1, .blog-details-content h2, .blog-details-content h3,
.blog-details-content h4, .blog-details-content h5, .blog-details-content h6 {
    color: var(--dark-bg); font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; line-height: 1.3;
}
.blog-details-content h1 { font-size: 2.2rem; }
.blog-details-content h2 { font-size: 1.8rem; }
.blog-details-content h3 { font-size: 1.5rem; font-weight: 600; }
.blog-details-content h4 { font-size: 1.3rem; font-weight: 600; }

.blog-details-content ul, .blog-details-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.blog-details-content li { list-style-type: disc; margin-bottom: 0.6rem; line-height: 1.6; font-size: 1.05rem; }
.blog-details-content ol li { list-style-type: decimal; }

.blog-details-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    border-left: 4px solid var(--primary-color);
    background: #eee;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
}
.blog-details-content blockquote p { margin-bottom: 0; font-size: 1.2rem !important; }

.blog-details-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.5rem 0; }
.blog-details-content a { text-decoration: underline; font-weight: 600; }
.blog-details-content a:hover { text-decoration: none; }

.blog--post--tag { margin-bottom: 15px; }
.blog--post--tag .date { color: #888; font-size: 0.9rem; }
.blog--post--tag i { margin-right: 8px; color: var(--primary-color); }

/* Authorship Component styles */
.avatar { display: flex; align-items: center; border-top: 1px solid #ddd; padding-top: 30px; margin-top: 40px; }
.avatar img { width: 80px; height: 80px; border-radius: 50%; margin-right: 20px; }
.avatar-post h4 { margin: 0; font-size: 1.2rem; }
.avatar-post p { margin: 5px 0 0; font-size: 0.9rem; color: #666; }

/* Form Styles - Adapted from tommycars */
.Input { padding:.5rem .9rem; border-radius:.3rem; border:1px solid #aaa; font-size:1.2rem; margin-right: .4rem; width: 100%; background:var(--light-bg); }
.Form-Actions .Button, .btn--primary {
	background-color: var(--primary-color) !important;
	color: var(--text-on-primary) !important;
	font-weight: bold;
	border: 2px solid var(--primary-color) !important;
	border-radius: 1.2rem;
	display: inline-block;
	text-decoration: none;
	padding: .4rem 1rem;
	cursor: pointer;
    transition: all 0.3s ease;
}
.Form-Actions .Button:hover, .btn--primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Sidebar adjustments for mobile */
@media (max-width: 991px) {
	.tc-sidebar { margin-top: 2rem; }
	.tc-main-with-sidebar { display:flex; flex-direction: column-reverse; }
    .blog-sidebar { margin-top: 40px; }
}

/* Footer layout tweaks */
.footer-5 {
    background: var(--dark-bg);
    color: #888;
}
.footer-5 a {
    color: #aaa;
}
.footer-5 a:hover {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .video-area-wrap { padding: 1.5rem 0; }
    .video-area-wrap .section-title .title { font-size: 1.4rem; }
    .video-area-wrap .section-title .sub-title { font-size: 0.9rem; }
    .blog--post.blog--detail { padding: 0; }
    .pt-120 { padding-top: 60px; }
    .pb-120 { padding-bottom: 60px; }
    .blog--post--content h2 { font-size: 1.1rem; }
    .blog-details-content p, .blog-details-content li { font-size: 1rem; }
    .blog-details-content h1 { font-size: 1.8rem; }
    .blog-details-content h2 { font-size: 1.5rem; }
    .blog-details-content h3 { font-size: 1.3rem; }
    .blog-details-content blockquote { padding: 1rem 1.2rem; font-size: 1.1rem; }
    .blog-details-content blockquote p { font-size: 1.1rem !important; }
}