/*
 * Module: Blog (single post)
 * Owns: .single-post layout, sticky sidebar (#secondary), .spg-blog-form (sidebar Gravity Form),
 *       single-post entry typography + featured image framing.
 * Depends on: tokens.css
 */

/* ---- Boxed-surface color correction ----
 * Astra's boxed layout paints article/sidebar/comments surfaces with
 * --ast-global-color-4, which in this palette is the brand oxblood (#5b0807).
 * Neutralize to clean white cards on a light backdrop for single posts. */
.single-post #content.site-content {
	background-color: var(--gray-50);
}
.single-post.ast-separate-container .ast-article-single:not(.ast-related-post),
.single-post.ast-separate-container .ast-article-post,
.single-post.ast-separate-container .comments-area,
.single-post.ast-separate-container .comments-count-wrapper,
.single-post.ast-separate-container .ast-author-meta,
.single-post.ast-separate-container .related-posts-title-wrapper {
	background-color: var(--white);
}
.single-post.ast-separate-container.ast-two-container #secondary .widget {
	background-color: transparent;
	padding: 0;
}

/* Blog archive / listing cards: same oxblood-surface fix. In the blog-pro grid
   the surface color sits on .ast-article-inner, so target that -> white cards. */
.blog.ast-separate-container .ast-article-post,
.archive.ast-separate-container .ast-article-post,
.search.ast-separate-container .ast-article-post,
.blog.ast-separate-container .ast-article-inner,
.archive.ast-separate-container .ast-article-inner,
.search.ast-separate-container .ast-article-inner {
	background-color: var(--white);
}
/* Archive card meta/excerpt readable on white. */
.blog .ast-article-post .entry-meta,
.blog .ast-article-post .ast-excerpt-container,
.archive .ast-article-post .entry-meta,
.archive .ast-article-post .ast-excerpt-container {
	color: var(--color-body);
}
/* Belt-and-suspenders: hide the category tag on cards (removed via blog-meta too). */
.blog .ast-article-post .ast-taxonomy-container,
.archive .ast-article-post .ast-taxonomy-container {
	display: none;
}

/* Featured-image logo fallback (posts with no source image): show the company
   logo contained on a soft brand background instead of a cropped cover-fill. */
.ast-blog-featured-section img[src*="Spagnola-logo"],
.post-thumb img[src*="Spagnola-logo"],
.single-post .post-thumb img[src*="Spagnola-logo"] {
	object-fit: contain;
	background-color: var(--color-secondary);
	padding: 22px;
}

/* ---- Single-post content column ---- */
.single-post .entry-content {
	color: var(--color-body);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
}
.single-post .entry-content p {
	margin: 0 0 1.4em;
}
.single-post .entry-content h2 {
	font-family: var(--font-heading);
	color: var(--color-headings);
	font-size: clamp(26px, 2.4vw, var(--text-h3));
	line-height: var(--lh-h3);
	margin: 1.6em 0 0.5em;
}
.single-post .entry-content h3 {
	font-family: var(--font-heading);
	color: var(--color-headings);
	font-size: clamp(21px, 1.8vw, var(--text-h4));
	line-height: var(--lh-h4);
	margin: 1.4em 0 0.5em;
}
.single-post .entry-content a {
	color: var(--link-color);
	text-decoration: underline;
}
.single-post .entry-content a:hover {
	color: var(--link-hover);
}

/* Post title (H1) */
.single-post .entry-title,
.single-post .ast-single-post .entry-title {
	font-family: var(--font-heading);
	color: var(--color-headings);
}

/* Featured image framing */
.single-post .post-thumb img,
.single-post .ast-single-post-featured-section img {
	border-radius: var(--radius-md);
	margin-bottom: var(--gap-section-title);
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ---- Sticky sidebar ---- */
.single-post #secondary,
.single-post .widget-area.secondary {
	position: sticky;
	top: 40px;
	align-self: flex-start;
}

/* ---- Sidebar contact form card ---- */
.spg-blog-form {
	background-color: var(--bg-form);
	border: 1px solid var(--gray-200);
	border-top: 4px solid var(--color-accent);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 28px 24px;
}

/* Widget heading above the form */
.single-post #secondary .widget_custom_html .widget-title,
.single-post #secondary .widget-title {
	font-family: var(--font-heading);
	color: var(--color-headings);
	font-size: var(--text-h5);
	line-height: var(--lh-h5);
	margin: 0 0 4px;
}

/* Gravity Forms inside the sidebar card */
.spg-blog-form .gform_wrapper {
	margin: 0;
}
/* GF's field grid uses a 40px row-gap by default — tighten it. */
.spg-blog-form .gform_wrapper .gform_fields {
	row-gap: 16px !important;
}
.spg-blog-form .gfield {
	margin-bottom: 0;
}
.spg-blog-form .gfield_label {
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: var(--text-caption);
	color: var(--color-headings);
	margin-bottom: 4px;
}
.spg-blog-form .ginput_container input,
.spg-blog-form .ginput_container textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--color-body);
	padding: 10px 12px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	background-color: var(--white);
}
.spg-blog-form .ginput_container textarea {
	min-height: 96px;
	resize: vertical;
}
.spg-blog-form .ginput_container input:focus,
.spg-blog-form .ginput_container textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px rgba(245, 195, 28, 0.35);
}
.spg-blog-form .gform_footer {
	margin: 6px 0 0;
	padding: 0;
}
/* Submit button — !important to beat Gravity Forms' framework theme (blue default). */
.spg-blog-form .gform_wrapper .gform_footer input.gform_button,
.spg-blog-form .gform_wrapper .gform_footer input[type="submit"],
.spg-blog-form input.gform_button,
.spg-blog-form button.gform_button {
	width: 100%;
	background-color: var(--color-accent) !important;
	color: var(--text-cta) !important;
	font-family: var(--font-button);
	font-weight: var(--weight-bold);
	font-size: var(--text-button);
	border: 2px solid var(--color-accent) !important;
	border-radius: var(--radius-sm);
	padding: 12px 20px;
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base);
}
.spg-blog-form .gform_wrapper .gform_footer input.gform_button:hover,
.spg-blog-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.spg-blog-form input.gform_button:hover,
.spg-blog-form button.gform_button:hover {
	background-color: var(--cta-hover-bg) !important;
	border-color: var(--cta-hover-bg) !important;
}

/* Release stickiness where the sidebar stacks below content */
@media (max-width: 921px) {
	.single-post #secondary,
	.single-post .widget-area.secondary {
		position: static;
	}
}

/* ---- Homepage recent-posts grid (Spectra post-grid) — mockup card style ---- */
.spg-blog-grid .uagb-post__inner-wrap {
	display: flex !important; flex-direction: column !important;
	background: var(--white); border-radius: var(--radius-md); overflow: hidden;
	box-shadow: var(--shadow-sm); height: 100%;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.spg-blog-grid .uagb-post__inner-wrap:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
/* Reorder to: image, date, title, excerpt, read-more */
.spg-blog-grid .uagb-post__image      { order: 1; overflow: hidden; margin: 0; }
.spg-blog-grid .uagb-post-grid-byline { order: 2; margin: 0; padding: 20px 24px 0; }
.spg-blog-grid .uagb-post__title      { order: 3; margin: 0; padding: 6px 24px 0; }
.spg-blog-grid .uagb-post__excerpt    { order: 4; margin: 0; padding: 12px 24px 0; }
.spg-blog-grid .uagb-post__cta        { order: 5; margin: 0; padding: 16px 24px 26px; }
/* Image */
.spg-blog-grid .uagb-post__image img { transition: transform var(--transition-slow); width:100% !important; height:210px !important; object-fit:cover !important; display:block; }
.spg-blog-grid .uagb-post__inner-wrap:hover .uagb-post__image img { transform: scale(1.06); }
/* Date (above title) */
.spg-blog-grid .uagb-post__date { color: var(--color-alt-brand); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--weight-semibold); }
.spg-blog-grid .uagb-post__date .dashicons { font-size: 15px; width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
/* Title */
.spg-blog-grid .uagb-post__title { font-family: var(--font-heading); font-size: var(--text-h6); line-height: 1.3; }
.spg-blog-grid .uagb-post__title a { color: var(--color-headings); text-decoration: none; }
.spg-blog-grid .uagb-post__title a:hover { color: var(--color-alt-brand); }
/* Excerpt */
.spg-blog-grid .uagb-post__excerpt { color: var(--color-body); font-size: var(--text-small); line-height: 1.6; }
/* Read More = text link with arrow (NOT a filled button) */
.spg-blog-grid .uagb-post__cta a {
	background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
	color: var(--color-alt-brand) !important; font-family: var(--font-body); font-weight: var(--weight-semibold);
	text-decoration: none; display: inline-flex; align-items: center;
}
.spg-blog-grid .uagb-post__cta a:hover { color: var(--color-brand) !important; }
.spg-blog-grid .uagb-post__cta a::after { content: "\2192"; margin-left: 8px; }

/* Center the "Read More Blogs" button under the grid */
.spg-btn-maroon { justify-content: center !important; }

/* Blog archive hero band — matches the inner-page heroes (QA #33).
   Full-bleed maroon band with white title + subtitle, breaking out of the
   constrained content column via the 100vw technique. */
/* QA #33: hero flush under the header — Astra puts a 64px top margin on #primary */
.blog #primary { margin-top: 0 !important; }
.spg-blog-hero {
	width: 100vw !important;
	max-width: 100vw !important;
	/* !important — Astra's .ast-archive-description margin shorthand was resetting
	   these, leaving the band offset + overflowing (QA #33). */
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-bottom: 44px !important;
	background-color: var(--color-brand);
	padding: 64px 20px !important;
	text-align: center;
}
.spg-blog-hero .ast-archive-title {
	font-family: var(--font-heading);
	color: #ffffff;
	font-size: clamp(34px, 4vw, var(--text-h1));
	line-height: var(--lh-h1);
	margin: 0 0 12px;
}
.spg-blog-hero .spg-blog-hero-sub {
	color: rgba(255,255,255,0.9);
	font-size: var(--text-body-lg);
	max-width: 640px;
	margin: 0 auto;
}

/* ---- QA #34: blog archive cards styled like the homepage post-grid ---- */
.blog .ast-article-inner {
	background: var(--white) !important;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	height: 100%;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.blog .ast-article-inner:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.blog .ast-article-inner .post-content { display: flex; flex-direction: column; flex: 1; padding: 0; }
/* reorder to: image, date, title, excerpt(+read more) */
.blog .ast-blog-featured-section { order: 1; margin: 0 !important; overflow: hidden; }
.blog .ast-blog-featured-section img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.blog .ast-article-inner:hover .ast-blog-featured-section img { transform: scale(1.06); }
.blog .entry-header.ast-blog-meta-container { order: 2; padding: 20px 24px 0 !important; margin: 0 !important; border: 0; }
.blog .entry-title { order: 3; padding: 6px 24px 0; margin: 0; font-family: var(--font-heading); font-size: var(--text-h6); line-height: 1.3; }
.blog .entry-title a { color: var(--color-headings); text-decoration: none; }
.blog .entry-title a:hover { color: var(--color-alt-brand); }
.blog .ast-excerpt-container { order: 4; padding: 12px 24px 26px; margin: 0; color: var(--color-body); font-size: var(--text-small); line-height: 1.6; }
.blog .entry-content.clear { display: none; }        /* empty read-more slot */
.blog .ast-taxonomy-container { display: none !important; }   /* hide category chip */
/* date, like the homepage cards */
.blog .entry-meta,
.blog .entry-meta .posted-on,
.blog .entry-meta .posted-on a {
	color: var(--color-alt-brand);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: var(--weight-semibold);
	text-decoration: none;
}
/* "Read More →" cue (whole card is clickable via slider.js) */
.blog .ast-excerpt-container::after {
	content: "Read More \2192";
	display: block;
	margin-top: 14px;
	color: var(--color-alt-brand);
	font-weight: var(--weight-semibold);
	font-size: var(--text-small);
}