/*
 * SYNABIO Publications
 * Values transcribed from the member portal DOM (Tailwind utilities resolved to
 * their computed px / hex), not estimated from screenshots.
 */

/* Inter, self-hosted. The portal uses it throughout; serving it from the
   plugin avoids calling the Google Fonts CDN, which the CNIL treats as a
   transfer of personal data. Variable file, weights 400 to 700. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Inter everywhere, as on the member portal. Scoped to this plugin's own
	   components, so the rest of the site keeps its Open Sans / Roboto pairing. */
	--syn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--syn-card: #ffffff;
	--syn-frame: #f3f4f6;        /* gray-100, empty cover background */
	--syn-border: #f3f4f6;       /* gray-100 */
	--syn-border-hover: #e5e7eb; /* gray-200 */
	--syn-title: #111827;        /* gray-900 */
	--syn-body: #374151;         /* gray-700 */
	--syn-muted: #6b7280;        /* gray-500 */
	--syn-meta: #9ca3af;         /* gray-400 */
	--syn-accent: #15803d;       /* green-700 */
	--syn-pill-bg: #f0fdf4;      /* green-50 */

	/* Empty-cover frame: the site's own Elementor global colour, so a brand
	   change in Elementor carries through without touching this file. */
	--syn-empty-bg: var(--e-global-color-primary, #14a98e);
	--syn-empty-fg: #ffffff;

	--syn-radius: 12px;          /* rounded-xl */
	--syn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--syn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.syn-cover,
.syn-pills,
.syn-author,
.syn-date,
.syn-back,
.syn-attachments {
	font-family: var(--syn-font);
}

.syn-icon {
	flex: none;
}

/* --- Back link ---------------------------------------------------------- */

/* The Elementor kit colours every anchor through `.elementor-kit-N a`
   (specificity 0,1,1). The components below are plain markup from this
   plugin's shortcodes, not Elementor widgets, so there is no editor setting
   to defer to: each class is repeated to clear that specificity. */
.syn-back.syn-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 20px;
	color: var(--syn-accent);
	text-decoration: none;
}

.syn-back.syn-back:hover {
	text-decoration: underline;
}

/* --- Cover -------------------------------------------------------------- */

.syn-cover {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--syn-radius);
	background-color: var(--syn-frame);
}

.syn-cover--og {
	aspect-ratio: 1200 / 630;
}

.syn-cover--video {
	aspect-ratio: 16 / 9;
}

.syn-cover-img,
.syn-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

/* Title fallback: no image is ever substituted. The frame takes the site's
   green and carries the title, clamped to three lines. */
.syn-cover--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	background-color: var(--syn-empty-bg);
}

.syn-cover-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: center;
	text-wrap: balance;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--syn-empty-fg);
}

/* A listing card is a quarter of the width: the title steps down with it. */
.syn-cover--video.syn-cover--empty {
	padding: 20px 16px;
}

.syn-cover--video .syn-cover-title {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
}

/* --- Pills -------------------------------------------------------------- */

.syn-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.syn-pill.syn-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 9999px;
	background-color: var(--syn-pill-bg);
	color: var(--syn-accent);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	text-decoration: none;
}

a.syn-pill.syn-pill:hover {
	text-decoration: underline;
}

/* --- Author block ------------------------------------------------------- */

.syn-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.syn-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background-color: var(--syn-accent);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.syn-author-txt > p {
	margin: 0;
}

.syn-author-name {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--syn-title);
}

.syn-author-date {
	font-size: 12px;
	line-height: 16px;
	color: var(--syn-muted);
}

/* --- Date line (listing cards) ------------------------------------------ */

.syn-date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 16px;
	color: var(--syn-meta);
}

/* --- Article body ------------------------------------------------------- */
/* Add the CSS class "syn-prose" to the Elementor Post Content widget.        */

.syn-prose {
	font-family: var(--syn-font);
	color: var(--syn-body);
	font-size: 16px;
	line-height: 1.75;
}

.syn-prose p,
.syn-prose li {
	color: var(--syn-body);
}

.syn-prose p {
	margin: 0 0 1.25em;
}

.syn-prose h1,
.syn-prose h2,
.syn-prose h3,
.syn-prose h4 {
	color: var(--syn-title);
	font-weight: 700;
	line-height: 1.3;
	margin: 1.6em 0 0.6em;
}

.syn-prose h2 { font-size: 24px; }
.syn-prose h3 { font-size: 20px; }

.syn-prose strong {
	color: var(--syn-title);
	font-weight: 600;
}

.syn-prose a {
	color: var(--syn-accent);
	text-decoration: underline;
}

.syn-prose ul,
.syn-prose ol {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
}

.syn-prose li {
	margin: 0.4em 0;
}

.syn-prose hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--syn-border);
}

/* --- Attachments -------------------------------------------------------- */

.syn-attachments {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 40px;
}

.syn-att {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background-color: var(--syn-card);
	border: 1px solid var(--syn-border);
	border-radius: var(--syn-radius);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.syn-att:hover {
	border-color: var(--syn-border-hover);
	box-shadow: var(--syn-shadow-sm);
}

.syn-att-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	background-color: #f3f4f6;
	color: #4b5563;
}

.syn-att-badge--pdf { background-color: #fef2f2; color: #b91c1c; }
.syn-att-badge--doc { background-color: #eff6ff; color: #1d4ed8; }
.syn-att-badge--xls { background-color: #f0fdf4; color: #15803d; }
.syn-att-badge--ppt { background-color: #fff7ed; color: #c2410c; }

.syn-att-main {
	flex: 1 1 auto;
	min-width: 0;
}

.syn-att-main > p {
	margin: 0;
}

.syn-att-label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--syn-title);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.syn-att-meta {
	margin-top: 2px !important;
	font-size: 12px;
	line-height: 16px;
	color: var(--syn-meta);
}

.syn-att-dl.syn-att-dl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--syn-accent);
	text-decoration: none;
}

.syn-att-dl.syn-att-dl:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.syn-att-dl span {
		display: none;
	}
}

/* --- Listing card ------------------------------------------------------- */
/* Add the CSS class "syn-card" to the Elementor loop item container.        */

.e-loop-item,
.syn-card {
	background-color: var(--syn-card);
	border: 1px solid var(--syn-border);
	border-radius: var(--syn-radius);
	overflow: hidden;
	box-shadow: var(--syn-shadow-sm);
	transition: box-shadow 150ms ease;
}

.e-loop-item:hover,
.syn-card:hover {
	box-shadow: var(--syn-shadow-md);
}

.e-loop-item:hover .syn-cover-img,
.syn-card:hover .syn-cover-img {
	transform: scale(1.02);
}

.syn-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: var(--syn-title);
}

.syn-card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
	color: var(--syn-muted);
}

/* --- Elementor bindings -------------------------------------------------
 * Styling lives here rather than in the template JSON so there is one place
 * to tune it. Elementor's own per-element rules have higher specificity, so
 * anything set in the editor still wins over these defaults.
 *
 * Scoped to body:has(.syn-back) rather than body.single-post: .syn-back is
 * emitted only by this plugin's article template, so the 27 legacy posts,
 * each hand-built in Elementor, are left exactly as they are. A browser
 * without :has() drops these rules entirely, which is the safe failure.
 * ---------------------------------------------------------------------- */

/* Article column width is set on the section itself (Layout > Content Width,
 * 768px, matching the portal). Nothing to do here. */

/* A loop item fills its grid cell, never Elementor's default boxed width. */
.e-loop-item > .elementor-section > .elementor-container {
	max-width: 100%;
}

/* H1: text-3xl / font-bold / leading-tight, gray-900 */
body:has(.syn-back) .elementor-widget-theme-post-title > .elementor-widget-container > .elementor-heading-title {
	font-family: var(--syn-font);
	font-size: 30px;
	line-height: 37.5px;
	font-weight: 700;
	color: var(--syn-title);
	margin: 0;
}

/* Article body */
body:has(.syn-back) .elementor-widget-theme-post-content > .elementor-widget-container,
.syn-prose {
	font-family: var(--syn-font);
	color: var(--syn-body);
	font-size: 16px;
	line-height: 1.75;
}

body:has(.syn-back) .elementor-widget-theme-post-content p,
body:has(.syn-back) .elementor-widget-theme-post-content li {
	color: var(--syn-body);
}

body:has(.syn-back) .elementor-widget-theme-post-content h1,
body:has(.syn-back) .elementor-widget-theme-post-content h2,
body:has(.syn-back) .elementor-widget-theme-post-content h3,
body:has(.syn-back) .elementor-widget-theme-post-content h4 {
	color: var(--syn-title);
	font-weight: 700;
	line-height: 1.3;
	margin: 1.6em 0 0.6em;
}

body:has(.syn-back) .elementor-widget-theme-post-content a {
	color: var(--syn-accent);
	text-decoration: underline;
}

body:has(.syn-back) .elementor-widget-theme-post-content strong {
	color: var(--syn-title);
	font-weight: 600;
}

/* --- Loop item card ------------------------------------------------------ */

.e-loop-item,
.syn-card {
	position: relative;
	height: 100%;
}

/* Whole-card click target, under the real links so they stay reachable. */
.syn-stretch {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.e-loop-item .elementor-widget-wrap,
.syn-card .elementor-widget-wrap,
.syn-card > .elementor-column-wrap {
	position: relative;
}

.e-loop-item a.syn-pill,
.syn-card a.syn-pill,
.syn-card .syn-att-dl {
	position: relative;
	z-index: 2;
}

/* Elementor title / excerpt inside a loop item */
.e-loop-item .elementor-widget-theme-post-title > .elementor-widget-container > .elementor-heading-title,
.syn-card .elementor-widget-theme-post-title > .elementor-widget-container > .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--syn-font);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: var(--syn-title);
	margin: 0;
}

.e-loop-item .elementor-widget-theme-post-excerpt > .elementor-widget-container,
.syn-card .elementor-widget-theme-post-excerpt > .elementor-widget-container {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--syn-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--syn-muted);
}

.e-loop-item .elementor-widget-theme-post-excerpt p,
.syn-card .elementor-widget-theme-post-excerpt p {
	margin: 0;
}

/* The card's own cover must not inherit the article radius on all corners. */
.e-loop-item .syn-cover,
.syn-card .syn-cover {
	border-radius: var(--syn-radius) var(--syn-radius) 0 0;
}

/* --- Listing grid -------------------------------------------------------- */

body.page .syn-grid .elementor-grid {
	gap: 24px;
}

/* Screen-reader-only text for the stretched link. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}