/*
Theme Name: Hello Elementor Child
Theme URI: https://carcomputerexchange.com/blog/
Description: Child theme of Hello Elementor. Restores the blog archive post meta (published / updated dates and comments status) that the previous Pacify theme displayed, and holds any future CarComputerExchange customizations so the parent theme can be updated safely.
Author: CarComputerExchange
Author URI: https://carcomputerexchange.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* -------------------------------------------------------------------------
 * Blog archive post meta
 * Styles the "Posted on … · Updated … · Comments Off" line added by
 * template-parts/archive.php. Kept small and muted, matching the look the
 * Pacify theme used.
 * ---------------------------------------------------------------------- */
.page-content .post .entry-meta {
	margin: 0 0 1em;
	font-size: 0.8125rem; /* ~13px */
	line-height: 1.5;
	color: #888;
}

.page-content .post .entry-meta a {
	color: #888;
	text-decoration: none;
}

.page-content .post .entry-meta a:hover {
	color: #555;
	text-decoration: underline;
}

/* Spacing for the separators / segments inside the meta line. */
.page-content .post .entry-meta .last-updated,
.page-content .post .entry-meta .comments-link {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Content + sidebar two-column layout
 * Hello Elementor renders post listings full width. We split the archive
 * into a main content column and the restored sidebar widget area.
 * ---------------------------------------------------------------------- */
.content-sidebar-wrap {
	display: block;
}

@media ( min-width: 992px ) {
	.content-sidebar-wrap {
		display: flex;
		gap: 2.5rem;
		align-items: flex-start;
	}

	/* Main column takes the remaining space; min-width:0 lets long content shrink. */
	.content-sidebar-wrap #primary {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Fixed-width sidebar column on the right. */
	.content-sidebar-wrap #secondary {
		flex: 0 0 300px;
		width: 300px;
	}
}

/* On small screens the sidebar stacks below the posts with a little gap. */
@media ( max-width: 991px ) {
	#secondary {
		margin-top: 2rem;
	}
}

/* -------------------------------------------------------------------------
 * Sidebar widgets
 * Generic, lightweight styling for the core widgets (Search, Recent Posts,
 * etc.). Third-party widgets such as the reviews box keep their own styles.
 * ---------------------------------------------------------------------- */
#secondary .widget {
	margin-bottom: 2rem;
	font-size: 0.9rem;
}

#secondary .widget:last-child {
	margin-bottom: 0;
}

#secondary .widget-title {
	margin: 0 0 0.75rem;
	padding-bottom: 0.3em;
	font-family: 'Raleway', sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	color: #444;
	border-bottom: 1px dotted #444; /* dotted underline, like the Pacify sidebar */
}

/* Sidebar links in the brand blue (e.g. Recent Posts). */
#secondary .widget a {
	color: #095a99;
}

/* Lists (Recent Posts, Categories, Archives, Meta…) as clean dividers. */
#secondary .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#secondary .widget ul li {
	padding: 0.5rem 0;
	border-bottom: 1px solid #eee;
}

#secondary .widget ul li:last-child {
	border-bottom: 0;
}

#secondary .widget a {
	text-decoration: none;
}

#secondary .widget a:hover {
	text-decoration: underline;
}

/* Search field fills the column. */
#secondary .widget .search-form,
#secondary .widget form {
	display: flex;
	gap: 0.5rem;
}

#secondary .widget input[type="search"],
#secondary .widget input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 3px;
}

/* =========================================================================
 * "Pacify look" — restyle Hello Elementor to resemble the previous theme:
 * blue brand color, Lobster site title, dark menu bar, white post cards and
 * small left-floated thumbnails. !important is used on a few color rules to
 * override Elementor's global kit colors (the leftover pink accent).
 * ========================================================================= */

/* Light gray page background so the white post cards stand out. */
body {
	background-color: #f0f0f0;
}

/* --- Header: site title (Lobster, blue) + "Blog" tagline, left aligned --- */
.site-header .header-inner {
	display: block;
	width: 100%;
}

.site-header .site-branding {
	align-items: flex-start;
	text-align: left;
	padding: 0 10px;
}

.site-header .site-title a {
	font-family: 'Lobster', cursive;
	font-weight: 400;
	color: #095a99 !important;
	text-decoration: none;
}

/* Shrink the site title on smaller screens so the brand name doesn't overflow
 * or get clipped. The Lobster font is wide; wrap as a last resort on very
 * narrow phones. */
@media ( max-width: 767px ) {
	.site-header .site-title {
		font-size: 1.9rem;
		line-height: 1.2;
		word-break: break-word;
	}

	/* Keep the branding and the mobile menu button on a single row (nowrap),
	 * so the button stays to the right at the same height as "Blog" instead of
	 * dropping to a second line. min-width:0 lets the long title shrink/wrap
	 * inside its own column. */
	.site-header .header-inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		justify-content: space-between;
	}

	.site-header .site-branding {
		flex: 1 1 auto;
		min-width: 0;
	}

	.site-header .site-navigation-toggle-holder {
		flex: 0 0 auto;
		margin-left: auto;
		padding-bottom: 0; /* sit flush with the tagline baseline */
	}
}

.site-header .site-description {
	margin: 0;
	color: #777;
	font-size: 1rem;
	font-weight: 400;
}

/* --- Menu: full-width dark bar with white uppercase links --- */
.site-header .site-navigation {
	background: #1c1c1c;
	margin-top: 0.8rem;
	/* Full-bleed: span the whole viewport width regardless of the container. */
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

/* Keep the menu items aligned with the centered content column. */
.site-header .site-navigation ul.menu {
	max-width: 1140px;
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
	justify-content: flex-start;
}

.site-header .site-navigation ul.menu li a {
	color: #dcdcdc !important;
	font-family: 'Raleway', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 14px;
}

.site-header .site-navigation ul.menu li a:hover {
	color: #fff !important;
}

/* Dropdown (e.g. "ALL BRANDS »") keeps a readable light panel. */
.site-header .site-navigation ul.menu li ul li a {
	color: #095a99 !important;
}

/* --- Headings / links in the brand blue, Raleway for headings --- */
.site-main h1,
.site-main h2,
.site-main h3 {
	font-family: 'Raleway', sans-serif;
}

.page-content .post .entry-title a {
	color: #095a99 !important;
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	text-decoration: none;
}

.site-main .page-content a {
	color: #095a99;
}

/* --- Post cards: white box with light border, like Pacify --- */
.page-content .post {
	background: #fff;
	border: 1px solid #e0e0e0;
	padding: 22px 28px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.03 );
	overflow: hidden; /* contain the floated thumbnail */
}

.page-content .post .entry-title {
	margin-top: 0;
}

/* --- Thumbnail: small image floated to the left of the excerpt --- */
.page-content .post a:has( > img.wp-post-image ) {
	float: left;
	margin: 0 22px 8px 0;
	max-width: 130px;
}

.page-content .post img.wp-post-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
}

/* =========================================================================
 * Single post detail
 * Author bio box, entry footer and post navigation used by
 * template-parts/single.php. The author-bio rules mirror the Pacify theme.
 * ========================================================================= */

/* On single posts the featured image is shown larger, floated right like the
 * old theme, instead of the small left thumbnail used in listings. */
.single .page-content .post img.wp-post-image {
	float: right;
	max-width: 320px;
	margin: 0 0 18px 24px;
}

/* The single post title is a plain (unlinked) dark heading. */
.single .page-content .post .entry-title {
	color: #222;
}

/* --- Author bio box ("About Brian") --- */
.author-bio {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin: 30px 0;
	padding: 24px;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}

.author-bio__avatar {
	flex: 0 0 120px; /* don't let the circle shrink in the flex row */
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden; /* clip the photo into a perfect circle */
}

.author-bio__avatar img {
	/* !important beats the theme's global "img { height: auto }" rule;
	   object-fit crops (instead of squishing) a non-square photo. */
	width: 120px !important;
	height: 120px !important;
	object-fit: cover;
	object-position: center top; /* keep the face in frame */
	display: block;
}

.author-bio__name {
	margin: 0 0 8px;
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	color: #444;
}

.author-bio__text {
	margin: 0;
	color: #555;
	line-height: 1.6;
}

@media ( max-width: 480px ) {
	.author-bio {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* --- Entry footer: "Posted in …" categories + Edit link --- */
.entry-footer {
	clear: both;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #eee;
	font-size: 0.85rem;
	color: #777;
}

.entry-footer a {
	color: #095a99;
	text-decoration: none;
}

.entry-footer .edit-link {
	margin-left: 0.5rem;
}

/* --- Previous / next post navigation --- */
.post-navigation {
	clear: both;
	margin: 1.5rem 0;
	font-size: 0.9rem;
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
}

.post-navigation .nav-next {
	text-align: right;
	margin-left: auto;
}

.post-navigation a {
	color: #095a99;
	text-decoration: none;
}

.post-navigation a:hover {
	text-decoration: underline;
}

/* =========================================================================
 * Pagination (archive) — "Older posts" / "Newer posts"
 * ========================================================================= */
.pagination {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 1.5rem 0 2rem;
	font-size: 0.95rem;
}

.pagination .nav-next {
	margin-left: auto;
	text-align: right;
}

.pagination a {
	color: #095a99 !important; /* override the leftover pink accent */
	text-decoration: none;
}

.pagination a:hover {
	text-decoration: underline;
}

/* =========================================================================
 * Footer — style only: turn Hello's own footer into a dark Pacify-style bar.
 * The footer markup/text stays as Hello renders it.
 * ========================================================================= */
.site-footer {
	margin-top: 2.5rem;
	padding: 16px 0;
	background-color: #2b2b2b;
	color: #cfcfcf;
	font-size: 0.8rem;
	line-height: 1.6;
}

/* Center the footer content to the same width as the page. */
.site-footer .footer-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
	align-items: center;
}

/* Copyright line aligned to the right, like the old theme. */
.site-footer .copyright {
	margin-left: auto;
	text-align: right;
}

.site-footer .copyright p {
	margin: 0;
}

/* Keep any footer text/links (branding, menu, copyright) light on the dark bar. */
.site-footer,
.site-footer .site-title a,
.site-footer .site-description,
.site-footer .site-navigation a {
	color: #cfcfcf !important;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff !important;
	text-decoration: underline;
}