/* La Lista - Saved Articles. Solid colours only. Every colour and font below
   is a default: the Elementor widgets and Settings → Saved Articles override it. */

/* ---------- Bookmark button (shared) ---------- */
.llsa-btn-wrap { display: flex; }
.llsa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	border: 1px solid #2e0c1d;
	background-color: transparent;
	color: #2a1a20;
	border-radius: 0;
	transition: background-color .2s, color .2s, border-color .2s, transform .15s;
	-webkit-appearance: none;
	appearance: none;
}
.llsa-btn--button { padding: 12px 20px; }
.llsa-btn--icon { width: 40px; height: 40px; padding: 0; }
.llsa-btn .llsa-icon { display: inline-flex; line-height: 0; }
.llsa-btn .llsa-svg { width: 16px; height: 16px; }
.llsa-btn .llsa-svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.llsa-btn.is-saved { background-color: #2e0c1d; color: #f6efe4; }
.llsa-btn.is-saved .llsa-svg path { fill: currentColor; }
.llsa-btn.is-busy { opacity: .6; pointer-events: none; }
.llsa-btn:focus-visible { outline: 2px solid #b8955a; outline-offset: 3px; }

/* ---------- Bookmarks on post featured images ----------
   They live in their own layer on top of the page, so the site's own
   image areas are never edited or restyled. */
#llsa-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 50; pointer-events: none; }
#llsa-layer > * { pointer-events: auto; }
#llsa-layer .llsa-btn.llsa-btn--auto {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--llsa-btn-size, 40px);
	height: var(--llsa-btn-size, 40px);
	padding: 0;
	border: 0;
	background-color: var(--llsa-btn-bg, #f6efe4);
	color: var(--llsa-btn-icon, #2e0c1d);
	transition: background-color .2s, color .2s;
}
#llsa-layer .llsa-btn.llsa-btn--auto .llsa-svg { width: calc(var(--llsa-btn-size, 40px) * .45); height: calc(var(--llsa-btn-size, 40px) * .45); }
#llsa-layer .llsa-btn.llsa-btn--auto.is-saved {
	background-color: var(--llsa-btn-saved-bg, #6b1f35);
	color: var(--llsa-btn-saved-icon, #f6efe4);
}

/* ---------- Saved Articles board ---------- */
.llsa-board { font-family: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.llsa-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 22px;
}
.llsa-head.has-divider { padding-bottom: 18px; border-bottom: 1px solid #dccfd2; }
.llsa-heading {
	margin: 0;
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	color: #2e0c1d;
}
.llsa-count { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #7a6a6f; }

.llsa-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.llsa-filter {
	border: 1px solid #dccfd2;
	background-color: transparent;
	color: #2a1a20;
	padding: 7px 14px;
	font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.2;
	cursor: pointer;
	border-radius: 0;
	transition: background-color .2s, color .2s, border-color .2s;
}
.llsa-filter:not([aria-pressed="true"]):hover { color: #6b1f35; border-color: #6b1f35; }
.llsa-filter[aria-pressed="true"] { background-color: #6b1f35; border-color: #6b1f35; color: #f6efe4; }
.llsa-filter:focus-visible { outline: 2px solid #b8955a; outline-offset: 2px; }

.llsa-grid { column-count: 3; column-gap: 20px; }
@media (max-width: 1024px) { .llsa-grid { column-count: 2; } }
@media (max-width: 767px) { .llsa-grid { column-count: 1; } }

.llsa-card {
	position: relative;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: block;
	width: 100%;
	margin: 0 0 20px;
	background-color: #fbf7f0;
	border: 1px solid #dccfd2;
	overflow: hidden;
}
.llsa-card.is-hidden { display: none; }
.llsa-card.is-leaving { opacity: 0; transform: scale(.97); transition: opacity .25s, transform .25s; }

.llsa-img { display: block; position: relative; line-height: 0; overflow: hidden; }
.llsa-img img { display: block; width: 100%; height: auto; max-width: 100%; }
.llsa-img--portrait, .llsa-img--landscape, .llsa-img--square { height: 0; }
.llsa-img--portrait { padding-top: 125%; }
.llsa-img--landscape { padding-top: 66%; }
.llsa-img--square { padding-top: 100%; }
.llsa-img--portrait img, .llsa-img--landscape img, .llsa-img--square img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

.llsa-body { padding: 16px 18px 18px; }
.llsa-cat { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #6b1f35; margin-bottom: 6px; }
.llsa-title {
	margin: 0 0 8px;
	font-family: "Fraunces", Georgia, serif;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.25;
	color: #2a1a20;
}
.llsa-title a { color: inherit; text-decoration: none; }
.llsa-title a:hover { text-decoration: underline; text-decoration-color: #b8955a; text-underline-offset: 4px; }
.llsa-excerpt { margin: 0 0 14px; font-size: .92rem; line-height: 1.55; font-weight: 300; color: #7a6a6f; }
.llsa-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid #dccfd2;
	font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12.5px;
}
.llsa-time { color: #7a6a6f; }
.llsa-read { color: #2a1a20; text-decoration: none; border-bottom: 1px solid #b8955a; }

.llsa-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-size: 19px;
	line-height: 1;
	background-color: #f6efe4;
	color: #2e0c1d;
	opacity: 0;
	transition: opacity .2s, background-color .2s, color .2s;
}
.llsa-card:hover .llsa-remove,
.llsa-remove:focus-visible,
.llsa-remove-always-yes .llsa-remove { opacity: 1; }
.llsa-remove:focus-visible { outline: 2px solid #b8955a; outline-offset: 2px; }
@media (hover: none) { .llsa-remove { opacity: 1; } }

.llsa-empty {
	display: none;
	text-align: center;
	padding: 72px 24px;
	border: 1px dashed #dccfd2;
}
.llsa-empty.is-visible { display: block; }
.llsa-empty-title {
	margin: 0 0 8px;
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-weight: 300;
	font-size: 1.8rem;
	color: #2e0c1d;
}
.llsa-empty-text { margin: 0 auto 22px; max-width: 42ch; color: #7a6a6f; }
.llsa-empty-btn {
	display: inline-block;
	padding: 12px 22px;
	background-color: #2e0c1d;
	color: #f6efe4;
	text-decoration: none;
	font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	transition: background-color .2s;
}

/* ---------- Pop-up message ---------- */
.llsa-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 99999;
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	max-width: calc(100vw - 32px);
	padding: 12px 20px;
	background-color: var(--llsa-toast-bg, #2e0c1d);
	color: var(--llsa-toast-text, #f6efe4);
	font-family: var(--llsa-toast-font, "Inter", Helvetica, Arial, sans-serif);
	font-size: var(--llsa-toast-size, 14px);
	line-height: 1.4;
	transition: opacity .25s, transform .25s;
}
.llsa-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.llsa-toast a { color: var(--llsa-toast-link, #b8955a); margin-left: 12px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Debug (?llsa_debug=1, admins only) ---------- */
#llsa-debug-box {
	position: fixed; left: 12px; top: 50px; z-index: 100000; max-width: calc(100vw - 24px);
	background-color: #fff3a0; color: #222; font: 12px/1.4 monospace; padding: 8px 10px; border: 1px solid #222;
}
.llsa-debug-tag {
	position: absolute; z-index: 6; pointer-events: none;
	background-color: #fff3a0; color: #222; font: 11px/1.3 monospace; padding: 3px 6px;
}

@media (prefers-reduced-motion: reduce) {
	.llsa-btn, .llsa-remove, .llsa-card, .llsa-toast { transition: none !important; }
}