/**
 * HYPERLINKS SEO - Article Frontend Presentation (v2.2.2)
 *
 * Loaded ONLY on singular posts carrying the `_hyperlinks_seo_managed` post
 * meta (see class-hyperlinks-seo-frontend.php), and every rule below is
 * scoped under `.hyperlinks-seo-article .hyperlinks-seo-content` -- the body
 * class and content wrapper that ONLY HYPERLINKS-SEO-managed posts get. This
 * file never touches the theme's header, navigation, footer, comments, or
 * any other post's markup.
 *
 * `.hyperlinks-seo-content` is a wrapper div the plugin adds around
 * post_content itself (see Hyperlinks_SEO_REST::sanitize_content()), which
 * is what lets this stylesheet set a real reading width without overriding
 * the theme's own outer container.
 */

/* ------------------------------------------------------------------ */
/* Content width                                                       */
/* ------------------------------------------------------------------ */

.hyperlinks-seo-article .hyperlinks-seo-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

.hyperlinks-seo-article .hyperlinks-seo-content * {
	box-sizing: border-box;
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Typography and vertical rhythm                                      */
/* ------------------------------------------------------------------ */

.hyperlinks-seo-article .hyperlinks-seo-content p {
	line-height: 1.7;
	margin: 0 0 1.25em;
}

.hyperlinks-seo-article .hyperlinks-seo-content h2 {
	line-height: 1.3;
	font-size: 1.6em;
	margin: 2.2em 0 0.7em;
}

.hyperlinks-seo-article .hyperlinks-seo-content h3 {
	line-height: 1.35;
	font-size: 1.25em;
	margin: 1.7em 0 0.6em;
}

.hyperlinks-seo-article .hyperlinks-seo-content h2:first-child,
.hyperlinks-seo-article .hyperlinks-seo-content h3:first-child {
	margin-top: 0;
}

.hyperlinks-seo-article .hyperlinks-seo-content ul,
.hyperlinks-seo-article .hyperlinks-seo-content ol {
	margin: 0 0 1.4em 1.4em;
	padding-left: 1em;
}

.hyperlinks-seo-article .hyperlinks-seo-content li {
	line-height: 1.65;
	margin-bottom: 0.55em;
}

.hyperlinks-seo-article .hyperlinks-seo-content li:last-child {
	margin-bottom: 0;
}

/* A heading must never sit flush against the figure/paragraph after it --
   handled by the h2/h3 top margin above plus the figure margin below, so no
   image or callout ends up visually "attached" to the element before it. */

/* ------------------------------------------------------------------ */
/* Images / figures                                                    */
/* ------------------------------------------------------------------ */

.hyperlinks-seo-article .hyperlinks-seo-content figure.hyperlinks-seo-figure {
	max-width: 100%;
	margin: 2em auto;
	text-align: center;
}

.hyperlinks-seo-article .hyperlinks-seo-content figure.hyperlinks-seo-figure img,
.hyperlinks-seo-article .hyperlinks-seo-content img {
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 8px;
}

.hyperlinks-seo-article .hyperlinks-seo-content figure.hyperlinks-seo-figure figcaption,
.hyperlinks-seo-article .hyperlinks-seo-content .wp-element-caption {
	font-size: 0.85em;
	color: #6b6b6b;
	line-height: 1.5;
	text-align: center;
	margin-top: 0.7em;
	margin-bottom: 0;
}

/* Never let an in-article image be wider than the reading column --
   this is the exact bug being fixed, so it's enforced twice (max-width:100%
   above, and no alignwide/alignfull override here). */
.hyperlinks-seo-article .hyperlinks-seo-content .alignwide img,
.hyperlinks-seo-article .hyperlinks-seo-content .alignfull img {
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Tables                                                               */
/* ------------------------------------------------------------------ */

.hyperlinks-seo-article .hyperlinks-seo-content .hyperlinks-seo-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 2em 0;
}

.hyperlinks-seo-article .hyperlinks-seo-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.hyperlinks-seo-article .hyperlinks-seo-content th,
.hyperlinks-seo-article .hyperlinks-seo-content td {
	padding: 0.75em 1em;
	border: 1px solid #e3e3e3;
	text-align: left;
	vertical-align: top;
}

.hyperlinks-seo-article .hyperlinks-seo-content thead th {
	background: #f4f5f7;
	font-weight: 600;
}

.hyperlinks-seo-article .hyperlinks-seo-content tbody tr:nth-child(even) {
	background: #fafafa;
}

/* ------------------------------------------------------------------ */
/* Key-takeaway / callout boxes                                        */
/* ------------------------------------------------------------------ */

.hyperlinks-seo-article .hyperlinks-seo-content blockquote.hyperlinks-seo-takeaways {
	background: #f5f7fb;
	border-left: 4px solid #3457d5;
	border-radius: 8px;
	padding: 1.3em 1.6em;
	margin: 2.2em 0;
}

.hyperlinks-seo-article .hyperlinks-seo-content blockquote.hyperlinks-seo-takeaways p:first-child {
	margin-top: 0;
	font-weight: 600;
}

.hyperlinks-seo-article .hyperlinks-seo-content blockquote.hyperlinks-seo-takeaways p:last-child {
	margin-bottom: 0;
}

.hyperlinks-seo-article .hyperlinks-seo-content blockquote.hyperlinks-seo-takeaways ul,
.hyperlinks-seo-article .hyperlinks-seo-content blockquote.hyperlinks-seo-takeaways ol {
	margin-left: 1.2em;
	margin-bottom: 0.4em;
}

/* ------------------------------------------------------------------ */
/* FAQ readability (no JS accordion -- plain, well-spaced Q/A blocks)   */
/* ------------------------------------------------------------------ */

/* Targets the "<p><strong>Question?</strong></p>" pattern the FAQ section
   is written in, giving each question clear top spacing without needing to
   detect an "FAQ" heading by text. */
.hyperlinks-seo-article .hyperlinks-seo-content p > strong:only-child {
	display: inline-block;
	margin-top: 0.4em;
}

.hyperlinks-seo-article .hyperlinks-seo-content p:has(> strong:only-child) {
	margin-top: 1.8em;
	margin-bottom: 0.4em;
}

/* ------------------------------------------------------------------ */
/* Responsive behavior                                                 */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
	.hyperlinks-seo-article .hyperlinks-seo-content {
		padding: 0 18px;
	}
	.hyperlinks-seo-article .hyperlinks-seo-content h2 {
		font-size: 1.35em;
	}
	.hyperlinks-seo-article .hyperlinks-seo-content h3 {
		font-size: 1.15em;
	}
}

@media (max-width: 480px) {
	.hyperlinks-seo-article .hyperlinks-seo-content {
		padding: 0 14px;
	}
	.hyperlinks-seo-article .hyperlinks-seo-content th,
	.hyperlinks-seo-article .hyperlinks-seo-content td {
		padding: 0.6em 0.7em;
		font-size: 0.92em;
	}
}

/* ------------------------------------------------------------------ */
/* Best-effort only: theme Featured Image hero                         */
/* ------------------------------------------------------------------ */

/*
 * The Featured Image itself lives OUTSIDE .hyperlinks-seo-content, in the
 * active theme's own single-post template markup -- a region this plugin
 * deliberately does not own or override (see plugin note: "do not override
 * the site header, navigation, footer, comments, or theme-wide container").
 * The two selectors below are a best-effort constraint for the handful of
 * common WordPress block-theme class names; if the active theme uses a
 * different structure for its post-thumbnail hero, this will not match, and
 * that is expected -- it is a theme template concern, not something this
 * plugin can guarantee from a scoped content stylesheet.
 */
body.hyperlinks-seo-article .wp-block-post-featured-image img,
body.hyperlinks-seo-article .post-thumbnail img {
	max-height: 480px;
	object-fit: cover;
	border-radius: 8px;
}