/*
 * FediPress Agora — colours, type and the header.
 *
 * Loaded after the shared core (core.css). Sets the --fpt-* tokens and
 * draws this theme's own navigation and layout.
 */

/* ---------- Tokens --------------------------------------------------- */
html:root {
	/* Agora's choices for the shared core. */
	--fpt-title-size: 1.625rem;
	--fpt-title-weight: 600;
	--fpt-title-tracking: -.015em;
	--fpt-title-size-phone: 1.4375rem;
	--fpt-profile-name-phone: 1.625rem;
	--fpt-button-radius: 999px;
	--fpt-badge-top: .7rem;
	--fpt-badge-start: 1.65rem;
	--fpt-badge-ring: var(--fpt-paper);
	--fpt-side-top: 1.25rem;
	--fpt-radius: 16px;
	--fpt-read-leading: 1.56;
	--fpt-read-tracking: 0;
	--fpt-header: 4rem;
	--fpt-canvas: #eceff5;
	--fpt-paper: #fcfcfe;
	--fpt-raised: #ffffff;
	--fpt-mist: #eff1f7;
	--fpt-hover: #f3f5fa;
	--fpt-line: #d8dce8;
	--fpt-line-strong: #bcc3d6;
	--fpt-ink: #141a2e;
	--fpt-ink-soft: #2d3550;
	--fpt-muted: #535b73;
	--fpt-repost: #1f7a50;
	--fpt-like: #c0263f;
	--fpt-lantern: #f5b800;
	--fpt-lantern-ink: #241a00;
	--fpt-shadow: 0 1px 2px rgb(20 26 46 / .06), 0 14px 36px -14px rgb(20 26 46 / .22);
	--fpt-scrim: rgb(12 16 32 / .45);

	/* Accent: ultramarine (default). Each accent has a light and a dark value. */
	--fpt-accent-l: #2341a8;
	--fpt-accent-d: #9db1ff;
	--fpt-accent: var(--fpt-accent-l);
	--fpt-on-accent: #ffffff;
	--fpt-brand: #2341a8;

	--fpt-font: var(--wp--preset--font-family--body, "Schibsted Grotesk", system-ui, sans-serif);
	--fpt-serif: var(--wp--preset--font-family--display, Newsreader, Georgia, serif);

	color-scheme: light;
}
html:root[data-fpt-accent="bordeaux"] { --fpt-accent-l: #8e1d42; --fpt-accent-d: #f19ab6; }
html:root[data-fpt-accent="atlantic"] { --fpt-accent-l: #0c6672; --fpt-accent-d: #72d4de; }
html:root[data-fpt-accent="olive"]    { --fpt-accent-l: #4c6a1c; --fpt-accent-d: #b9d982; }

html:root[data-afv-theme="dark"] {
	--fpt-canvas: #0a0d18;
	--fpt-paper: #111627;
	--fpt-raised: #161c30;
	--fpt-mist: #1e2540;
	--fpt-hover: #171d31;
	--fpt-line: #283152;
	--fpt-line-strong: #3a4469;
	--fpt-ink: #e9ecf6;
	--fpt-ink-soft: #c9cee2;
	--fpt-muted: #9ca3be;
	--fpt-repost: #62d29a;
	--fpt-like: #ff8297;
	--fpt-lantern: #ffcd3a;
	--fpt-accent: var(--fpt-accent-d);
	--fpt-on-accent: #0a0f24;
	--fpt-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 36px -12px rgb(0 0 0 / .65);
	--fpt-scrim: rgb(0 0 0 / .6);
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	html:root[data-afv-theme="auto"] {
		--fpt-canvas: #0a0d18;
		--fpt-paper: #111627;
		--fpt-raised: #161c30;
		--fpt-mist: #1e2540;
		--fpt-hover: #171d31;
		--fpt-line: #283152;
		--fpt-line-strong: #3a4469;
		--fpt-ink: #e9ecf6;
		--fpt-ink-soft: #c9cee2;
		--fpt-muted: #9ca3be;
		--fpt-repost: #62d29a;
		--fpt-like: #ff8297;
		--fpt-lantern: #ffcd3a;
		--fpt-accent: var(--fpt-accent-d);
		--fpt-on-accent: #0a0f24;
			--fpt-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 36px -12px rgb(0 0 0 / .65);
		--fpt-scrim: rgb(0 0 0 / .6);
		color-scheme: dark;
	}
}

/* ---------- Shell: header on top, feed and sidebar below ------------- */
.afv-shell {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(1rem, 1fr) minmax(0, 40rem) 20rem minmax(1rem, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 2rem;
	align-items: start;
	width: 100%;
	min-height: 100vh;
	margin: 0 !important;
	padding: 0;
}
.afv-shell > * { margin: 0 !important; min-width: 0; }
.afv-shell > .afv-rail { grid-column: 1 / -1; grid-row: 1; }
.afv-shell > .afv-main { grid-column: 2; grid-row: 2; }
.afv-shell > .afv-side { grid-column: 3; grid-row: 2; }

.afv-main {
	box-sizing: border-box;
	min-height: calc(100vh - var(--fpt-header));
	padding: 0 0 4rem !important;
	background: var(--fpt-paper);
	border-inline: 1px solid var(--fpt-line);
}
.afv-main > * { margin-block: 0 !important; }

/* ---------- Header (desktop) ---------------------------------------- */
.afv-rail {
	position: sticky !important;
	top: var(--fpt-admin) !important;
	z-index: 60;
	height: auto !important;
	border-top: 3px solid var(--fpt-lantern);
	border-bottom: 1px solid var(--fpt-line);
	background: color-mix(in srgb, var(--fpt-paper) 94%, transparent);
	-webkit-backdrop-filter: saturate(1.3) blur(14px);
	backdrop-filter: saturate(1.3) blur(14px);
}
.afv-rail__inner.agora-header { padding: 0; }
.fpt-drawer {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: .25rem;
	max-width: 82rem;
	height: calc(var(--fpt-header) - 3px);
	margin: 0 auto;
	padding: 0 1rem;
}
.fpt-drawer > * { margin: 0 !important; }
.fpt-drawer__grip { display: none; }

.fpt-brand {
	display: flex;
	align-items: center;
	gap: .625rem;
	flex: 0 1 auto;
	min-width: 2.5rem;
	margin-inline-end: 1.25rem !important;
	color: var(--fpt-ink);
	text-decoration: none !important;
}
.fpt-brand__mark { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; object-fit: cover; }
/* The logo file has its own rounded corners. */
.fpt-brand__mark--fedipress { border-radius: 0; object-fit: contain; }
.fpt-brand__mark--letter {
	position: relative;
	display: grid;
	place-items: center;
	background: var(--fpt-brand);
	color: #fff;
	font-family: var(--fpt-serif);
	font-size: 1.375rem;
	font-weight: 600;
}
.fpt-brand__mark--letter::after {
	content: "";
	position: absolute;
	inset-block-start: .3rem;
	inset-inline-end: .3rem;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--fpt-lantern);
}
.fpt-brand__name {
	max-width: 12rem;
	overflow: hidden;
	font-family: var(--fpt-serif);
	font-size: 1.3125rem;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agora-nav { display: flex; flex: none; align-items: stretch; height: 100%; }
.agora-more { flex: none; }
.fpt-slot { position: relative; display: flex; }
.fpt-link {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	padding: 0 .75rem;
	border: 0;
	background: transparent;
	color: var(--fpt-ink-soft);
	font: inherit;
	font-size: .9688rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: start;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}
.fpt-link::before {
	content: "";
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	background: currentColor;
	-webkit-mask: var(--afv-icon) center / contain no-repeat;
	mask: var(--afv-icon) center / contain no-repeat;
}
.fpt-link:hover { color: var(--fpt-accent); }
.fpt-link__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agora-nav .fpt-link, .agora-more > summary.fpt-link { height: 100%; }
.agora-nav .fpt-link[aria-current="page"] { color: var(--fpt-accent); }
.agora-nav .fpt-link[aria-current="page"]::after {
	content: "";
	position: absolute;
	inset: auto .75rem -1px .75rem;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--fpt-accent);
}

/* "More": everything that is not in the header, in one panel. */
.agora-more { position: relative; height: 100%; }
.agora-more > summary { list-style: none; }
.agora-more > summary::-webkit-details-marker { display: none; }
.agora-more[open] > summary { color: var(--fpt-accent); }
.agora-more__panel {
	position: absolute;
	inset-block-start: calc(100% + .5rem);
	inset-inline-end: -4rem;
	z-index: 70;
	display: grid;
	grid-template-columns: repeat(3, 12rem);
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--fpt-line);
	border-radius: var(--fpt-radius);
	background: var(--fpt-raised);
	box-shadow: var(--fpt-shadow);
}
.agora-more__section nav { display: flex; flex-direction: column; }
.agora-more__title {
	margin: 0 0 .375rem !important;
	padding: 0 .625rem;
	color: var(--fpt-muted);
	font-family: var(--fpt-font);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.4;
}
.agora-more__panel .fpt-link {
	width: 100%;
	min-height: 2.5rem;
	padding: 0 .625rem;
	border-radius: var(--fpt-radius-sm);
	font-size: .9375rem;
	font-weight: 550;
}
.agora-more__panel .fpt-link::before { width: 1.25rem; height: 1.25rem; }
.agora-more__panel .fpt-link:hover { background: var(--fpt-mist); color: var(--fpt-ink); }
.agora-more__panel .fpt-link[aria-current="page"] { background: var(--fpt-tint); color: var(--fpt-accent); }

.agora-header__spacer { flex: 1; }

.fpt-compose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	flex: none;
	min-height: 2.5rem;
	margin-inline-start: .5rem !important;
	padding: 0 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--fpt-accent);
	color: var(--fpt-on-accent) !important;
	font: inherit;
	font-size: .9688rem;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}
.fpt-compose:hover { filter: brightness(1.1); }

/* FediPress's account switcher: just the avatar in the header. */
.fpt-drawer .afv-account-menu { position: relative; flex: none; margin: 0 0 0 .5rem !important; padding: 0; }
.fpt-drawer .afv-account-menu > summary { padding: .25rem; border-radius: 999px; }
.fpt-drawer .afv-account-menu > summary:hover { background: var(--fpt-mist); }
/* Only the avatar shows; the name stays the button's name for screen readers. */
.fpt-drawer .afv-account-menu .afv-switch__who {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.fpt-drawer .afv-account-menu__panel {
	position: absolute;
	inset: calc(100% + .5rem) 0 auto auto;
	z-index: 70;
	width: 17rem;
	margin: 0;
	padding: .5rem;
	border: 1px solid var(--fpt-line);
	border-radius: var(--fpt-radius);
	background: var(--fpt-raised);
	box-shadow: var(--fpt-shadow);
}

/* Messages and notifications: icons between New post and the avatar. */
.agora-quick { display: flex; flex: none; align-items: center; gap: .125rem; margin-inline-start: .5rem !important; }
.agora-quick .fpt-slot { position: relative; }
.agora-quick__link.fpt-link {
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	color: var(--fpt-ink-soft);
}
.agora-quick__link.fpt-link::before { width: 1.5rem; height: 1.5rem; }
.agora-quick__link.fpt-link:hover { background: var(--fpt-mist); color: var(--fpt-accent); }
.agora-quick__link.fpt-link[aria-current="page"] { background: var(--fpt-tint-strong); color: var(--fpt-accent); }
.agora-quick__link .fpt-link__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.agora-quick .fpt-slot .afv-badge { inset-block-start: .2rem !important; inset-inline-start: 1.55rem !important; }

.fpt-tabbar { display: none; }

/* ---------- Responsive ---------------------------------------------- */
/* Narrower desktops: header links keep their icons; labels stay for screen readers. */
@media (max-width: 80rem) {
	.agora-nav .fpt-link__label, .agora-more > summary .fpt-link__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.agora-nav .fpt-link, .agora-more > summary.fpt-link { padding: 0 .8rem; }
	.fpt-slot .afv-badge { inset-inline-start: 1.6rem !important; }
}
@media (max-width: 64rem) {
	.afv-shell { grid-template-columns: minmax(1rem, 1fr) minmax(0, 42rem) minmax(1rem, 1fr); }
	.afv-side { display: none !important; }
	.agora-more__panel { grid-template-columns: repeat(2, 12rem); inset-inline-end: -8rem; }
}
@media (max-width: 52rem) {
	/* Only the logo shows; the site name stays the link's name for screen readers. */
	.fpt-brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Phones and small tablets: bottom tab bar, and the header becomes a menu sheet. */
@media (max-width: 43.75rem) {
	html:root { --fpt-header: 0px; --fpt-tabbar: calc(4rem + env(safe-area-inset-bottom, 0px)); }
	.afv-shell { display: block; padding: 0 0 var(--fpt-tabbar); }
	.afv-main { min-height: calc(100vh - var(--fpt-tabbar)); border-inline: 0; }
	.afv-rail { position: static !important; height: 0 !important; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

	.fpt-tabbar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 100;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		align-items: center;
		box-sizing: border-box;
		height: var(--fpt-tabbar);
		padding: 0 .25rem env(safe-area-inset-bottom, 0px);
		border-top: 1px solid var(--fpt-line);
		background: color-mix(in srgb, var(--fpt-paper) 94%, transparent);
		-webkit-backdrop-filter: saturate(1.3) blur(16px);
		backdrop-filter: saturate(1.3) blur(16px);
	}
	.fpt-tabbar > .fpt-slot { min-width: 0; justify-content: center; }
	.fpt-tab {
		flex-direction: column;
		justify-content: center;
		gap: .2rem;
		width: 100%;
		min-height: 3.25rem;
		padding: .25rem 0;
		color: var(--fpt-muted);
		font-size: .75rem;
		font-weight: 650;
		text-align: center;
	}
	.fpt-tab.fpt-link::before { width: 1.5rem; height: 1.5rem; }
	.fpt-tab .fpt-link__label { display: block; max-width: 100%; }
	.fpt-tab:hover { color: var(--fpt-ink); }
	.fpt-tab[aria-current="page"] { color: var(--fpt-accent); }
	.fpt-tab--write { display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
	.fpt-tab__bubble {
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		background: var(--fpt-accent);
		color: var(--fpt-on-accent);
		box-shadow: 0 0 0 3px var(--fpt-paper), 0 0 0 5px var(--fpt-lantern);
	}
	.fpt-tabbar .fpt-slot .afv-badge { inset-inline-start: calc(50% + .25rem) !important; inset-block-start: .125rem !important; box-shadow: 0 0 0 2px var(--fpt-paper) !important; }

	.fpt-drawer {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 110;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		max-width: none;
		height: auto;
		max-height: calc(100svh - 3rem);
		padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 4px solid var(--fpt-lantern);
		border-radius: 22px 22px 0 0;
		background: var(--fpt-raised);
		box-shadow: 0 -20px 60px -20px rgb(0 0 0 / .4);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s .24s;
	}
	html.fpt-menu-open .fpt-drawer { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
	html.fpt-menu-open { overflow: hidden; }
	.fpt-drawer__grip { display: block; width: 2.5rem; height: .3rem; margin: .25rem auto .5rem !important; border-radius: 99px; background: var(--fpt-line-strong); }
	.fpt-brand { margin: 0 0 .5rem !important; padding: .25rem; }
	.fpt-brand__name { position: static; display: block; width: auto; height: auto; max-width: none; clip: auto; clip-path: none; }
	.agora-nav, .agora-more__section nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; height: auto; }
	.fpt-drawer .fpt-link {
		justify-content: flex-start;
		width: 100%;
		height: auto;
		min-height: 3rem;
		padding: .5rem .75rem;
		border-radius: 12px;
		background: var(--fpt-mist);
		font-size: 1rem;
	}
	.fpt-drawer .fpt-link__label { position: static; width: auto; height: auto; clip: auto; overflow: hidden; }
	.fpt-drawer .agora-nav .fpt-link[aria-current="page"]::after { display: none; }
	.fpt-drawer .fpt-link[aria-current="page"] { background: var(--fpt-tint-strong); color: var(--fpt-accent); }
	.agora-more { height: auto; }
	.agora-more > summary { display: none; }
	.agora-more__panel { position: static; display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
	.agora-more__section { margin-top: 1rem; }
	.agora-more__title { padding: 0 .25rem; }
	.agora-header__spacer, .fpt-drawer .fpt-compose { display: none; }
	.agora-nav { order: 1; }
	.agora-quick { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; margin: .375rem 0 0 !important; }
	.agora-more { order: 3; }
	.fpt-drawer .afv-account-menu { order: 4; }
	.fpt-drawer > .agora-brand, .fpt-drawer > .fpt-brand, .fpt-drawer__grip { order: 0; }
	.agora-quick__link.fpt-link { justify-content: flex-start; width: 100%; height: auto; min-height: 3rem; padding: .5rem .75rem; border-radius: 12px; }
	.agora-quick__link.fpt-link::before { width: 1.375rem; height: 1.375rem; }
	.agora-quick__link .fpt-link__label { position: static; width: auto; height: auto; clip: auto; clip-path: none; overflow: hidden; }
	.agora-quick .fpt-slot .afv-badge { inset-inline-start: 1.6rem !important; inset-block-start: .3rem !important; }
	.fpt-drawer .afv-account-menu { display: block !important; margin: 1rem 0 0 !important; padding-top: .75rem; border-top: 1px solid var(--fpt-line); }
	.fpt-drawer .afv-account-menu .afv-switch__who { display: grid; position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
	.fpt-drawer .afv-account-menu > summary { border-radius: 12px; }
	.fpt-drawer .afv-account-menu__panel { position: static; width: auto; margin-top: .5rem; box-shadow: none; }
	.fpt-drawer .fpt-slot .afv-badge { inset-inline-start: 1.6rem !important; inset-block-start: .3rem !important; box-shadow: 0 0 0 2px var(--fpt-mist) !important; }
	.fpt-scrim:not([hidden]) { position: fixed; inset: 0; z-index: 105; background: var(--fpt-scrim); }

}



.afv-post__meta .wp-block-post-author-name { font-weight: 700; }