/* ==========================================================================
   SGS — Post detail (single post) presentation
   Loaded only on is_singular('post'), after sgs-child/style.css.
   See sgs-child/functions.php → sgs_child_single_post_styles().

   THE BUG THIS FIXES
   ==================
   templates/page-header.php prints the post's header background inline:

       <section id="page-header" class="cs-section cs-parallax"
                style="background-image: url(/wp-content/uploads/2021/10/asdff.png);">

   Nothing in the theme sets background-size on it — `cs-section-cover-bg` is only
   added when the "cover" post option is ticked, and no post has it — so the image
   renders at its natural 2002x1127 from the top-left corner. The band is only
   ~420px tall, so all that shows is the blank upper third of the image, with the
   grey logo peeking out at the bottom edge. That is the "giant SGS logo floating
   in whitespace" on screen.

   On top of that, `#page-header .page-title` is `color: #fff` (css/style.css:1692)
   — white type on a white logo plate. The title is in the HTML and readable by
   screen readers, it is simply invisible.

   Posts that have NO header background hit a different half of the same problem:
   `#page-header` falls back to `background-color: #428bca` (css/style.css:1682),
   Bootstrap's stock blue, which is not an SGS colour.

   THE FIX
   =======
   1. Size any header background as `cover` and centre it, so an image fills the
      band instead of being cropped to its empty corner.
   2. Lay a brand navy→green scrim over it (::before). This guarantees legible
      white type over ANY background — the pale logo plate above, a dark photo, or
      nothing at all — and replaces the stock Bootstrap blue with SGS colours.
      Editor-chosen imagery still reads through the scrim as a watermark.
   3. Size and space the title for the long Arabic headlines these posts actually
      carry, instead of the 170px + 40px of stacked padding meant for the wide
      purpose-built page headers on About Us / News / Contact.

   The rest of the file is the post body: meta row, content typography, related
   posts, post navigation, comments and sidebar. Everything is scoped to
   `body.single-post` so the news listing, pages and portfolio are untouched.

   `!important` appears only where the inline style attribute written by
   cs_option2background() has to be beaten — nowhere else.
   ========================================================================== */

body.single-post {
	--sgs-navy: #0d4b64;
	--sgs-navy-dark: #093c52;
	--sgs-teal: #2c6378;
	--sgs-green: #61b948;
	--sgs-green-dark: #3e8752;
	--sgs-ink: #2f3d44;
	--sgs-muted: #6f8189;
	--sgs-rule: #e3e9ec;
	--sgs-rule-soft: #eef2f4;
}

/* ==========================================================================
   1. PAGE HEADER BAND
   ========================================================================== */

body.single-post #page-header {
	position: relative;
	padding: 92px 0 80px;
	text-align: center;
	background-color: var(--sgs-navy);
	/* Beats the inline style attribute from cs_option2background(). */
	background-size: cover !important;
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	background-attachment: scroll !important;
}

/* Brand scrim. Keeps white type legible over any background — including the
   near-white logo plate that made the title disappear. */
body.single-post #page-header:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: linear-gradient(120deg,
			rgba(9, 60, 82, 0.94) 0%,
			rgba(13, 75, 100, 0.90) 45%,
			rgba(62, 135, 82, 0.86) 100%);
}

body.single-post #page-header > .container,
body.single-post #page-header > .container-fluid {
	position: relative;
	z-index: 2;
}

/* The section owns the vertical rhythm now; drop the column's stacked 40px. */
body.single-post #page-header .col-md-12.md-padding,
body.single-post #page-header .col-md-fluid.md-padding {
	padding-top: 0;
	padding-bottom: 0;
}

body.single-post #page-header .page-title {
	max-width: 900px;
	margin: 0 auto;
	color: #fff;
	font-size: 34px;
	line-height: 1.45;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

body.single-post #page-header .page-title small {
	display: block;
	margin-top: 10px;
	font-size: 16px;
	opacity: 0.8;
}

body.single-post #page-header .cs-breadcrumb {
	margin-top: 22px;
}

body.single-post #page-header .cs-breadcrumb .cs-inner {
	padding: 0;
	font-size: 13px;
	line-height: 1.6em;
	color: rgba(255, 255, 255, 0.72) !important;
	background-color: transparent;
	border-radius: 0;
}

body.single-post #page-header .cs-breadcrumb a {
	color: rgba(255, 255, 255, 0.92);
}

/* `.single-post a:hover { color: #2c6378 }` in style.css would put dark teal on
   the dark band. */
body.single-post #page-header .cs-breadcrumb a:hover {
	color: #fff;
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The last crumb is the full post title — 90+ characters on these Arabic
   headlines, which wraps the trail onto three lines. Clamp it instead; the
   whole title is already the <h1> directly above. */
body.single-post #page-header .cs-breadcrumb .current-item {
	display: inline-block;
	max-width: 340px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* ==========================================================================
   2. CONTENT COLUMN
   ========================================================================== */

body.single-post .main-content {
	padding-top: 52px;
	padding-bottom: 60px;
}

/* `.blog-default .hentry` draws the divider that separates posts in the listing.
   A single post has nothing to be separated from. */
body.single-post .blog-default .hentry {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

/* ==========================================================================
   3. ENTRY META
   ========================================================================== */

body.single-post .entry-header {
	margin-bottom: 0;
}

body.single-post .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 0 0 28px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--sgs-rule);
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.6;
}

/* `.blog-default .entry-meta > span` adds a right margin that fights `gap`. */
body.single-post .entry-meta > span {
	margin: 0;
	color: var(--sgs-muted);
}

body.single-post .entry-meta a {
	color: var(--sgs-muted);
}

body.single-post .entry-meta a:hover {
	color: var(--sgs-green-dark);
	text-decoration: none;
}

body.single-post .entry-meta a:before {
	margin-right: 6px;
	color: var(--sgs-green);
}

/* ==========================================================================
   4. ENTRY CONTENT
   ========================================================================== */

body.single-post .entry-content {
	font-size: 16px;
	line-height: 1.95;
	color: var(--sgs-ink);
}

body.single-post .entry-content p {
	margin: 0 0 20px;
}

body.single-post .entry-content h1,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content h5,
body.single-post .entry-content h6 {
	margin: 34px 0 14px;
	color: var(--sgs-navy);
	line-height: 1.5;
}

body.single-post .entry-content h2 { font-size: 24px; }
body.single-post .entry-content h3 { font-size: 20px; }
body.single-post .entry-content h4 { font-size: 18px; }

body.single-post .entry-content > h1:first-child,
body.single-post .entry-content > h2:first-child,
body.single-post .entry-content > h3:first-child,
body.single-post .entry-content > h4:first-child {
	margin-top: 0;
}

body.single-post .entry-content a {
	color: var(--sgs-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.single-post .entry-content a:hover {
	color: var(--sgs-green-dark);
}

body.single-post .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

body.single-post .entry-content ul,
body.single-post .entry-content ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

body.single-post .entry-content li {
	margin-bottom: 8px;
}

body.single-post .entry-content blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--sgs-green);
	color: var(--sgs-navy);
	font-size: 17px;
	font-style: normal;
}

body.single-post .entry-content table {
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
}

body.single-post .entry-content th,
body.single-post .entry-content td {
	padding: 10px 12px;
	border: 1px solid var(--sgs-rule);
	text-align: inherit;
}

body.single-post .entry-content th {
	background-color: #f5f8f9;
	color: var(--sgs-navy);
}

body.single-post .entry-content > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   5. RELATED POSTS
   ========================================================================== */

body.single-post .entry-footer {
	margin-top: 42px;
}

body.single-post .related-posts {
	margin-bottom: 0;
	padding-top: 28px;
	border-top: 1px solid var(--sgs-rule);
}

body.single-post .related-posts .related-title {
	position: relative;
	margin: 0 0 8px;
	padding-bottom: 12px;
	font-size: 18px;
	color: var(--sgs-navy);
}

body.single-post .related-posts .related-title:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--sgs-green);
}

body.single-post .related-posts ul li {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--sgs-rule-soft);
	line-height: 1.6;
}

body.single-post .related-posts ul li:last-child {
	border-bottom: none;
}

body.single-post .related-posts ul li a {
	font-size: 15px;
	color: var(--sgs-navy);
}

body.single-post .related-posts ul li a:hover {
	color: var(--sgs-green-dark);
	text-decoration: none;
}

body.single-post .related-posts ul li a:before {
	color: var(--sgs-green);
}

body.single-post .related-posts ul li time {
	color: var(--sgs-muted);
	font-size: 12px;
	white-space: nowrap;
}

/* ==========================================================================
   6. POST NAVIGATION
   ========================================================================== */

body.single-post .post-navigation {
	display: flex;
	gap: 16px;
	margin-top: 36px;
	padding: 28px 0 0;
	border-top: 1px solid var(--sgs-rule);
	border-bottom: none;
	font-size: 12px;
	letter-spacing: 0.06em;
}

body.single-post .post-navigation .nav-previous,
body.single-post .post-navigation .nav-next {
	float: none;
	flex: 1 1 0;
	min-width: 0;
}

body.single-post .post-navigation .nav-next {
	text-align: right;
}

body.single-post .post-navigation a {
	padding: 16px 18px;
	border: 1px solid var(--sgs-rule);
	border-radius: 8px;
	color: var(--sgs-muted);
	background-color: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.single-post .post-navigation a:hover {
	border-color: var(--sgs-green);
	color: var(--sgs-muted);
	box-shadow: 0 4px 16px rgba(13, 75, 100, 0.08);
}

body.single-post .post-navigation a strong {
	display: block;
	margin-top: 8px;
	color: var(--sgs-navy);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
}

/* The template emits a <br /> between the label and the title; the margin above
   already does that job. */
body.single-post .post-navigation a br {
	display: none;
}

body.single-post .post-navigation .clear {
	display: none;
}

/* ==========================================================================
   7. COMMENTS
   ========================================================================== */

body.single-post .comments-area {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--sgs-rule);
}

body.single-post .comment-reply-title {
	margin: 0 0 16px;
	font-size: 18px;
	color: var(--sgs-navy);
}

body.single-post .must-log-in {
	margin: 0;
	padding: 14px 18px;
	border-radius: 8px;
	background-color: #f5f8f9;
	color: var(--sgs-muted);
	font-size: 14px;
}

body.single-post .must-log-in a {
	color: var(--sgs-teal);
}

/* ==========================================================================
   8. SIDEBAR
   ========================================================================== */

body.single-post #sidebar .route_widget {
	margin-bottom: 34px;
}

body.single-post #sidebar .widget-title h4 {
	position: relative;
	margin: 0 0 14px;
	padding-bottom: 10px;
	font-size: 16px;
	color: var(--sgs-navy);
}

body.single-post #sidebar .widget-title h4:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--sgs-green);
}

body.single-post #sidebar .widget_recent_entries ul,
body.single-post #sidebar .widget_categories ul,
body.single-post #sidebar .widget_archive ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-post #sidebar .widget_recent_entries li,
body.single-post #sidebar .widget_categories li,
body.single-post #sidebar .widget_archive li {
	padding: 10px 0;
	border-bottom: 1px solid var(--sgs-rule-soft);
}

body.single-post #sidebar .widget_recent_entries li:last-child,
body.single-post #sidebar .widget_categories li:last-child,
body.single-post #sidebar .widget_archive li:last-child {
	border-bottom: none;
}

body.single-post #sidebar .widget_recent_entries a {
	display: block;
	color: #33444c;
	font-size: 14px;
	line-height: 1.6;
}

body.single-post #sidebar .widget_recent_entries a:hover {
	color: var(--sgs-green-dark);
	text-decoration: none;
}

/* The post being read is in its own Recent Posts list — mark it rather than
   offering it as a link to nowhere new. */
body.single-post #sidebar a[aria-current="page"] {
	color: var(--sgs-navy);
	font-weight: 500;
}

/* Recent Comments renders <ul id="recentcomments"></ul> with nothing in it —
   comments are closed to logged-out visitors, so it is a heading over a void on
   every post. Hidden only while it is genuinely empty. */
body.single-post #sidebar .widget_recent_comments:has(> ul:empty) {
	display: none;
}

/* ==========================================================================
   9. RTL
   ========================================================================== */

body.rtl.single-post .entry-meta a:before {
	margin-right: 0;
	margin-left: 6px;
}

body.rtl.single-post .entry-content ul,
body.rtl.single-post .entry-content ol {
	padding-left: 0;
	padding-right: 22px;
}

body.rtl.single-post .entry-content blockquote {
	padding-left: 0;
	padding-right: 20px;
	border-left: none;
	border-right: 3px solid var(--sgs-green);
}

body.rtl.single-post .related-posts .related-title:after,
body.rtl.single-post #sidebar .widget-title h4:after {
	left: auto;
	right: 0;
}

body.rtl.single-post .post-navigation .nav-next {
	text-align: left;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media only screen and (max-width: 991px) {

	body.single-post #page-header {
		padding: 64px 0 56px;
	}

	body.single-post #page-header .page-title {
		font-size: 26px;
	}

	body.single-post .main-content {
		padding-top: 36px;
		padding-bottom: 42px;
	}
}

@media only screen and (max-width: 640px) {

	body.single-post #page-header {
		padding: 46px 0 40px;
	}

	body.single-post #page-header .page-title {
		font-size: 21px;
		line-height: 1.5;
	}

	body.single-post #page-header .cs-breadcrumb {
		margin-top: 16px;
	}

	/* Keep the trail on one line at phone widths. */
	body.single-post #page-header .cs-breadcrumb .current-item {
		max-width: 130px;
	}

	body.single-post .entry-content {
		font-size: 15px;
		line-height: 1.85;
	}

	body.single-post .entry-meta {
		gap: 6px 16px;
		font-size: 11px;
	}

	body.single-post .post-navigation {
		flex-direction: column;
	}

	body.single-post .post-navigation .nav-next,
	body.rtl.single-post .post-navigation .nav-next {
		text-align: inherit;
	}
}