/*
Theme Name: Astra Child - FedLeb
Theme URI: https://fedleb.org/
Description: Child theme for the Federal Republic of Lebanon project. Adds inline video playback from post listings and mobile header adjustments.
Author: FedLeb
Template: astra
Version: 1.12.3
Text Domain: astra-child
*/

/* ---------------------------------------------------------------
   1. Header: site title / logo / mobile menu sizing
   --------------------------------------------------------------- */

/* Desktop site title: a touch larger than Astra's 26px. */
.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-title a {
	font-size: 1.9rem;
}

/* Logo: slightly larger than the 50px source image. */
.site-logo-img .custom-logo,
.ast-header-break-point .site-logo-img .custom-logo {
	width: 62px;
	height: 62px;
	max-width: 62px;
}

/* Mobile hamburger: a larger tap target and a bigger icon, with the circular
   background Astra draws behind it removed (that circle was off-centre and
   stayed on screen behind the "close" X once the menu opened). The icon now
   sits on its own, centred, in both the closed and open states. Only the
   button chrome is touched — the menu / close icon swap is left to Astra. */
.ast-header-break-point .main-header-bar .menu-toggle,
.ast-mobile-menu-buttons .menu-toggle,
.main-header-menu-toggle,
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill {
	min-width: 2.6em;
	min-height: 2.6em;
	padding: 0.35em;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* The "ugly square": a dotted focus outline that Astra / the browser draws
   around the toggle and leaves on screen after a tap (it stays until the next
   click elsewhere). Drop it for pointer focus; keyboard users still get a
   clean ring via :focus-visible. Same for the submenu (chevron) toggles. */
.ast-header-break-point .main-header-bar .menu-toggle:focus,
.ast-mobile-menu-buttons .menu-toggle:focus,
.main-header-menu-toggle:focus,
.ast-mobile-menu-trigger-minimal:focus,
.ast-mobile-menu-trigger-fill:focus,
.main-navigation .ast-menu-toggle:focus,
.main-navigation .ast-menu-toggle:hover,
.main-navigation .ast-menu-toggle {
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.main-header-menu-toggle:focus-visible,
.ast-mobile-menu-trigger-minimal:focus-visible {
	outline: 2px solid var(--ast-global-color-0, #046bd2) !important;
	outline-offset: 2px;
}

.ast-mobile-menu-buttons .menu-toggle .ast-mobile-svg,
.mobile-menu-toggle-icon .ast-mobile-svg,
.main-header-bar .menu-toggle .ast-mobile-svg {
	width: 1.7em;
	height: 1.7em;
}

@media (max-width: 768px) {

	.ast-site-title-wrap .site-title,
	.ast-site-title-wrap .site-title a {
		font-size: 20px;
		line-height: 1.25;
	}

	.site-logo-img .custom-logo,
	.ast-header-break-point .site-logo-img .custom-logo {
		width: 56px;
		height: 56px;
		max-width: 56px;
	}
}

/* Astra's hover-zoom on the thumbnail forces touchscreens to need a
   first tap just to "resolve" :hover before a second tap registers as
   a click. Disabling it on non-hover-capable (touch) devices lets a
   single tap start the video immediately. */
@media not all and (hover: hover) {

	.ast-article-post:hover .post-thumb-img-content img {
		transform: none !important;
	}
}

/* ---------------------------------------------------------------
   2. Featured images: fill their frame instead of stretching
   --------------------------------------------------------------- */

.ast-blog-featured-section img,
.post-thumb img,
.wp-post-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Video posts: the thumbnail box is forced to 16:9 (the shape of a YouTube /
   Vimeo frame) and the image is contained inside it on black — so the whole
   video frame is visible, exactly the way the player letterboxes it once
   tapped, and it is never cropped. (Non-video thumbnails keep the cover fit
   above.) */
.fedleb-has-video .post-thumb-img-content,
.fedleb-has-video .ast-blog-featured-section .post-thumb {
	aspect-ratio: 16 / 9;
	height: auto;
}

.fedleb-has-video .ast-blog-featured-section img,
.fedleb-has-video .post-thumb img,
.fedleb-has-video .wp-post-image {
	object-fit: contain;
	background: #000;
}

/* ---------------------------------------------------------------
   3. Play badge on posts that hold a video
   --------------------------------------------------------------- */

.fedleb-has-video .ast-blog-featured-section,
.fedleb-has-video .post-thumb {
	position: relative;
}

.fedleb-has-video .ast-blog-featured-section > a::after,
.fedleb-has-video .post-thumb > a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.62);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 54% 50%;
	background-size: 28px 28px;
	transition: background-color 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.fedleb-has-video .ast-blog-featured-section > a:hover::after,
.fedleb-has-video .post-thumb > a:hover::after {
	background-color: rgba(200, 16, 16, 0.85);
	transform: scale(1.06);
}

/* ---------------------------------------------------------------
   4. Inline video playback (plays in place of the thumbnail)
   --------------------------------------------------------------- */

/* Only the innermost box (which the video actually fills) should clip
   content. Applying overflow:hidden to the outer wrapper too clips the
   inner box right back to the outer's own (narrower) width whenever the
   inner box is deliberately widened for the full-bleed layout below. */
.fedleb-has-video .post-thumb-img-content {
	overflow: hidden;
}

/* The player keeps the featured-image box exactly as it is and sits on a
   black ground; a video with a different aspect ratio is boxed by its own
   player (YouTube / Vimeo) rather than cropped by us. */
.fedleb-video-active {
	background: #000 !important;
}

.fedleb-inline-video {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.fedleb-inline-video-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 18px;
	line-height: 32px;
	cursor: pointer;
}

.fedleb-inline-video-close:hover,
.fedleb-inline-video-close:focus {
	background: rgba(200, 16, 16, 0.85);
}

/* ---------------------------------------------------------------
   5. Language switcher bar (top of every page, above the header)
   --------------------------------------------------------------- */

.fedleb-lang-switcher {
	background: #f4f4f4;
	border-bottom: 1px solid #e0e0e0;
	padding: 6px 16px;
}

.fedleb-lang-switcher ul {
	display: flex;
	/* Centred on every screen size, and always left-to-right so the order is
	   English · Français · العربية even on the RTL Arabic pages. */
	justify-content: center;
	direction: ltr;
	gap: 18px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.fedleb-lang-switcher li {
	margin: 0;
}

.fedleb-lang-switcher a {
	color: #555;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.fedleb-lang-switcher a:hover,
.fedleb-lang-switcher a:focus {
	color: #111;
	text-decoration: underline;
}

.fedleb-lang-switcher li.fedleb-lang-current a {
	color: #111;
	font-weight: 700;
	border-bottom: 2px solid currentColor;
}

@media (max-width: 480px) {

	.fedleb-lang-switcher ul {
		gap: 14px;
	}
}

/* ---------------------------------------------------------------
   6. Progressive post loading (see assets/infinite-scroll.js)
   --------------------------------------------------------------- */

/* Once scroll-loading has taken over, drop Astra's numbered pager. It
   stays server-rendered as the no-JavaScript fallback; !important is
   needed because Astra sets an explicit display on it. */
body.fedleb-infinite-active .ast-pagination {
	display: none !important;
}

/* Invisible probe placed just below the list; when it scrolls into
   view the next page of posts is fetched. */
.fedleb-list-sentinel {
	width: 100%;
	height: 1px;
}

.fedleb-list-status {
	text-align: center;
}

.fedleb-list-status.is-loading {
	min-height: 48px;
	margin: 1.5em 0;
}

.fedleb-list-status.is-loading::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid var(--ast-global-color-7, #d1d5db);
	border-top-color: var(--ast-global-color-0, #046bd2);
	border-radius: 50%;
	animation: fedleb-spin 0.7s linear infinite;
}

@keyframes fedleb-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {

	.fedleb-list-status.is-loading::after {
		animation-duration: 2.4s;
	}
}

/* ---------------------------------------------------------------
   7. Listing cards: Categories / Tags rows (added via Astra's
      "Post Elements"). Match the post-meta typography and give
      each row a language-aware "Categories:" / "Tags:" label.
   --------------------------------------------------------------- */

:is(.ast-article-post, .fedleb-single-extra-meta) .cat-links,
:is(.ast-article-post, .fedleb-single-extra-meta) .tags-links {
	display: block;
	margin-top: 0.35em;
	font-size: 0.8125rem;
	line-height: 1.45;
	font-weight: 600;
	/* Label ("Categories:" / "Tags:") and separators in black; only the
	   term links are blue (rule below). */
	color: var(--ast-global-color-2, #1e293b);
}

:is(.ast-article-post, .fedleb-single-extra-meta) .cat-links a,
:is(.ast-article-post, .fedleb-single-extra-meta) .tags-links a {
	font-size: inherit;
	font-weight: inherit;
	color: var(--ast-global-color-0);
}

:is(.ast-article-post, .fedleb-single-extra-meta) .cat-links a:hover,
:is(.ast-article-post, .fedleb-single-extra-meta) .cat-links a:focus,
:is(.ast-article-post, .fedleb-single-extra-meta) .tags-links a:hover,
:is(.ast-article-post, .fedleb-single-extra-meta) .tags-links a:focus {
	color: var(--ast-global-color-1);
}

:is(.ast-article-post, .fedleb-single-extra-meta) .cat-links::before {
	content: "Categories: ";
}

:is(.ast-article-post, .fedleb-single-extra-meta) .tags-links::before {
	content: "Tags: ";
}

html[lang^="fr"] :is(.ast-article-post, .fedleb-single-extra-meta) .cat-links::before {
	content: "Catégories : ";
}

/* French: Christian's wording — "Tag", not "Étiquette". */
html[lang^="fr"] :is(.ast-article-post, .fedleb-single-extra-meta) .tags-links::before {
	content: "Tags : ";
}

html[lang^="ar"] :is(.ast-article-post, .fedleb-single-extra-meta) .cat-links::before {
	content: "التصنيفات: ";
}

html[lang^="ar"] :is(.ast-article-post, .fedleb-single-extra-meta) .tags-links::before {
	content: "الوسوم: ";
}

/* ---------------------------------------------------------------
   8. Phones: a consistent 20px grey gap between every element
      (site title → card → card → …). The card itself (background,
      rounding, shadow) is section 21, the same on every screen size;
      here we only set the grey page band and the gaps.
   --------------------------------------------------------------- */

@media (max-width: 544px) {

	/* A small gutter so the cards clear the screen edge, and a 20px grey
	   band between the site header and the first card / title. */
	body.blog #content > .ast-container,
	body.home #content > .ast-container,
	body.archive #content > .ast-container,
	body.author #content > .ast-container,
	body.search #content > .ast-container,
	body.single #content > .ast-container {
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-top: 20px !important;
	}

	body.blog #primary,
	body.home #primary,
	body.archive #primary,
	body.author #primary,
	body.search #primary,
	body.single #primary {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	/* 20px grey gap under every post / title / author box. */
	body.blog .ast-article-post,
	body.home .ast-article-post,
	body.archive .ast-article-post,
	body.search .ast-article-post,
	.ast-separate-container .ast-article-single,
	.ast-separate-container .ast-archive-description,
	.ast-separate-container .ast-author-box.ast-archive-description {
		margin-bottom: 20px !important;
	}
}

/* ---------------------------------------------------------------
   9. Single post: extra meta under the author / date
      (translations line + Categories + Tags), and the
      "language not available" state in the top switcher.
   --------------------------------------------------------------- */

.fedleb-single-extra-meta {
	margin: 0.15em 0 1.4em;
}

.fedleb-single-meta-row {
	margin: 0.15em 0;
}

/* Post title + byline / date meta: everything reads black, only the actual
   links (author name, date archive, category / tag terms) are blue. Astra
   colours the whole .entry-meta row and .entry-title link with the accent
   by default. */
.entry-title a,
.entry-title a:visited,
.ast-article-post .entry-title a,
.ast-article-single .entry-title a {
	color: var(--ast-global-color-2, #1e293b);
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--ast-global-color-0);
}

.entry-meta,
.entry-meta *,
.ast-blog-meta-container,
.ast-blog-meta-container * {
	color: var(--ast-global-color-2, #1e293b) !important;
}

.entry-meta a:not(.ast-button),
.entry-meta a:not(.ast-button) *,
.ast-blog-meta-container a,
.ast-blog-meta-container a * {
	color: var(--ast-global-color-0) !important;
}

.entry-meta a:not(.ast-button):hover,
.entry-meta a:not(.ast-button):focus,
.ast-blog-meta-container a:hover,
.ast-blog-meta-container a:focus {
	color: var(--ast-global-color-1) !important;
}

/* The "also available in …" line: same type as the post meta, black text,
   only the language links coloured. */
.fedleb-post-langs {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ast-global-color-3, #334155);
}

.fedleb-post-langs a {
	color: var(--ast-global-color-0);
	font-weight: 600;
	text-decoration: none;
}

.fedleb-post-langs a:hover,
.fedleb-post-langs a:focus {
	color: var(--ast-global-color-1);
	text-decoration: underline;
}

.fedleb-post-langs[dir="rtl"] {
	text-align: right;
}

/* Language in the top switcher that this post is not translated into. */
.fedleb-lang-switcher .fedleb-lang-unavailable span {
	color: #9aa2ac;
	font-size: 13px;
	letter-spacing: 0.02em;
	cursor: default;
}

/* ---------------------------------------------------------------
   10. Video cards: loading spinner + un-zoomed thumbnail while
       the video is playing.
   --------------------------------------------------------------- */

.fedleb-video-loading {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0b0b0b;
}

.fedleb-video-loading::after {
	content: "";
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: fedleb-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

	.fedleb-video-loading::after {
		animation-duration: 2.4s;
	}
}

/* The theme's hover-zoom stays on the still thumbnail, but once the video
   is playing the image behind it must sit flat. */
.fedleb-video-active img,
.fedleb-video-active .wp-post-image {
	transform: none !important;
}

/* Hide the play badge on the card whose video is now playing. */
.post-thumb:has(.fedleb-video-active) > a::after,
.ast-blog-featured-section:has(.fedleb-video-active) > a::after {
	display: none !important;
}

/* ---------------------------------------------------------------
   11. Category / Tag / Author / Search title box: the H1 uses the
       exact same font, size, weight and colour as a post (card)
       title (.entry-title, 1.25rem / 600 / near-black), and there
       is exactly 20px of space above and below the box.
   --------------------------------------------------------------- */

.ast-archive-title,
.page-title.ast-archive-title,
.ast-archive-description .ast-archive-title,
.ast-archive-description .ast-archive-title *,
body.archive .ast-archive-description .ast-archive-title *,
body.search .ast-archive-description .page-title {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--ast-global-color-2, #1e293b) !important;
}

/* 20px gap above the white box (between it and the site header) and 20px
   below it (between it and the first post). Astra's own container adds top
   padding and the section a 2em bottom margin, so both are neutralised and
   set explicitly. */
@media (min-width: 545px) {

	body.archive #content > .ast-container,
	body.author #content > .ast-container,
	body.search #content > .ast-container,
	body.blog #content > .ast-container {
		padding-top: 20px !important;
	}
}

body.archive #primary,
body.author #primary,
body.search #primary,
body.blog #primary {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.ast-separate-container .ast-archive-description,
.ast-separate-container .ast-author-box.ast-archive-description,
.site-content section.ast-archive-description {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
}

/* Nomenclature: "Title block top margin" / "Title block bottom margin" — 20px
   of space inside the white box, above the Page title and below the Page title
   text (cross-language sub-line), on every screen size. Astra's own box padding
   (1.5em 1em on mobile, up to 3em on desktop) is overridden top/bottom only;
   the left/right box padding is left to Astra. The 20px grey margins around the
   box are section 8 / section 11 above. */
.ast-separate-container .ast-archive-description,
.ast-separate-container .ast-author-box.ast-archive-description,
body.search .ast-separate-container .ast-archive-description {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

/* Search results: present the "Search Results for: …" banner exactly like a
   category / tag filter title — left-aligned (right in Arabic), same box,
   no centred breadcrumb trail cluttering it. */
body.search .ast-archive-description,
body.search .ast-archive-description * {
	text-align: left;
}

html[dir="rtl"] body.search .ast-archive-description,
html[dir="rtl"] body.search .ast-archive-description * {
	text-align: right;
}

body.search .ast-archive-description .ast-breadcrumbs-wrapper,
body.search .ast-archive-description .ast-breadcrumbs,
body.search .ast-archive-description nav.ast-breadcrumbs {
	display: none !important;
}

body.search .ast-archive-description .page-title span {
	color: var(--ast-global-color-0);
}

/* Cross-language line under the archive title, inside the white box.
   Same font and size as the Categories / Tags rows on a post
   (0.8125rem), body colour with only the language links in accent. */
.fedleb-archive-xlang {
	margin: 0.5em 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--ast-global-color-2, #1e293b);
}

.fedleb-archive-xlang a {
	color: var(--ast-global-color-0);
	font-weight: 600;
	text-decoration: none;
}

.fedleb-archive-xlang a:hover,
.fedleb-archive-xlang a:focus {
	color: var(--ast-global-color-1);
	text-decoration: underline;
}

.fedleb-archive-xlang[dir="rtl"] {
	text-align: right;
}

/* ---------------------------------------------------------------
   11b. Author archive box: photo before the name, both on desktop
        (Astra puts the bio/name first, avatar second) and mobile.
   --------------------------------------------------------------- */

.ast-author-box.ast-archive-description {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ast-author-box .ast-author-avatar {
	order: -1;
	margin: 0;
}

.ast-author-box .ast-author-avatar img.avatar {
	display: block;
	border-radius: 50%;
}

@media (min-width: 922px) {

	.ast-author-box.ast-archive-description {
		flex-direction: row;
		align-items: center;
		column-gap: 28px;
	}
}

/* ---------------------------------------------------------------
   11c. Desktop: drop the grey page background behind the white
        cards (mobile keeps its current full-bleed look).
   --------------------------------------------------------------- */

@media (min-width: 545px) {

	.ast-separate-container {
		background-color: #fff;
	}
}

/* ---------------------------------------------------------------
   12. Arabic desktop menu: align to the right edge (RTL).
   --------------------------------------------------------------- */

@media (min-width: 922px) {

	html[dir="rtl"] #mega-menu-wrap-primary .mega-menu,
	html[dir="rtl"] #mega-menu-wrap-primary #mega-menu-primary,
	html[dir="rtl"] #mega-menu-wrap-primary ul.mega-menu {
		justify-content: flex-end !important;
		text-align: right;
	}

	html[dir="rtl"] #mega-menu-wrap-primary #mega-menu-primary {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}

/* ---------------------------------------------------------------
   13. Contact form.
   --------------------------------------------------------------- */

/* Honeypot field: hidden from people, still in the DOM for bots. The old
   "left: -9999px" pushed a positioned element far outside the viewport, and on
   the RTL (Arabic) pages the browser counted that as 9999px of page width the
   reader could scroll into — the "very wide, positioned far left" bug. This is
   the clip-rect hide (same as WordPress's .screen-reader-text): no off-screen
   offset, no overflow. */
.fedleb-hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.fedleb-contact-form {
	max-width: 42em;
	margin: 1.5em 0;
}

.fedleb-contact-notice {
	padding: 0.9em 1.1em;
	border-radius: 12px;
	font-weight: 600;
}

.fedleb-contact-notice.is-success {
	background: #e7f6ec;
	color: #14532d;
}

.fedleb-contact-notice.is-error {
	background: #fdeaea;
	color: #7f1d1d;
}

.fedleb-contact-form .fedleb-field {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin: 0 0 1em;
}

.fedleb-contact-form label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--ast-global-color-2, #1e293b);
}

.fedleb-contact-form input[type="text"],
.fedleb-contact-form input[type="email"],
.fedleb-contact-form textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--ast-global-color-7, #d1d5db);
	border-radius: 12px;
	background: #fff;
	font: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fedleb-contact-form input:focus,
.fedleb-contact-form textarea:focus {
	outline: none;
	border-color: var(--ast-global-color-0);
	box-shadow: 0 0 0 3px rgba(4, 107, 210, 0.15);
}

.fedleb-contact-form .fedleb-submit {
	margin-top: 0.5em;
}

.fedleb-contact-form button[type="submit"] {
	padding: 0.7em 1.6em;
	border: 0;
	border-radius: 999px;
	background: var(--ast-global-color-0);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.fedleb-contact-form button[type="submit"]:hover,
.fedleb-contact-form button[type="submit"]:focus {
	background: var(--ast-global-color-1);
}

.fedleb-contact-form button[type="submit"]:active {
	transform: scale(0.98);
}

.fedleb-contact-form[dir="rtl"] {
	text-align: right;
}

/* ---------------------------------------------------------------
   14. Visual design pass (rounded corners, soft depth, gentle
       motion) lives in its own file, assets/fedleb-design.css.
       Since iteration 10 it is always enqueued; its dials
       (accent colour, corner radius, shadow, hover lift, page
       transitions) are at Appearance → Customize → "fedleb — Design"
       and are fed in as inline custom properties by
       fedleb_design_dynamic_css() in functions.php.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   15. Share button (post lists + single posts). See assets/share.js.
   --------------------------------------------------------------- */

.fedleb-share {
	position: relative;
	display: flex;
}

/* Sits on its own line under the Categories / Tags row. justify-content is
   flex-start in the reading direction, so the button lands on the left in
   English / French and on the right in Arabic with no separate RTL rule. */
.fedleb-share--listing {
	margin-top: 0.75em;
	justify-content: flex-start;
}

.fedleb-share--single {
	margin-top: 1em;
	margin-bottom: 0.5em;
	justify-content: flex-start;
}

.fedleb-share-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.4em 0.9em;
	border: 1px solid var(--ast-global-color-7, #d1d5db);
	border-radius: 999px;
	background: #fff;
	color: var(--ast-global-color-2, #1e293b);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fedleb-share-toggle svg {
	flex: none;
}

.fedleb-share-toggle:hover,
.fedleb-share-toggle:focus {
	border-color: var(--ast-global-color-0);
	color: var(--ast-global-color-0);
}

.fedleb-share-menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--ast-global-color-7, #d1d5db);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fedleb-share--single .fedleb-share-menu {
	left: 0;
	right: auto;
}

.fedleb-share-opt {
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	padding: 0.55em 0.8em;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ast-global-color-2, #1e293b);
	font: inherit;
	font-size: 0.875rem;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* Small brand / method logo before each label. */
.fedleb-share-opt svg {
	flex: none;
	width: 16px;
	height: 16px;
}

.fedleb-share-opt:hover,
.fedleb-share-opt:focus {
	background: var(--ast-global-color-5, #f0f5fa);
	color: var(--ast-global-color-0);
}

.fedleb-share-opt--copy.is-done {
	color: #14532d;
	font-weight: 600;
}

[dir="rtl"] .fedleb-share-menu {
	left: auto;
	right: 0;
}

[dir="rtl"] .fedleb-share-opt {
	text-align: right;
	flex-direction: row-reverse;
}

/* ---------------------------------------------------------------
   16. Smoother progressive loading: posts appended by
       assets/infinite-scroll.js ease in as they are scrolled to.
   --------------------------------------------------------------- */

.fedleb-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s ease, transform 0.55s ease;
	will-change: opacity, transform;
}

.fedleb-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.fedleb-reveal {
		transition: opacity 0.2s linear;
		transform: none;
	}
}

/* ---------------------------------------------------------------
   17. PDF badge on list thumbnails (posts that embed a PDF),
       centred like the video play badge but not a play control.
   --------------------------------------------------------------- */

.fedleb-has-pdf .ast-blog-featured-section,
.fedleb-has-pdf .post-thumb {
	position: relative;
}

.fedleb-has-pdf .ast-blog-featured-section > a::after,
.fedleb-has-pdf .post-thumb > a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 14px;
	background-color: rgba(180, 24, 24, 0.78);
	/* A plain white document sheet with a folded corner — no letters baked
	   in; the "PDF" label is drawn over the white area by the ::before. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 2h8l6 6v12.5A1.5 1.5 0 0 1 18.5 22h-13A1.5 1.5 0 0 1 4 20.5v-17A1.5 1.5 0 0 1 5.5 2z'/%3E%3Cpath d='M14 2.2V7a1 1 0 0 0 1 1h4.6' fill='none' stroke='%23b41818' stroke-width='1.1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 50% 42%;
	background-size: 40px 40px;
	pointer-events: none;
}

/* "PDF" label sitting in the white area of the sheet. */
.fedleb-has-pdf .ast-blog-featured-section > a::before,
.fedleb-has-pdf .post-thumb > a::before {
	content: "PDF";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 3px);
	z-index: 2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	color: rgba(180, 24, 24, 0.95);
	pointer-events: none;
}

/* The PDF badge is a shortcut to the document: clicking it downloads the
   PDF (wired up in assets/video-click.js → fedleb-pdf.js). Show the pointer
   and let the click through to the link underneath. */
.fedleb-has-pdf .ast-blog-featured-section > a,
.fedleb-has-pdf .post-thumb > a {
	cursor: pointer;
}

/* ---------------------------------------------------------------
   18. One shared corner-rounding, applied to every "card" surface
       on both desktop and mobile: the filter (category/tag/author)
       title box, the search-results title box, the post cards in a
       list, and the opened post. The radius itself is the
       "Post corner radius" dial (Appearance → Customize →
       "fedleb — Design"); see --fedleb-radius in
       assets/fedleb-design.css and fedleb_design_dynamic_css().

       Note: in a listing the visible card is .ast-article-inner
       (Astra's blog-layout-4 box), not .ast-article-post — the
       latter is a transparent grid wrapper with padding: 0 1em.
       See section 21.
   --------------------------------------------------------------- */

.ast-separate-container .ast-article-inner,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-archive-description,
.ast-separate-container .ast-author-box.ast-archive-description,
body.search .ast-separate-container .ast-archive-description {
	border-radius: var(--fedleb-radius, 16px) !important;
}

/* ---------------------------------------------------------------
   21. Listing "Post block": the visible card is .ast-article-inner.
       Pin the whole card — the left/right padding strip and the
       content — to pure #ffffff so there is no seam, drop the stray
       background / padding on the transparent grid wrapper, and give
       the flush featured image the card's top rounding.
   --------------------------------------------------------------- */

.ast-separate-container .ast-blog-layout-4-grid .ast-article-post {
	background: transparent !important;
}

.ast-separate-container .ast-article-inner,
.ast-separate-container .ast-article-post .post-content,
.ast-separate-container .ast-article-post .entry-content,
.ast-separate-container .ast-article-post .ast-blog-single-element {
	background-color: #fff !important;
}

/* The card box: rounding is section 18, depth is assets/fedleb-design.css. */

/* The featured image is flush to the card's top and sides (Astra gives it
   negative margins), so round its top corners to the card radius. The card's
   bottom corners round on .ast-article-inner itself — no overflow:hidden on
   the card, so the Share menu is free to open past its edge. */
.ast-article-post .blog-layout-4 .post-thumb-img-content {
	border-radius: var(--fedleb-radius, 16px) var(--fedleb-radius, 16px) 0 0;
	overflow: hidden;
}

/* ---------------------------------------------------------------
   22. Mobile menu: an extension of the header that rolls down.
       Astra's mobile header is data-type="dropdown" (in normal flow,
       full width, directly under the header bar). assets/mobile-menu.js
       animates it open/closed by height; here we keep it in the layout
       so that animation has something to transition, and style it as a
       seamless continuation of the header. The it.11 floating side
       panel (old section 19) is gone.
   --------------------------------------------------------------- */

@media (max-width: 921px) {

	/* Only once mobile-menu.js has taken over (.fedleb-menu-js). It keeps the
	   dropdown rendered and in normal flow so that (a) opening it grows the
	   header and pushes the page down — "the header block extends" — and
	   (b) the height change can be animated. The script owns `height`:
	   0 when closed, the content height while open. */
	.fedleb-menu-js .ast-mobile-header-content {
		display: block !important;
		position: static !important;
		height: 0;
		overflow: hidden;
		background: var(--ast-global-color-4, #fff);
		box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12);
		transition: height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
	}

	@media (prefers-reduced-motion: reduce) {

		.fedleb-menu-js .ast-mobile-header-content {
			transition: none;
		}
	}
}

/* ---------------------------------------------------------------
   23. Single post: let an embedded video (or any embed) run the full
       width of the post. Astra's gutter stays on the article
       (.type-post / .ast-article-single) only; the inner wrappers
       lose their left/right padding and embeds are pulled out to the
       card edge.
   --------------------------------------------------------------- */

.ast-article-single [class*="ast-post-format-"],
.ast-article-single .entry-title,
.ast-article-single .entry-header {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Astra's article gutter is 2.5em on every screen down to 545px, then 1em. */
.ast-article-single .entry-content > .wp-block-embed,
.ast-article-single .entry-content > figure.wp-block-embed,
.ast-article-single .entry-content > .wp-block-video {
	margin-left: -2.5em;
	margin-right: -2.5em;
	width: calc(100% + 5em);
	max-width: none;
}

@media (max-width: 544px) {

	.ast-article-single .entry-content > .wp-block-embed,
	.ast-article-single .entry-content > figure.wp-block-embed,
	.ast-article-single .entry-content > .wp-block-video {
		margin-left: -1em;
		margin-right: -1em;
		width: calc(100% + 2em);
	}
}

/* ---------------------------------------------------------------
   24. Search: the title + search field share one Title block, on
       both the /search/ page (no query) and the results page
       (fedleb_search_box() in functions.php). The results below use
       the normal Post block presentation, Share button and all.
   --------------------------------------------------------------- */

/* /search/ (no query) is a plain-container Page, so it has no card of its
   own — give the article the Title-block look explicitly. */
body.fedleb-search-page #primary .ast-article-single {
	background: var(--ast-global-color-4, #fff);
	border-radius: var(--fedleb-radius, 16px);
	box-shadow: var(--fedleb-shadow, 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.07));
	margin-top: 20px;
	padding: 20px clamp(16px, 4vw, 40px) !important;
}

body.fedleb-search-page #primary .entry-title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ast-global-color-2, #1e293b);
}

body.fedleb-search-page #primary .ast-article-single .entry-header {
	margin-bottom: 0;
}

.fedleb-search-box {
	margin: 0.9em 0 0;
}

body.search .ast-archive-description .fedleb-search-box {
	margin-top: 0.6em;
}

.fedleb-search-box .wp-block-search__inside-wrapper {
	display: flex;
	max-width: 100%;
}

.fedleb-search-box .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------------
   20 (cont.). Automatic menu sections (see inc/dynamic-menu.php):
       the "Authors" row is a heading that only opens its submenu,
       not a link. (Categories now sit directly on the menu bar at
       level 0, so there is no "Categories" heading any more.)
   --------------------------------------------------------------- */

.fedleb-dynamic-heading > a {
	cursor: default;
}

/* ---------------------------------------------------------------
   25. Standard content Page layout ("Contact", "About us").
       fedleb_is_standard_layout_page() forces Astra's boxed
       container on these pages and prints a Title block
       (.fedleb-page-title-block) at the top of #primary; the page
       article below it is the Post block. So a Page reads exactly
       like the rest of the site: Page title in a Title block, the
       Share button under it, page content in a Post block — same
       rounding, shadow and white background as everywhere else.
   --------------------------------------------------------------- */

/* The Title block is emitted with Astra's .ast-archive-description
   class, so it already inherits the card look (sections 11, 18,
   fedleb-design.css). The page title matches a Post title. */
/* "Tap for sound" hint over an auto-started single-post video (see
   assets/video-click.js). Removed on the first interaction. */
.fedleb-video-sound-hint {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 5;
	padding: 0.5em 1em;
	border: 0;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.82);
	color: #fff;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.35);
}

.fedleb-video-sound-hint:hover,
.fedleb-video-sound-hint:focus {
	background: rgba(15, 23, 42, 0.95);
}

.fedleb-page-title-block .page-title.ast-archive-title {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--ast-global-color-2, #1e293b) !important;
	margin: 0;
}

/* The Share button sits on its own line, directly under the title. */
.fedleb-page-title-block .fedleb-share-slot {
	margin-top: 0.75em;
}

.fedleb-page-title-block .fedleb-share-slot:empty {
	display: none;
}

.fedleb-page-title-block .fedleb-share--single {
	margin: 0;
}

/* The page title now lives in the Title block, so hide the article's
   own header (Astra still prints it inside the card). */
body.fedleb-standard-page .ast-article-single > .entry-header,
body.fedleb-standard-page .ast-article-single > .ast-single-post-order .entry-header {
	display: none;
}

/* Give the page article the same card treatment as a single post and
   an even inner padding. */
body.fedleb-standard-page .ast-separate-container .ast-article-single {
	background-color: var(--fedleb-block-bg, #fff);
	margin-top: 20px;
}

/* On phones, the same 14px grey gutter the rest of the site uses. */
@media (max-width: 544px) {

	body.fedleb-standard-page #content > .ast-container {
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-top: 20px !important;
	}

	body.fedleb-standard-page #primary {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	body.fedleb-standard-page .fedleb-page-title-block {
		margin-top: 0 !important;
	}
}

/* ---------------------------------------------------------------
   26. Phones: the Post block's outer edge lines up with the Title
       block's outer edge.

       On desktop the layout is unchanged. On phones Astra insets
       every listing card by an extra ~20px (.ast-grid-common-col
       padding) + ~1em (dynamic .ast-article-post padding) inside the
       grid row, while the Title block (.ast-archive-description)
       sits flush at the #primary edge. Zero that extra inset and the
       grid row's negative margin so both blocks share the one 14px
       grey page gutter — "for the eye, equally wide". The card keeps
       its own inner padding (section 21 / Astra).
   --------------------------------------------------------------- */

@media (max-width: 544px) {

	.ast-separate-container .site-main > .ast-row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.ast-separate-container .ast-blog-layout-4-grid .ast-article-post,
	.ast-separate-container .site-main .ast-grid-common-col.ast-article-post {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ---------------------------------------------------------------
   27. One button colour across the whole site.

       Every button obeys --fedleb-btn / --fedleb-btn-hover /
       --fedleb-btn-text (set by fedleb_design_dynamic_css() from the
       "Button colour" dial in Appearance → Customize → "fedleb —
       Design"). This covers the search buttons (the /search/ page's
       own core/search button, previously red, and the results-page
       field), Astra's "scroll to top" button, the contact form's
       "Send message" button and the pagination links.
   --------------------------------------------------------------- */

.wp-block-search__button,
.wp-block-search__button.has-background,
.wp-block-search__button.has-vivid-red-background-color,
.fedleb-contact-form button[type="submit"],
#ast-scroll-top,
.ast-scroll-to-top-wrapper,
.ast-pagination .page-numbers.current,
.ast-pagination a:hover,
.wp-block-button__link,
.fedleb-na-action {
	background-color: var(--fedleb-btn, #046bd2) !important;
	color: var(--fedleb-btn-text, #fff) !important;
	border-color: var(--fedleb-btn, #046bd2) !important;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus,
.fedleb-contact-form button[type="submit"]:hover,
.fedleb-contact-form button[type="submit"]:focus,
#ast-scroll-top:hover,
#ast-scroll-top:focus,
.ast-scroll-to-top-wrapper:hover,
.fedleb-na-action:hover,
.fedleb-na-action:focus {
	background-color: var(--fedleb-btn-hover, #045cb4) !important;
	border-color: var(--fedleb-btn-hover, #045cb4) !important;
	color: var(--fedleb-btn-text, #fff) !important;
}

/* Astra's scroll-to-top can render as an <a>/<div> with an icon; make
   sure the arrow glyph takes the button text colour too. */
#ast-scroll-top svg,
#ast-scroll-top .ast-icon,
.ast-scroll-to-top-wrapper svg {
	fill: var(--fedleb-btn-text, #fff) !important;
	color: var(--fedleb-btn-text, #fff) !important;
}

/* ---------------------------------------------------------------
   28. "Article not available in this language" page
       (fedleb_render_unavailable_notice()). A single Title block
       whose only content is the "Page title text" — the message and
       a link straight to the article in the language that has it.
   --------------------------------------------------------------- */

.fedleb-na-block {
	margin-top: 20px;
}

.fedleb-na-text {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--ast-global-color-2, #1e293b);
	margin: 0 0 1em;
}

.fedleb-na-actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}

.fedleb-na-action {
	display: inline-block;
	padding: 0.6em 1.2em;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.fedleb-na-block[dir="rtl"] .fedleb-na-actions {
	justify-content: flex-start;
}

/* ---------------------------------------------------------------
   29. No horizontal scrolling — especially the Arabic (RTL) pages.
       A wide child (a form field, an embed, a pre) must never make
       the whole document pannable sideways on a phone.
   --------------------------------------------------------------- */

html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

@media (max-width: 921px) {

	#page,
	#content,
	.site-content,
	.ast-container,
	#primary,
	.entry-content {
		max-width: 100%;
		overflow-wrap: break-word;
	}

	.entry-content > * {
		max-width: 100%;
	}

	/* Inputs / textareas inside our forms use border-box so a 100% width
	   never overflows its padding. Covers our contact form, the injected
	   results-page field, and the /search/ page's own core/search block. */
	.fedleb-contact-form input,
	.fedleb-contact-form textarea,
	.fedleb-search-box input,
	.wp-block-search,
	.wp-block-search__inside-wrapper,
	.wp-block-search__input {
		box-sizing: border-box;
		max-width: 100%;
	}

	.wp-block-search__input {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------
   30. Author archive box (extends 11b): a larger avatar on phones,
       and the picture on the right in Arabic (RTL).
   --------------------------------------------------------------- */

.ast-author-box .ast-author-avatar img.avatar,
.ast-author-box .ast-author-avatar img {
	width: 96px !important;
	height: 96px !important;
	max-width: 96px;
}

@media (min-width: 922px) {

	.ast-author-box .ast-author-avatar img.avatar,
	.ast-author-box .ast-author-avatar img {
		width: 120px !important;
		height: 120px !important;
		max-width: 120px;
	}

	/* Arabic desktop: picture on the right, name to its left. */
	html[dir="rtl"] .ast-author-box.ast-archive-description {
		flex-direction: row-reverse;
	}
}

/* ---------------------------------------------------------------
   31. Block (card) background colour dial. Every white card surface
       reads --fedleb-block-bg (default #ffffff) so the "Block
       background colour" dial recolours them all at once.
   --------------------------------------------------------------- */

.ast-separate-container .ast-article-inner,
.ast-separate-container .ast-article-post .post-content,
.ast-separate-container .ast-article-post .entry-content,
.ast-separate-container .ast-article-post .ast-blog-single-element,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-archive-description,
.ast-separate-container .ast-author-box.ast-archive-description,
.fedleb-page-title-block,
body.fedleb-search-page #primary .ast-article-single {
	background-color: var(--fedleb-block-bg, #fff) !important;
}

/* ---------------------------------------------------------------
   32. Single post: no previous / next pager.

       fedleb functions.php turns Astra's own post navigation off via
       the astra_single_post_navigation_enabled filter; this is the
       belt-and-braces hide in case a plugin prints its own.
   --------------------------------------------------------------- */

.single .post-navigation,
.single nav.post-navigation,
.single .ast-single-related-posts-container + .post-navigation {
	display: none !important;
}

/* ---------------------------------------------------------------
   33. One text alignment for every block (Christian, it.14).

       The Title blocks (archive / page / search / "not available"),
       the Post summary blocks, the opened post's header and the
       comment block all read from the start edge — left in English
       and French, right in Arabic. The site header, the footer and
       the centred language-switcher bar are exempt, and author
       formatting inside .entry-content is left untouched.
   --------------------------------------------------------------- */

body .ast-archive-description,
body .ast-archive-description > *,
body .fedleb-page-title-block,
body .fedleb-page-title-block > *,
body .fedleb-na-block,
body .fedleb-na-block > *,
body.fedleb-search-page #primary .ast-article-single > .entry-header,
body.fedleb-search-page #primary .ast-article-single > .entry-header > *,
body .ast-article-post .entry-title,
body .ast-article-post .ast-blog-meta-container,
body .ast-article-post .ast-blog-meta-container *,
body .ast-article-post .cat-links,
body .ast-article-post .tags-links,
body .ast-article-post .fedleb-listing-langs,
body .ast-article-single > .entry-header,
body .ast-article-single > .entry-header > *,
body .comments-area > .comments-title,
body .comments-area .comment-body,
body .comments-area .comment-respond {
	text-align: left !important;
}

html[dir="rtl"] body .ast-archive-description,
html[dir="rtl"] body .ast-archive-description > *,
html[dir="rtl"] body .fedleb-page-title-block,
html[dir="rtl"] body .fedleb-page-title-block > *,
html[dir="rtl"] body .fedleb-na-block,
html[dir="rtl"] body .fedleb-na-block > *,
html[dir="rtl"] body.fedleb-search-page #primary .ast-article-single > .entry-header,
html[dir="rtl"] body.fedleb-search-page #primary .ast-article-single > .entry-header > *,
html[dir="rtl"] body .ast-article-post .entry-title,
html[dir="rtl"] body .ast-article-post .ast-blog-meta-container,
html[dir="rtl"] body .ast-article-post .ast-blog-meta-container *,
html[dir="rtl"] body .ast-article-post .cat-links,
html[dir="rtl"] body .ast-article-post .tags-links,
html[dir="rtl"] body .ast-article-post .fedleb-listing-langs,
html[dir="rtl"] body .ast-article-single > .entry-header,
html[dir="rtl"] body .ast-article-single > .entry-header > *,
html[dir="rtl"] body .comments-area > .comments-title,
html[dir="rtl"] body .comments-area .comment-body,
html[dir="rtl"] body .comments-area .comment-respond {
	text-align: right !important;
}

/* ---------------------------------------------------------------
   34. Listing / search cards: the "also available in …" line
       (assets/list-langs.js), sitting just under the author / date.
       Colours + type come from .fedleb-post-langs (section 9).
   --------------------------------------------------------------- */

.fedleb-listing-langs {
	margin: 0.35em 0 0;
}

/* The same line under the search field in the results Title block. */
.fedleb-search-xlang {
	margin-top: 0.6em;
}

/* ---------------------------------------------------------------
   35. Corner rounding — the comment block matches the cards.
       (The Title / Post / Page blocks are section 18.)
   --------------------------------------------------------------- */

.ast-separate-container .comments-area .comment-respond,
.ast-separate-container .ast-comment-list .comment-body {
	border-radius: var(--fedleb-radius, 16px);
}

/* ---------------------------------------------------------------
   36. "About the project" page (body.fedleb-about-page — the about
       page, its translations and the static front page).

       Layout is left to the page's own blocks — Christian arranges
       the images and text in the editor. This section only drops the
       empty spacer paragraphs and, on phones, trims the Post-block
       padding and the gap above it so the page is less airy.
   --------------------------------------------------------------- */

.fedleb-about-page .entry-content p:empty {
	display: none !important;
}

@media (max-width: 768px) {

	.fedleb-about-page .ast-separate-container .ast-article-single {
		padding: 1.4em !important;
		margin-top: 12px !important;
	}

	.fedleb-about-page .fedleb-page-title-block {
		margin-bottom: 12px !important;
	}
}

/* ---------------------------------------------------------------
   37. Share button states (Christian, it.15).

       • Resting: the neutral white pill from section 15 — hover and
         plain (pointer) focus must not recolour it.
       • Menu open: share.js adds .is-open to the .fedleb-share wrap
         and sets aria-expanded="true"; the button then takes the
         "fedleb — Design" button colour with white text / icon.
       • On a listing card the menu opens upward, so it is not clipped
         by the bottom edge of the card.
   --------------------------------------------------------------- */

.fedleb-share-toggle:hover,
.fedleb-share-toggle:focus {
	background: #fff;
	border-color: var(--ast-global-color-7, #d1d5db);
	color: var(--ast-global-color-2, #1e293b);
}

.fedleb-share-toggle:focus-visible {
	outline: 2px solid var(--fedleb-btn, #046bd2);
	outline-offset: 2px;
}

.fedleb-share.is-open .fedleb-share-toggle,
.fedleb-share-toggle[aria-expanded="true"] {
	background: var(--fedleb-btn, #046bd2) !important;
	border-color: var(--fedleb-btn, #046bd2) !important;
	color: var(--fedleb-btn-text, #fff) !important;
}

.fedleb-share.is-open .fedleb-share-toggle svg,
.fedleb-share-toggle[aria-expanded="true"] svg {
	fill: var(--fedleb-btn-text, #fff) !important;
	color: var(--fedleb-btn-text, #fff) !important;
}

/* Listing card: open the menu above the button. */
.fedleb-share--listing .fedleb-share-menu {
	top: auto;
	bottom: calc(100% + 6px);
}