/*
Theme Name: My News Theme
Theme URI: https://example.com/my-news-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, responsive, magazine-style WordPress news theme with widgetized homepage, ad placement zones, custom menus, featured images, and post excerpts. Built with modern CSS, no build step required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-news-theme
Tags: news, magazine, blog, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, widgets

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

my-news-theme is based on underscores https://underscores.me/, (C) 2012-2024 Automattic, Inc.
underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   TABLE OF CONTENTS
   1.0 Reset & Base
   2.0 Typography
   3.0 Layout / Grid
   4.0 Header
   5.0 Navigation
   6.0 Ad Widget Areas
   7.0 Front Page / Homepage
   8.0 Post / Archive Cards
   9.0 Single Post
   10.0 Sidebar & Widgets
   11.0 Comments
   12.0 Footer
   13.0 Forms & Buttons
   14.0 Utilities
   15.0 Responsive
   ========================================================= */

/* 1.0 Reset & Base ---------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: #f4f5f7;
	color: #1a1a1a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: #b3141c; text-decoration: none; }
a:hover, a:focus { color: #7d0e13; text-decoration: underline; }
ul, ol { padding-left: 1.25em; }
figure { margin: 0; }
table { width: 100%; border-collapse: collapse; }

/* 2.0 Typography -------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.25;
	margin: 0 0 .5em;
	color: #111;
	font-weight: 700;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.2em; }

.site-title,
.site-title a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: 900;
	letter-spacing: -.5px;
	color: #111;
}

.site-description {
	color: #666;
	font-size: .85rem;
	margin: 0;
}

/* 3.0 Layout / Grid ------------------------------------------ */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #fff;
}

.site-content {
	padding: 30px 0 50px;
}

.content-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: start;
}

.content-layout.full-width { grid-template-columns: 1fr; }

.homepage-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.homepage-secondary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 30px 0;
}

/* 4.0 Header --------------------------------------------------- */
.site-header {
	background: #fff;
	border-bottom: 3px solid #111;
}

.header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0 10px;
	border-bottom: 1px solid #eee;
}

.header-branding {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0 auto;
}

.custom-logo-link img { max-height: 70px; width: auto; }

.header-date {
	font-size: .8rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.header-social {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: .8rem;
	text-decoration: none;
}

.header-social a:hover { background: #b3141c; }

/* 5.0 Navigation -------------------------------------------------- */
.main-navigation {
	background: #111;
}

.main-navigation .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.main-navigation li { position: relative; }

.main-navigation a {
	display: block;
	padding: 14px 16px;
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .3px;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	background: #b3141c;
	color: #fff;
}

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #1a1a1a;
	min-width: 220px;
	z-index: 50;
	box-shadow: 0 8px 16px rgba(0,0,0,.2);
}

.main-navigation li:hover > .sub-menu { display: block; }
.main-navigation .sub-menu a { padding: 12px 16px; }

.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.5rem;
	padding: 12px 16px;
	cursor: pointer;
}

.search-toggle {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.1rem;
	padding: 14px 16px;
	cursor: pointer;
}

.header-search-form {
	display: none;
	padding: 14px 0;
	background: #f4f5f7;
}

.header-search-form.active { display: block; }

/* 6.0 Ad Widget Areas ------------------------------------------------ */
.ad-slot {
	background: #fafafa;
	border: 1px dashed #ccc;
	color: #999;
	text-align: center;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 20px 10px;
	margin: 20px 0;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ad-slot::before { content: "Advertisement"; }

.ad-header { margin: 15px 0 0; }
.ad-homepage-top { min-height: 90px; }
.ad-sidebar { min-height: 250px; }
.ad-in-content { min-height: 90px; }
.ad-footer { min-height: 90px; margin-top: 30px; }

/* 7.0 Front Page / Homepage ------------------------------------------- */
.featured-post {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	background: #111;
	color: #fff;
}

.featured-post .post-thumbnail img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	opacity: .85;
}

.featured-post .featured-content {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 30px;
	background: linear-gradient(transparent, rgba(0,0,0,.85) 60%);
}

.featured-post .cat-label {
	background: #b3141c;
	color: #fff;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 2px;
	display: inline-block;
	margin-bottom: 10px;
}

.featured-post h2 { color: #fff; font-size: 2rem; margin-bottom: 8px; }
.featured-post h2 a { color: #fff; }
.featured-post .entry-meta { color: #ddd; font-size: .85rem; }

.homepage-list .post-card { display: flex; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #eee; }
.homepage-list .post-card .post-thumbnail { flex: 0 0 100px; }
.homepage-list .post-card .post-thumbnail img { width: 100px; height: 70px; object-fit: cover; border-radius: 3px; }
.homepage-list .post-card h3 { font-size: 1rem; margin-bottom: 4px; }

.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 3px solid #111;
	margin-bottom: 20px;
	padding-bottom: 6px;
}

.section-heading h2 {
	margin: 0;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.section-heading a { font-size: .8rem; text-transform: uppercase; }

/* 8.0 Post / Archive Cards ------------------------------------------- */
.post-card { margin-bottom: 30px; }
.post-card .post-thumbnail img { width: 100%; height: 220px; object-fit: cover; border-radius: 4px; margin-bottom: 12px; }

.cat-label {
	display: inline-block;
	background: #111;
	color: #fff;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 3px 8px;
	border-radius: 2px;
	margin-bottom: 8px;
}

.entry-meta {
	font-size: .8rem;
	color: #888;
	margin-bottom: 8px;
}

.entry-meta a { color: #888; }
.entry-meta span:not(:last-child)::after { content: "•"; margin: 0 6px; }

.entry-summary p:last-child { margin-bottom: 0; }

.read-more {
	display: inline-block;
	font-weight: 700;
	font-size: .82rem;
	text-transform: uppercase;
	margin-top: 6px;
}

.archive-header {
	border-bottom: 3px solid #111;
	margin-bottom: 30px;
	padding-bottom: 12px;
}

.archive-header .page-title { margin-bottom: 4px; }
.archive-header .archive-description { color: #666; font-size: .95rem; margin: 0; }

/* 9.0 Single Post ------------------------------------------------------ */
.single-post .entry-header { margin-bottom: 20px; }
.single-post .entry-title { font-size: 2.1rem; margin-bottom: 10px; }
.single-post .post-thumbnail { margin-bottom: 20px; }
.single-post .post-thumbnail img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 4px; }

.entry-content { font-size: 1.08rem; }
.entry-content p { margin-bottom: 1.4em; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content blockquote {
	border-left: 4px solid #b3141c;
	margin: 1.5em 0;
	padding: .5em 1.2em;
	background: #faf5f5;
	font-style: italic;
	color: #444;
}
.entry-content img { border-radius: 4px; margin: 1em 0; }
.entry-content ul, .entry-content ol { margin-bottom: 1.4em; }

.entry-tags { margin: 30px 0; padding: 15px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.entry-tags a {
	display: inline-block;
	background: #f4f5f7;
	color: #333;
	font-size: .78rem;
	padding: 4px 10px;
	border-radius: 3px;
	margin: 0 6px 6px 0;
}

.author-box {
	display: flex;
	gap: 16px;
	background: #f9f9f9;
	padding: 20px;
	border-radius: 4px;
	margin: 30px 0;
}
.author-box .avatar { border-radius: 50%; flex-shrink: 0; }
.author-box h3 { margin-bottom: 4px; font-size: 1rem; }
.author-box p { margin: 0; color: #555; font-size: .9rem; }

.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 30px 0;
	padding-top: 20px;
	border-top: 1px solid #eee;
}
.post-navigation > div { flex: 1; }
.post-navigation .nav-next { text-align: right; }
.post-navigation .nav-subtitle { display: block; font-size: .72rem; text-transform: uppercase; color: #999; margin-bottom: 4px; }

.related-posts { margin: 40px 0; }
.related-posts .homepage-secondary { margin-top: 20px; }

/* 10.0 Sidebar & Widgets --------------------------------------------- */
.widget {
	margin-bottom: 30px;
	background: #f9f9f9;
	padding: 20px;
	border-radius: 4px;
}
.widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .5px;
	border-bottom: 2px solid #111;
	padding-bottom: 8px;
	margin-bottom: 15px;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 8px 0; border-bottom: 1px solid #eee; }
.widget li:last-child { border-bottom: none; }
.widget select, .widget input[type="text"], .widget input[type="search"] { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 3px; }

/* 11.0 Comments -------------------------------------------------------- */
.comments-area { margin: 40px 0; }
.comments-title { border-bottom: 3px solid #111; padding-bottom: 10px; margin-bottom: 20px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; margin: 0 0 0 40px; padding: 0; }
.comment-body { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid #eee; }
.comment-body .comment-avatar { border-radius: 50%; flex-shrink: 0; }
.comment-meta { font-size: .85rem; color: #888; margin-bottom: 6px; }
.comment-meta .fn { color: #111; font-weight: 700; font-style: normal; }
.comment-content p { margin-bottom: .8em; }
.comment-reply-link { font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.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 #ddd;
	border-radius: 3px;
	margin-bottom: 16px;
	font-family: inherit;
	font-size: .95rem;
}
.comment-form textarea { min-height: 140px; }

/* 12.0 Footer ------------------------------------------------------------ */
.site-footer {
	background: #111;
	color: #ccc;
	margin-top: auto;
	padding: 40px 0 20px;
}
.footer-widgets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-bottom: 30px;
}
.footer-widgets .widget { background: transparent; padding: 0; }
.footer-widgets .widget-title { color: #fff; border-bottom-color: #444; }
.footer-widgets a { color: #ccc; }
.footer-widgets a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; list-style: none; margin: 0 0 20px; padding: 0; }
.footer-social a {
	width: 34px; height: 34px; border-radius: 50%;
	background: #222; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .85rem;
}
.footer-social a:hover { background: #b3141c; }
.site-info {
	border-top: 1px solid #333;
	padding-top: 20px;
	font-size: .82rem;
	color: #888;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.site-info a { color: #aaa; }

/* 13.0 Forms & Buttons ----------------------------------------------------- */
.btn, button, input[type="submit"] {
	display: inline-block;
	background: #b3141c;
	color: #fff;
	border: none;
	padding: 10px 22px;
	font-size: .9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	border-radius: 3px;
	cursor: pointer;
}
.btn:hover, button:hover, input[type="submit"]:hover { background: #7d0e13; color: #fff; }

.search-form { display: flex; }
.search-form .search-field {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 3px 0 0 3px;
	font-size: .95rem;
}
.search-form .search-submit { border-radius: 0 3px 3px 0; }

/* 14.0 Utilities -------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.screen-reader-text:focus {
	position: fixed; top: 10px; left: 10px;
	width: auto; height: auto;
	background: #fff; color: #111;
	padding: 12px 18px; z-index: 999999;
	clip: auto;
}
.pagination { display: flex; gap: 8px; justify-content: center; margin: 30px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
	padding: 8px 14px; border: 1px solid #ddd; border-radius: 3px; color: #333; font-size: .9rem;
}
.pagination .current { background: #111; color: #fff; border-color: #111; }
.no-results { text-align: center; padding: 60px 20px; }
.no-results .search-form { max-width: 400px; margin: 20px auto 0; }

/* 15.0 Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
	.content-layout { grid-template-columns: 1fr; }
	.homepage-grid { grid-template-columns: 1fr; }
	.homepage-secondary { grid-template-columns: repeat(2, 1fr); }
	.footer-widgets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.main-navigation ul { display: none; flex-direction: column; width: 100%; }
	.main-navigation ul.is-active { display: flex; }
	.main-navigation .sub-menu { position: static; box-shadow: none; }
	.main-navigation li:hover > .sub-menu { display: none; }
	.main-navigation li.menu-item-open > .sub-menu { display: block; }
	.main-navigation .container { flex-wrap: wrap; }
	.menu-toggle { display: block; }
	.header-top { flex-direction: column; gap: 10px; }
	.homepage-secondary { grid-template-columns: 1fr; }
	.footer-widgets { grid-template-columns: 1fr; }
	.featured-post .post-thumbnail img { height: 260px; }
	.featured-post h2 { font-size: 1.4rem; }
	.post-navigation { flex-direction: column; }
	.post-navigation .nav-next { text-align: left; }
	h1 { font-size: 1.6rem; }
}