/* ==========================================================================
   Pringomart — layout layer.

   Loaded after main.css and before dark-mode.css. It owns the header,
   announcement bar, hero, homepage grids, sidebar, pagination and footer.
   Article, community and profile styles stay in main.css, untouched.

   Everything reads the existing token system, so dark mode needs no
   component overrides — only the few places where a surface colour was
   previously hardcoded to the dark nav.

   1.  Layout tokens
   2.  Header (desktop)
   3.  Navigation
   4.  Header actions
   5.  Mobile header
   6.  Drawer
   7.  Announcement bar
   8.  Section rhythm
   9.  Hero
   10. Grids & cards
   11. Sidebar
   12. Pagination
   13. Footer
   14. Responsive
   ========================================================================== */

/* 1. Layout tokens -------------------------------------------------------- */

:root {
	--container: 1200px;
	--header-h: 68px;

	/* Surfaces that used to be painted with the dark nav colour. */
	--header-bg: var(--bg-card);
	--header-text: var(--text-primary);
	--header-border: var(--border-color);
	--footer-bg: var(--bg-card);

	--card-radius: 16px;
	--section-gap: 56px;

	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
	--shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
}

[data-theme="dark"] {
	--header-bg: #0f1520;
	--header-text: var(--text-primary);
	--header-border: var(--border-color);
	--footer-bg: #0f1520;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

body.pm-body {
	font-family: "Inter", "Hind Siliguri", "Noto Sans Bengali", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 2. Header --------------------------------------------------------------- */

.pm-header--light .pm-header__bar {
	background: var(--header-bg);
	color: var(--header-text);
	border-bottom: 1px solid var(--header-border);
	box-shadow: none;
}

.pm-header--light[data-stuck="1"] .pm-header__bar {
	box-shadow: var(--shadow-md);
}

.pm-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--header-h);
}

.pm-header__left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.pm-header--light .pm-logo,
.pm-header--light .pm-logo:hover {
	color: var(--text-primary);
	font-size: 1.22rem;
	letter-spacing: -0.03em;
}

.pm-header__brand .pm-logo__img {
	max-height: 34px;
}

/* 3. Navigation ----------------------------------------------------------- */

.pm-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.pm-header--light .pm-nav__list {
	gap: 2px;
}

.pm-header--light .pm-nav__list > li > a {
	padding: 8px 14px;
	border-radius: 8px;
	color: var(--text-secondary);
	font-size: 0.93rem;
	font-weight: 600;
	opacity: 1;
}

.pm-header--light .pm-nav__list > li > a:hover,
.pm-header--light .pm-nav__list > .current-menu-item > a,
.pm-header--light .pm-nav__list > .current-menu-parent > a {
	background: color-mix(in srgb, var(--accent-color) 10%, transparent);
	color: var(--accent-color);
}

/* Caret for items that open a submenu */
.pm-header--light .menu-item-has-children > a::after {
	content: "▾";
	margin-left: 5px;
	font-size: 0.72em;
	opacity: 0.7;
}

.pm-header--light .pm-nav__list .sub-menu {
	min-width: 230px;
	padding: 8px;
	border-radius: 14px;
	box-shadow: var(--shadow-lg);
}

.pm-header--light .pm-nav__list .sub-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 0.88rem;
	font-weight: 500;
}

.pm-navdot {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: var(--pm-cat-color, var(--accent-color));
}

.pm-navcount {
	margin-left: auto;
	padding: 1px 7px;
	background: var(--bg-secondary);
	border-radius: 999px;
	color: var(--text-muted);
	font-size: 0.72rem;
}

/* 4. Header actions ------------------------------------------------------- */

.pm-header__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin-left: 0;
}

.pm-header--light .pm-icon-btn {
	width: 38px;
	height: 38px;
	color: var(--text-secondary);
}

.pm-header--light .pm-icon-btn:hover {
	background: var(--bg-secondary);
	color: var(--accent-color);
}

/* Search collapses to an icon; the field opens as a panel. */
.pm-header--light .pm-search__toggle {
	display: inline-flex;
}

.pm-header--light .pm-search__form {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: var(--z-dropdown);
	display: none;
	width: min(360px, calc(100vw - 32px));
	padding: 8px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 14px;
	box-shadow: var(--shadow-lg);
}

.pm-header--light .pm-search.is-open .pm-search__form {
	display: flex;
}

.pm-header--light .pm-search__input,
.pm-header--light .pm-search__input:focus {
	width: 100%;
	background: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.pm-header--light .pm-search__input::placeholder {
	color: var(--text-muted);
}

.pm-btn--pill {
	padding: 9px 20px;
	border-radius: 999px;
	font-size: 0.88rem;
}

.pm-header--light .pm-usermenu__btn {
	background: var(--bg-secondary);
	color: var(--text-primary);
	padding: 4px 12px 4px 4px;
}

.pm-header--light .pm-usermenu__btn:hover {
	background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.pm-header--light .pm-notify__btn {
	color: var(--text-secondary);
}

/* 5. Mobile header -------------------------------------------------------- */

.pm-header__burger {
	display: none;
}

.pm-burger span {
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* 6. Drawer --------------------------------------------------------------- */

.pm-drawer {
	width: min(330px, 82vw);
	padding: 0;
	background: var(--bg-card);
	border-right: 0;
	box-shadow: var(--shadow-lg);
}

.pm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	margin: 0;
	border-bottom: 1px solid var(--border-color);
}

.pm-drawer__head .pm-logo {
	font-size: 1.1rem;
}

.pm-drawer__nav,
.pm-drawer__section {
	padding: 12px 10px;
}

.pm-drawer__section {
	border-top: 1px solid var(--border-color);
}

.pm-drawer__title {
	margin: 0 0 6px;
	padding-inline: 10px;
	color: var(--text-muted);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pm-drawer__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--text-primary);
	font-size: 0.95rem;
	font-weight: 500;
}

.pm-drawer__list a:hover {
	background: var(--bg-secondary);
	color: var(--accent-color);
}

.pm-drawer__icon {
	width: 20px;
	text-align: center;
	opacity: 0.85;
}

.pm-drawer__foot {
	display: grid;
	gap: 4px;
	margin-top: auto;
	padding: 12px 10px 18px;
	border-top: 1px solid var(--border-color);
}

.pm-drawer__themebtn,
.pm-drawer__authbtn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	background: none;
	border: 0;
	border-radius: 10px;
	color: var(--text-primary);
	font-size: 0.95rem;
	font-weight: 500;
	text-align: left;
}

.pm-drawer__themebtn:hover,
.pm-drawer__authbtn:hover {
	background: var(--bg-secondary);
	color: var(--accent-color);
}

.pm-drawer-overlay {
	background: rgba(11, 17, 28, 0.55);
	backdrop-filter: blur(2px);
}

/* 7. Announcement bar ----------------------------------------------------- */

.pm-announce {
	background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
	color: #fff;
}

.pm-announce__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 46px;
	padding-block: 8px;
}

.pm-announce__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}

.pm-announce__text {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.88rem;
	line-height: 1.5;
}

.pm-announce__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	background: #fff;
	border-radius: 999px;
	color: var(--accent-color);
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
	transition: transform var(--transition);
}

.pm-announce__btn:hover {
	color: var(--accent-hover);
	transform: translateX(2px);
}

/* 8. Section rhythm ------------------------------------------------------- */

.pm-content {
	padding-block: 0 var(--section-gap);
}

.pm-section-gap {
	margin-top: 32px;
}

.pm-block + .pm-block {
	margin-top: var(--section-gap);
}

.pm-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.pm-block__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* The rule that trails the heading, as in the reference. */
.pm-block__title::after {
	content: "";
	display: block;
	width: 100%;
	min-width: 40px;
	height: 1px;
	background: var(--border-color);
}

.pm-block__head {
	position: relative;
}

.pm-block__title {
	flex: 1 1 auto;
}

.pm-block__icon {
	font-size: 1.1rem;
	line-height: 1;
}

.pm-block__more {
	flex: 0 0 auto;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}

/* 9. Hero ----------------------------------------------------------------- */

.pm-hero {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: linear-gradient(120deg,
		color-mix(in srgb, var(--accent-color) 92%, #000),
		var(--accent-color) 45%,
		var(--secondary-color));
	box-shadow: var(--shadow-lg);
}

.pm-hero__track {
	display: grid;
}

.pm-hero__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 32px;
	padding: 44px 48px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 420ms ease, visibility 420ms ease;
}

.pm-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.pm-hero__body {
	min-width: 0;
	color: #fff;
}

.pm-hero__body .pm-badge--cat {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	backdrop-filter: blur(4px);
}

.pm-hero__title {
	margin: 14px 0 12px;
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.pm-hero__title a {
	color: #fff;
}

.pm-hero__title a:hover {
	opacity: 0.9;
	color: #fff;
}

.pm-hero__excerpt {
	margin: 0 0 18px;
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.93rem;
	line-height: 1.7;
}

.pm-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.82rem;
}

.pm-hero__author {
	color: #fff;
	font-weight: 600;
}

.pm-hero__meta .pm-dotsep {
	color: rgba(255, 255, 255, 0.5);
}

.pm-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 24px;
	background: #fff;
	border-radius: 999px;
	color: var(--accent-color);
	font-size: 0.88rem;
	font-weight: 700;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}

.pm-hero__cta:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
	color: var(--accent-hover);
}

.pm-hero__media {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.pm-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.pm-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.22);
	border: 0;
	border-radius: 50%;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	backdrop-filter: blur(4px);
	transition: background var(--transition);
}

.pm-hero__nav:hover {
	background: rgba(255, 255, 255, 0.4);
}

.pm-hero__nav--prev { left: 14px; }
.pm-hero__nav--next { right: 14px; }

.pm-hero__dots {
	position: absolute;
	right: 24px;
	bottom: 18px;
	display: flex;
	gap: 6px;
}

.pm-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: rgba(255, 255, 255, 0.45);
	border: 0;
	border-radius: 999px;
	transition: width var(--transition), background var(--transition);
}

.pm-hero__dot.is-active {
	width: 22px;
	background: #fff;
}

/* 10. Grids & cards ------------------------------------------------------- */

.pm-grid--2,
.pm-grid--3 {
	display: grid;
	gap: 22px;
}

.pm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pm-entry {
	border-radius: var(--card-radius);
	border-color: var(--border-color);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}

.pm-entry:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.pm-entry__thumb {
	overflow: hidden;
}

.pm-entry__img {
	transition: transform 420ms ease;
}

.pm-entry:hover .pm-entry__img {
	transform: scale(1.04);
}

.pm-entry__thumb .pm-badge--cat {
	left: 12px;
	bottom: 12px;
	padding: 4px 11px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	box-shadow: var(--shadow-sm);
}

.pm-entry__body {
	gap: 10px;
	padding: 16px 18px 18px;
}

.pm-entry__title {
	min-height: 0;
	font-size: 1.02rem;
	line-height: 1.45;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.pm-entry__excerpt {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.86rem;
	line-height: 1.65;
}

.pm-entry__author {
	gap: 7px;
	font-size: 0.78rem;
}

.pm-entry__stats {
	gap: 14px;
	padding-top: 12px;
	margin-top: 2px;
	font-size: 0.76rem;
}

.pm-entry__bookmark {
	margin-left: auto;
}

/* 11. Sidebar ------------------------------------------------------------- */

.pm-layout {
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
}

.pm-sidebar {
	gap: 20px;
}

.pm-widget {
	padding: 18px;
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-sm);
}

.pm-widget__title {
	font-size: 0.95rem;
	font-weight: 700;
}

.pm-widget--search {
	padding: 12px;
}

.pm-sidesearch {
	position: relative;
	display: flex;
	align-items: center;
}

.pm-sidesearch__input {
	padding-right: 44px;
	border-radius: 999px;
	background: var(--bg-secondary);
	border-color: transparent;
}

.pm-sidesearch__input:focus {
	background: var(--bg-primary);
	border-color: var(--accent-color);
}

.pm-sidesearch__btn {
	position: absolute;
	right: 5px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--text-muted);
}

.pm-sidesearch__btn:hover {
	color: var(--accent-color);
}

/* 12. Pagination ---------------------------------------------------------- */

.pm-pagination {
	margin-top: 32px;
}

.pm-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	color: var(--text-secondary);
	font-size: 0.88rem;
	font-weight: 600;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.pm-pagination .page-numbers:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.pm-pagination .page-numbers.current {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: #fff;
}

.pm-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	box-shadow: none;
}

/* 13. Footer -------------------------------------------------------------- */

.pm-footer--light {
	margin-top: var(--section-gap);
	background: var(--footer-bg);
	border-top: 1px solid var(--border-color);
	color: var(--text-secondary);
}

.pm-footer--light a {
	color: var(--text-secondary);
}

.pm-footer--light a:hover {
	color: var(--accent-color);
}

.pm-footer--light .pm-logo,
.pm-footer--light .pm-logo:hover {
	color: var(--text-primary);
}

.pm-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 40px;
	padding-block: 52px 40px;
}

.pm-footer__tagline,
.pm-footer__newstext {
	margin: 12px 0 0;
	max-width: 36ch;
	color: var(--text-secondary);
	font-size: 0.88rem;
	line-height: 1.7;
}

.pm-footer--light .pm-footer__title {
	margin-bottom: 16px;
	color: var(--text-primary);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.pm-footer__list li {
	margin-bottom: 10px;
	font-size: 0.88rem;
}

.pm-footer--light .pm-social__link {
	width: 36px;
	height: 36px;
	background: var(--bg-secondary);
	color: var(--text-secondary);
}

.pm-footer--light .pm-social__link:hover {
	background: var(--accent-color);
	color: #fff;
}

.pm-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.pm-newsletter__input {
	flex: 1 1 160px;
	min-width: 0;
	padding: 10px 16px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	color: var(--text-primary);
	font-size: 0.86rem;
}

.pm-newsletter__input::placeholder {
	color: var(--text-muted);
}

.pm-newsletter__msg {
	flex: 1 0 100%;
	margin: 0;
	font-size: 0.8rem;
}

.pm-footer--light .pm-footer__bottom {
	border-top: 1px solid var(--border-color);
}

.pm-footer__bottom-inner {
	padding-block: 20px;
}

.pm-footer--light .pm-footer__copy {
	color: var(--text-secondary);
	font-size: 0.84rem;
}

.pm-footer--light .pm-footer__dev {
	color: var(--text-muted);
	font-size: 0.78rem;
}

.pm-footer--light .pm-online-count {
	margin-top: 14px;
	color: var(--text-muted);
}

/* 14. Responsive ---------------------------------------------------------- */

/* Tablet: sidebar drops below, popular becomes two across. */
@media (max-width: 1024px) {
	:root {
		--section-gap: 44px;
	}

	.pm-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.pm-sidebar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		display: grid;
		align-items: start;
	}

	.pm-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pm-hero__slide {
		padding: 32px 34px;
		gap: 24px;
	}

	.pm-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 32px;
	}

	.pm-footer__col--news {
		grid-column: 1 / -1;
	}
}

/* Where the desktop nav no longer fits: switch to the drawer. */
@media (max-width: 900px) {
	.pm-header__nav {
		display: none;
	}

	.pm-header__burger {
		display: inline-flex;
	}

	.pm-header__inner {
		gap: 10px;
	}

	/* Logo centred between the hamburger and the actions. */
	.pm-header__left {
		flex: 0 0 auto;
	}

	.pm-header__brand {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.pm-header__inner {
		position: relative;
		justify-content: space-between;
	}

	.pm-usermenu__name {
		display: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--header-h: 60px;
		--section-gap: 36px;
		--card-radius: 14px;
	}

	.pm-section-gap {
		margin-top: 20px;
	}

	.pm-container {
		padding-inline: 16px;
	}

	/* Hero stacks: image first, then the copy. */
	.pm-hero {
		border-radius: 18px;
	}

	.pm-hero__slide {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 0;
	}

	.pm-hero__media {
		order: -1;
		border-radius: 0;
		box-shadow: none;
	}

	.pm-hero__img {
		aspect-ratio: 16 / 10;
	}

	.pm-hero__body {
		padding: 18px 20px 24px;
	}

	.pm-hero__title {
		margin: 10px 0 8px;
		font-size: 1.15rem;
	}

	.pm-hero__excerpt {
		margin-bottom: 14px;
		font-size: 0.86rem;
	}

	.pm-hero__nav {
		display: none;
	}

	.pm-hero__dots {
		right: auto;
		left: 20px;
		bottom: auto;
		top: calc(56vw - 28px);
	}

	/* One card per row everywhere. */
	.pm-grid--2,
	.pm-grid--3,
	.pm-sidebar {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.pm-block__title {
		font-size: 1.08rem;
	}

	.pm-announce__inner {
		flex-wrap: wrap;
		gap: 8px 10px;
		padding-block: 10px;
	}

	.pm-announce__text {
		flex: 1 1 100%;
		order: 3;
		font-size: 0.82rem;
	}

	.pm-announce__btn {
		margin-left: auto;
		padding: 6px 14px;
	}

	.pm-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 9px;
		font-size: 0.84rem;
	}

	/* Footer stacks in one column, nothing cramped. */
	.pm-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-block: 36px 28px;
	}

	.pm-footer__col--news {
		grid-column: auto;
	}

	.pm-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.pm-footer__legal {
		gap: 16px;
		flex-wrap: wrap;
	}
}

/* Small phones: keep the newsletter and pagination usable at 320px. */
@media (max-width: 400px) {
	.pm-container {
		padding-inline: 14px;
	}

	.pm-newsletter {
		flex-direction: column;
		align-items: stretch;
	}

	.pm-newsletter .pm-btn {
		width: 100%;
	}

	.pm-announce__tag {
		font-size: 0.72rem;
		padding: 3px 9px;
	}

	.pm-entry__stats {
		gap: 10px;
	}
}

/* Large desktops: let the container breathe without stretching the text. */
@media (min-width: 1440px) {
	:root {
		--container: 1240px;
	}
}

/* ==========================================================================
   14b. Reference-matching pass
   Translucent header, mega menu, contributor strip, motion polish and the
   sidebar's scroll behaviour.
   ========================================================================== */

/* --- Translucent sticky header ------------------------------------------ */

/*
 * The bar is translucent at all times and blurs what scrolls under it. The
 * @supports guard matters: without backdrop-filter (older Firefox, some
 * in-app browsers) a translucent bar would leave text unreadable over
 * images, so those browsers keep the solid surface instead.
 */
.pm-header--light .pm-header__bar {
	background: var(--header-bg);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pm-header--light .pm-header__bar {
		background: color-mix(in srgb, var(--header-bg) 85%, transparent);
		-webkit-backdrop-filter: saturate(180%) blur(14px);
		backdrop-filter: saturate(180%) blur(14px);
	}
}

/* The announcement bar scrolls away, so the stuck header needs its own edge. */
.pm-header--light[data-stuck="1"] .pm-header__bar {
	border-bottom-color: color-mix(in srgb, var(--border-color) 70%, transparent);
}

/* --- Mega menu ----------------------------------------------------------- */

.pm-has-mega {
	position: static; /* panel spans the container, not the menu item */
}

.pm-header__nav {
	position: relative;
}

.pm-mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translate(-50%, 6px);
	z-index: var(--z-dropdown);
	width: min(720px, calc(100vw - 48px));
	padding: 16px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.pm-has-mega:hover > .pm-mega,
.pm-has-mega:focus-within > .pm-mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.pm-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-mega__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 11px;
	border-radius: 10px;
	color: var(--text-primary);
	font-size: 0.86rem;
	font-weight: 500;
	transition: background 140ms ease, color 140ms ease;
}

.pm-mega__item:hover {
	background: color-mix(in srgb, var(--pm-cat-color, var(--accent-color)) 12%, transparent);
	color: var(--pm-cat-color, var(--accent-color));
}

.pm-mega__dot {
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border-radius: 50%;
	background: var(--pm-cat-color, var(--accent-color));
}

.pm-mega__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pm-mega__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-color);
	color: var(--text-muted);
	font-size: 0.82rem;
}

.pm-mega__foot a {
	font-weight: 600;
}

/* --- Contributor strip --------------------------------------------------- */

.pm-contrib {
	background: var(--bg-card);
	border-bottom: 1px solid var(--border-color);
}

.pm-contrib__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 12px;
}

.pm-contrib__list {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
	padding: 2px 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.pm-contrib__list::-webkit-scrollbar {
	display: none;
}

.pm-contrib__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 64px;
	color: var(--text-secondary);
	font-size: 0.7rem;
	text-align: center;
}

.pm-contrib__link .pm-avatar__img {
	border: 2px solid transparent;
	transition: border-color 160ms ease, transform 160ms ease;
}

.pm-contrib__link:hover .pm-avatar__img {
	border-color: var(--accent-color);
	transform: translateY(-2px);
}

.pm-contrib__link:hover .pm-contrib__name {
	color: var(--accent-color);
}

.pm-contrib__name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 160ms ease;
}

.pm-contrib__more {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
}

/* --- Motion polish ------------------------------------------------------- */

/* One easing curve and two durations across the interface. */
:root {
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast: 160ms;
	--dur-slow: 420ms;
}

.pm-entry {
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.pm-entry:hover {
	transform: translateY(-4px);
}

.pm-entry__img {
	transition: transform var(--dur-slow) var(--ease);
}

.pm-entry:hover .pm-entry__img {
	transform: scale(1.06);
}

.pm-entry__title a {
	background-image: linear-gradient(var(--accent-color), var(--accent-color));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pm-entry:hover .pm-entry__title a {
	background-size: 100% 1px;
}

.pm-chip,
.pm-btn,
.pm-icon-btn,
.pm-pagination .page-numbers {
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.pm-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.pm-pagination .page-numbers:hover {
	transform: translateY(-1px);
}

.pm-widget {
	transition: box-shadow var(--dur-fast) var(--ease);
}

.pm-widget:hover {
	box-shadow: var(--shadow-md);
}

.pm-catlist a,
.pm-leaders__item {
	transition: color var(--dur-fast) var(--ease);
}

.pm-catlist a:hover .pm-catlist__count {
	background: color-mix(in srgb, var(--pm-cat-color, var(--accent-color)) 18%, transparent);
	color: var(--pm-cat-color, var(--accent-color));
}

/* Nothing above should animate for visitors who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
	.pm-entry:hover,
	.pm-entry:hover .pm-entry__img,
	.pm-btn--primary:hover,
	.pm-pagination .page-numbers:hover,
	.pm-contrib__link:hover .pm-avatar__img {
		transform: none;
	}
}

/* --- Sidebar scrolls with the page --------------------------------------- */

.pm-sidebar {
	position: static;
	top: auto;
}

/* ==========================================================================
   15. Shared page components
   Breadcrumbs, page heads, chips, article layout and the single-post hero.
   Used by archive.php, search.php, page.php and single.php so every public
   page speaks the same visual language as the homepage.
   ========================================================================== */

/* Breadcrumbs */
.pm-crumbs ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--text-muted);
	font-size: 0.82rem;
}

.pm-crumbs li + li::before {
	content: "›";
	margin-right: 6px;
	opacity: 0.6;
}

.pm-crumbs a {
	color: var(--text-secondary);
	font-weight: 500;
}

.pm-crumbs a:hover {
	color: var(--accent-color);
}

.pm-crumbs li[aria-current] {
	color: var(--text-muted);
}

.pm-crumbs--onhero ol,
.pm-crumbs--onhero a,
.pm-crumbs--onhero li[aria-current] {
	color: rgba(255, 255, 255, 0.78);
}

.pm-crumbs--onhero a:hover {
	color: #fff;
}

/* Page head */
.pm-pagehead {
	margin-bottom: 28px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--border-color);
}

.pm-pagehead__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 8px;
	font-size: clamp(1.35rem, 3vw, 1.95rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pm-pagehead__dot {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	border-radius: 50%;
	background: var(--pm-cat-color, var(--accent-color));
}

.pm-pagehead__desc {
	max-width: 70ch;
	color: var(--text-secondary);
	font-size: 0.92rem;
	line-height: 1.75;
}

.pm-pagehead__meta {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.85rem;
}

.pm-pagehead__search {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	max-width: 520px;
}

.pm-pagehead__search .pm-sidesearch__input {
	flex: 1 1 auto;
	padding-right: 16px;
}

/* Chips */
.pm-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	color: var(--text-secondary);
	font-size: 0.78rem;
	font-weight: 600;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.pm-chip:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.pm-chip--solid {
	background: var(--pm-cat-color, var(--accent-color));
	border-color: transparent;
	color: #fff;
}

.pm-chip--solid:hover {
	color: #fff;
	filter: brightness(1.08);
}

.pm-catchips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Article card (page.php, single.php) */
.pm-article {
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.pm-article__head {
	padding: 26px 30px 0;
}

.pm-article__title {
	margin: 12px 0 6px;
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.pm-article__meta {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.82rem;
}

.pm-article__hero {
	margin: 22px 0 0;
}

.pm-article__heroimg {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.pm-article__content {
	padding: 28px 30px;
	font-size: 1rem;
}

.pm-article__foot {
	padding: 0 30px 28px;
}

.pm-article__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px 0;
}

.pm-article__tagslabel {
	color: var(--text-muted);
	font-size: 0.82rem;
	font-weight: 600;
}

/* Single-post hero panel */
.pm-posthero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 0;
	margin-bottom: 28px;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(120deg,
		color-mix(in srgb, var(--accent-color) 92%, #000),
		var(--accent-color) 55%,
		var(--secondary-color));
	box-shadow: var(--shadow-lg);
}

.pm-posthero--notext {
	grid-template-columns: minmax(0, 1fr);
}

.pm-posthero__media {
	margin: 0;
	height: 100%;
}

.pm-posthero__img {
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
}

.pm-posthero__body {
	padding: 32px 36px;
	color: #fff;
}

.pm-posthero__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 0;
}

.pm-posthero__terms .pm-chip--solid {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
}

.pm-posthero__title {
	margin: 14px 0 18px;
	color: #fff;
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.pm-posthero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.pm-posthero__author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.pm-posthero__authorbody {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pm-posthero__authorname {
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
}

.pm-posthero__authorname:hover {
	color: #fff;
	opacity: 0.85;
}

/* The rank badge sits on a coloured panel here, so it needs its own skin. */
.pm-posthero__meta .pm-badge--rank {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.pm-posthero__meta .pm-follow-btn {
	background: #fff;
	border-color: #fff;
	color: var(--accent-color);
}

.pm-posthero__meta .pm-follow-btn.is-active {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.pm-posthero__stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	width: 100%;
	margin: 4px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	list-style: none;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
}

/* Comments and reaction bar inherit main.css, but the card padding differs. */
.pm-article .pm-reactbar {
	padding: 18px 0;
}

/* 16. Shared responsive --------------------------------------------------- */

@media (max-width: 1024px) {
	.pm-posthero__img {
		min-height: 220px;
	}

	.pm-posthero__body {
		padding: 26px 28px;
	}
}

@media (max-width: 767px) {
	/* Hero stacks: image on top, copy beneath. */
	.pm-posthero {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 16px;
		margin-bottom: 20px;
	}

	.pm-posthero__img {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.pm-posthero__body {
		padding: 18px 20px 22px;
	}

	.pm-posthero__title {
		margin: 10px 0 14px;
		font-size: 1.2rem;
	}

	.pm-posthero__stats {
		gap: 10px;
		font-size: 0.76rem;
	}

	.pm-pagehead {
		margin-bottom: 20px;
		padding-bottom: 16px;
	}

	.pm-pagehead__search {
		flex-direction: column;
	}

	.pm-article__head,
	.pm-article__content,
	.pm-article__foot {
		padding-inline: 18px;
	}

	.pm-article__content {
		padding-block: 20px;
	}

	.pm-article__title {
		font-size: 1.25rem;
	}
}

@media (max-width: 400px) {
	.pm-article__head,
	.pm-article__content,
	.pm-article__foot {
		padding-inline: 16px;
	}

	.pm-posthero__meta {
		gap: 10px;
	}
}

/* ==========================================================================
   17. Responsive refinement
   Final pass over the components added above. Loaded last, so these win
   where they overlap with the earlier breakpoints.
   ========================================================================== */

/* Laptops: the mega panel must not outgrow the container. */
@media (max-width: 1280px) {
	.pm-mega {
		width: min(640px, calc(100vw - 40px));
	}
}

/* Tablet landscape */
@media (max-width: 1024px) {
	.pm-mega__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pm-contrib__inner {
		padding-block: 10px;
	}
}

/* Tablet portrait: the nav collapses, so the mega panel goes with it. */
@media (max-width: 900px) {
	.pm-mega {
		display: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	/*
	 * The avatar size is set inline by pringomart_avatar(), so the custom
	 * property has to be overridden with !important to shrink here.
	 */
	.pm-contrib .pm-avatar {
		--pm-avatar-size: 44px !important;
	}

	.pm-contrib__inner {
		gap: 10px;
		padding-block: 10px;
	}

	.pm-contrib__list {
		gap: 14px;
		/* Edge-to-edge scroll, so the last avatar is not clipped mid-row. */
		margin-inline: -16px;
		padding-inline: 16px;
	}

	.pm-contrib__link {
		width: 56px;
		font-size: 0.66rem;
	}

	.pm-contrib__more {
		display: none;
	}
}

/* Small phones */
@media (max-width: 400px) {
	.pm-contrib .pm-avatar {
		--pm-avatar-size: 40px !important;
	}

	.pm-contrib__link {
		width: 50px;
	}

	.pm-announce__inner {
		gap: 6px 8px;
	}
}

/* Wide desktops: the grid gets roomier, the reading measure does not. */
@media (min-width: 1600px) {
	.pm-grid--2,
	.pm-grid--3 {
		gap: 24px;
	}

	.pm-layout {
		gap: 32px;
	}
}