:root {
--color-primary: #c1272d;
--color-primary-dark: #a01f24;
--color-text: #1a1a1a;
--color-text-light: #555;
--color-meta: #888;
--color-bg: #f5f5f5;
--color-white: #fff;
--color-border: #e0e0e0;
--color-breaking: #e74c3c;
--color-tag: #f0f0f0;
--color-overlay: rgba(0,0,0,0.5);
--font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--max-width: 1200px;
--content-width: 720px;
--header-height: 56px;
--gap: 20px;
--radius: 6px;
--shadow: 0 1px 3px rgba(0,0,0,0.08);
--shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
--transition: 0.2s ease;
} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
ul, ol { list-style: none; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; border: none; background: none; }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); height: 1px; overflow: hidden; position: absolute; width: 1px; }
.skip-link { position: absolute; top: -100px; left: 0; z-index: 9999; background: var(--color-primary); color: var(--color-white); padding: 8px 16px; }
.skip-link:focus { top: 0; } .container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 16px;
}  .top-bar {
background: var(--color-text);
color: var(--color-white);
font-size: 13px;
padding: 6px 0;
}
.top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-bar .date { color: #aaa; }
.top-bar-links { display: flex; gap: 16px; }
.top-bar-links a { color: #ccc; font-size: 13px; }
.top-bar-links a:hover { color: var(--color-white); } .site-header {
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 1000;
transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-lg); }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: 16px;
}
.site-branding { flex-shrink: 0; }
.site-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 800;
line-height: 1.2;
}
.site-title a { color: var(--color-text); }
.site-title a:hover { color: var(--color-primary); } .main-navigation { flex: 1; }
.main-navigation ul { display: flex; gap: 4px; flex-wrap: wrap; }
.main-navigation a {
display: block;
padding: 8px 14px;
color: var(--color-text);
font-size: 14px;
font-weight: 600;
border-radius: var(--radius);
white-space: nowrap;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
background: var(--color-bg);
color: var(--color-primary);
} .menu-toggle {
display: none;
width: 40px;
height: 40px;
position: relative;
flex-shrink: 0;
}
.menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-text);
position: absolute;
left: 9px;
transition: var(--transition);
}
.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 19px; }
.menu-toggle span:nth-child(3) { top: 25px; }
.menu-toggle.active span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { top: 19px; transform: rotate(-45deg); } .search-toggle { flex-shrink: 0; }
.search-toggle button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background var(--transition);
}
.search-toggle button:hover { background: var(--color-bg); }
.search-toggle svg { width: 18px; height: 18px; fill: var(--color-text); } .search-form-wrap {
display: none;
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
padding: 12px 0;
}
.search-form-wrap.active { display: block; }
.search-form-wrap .search-form {
display: flex;
gap: 8px;
}
.search-form-wrap .search-field {
flex: 1;
padding: 10px 16px;
border: 2px solid var(--color-border);
border-radius: var(--radius);
font-size: 16px;
outline: none;
transition: border-color var(--transition);
}
.search-form-wrap .search-field:focus { border-color: var(--color-primary); }
.search-form-wrap .search-submit {
padding: 10px 20px;
background: var(--color-primary);
color: var(--color-white);
border-radius: var(--radius);
font-weight: 600;
font-size: 14px;
transition: background var(--transition);
}
.search-form-wrap .search-submit:hover { background: var(--color-primary-dark); } .breaking-news {
background: var(--color-breaking);
color: var(--color-white);
overflow: hidden;
display: none;
}
.breaking-news.active { display: block; }
.breaking-news .container {
display: flex;
align-items: center;
gap: 12px;
padding-top: 7px;
padding-bottom: 7px;
}
.breaking-label {
background: var(--color-white);
color: var(--color-breaking);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
}
.breaking-ticker {
flex: 1;
overflow: hidden;
position: relative;
}
.breaking-ticker-inner {
display: flex;
gap: 48px;
animation: ticker-scroll 30s linear infinite;
}
.breaking-ticker-inner a {
color: var(--color-white);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.breaking-ticker-inner a:hover { text-decoration: underline; }
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
} .content-area {
display: grid;
grid-template-columns: 1fr 300px;
gap: 32px;
padding: 32px 0;
}
.content-area.full-width {
grid-template-columns: 1fr;
}
.content-area.no-sidebar {
grid-template-columns: 1fr;
} .section-editors-picks {
padding-top: 32px;
} .home-content-area {
display: grid;
grid-template-columns: 1fr 300px;
gap: 32px;
padding: 32px 0;
}
.home-main {
min-width: 0;
}
.home-sidebar {
position: sticky;
top: 72px;
align-self: start;
}
.home-sidebar .widget {
background: var(--color-white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 24px;
}
.home-sidebar .widget-title {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-primary);
} @media (max-width: 768px) {
.home-content-area {
grid-template-columns: 1fr;
}
.home-sidebar {
position: static;
}
} .hero-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
padding-top: 32px;
margin-bottom: 32px;
min-height: 420px;
}
.hero-main {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: var(--color-text);
}
.hero-main a { display: block; height: 100%; }
.hero-main img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hero-main:hover img { transform: scale(1.03); }
.hero-main .hero-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 24px 24px;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
color: var(--color-white);
}
.hero-main .hero-content .cat-label {
display: inline-block;
background: var(--color-primary);
color: var(--color-white);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
margin-bottom: 8px;
}
.hero-main .hero-content h2 {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 800;
line-height: 1.3;
margin-bottom: 6px;
}
.hero-main .hero-content .hero-meta {
font-size: 12px;
color: #ccc;
}
.hero-side {
display: flex;
flex-direction: column;
gap: var(--gap);
}
.hero-side article {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: var(--color-text);
flex: 1;
}
.hero-side article a { display: block; height: 100%; }
.hero-side article img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hero-side article:hover img { transform: scale(1.03); }
.hero-side .hero-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px 16px 16px;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
color: var(--color-white);
}
.hero-side .hero-content .cat-label {
display: inline-block;
background: var(--color-primary);
color: var(--color-white);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 2px;
margin-bottom: 4px;
}
.hero-side .hero-content h3 {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
} .section-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid var(--color-primary);
display: flex;
align-items: center;
gap: 8px;
} .posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
} .post-card {
background: var(--color-white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: box-shadow var(--transition), transform var(--transition);
}
.post-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.post-card .card-image {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--color-border);
}
.post-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.post-card:hover .card-image img { transform: scale(1.05); }
.post-card .card-body { padding: 16px; }
.post-card .card-body .cat-label {
display: inline-block;
background: var(--color-primary);
color: var(--color-white);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 3px;
margin-bottom: 8px;
}
.post-card .card-body h3 {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 8px;
}
.post-card .card-body h3 a { color: var(--color-text); }
.post-card .card-body h3 a:hover { color: var(--color-primary); }
.post-card .card-body .card-meta {
font-size: 12px;
color: var(--color-meta);
display: flex;
gap: 12px;
align-items: center;
}
.post-card .card-body .card-excerpt {
font-size: 14px;
color: var(--color-text-light);
line-height: 1.5;
margin-top: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .post-card.no-thumb .card-body h3 { font-size: 15px; }
.post-card.no-thumb .card-excerpt { -webkit-line-clamp: 3; } .pagination {
margin-top: 32px;
text-align: center;
}
.pagination .nav-links {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: 14px;
font-weight: 500;
color: var(--color-text);
}
.pagination .page-numbers.current {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.pagination .page-numbers:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.pagination .page-numbers.current:hover { color: var(--color-white); } .single-post .content-area { }
.article-header {
margin-bottom: 24px;
}
.article-header .cat-label {
display: inline-block;
background: var(--color-primary);
color: var(--color-white);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 3px;
margin-bottom: 12px;
}
.article-header h1 {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
line-height: 1.3;
margin-bottom: 12px;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: var(--color-meta);
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.article-meta .meta-item { display: flex; align-items: center; gap: 4px; }
.article-meta .meta-item svg { width: 14px; height: 14px; fill: var(--color-meta); }
.article-meta a { color: var(--color-text); font-weight: 600; }
.article-meta a:hover { color: var(--color-primary); } .article-thumbnail {
margin-bottom: 24px;
border-radius: var(--radius);
overflow: hidden;
}
.article-thumbnail img { width: 100%; } .article-content {
font-size: 17px;
line-height: 1.8;
color: var(--color-text);
background-color: #ffffff;
padding:15px;
}
.article-content p { margin-bottom: 20px; }
.article-content h2 {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
margin: 28px 0 14px;
}
.article-content h3 {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
margin: 24px 0 12px;
}
.article-content blockquote {
border-left: 4px solid var(--color-primary);
margin: 20px 0;
padding: 12px 20px;
background: var(--color-bg);
border-radius: 0 var(--radius) var(--radius) 0;
font-style: italic;
color: var(--color-text-light);
}
.article-content ul, .article-content ol {
margin: 12px 0 20px;
padding-left: 24px;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: 6px; }
.article-content a { text-decoration: underline; }
.article-content img {
border-radius: var(--radius);
margin: 16px 0;
}
.article-content figure {
margin: 20px 0;
}
.article-content figcaption {
font-size: 13px;
color: var(--color-meta);
text-align: center;
margin-top: 8px;
}
.article-content .wp-caption-text {
font-size: 13px;
color: var(--color-meta);
text-align: center;
margin-top: 8px;
}
.article-content pre, .article-content code {
background: var(--color-bg);
border-radius: var(--radius);
font-size: 14px;
}
.article-content pre {
padding: 16px;
overflow-x: auto;
margin: 16px 0;
}
.article-content code { padding: 2px 6px; }
.article-content pre code { padding: 0; background: none; } .article-tags {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.article-tags .tags-label {
font-size: 13px;
font-weight: 700;
color: var(--color-text);
}
.article-tags a {
font-size: 12px;
padding: 4px 10px;
background: var(--color-tag);
border-radius: 20px;
color: var(--color-text-light);
}
.article-tags a:hover {
background: var(--color-primary);
color: var(--color-white);
} .share-buttons {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}
.share-buttons button,
.share-buttons a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
color: var(--color-white);
transition: opacity var(--transition);
}
.share-buttons button:hover,
.share-buttons a:hover { opacity: 0.9; color: var(--color-white); }
.share-twitter { background: #1da1f2; }
.share-facebook { background: #1877f2; }
.share-whatsapp { background: #25d366; }
.share-copy { background: #555; }
.share-buttons svg { width: 14px; height: 14px; fill: currentColor; } .author-box {
display: flex;
gap: 16px;
margin-top: 32px;
padding: 20px;
background: var(--color-white);
border-radius: var(--radius);
box-shadow: var(--shadow);
align-items: center;
}
.author-box .author-avatar { flex-shrink: 0; }
.author-box .author-avatar img { border-radius: 50%; width: 64px; height: 64px; }
.author-box .author-name {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.author-box .author-name a { color: var(--color-text); }
.author-box .author-bio {
font-size: 13px;
color: var(--color-text-light);
line-height: 1.5;
} .related-posts { margin-top: 32px; }
.related-posts .section-title { font-size: 18px; }
.related-posts .posts-grid { grid-template-columns: repeat(3, 1fr); } .post-navigation {
margin-top: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
background: var(--color-white);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: box-shadow var(--transition);
}
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover { box-shadow: var(--shadow-lg); }
.post-navigation a {
display: block;
padding: 16px;
color: var(--color-text);
}
.post-navigation .meta-nav {
display: block;
font-size: 11px;
color: var(--color-meta);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 4px;
}
.post-navigation .post-title {
font-size: 14px;
font-weight: 600;
} .sidebar { position: sticky; top: 72px; }
.sidebar .widget {
background: var(--color-white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 24px;
}
.sidebar .widget-title {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-primary);
}
.sidebar .widget ul { list-style: none; }
.sidebar .widget li {
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
font-size: 14px;
}
.sidebar .widget li:last-child { border-bottom: none; }
.sidebar .widget li a { color: var(--color-text); }
.sidebar .widget li a:hover { color: var(--color-primary); }
.sidebar .widget_search .search-form {
display: flex;
gap: 4px;
}
.sidebar .widget_search input[type="search"] {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: 14px;
outline: none;
}
.sidebar .widget_search input[type="submit"] {
padding: 8px 14px;
background: var(--color-primary);
color: var(--color-white);
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
} .page-header {
margin-bottom: 24px;
}
.page-header h1 {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 800;
}
.page-header .taxonomy-description {
font-size: 14px;
color: var(--color-text-light);
margin-top: 6px;
}
.page-header .archive-description { margin-top: 8px; font-size: 14px; color: var(--color-text-light); } .archive-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .error-404 {
text-align: center;
padding: 64px 0;
}
.error-404 .error-code {
font-family: var(--font-heading);
font-size: 80px;
font-weight: 900;
color: var(--color-primary);
line-height: 1;
margin-bottom: 16px;
}
.error-404 h1 {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
margin-bottom: 12px;
}
.error-404 p {
font-size: 16px;
color: var(--color-text-light);
margin-bottom: 24px;
}
.error-404 .search-form {
display: flex;
gap: 8px;
max-width: 400px;
margin: 0 auto 24px;
}
.error-404 .search-form input[type="search"] {
flex: 1;
padding: 10px 14px;
border: 2px solid var(--color-border);
border-radius: var(--radius);
font-size: 15px;
outline: none;
}
.error-404 .search-form input[type="submit"] {
padding: 10px 20px;
background: var(--color-primary);
color: var(--color-white);
border-radius: var(--radius);
font-weight: 600;
} .site-footer {
background: var(--color-text);
color: #aaa;
margin-top: 48px;
}
.footer-widgets {
padding: 48px 0 24px;
}
.footer-widgets .container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.footer-widgets .widget {
margin-bottom: 24px;
}
.footer-widgets .widget-title {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: var(--color-white);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-primary);
}
.footer-widgets .widget ul { list-style: none; }
.footer-widgets .widget li {
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
font-size: 13px;
}
.footer-widgets .widget li:last-child { border-bottom: none; }
.footer-widgets .widget a { color: #aaa; }
.footer-widgets .widget a:hover { color: var(--color-white); }
.footer-widgets .widget p { font-size: 13px; line-height: 1.7; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 20px 0;
}
.footer-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom .copyright { font-size: 13px; }
.footer-bottom a { color: #ccc; }
.footer-bottom a:hover { color: var(--color-white); }
.footer-menu ul { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-menu a { font-size: 13px; } .back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 42px;
height: 42px;
background: var(--color-primary);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background var(--transition);
box-shadow: var(--shadow-lg);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover { background: var(--color-primary-dark); }
.back-to-top svg { width: 20px; height: 20px; fill: var(--color-white); } .comments-area {
margin-top: 32px;
background: var(--color-white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px;
}
.comments-title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
.comment-list { list-style: none; }
.comment-list .comment {
padding: 16px 0;
border-bottom: 1px solid var(--color-border);
}
.comment-list .comment:last-child { border-bottom: none; }
.comment-list .comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.comment-list .comment-author img { border-radius: 50%; }
.comment-list .comment-author cite {
font-style: normal;
font-weight: 700;
font-size: 14px;
}
.comment-list .comment-meta {
font-size: 12px;
color: var(--color-meta);
margin-bottom: 8px;
}
.comment-list .comment-meta a { color: var(--color-meta); }
.comment-list .comment-content {
font-size: 14px;
line-height: 1.6;
}
.comment-list .comment-content p { margin-bottom: 8px; }
.comment-list .reply a {
font-size: 12px;
font-weight: 600;
color: var(--color-primary);
}
.comment-respond { margin-top: 24px; }
.comment-reply-title {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
}
.comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: 14px;
margin-bottom: 12px;
outline: none;
transition: border-color var(--transition);
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-primary); }
.comment-form .submit {
padding: 10px 24px;
background: var(--color-primary);
color: var(--color-white);
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
transition: background var(--transition);
}
.comment-form .submit:hover { background: var(--color-primary-dark); }  @media (max-width: 1024px) {
.container { padding: 0 20px; }
.content-area { grid-template-columns: 1fr 280px; gap: 24px; }
.hero-section { min-height: 340px; }
.hero-main .hero-content h2 { font-size: 20px; }
.posts-grid { grid-template-columns: repeat(2, 1fr); }
.footer-widgets .container { grid-template-columns: repeat(2, 1fr); }
} @media (max-width: 768px) {
.content-area {
grid-template-columns: 1fr;
}
.hero-section {
grid-template-columns: 1fr;
min-height: auto;
gap: 12px;
}
.hero-side {
flex-direction: row;
}
.hero-side article { min-height: 200px; }
.hero-main .hero-content h2 { font-size: 18px; }
.hero-side .hero-content h3 { font-size: 14px; } .menu-toggle { display: block; }
.main-navigation {
display: none;
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
background: var(--color-white);
border-bottom: 2px solid var(--color-border);
box-shadow: var(--shadow-lg);
z-index: 999;
}
.main-navigation.active { display: block; }
.main-navigation ul {
flex-direction: column;
gap: 0;
padding: 8px 16px;
}
.main-navigation a {
padding: 12px 8px;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
}
.main-navigation li:last-child a { border-bottom: none; }
.posts-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.post-card .card-body h3 { font-size: 14px; }
.article-header h1 { font-size: 22px; }
.related-posts .posts-grid { grid-template-columns: repeat(2, 1fr); }
.post-navigation { grid-template-columns: 1fr; }
.archive-posts { grid-template-columns: 1fr; }
.footer-widgets .container { grid-template-columns: 1fr; gap: 8px; }
.footer-bottom .container { flex-direction: column; text-align: center; }
} @media (max-width: 480px) {
.hero-side { flex-direction: column; }
.hero-side article { min-height: 160px; }
.posts-grid { grid-template-columns: 1fr; }
.related-posts .posts-grid { grid-template-columns: 1fr; }
.share-buttons { justify-content: center; }
.article-meta { flex-direction: column; gap: 6px; }
.author-box { flex-direction: column; text-align: center; }
}