/*
 * ROL Classic news content — the list pages (home, archive, search) and the
 * single post, per Figma "[Design] Landverse Thailand":
 *   26840:15466  news list   (sidebar left, one panel holding every row)
 *   27005:399    single post (title banner, article left, "Others" right)
 *   27005:158/160/162/165  category badges (Promotion / Event / Dev Note / Notice)
 * Markup: templates/{home,index,archive,search,single}.html,
 * patterns/rolc-news-query.php, parts/news-sidebar.html. Badge and category
 * labels/order come from ROLC_NEWS_CATEGORIES in functions.php.
 * Tokens (--rolc-blue, --rolc-font …) come from layout.css.
 */

:root {
	/* Figma copy grey for excerpts, dates and idle filters. */
	--rolc-text: #777777;
	--rolc-text-muted: #777777;
	--rolc-row: #f5f5f5;
	--rolc-row-border: #eaeaea;
	--rolc-border: #d1d1d6;
	--rolc-link: #4e80d2;
	--rolc-panel-bg: rgba(255, 255, 255, 0.8);
	--rolc-glass-bg: rgba(255, 255, 255, 0.48);
	--rolc-glass-border: rgba(255, 255, 255, 0.56);
	--rolc-panel-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
	--rolc-panel-radius: 16px;
	/* The white glint on every navy fill (banner, active filter, current page). */
	--rolc-button-sheen: radial-gradient(38.57% 51.34% at 85% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
	--rolc-gap: 16px;
	--rolc-gutter: 16px;
	--rolc-panel-pad: 16px;
	--rolc-sidebar-width: 235px;
	--rolc-page-bottom: 120px;
	/* Figma: the first row starts 123px down — the 87px navbar band, then 36px. */
	--rolc-page-top: calc(87px + 36px);
}

/* Barlow everywhere, over Seed Fonts' Poppins rules (which use bare element
   selectors, so `html body` outranks them without !important). */
html body,
html body :is(h1, h2, h3, h4, h5, h6, button, input, label, legend, blockquote) {
	font-family: var(--rolc-font);
}

/* ---------------------------------------------------------------- shell */

/* At least a screen tall (less the 206px footer), so a short page still keeps
   the footer at the bottom of the window. */
.rolc-page {
	box-sizing: border-box;
	min-height: calc(100vh - 206px);
	margin: 0;
	padding: var(--rolc-page-top) 16px var(--rolc-page-bottom);
}

/* The theme's block gap puts 1.2rem above every template part after the
   first; the page and footer meet edge to edge instead. */
.wp-site-blocks > :is(main, .wp-block-template-part) {
	margin-block: 0;
}

/* 235px sidebar + 16px + 989px column = 1240px, 100px in from each side of
   the 1440 canvas. The navbar spans the page less its 16px gutters
   (layout.css), as does this shell's parent, so 100% - 100px keeps the inset
   on laptop widths too. */
.rolc-shell {
	display: grid;
	grid-template-columns: var(--rolc-sidebar-width) minmax(0, 1fr);
	gap: var(--rolc-gutter);
	align-items: start;
	max-width: min(1240px, calc(100% - 100px));
	margin: 0 auto;
}

/* A post: full-width title banner, then the article with "Others" on the right. */
.rolc-shell--single {
	grid-template-columns: minmax(0, 1fr) var(--rolc-sidebar-width);
}

.rolc-shell--single > .rolc-page-head {
	grid-column: 1 / -1;
}

/* Compact navbar below 1024px: the content uses the full width again. */
@media (max-width: 1023px) {
	.rolc-shell {
		max-width: none;
	}
}

/* Block layouts add top margins between children; the shell spaces its own
   with flex/grid gaps. */
.rolc-shell > *,
.rolc-shell :is(.rolc-sidebar, .rolc-main, .rolc-panel, .rolc-side-panel, .rolc-news-item, .rolc-news-body, .rolc-news-text, .rolc-news-list, .rolc-query, .rolc-others, .rolc-other-text, .rolc-article-meta) > *,
.rolc-sidebar > .wp-block-template-part > * {
	margin-block: 0;
}

/* Sticky. A sidebar that fits the window pins below the navbar; a taller one
   pins by its bottom edge instead — it scrolls up with the page until its
   last panel is in view, then holds — so nothing is ever out of reach and
   there is no inner scrollbar. layout.js measures the sidebar and sets
   --rolc-sidebar-top (negative when it is taller than the window); without
   JS it simply pins at the top. */
.rolc-shell > aside.rolc-sidebar {
	position: sticky;
	top: var(--rolc-sidebar-top, calc(var(--wp-admin--admin-bar--height, 0px) + var(--rolc-page-top)));
	display: flex;
	flex-direction: column;
	gap: var(--rolc-gap);
}

/* parts/news-sidebar.html arrives wrapped in its own template-part div */
.rolc-sidebar > .wp-block-template-part {
	display: flex;
	flex-direction: column;
	gap: var(--rolc-gap);
}

.rolc-main {
	display: flex;
	flex-direction: column;
	gap: var(--rolc-gap);
	min-width: 0;
}

/* Solid white panel: the post list, the article, the empty state, the 404. */
.rolc-panel {
	padding: var(--rolc-panel-pad);
	border-radius: var(--rolc-panel-radius);
	background: var(--rolc-panel-bg);
	box-shadow: var(--rolc-panel-shadow);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------- page banner */

/* Navy title bar heading every page: "Latest News & Events", the category or
   search heading, or the post's own title. One line, ellipsised. */
.rolc-page-head {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-width: 0;
	/* Figma 26840:15664: 72px, title centred (21px above a 29px line) */
	min-height: 72px;
	padding: 12px 36px;
	border-radius: var(--rolc-panel-radius);
	box-shadow: var(--rolc-panel-shadow);
}

/* The banner fill, shared by the page banner and the active category row:
   white glint, navy fading out to the right, landscape art (top to bottom). */
.rolc-page-head,
.rolc-cats .current-cat > a {
	background:
		var(--rolc-button-sheen),
		linear-gradient(90deg, var(--rolc-blue) 0%, rgba(18, 49, 117, 0) 100%),
		url("img/page-head-bg.webp") center / cover no-repeat,
		var(--rolc-blue);
}

.rolc-page-head .rolc-page-title {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: #ffffff;
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Back to the list (templates/single.html): a white round button in the
   title banner, before the post title. layout.js points it at the list the
   reader came from. */
.rolc-page-head:has(.rolc-back-link) {
	gap: 16px;
	padding-left: 24px;
}

.rolc-back-link {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.rolc-back-link::before {
	content: "";
	width: 24px;
	height: 24px;
	background: url("img/news-page-prev.svg") no-repeat center / 24px 24px;
	/* the Figma "previous" chevron is the "next" one mirrored */
	transform: scaleX(-1);
}

.rolc-back-link:hover {
	background-color: #ffffff;
	transform: translateX(-2px);
}

.rolc-back-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rolc-back-link:hover {
		transform: none;
	}
}

@media (max-width: 800px) {
	.rolc-page-head:has(.rolc-back-link) {
		gap: 12px;
		padding-left: 16px;
	}

	.rolc-back-link {
		width: 36px;
		height: 36px;
	}
}

/* ------------------------------------------------------------ type bits */

/* Navy section tag with a little tail (404 page). */
.rolc-tag {
	position: relative;
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 4px;
	background: var(--rolc-blue);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
}

.rolc-tag::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 12px;
	border: 5px solid transparent;
	border-top-color: var(--rolc-blue);
	border-bottom: 0;
}

/* Category badges — outlined pills, one colour per category. */
.rolc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.rolc-badges .wp-block-post-terms__separator {
	display: none;
}

.rolc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border: 1px solid currentColor;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
}

.rolc-badge--notices {
	color: #0077cc;
}

.rolc-badge--promotions {
	color: #dd3300;
}

.rolc-badge--events {
	border-color: #118833;
	color: #12752b;
}

.rolc-badge--dev-notes {
	color: #9944ff;
}

.rolc-badge:hover {
	background: rgba(18, 49, 117, 0.06);
}

.rolc-date {
	color: var(--rolc-text-muted);
	font-size: 10px;
	line-height: normal;
}

/* Primary button — $ro-blue fill under the white sheen (404 search). */
.rolc-btn,
.rolc-search .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--rolc-border);
	border-radius: 6px;
	background: var(--rolc-button-sheen), var(--rolc-blue);
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
}

.rolc-btn:hover,
.rolc-search .wp-block-search__button:hover {
	background: var(--rolc-button-sheen), var(--rolc-blue-hover);
	color: #ffffff;
}

.rolc-search .wp-block-search__inside-wrapper {
	display: flex;
	gap: 6px;
	padding: 0;
	border: none;
}

.rolc-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--rolc-border);
	border-radius: 6px;
	background: #ffffff;
	color: var(--rolc-navy);
	font-size: 14px;
}

.rolc-search .wp-block-search__input:focus {
	border-color: var(--rolc-blue);
	outline: none;
}

.rolc-search .wp-block-search__button {
	margin: 0;
	padding: 8px 10px;
}

.rolc-search .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* --------------------------------------------------------------- sidebar */

/* Frosted glass card: Search, Categories, Others News & Events. */
.rolc-side-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--rolc-glass-border);
	border-radius: var(--rolc-panel-radius);
	background: var(--rolc-glass-bg);
	box-shadow: var(--rolc-panel-shadow);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* The Search card is just the field (no title), as tall as the 72px page
   banner beside it, with the field centred — so Categories and the post list
   both start 16px below the top row. */
@media (min-width: 801px) {
	.rolc-side-panel--search {
		box-sizing: border-box;
		justify-content: center;
		min-height: 72px;
	}
}

.rolc-side-title {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--rolc-blue);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
}

.rolc-side-title img {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Search: an outlined field with the glass on the left. Figma's 48% fade is
   for the idle, empty field only — once there is a keyword (typed, or carried
   into a results page) or the field is in use, it is at full strength so the
   keyword reads clearly. */
.rolc-side-search .wp-block-search__inside-wrapper {
	box-sizing: border-box;
	display: flex;
	padding: 8px 8px 8px 26px;
	border: 1px solid var(--rolc-text-muted);
	border-radius: 8px;
	background: #ffffff url("img/news-search-glass.svg") no-repeat 8px center / 14px 14px;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.rolc-side-search .wp-block-search__inside-wrapper:has(.wp-block-search__input:placeholder-shown):not(:focus-within) {
	background-color: transparent;
	opacity: 0.48;
}

.rolc-side-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--rolc-blue);
}

.rolc-side-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rolc-navy);
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
}

.rolc-side-search .wp-block-search__input::placeholder {
	color: var(--rolc-text-muted);
	opacity: 1;
}

.rolc-side-search .wp-block-search__input:focus {
	outline: none;
}

/* Category filter rows (markup from functions.php). */
.rolc-cats {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rolc-cats li {
	margin: 0;
}

.rolc-cats a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 39px;
	padding: 8px 16px;
	border-radius: 8px;
	color: var(--rolc-text-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rolc-cats a:hover {
	background-color: rgba(18, 49, 117, 0.08);
	color: var(--rolc-blue);
}

/* active row: the banner fill (see .rolc-page-head); plain navy on phones */
.rolc-cats .current-cat > a {
	color: #ffffff;
}

/* ------------------------------------------------------------- news list */

.rolc-query {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Every row sits in one white panel. */
.rolc-news-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: var(--rolc-panel-pad);
	border-radius: var(--rolc-panel-radius);
	background: var(--rolc-panel-bg);
	box-shadow: var(--rolc-panel-shadow);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	list-style: none;
}

.rolc-news-list > li {
	margin: 0;
}

/* 420px thumbnail, copy beside it. */
.rolc-news-item {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.rolc-news-item:not(:has(.rolc-news-thumb)) {
	grid-template-columns: minmax(0, 1fr);
}

.rolc-news-thumb,
.rolc-other-thumb {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}

:is(.rolc-news-thumb, .rolc-other-thumb) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.rolc-news-item:hover .rolc-news-thumb img,
.rolc-others-list > li:hover .rolc-other-thumb img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	:is(.rolc-news-thumb, .rolc-other-thumb) img {
		transition: none;
	}
}

.rolc-news-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.rolc-news-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rolc-news-title {
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	text-transform: capitalize;
}

.rolc-news-title a {
	color: var(--rolc-blue);
	text-decoration: none;
}

.rolc-news-title a:hover {
	color: var(--rolc-blue-hover);
}

.rolc-excerpt {
	max-width: 470px;
}

.rolc-excerpt p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	color: var(--rolc-text);
	font-size: 14px;
	line-height: 20px;
}

.rolc-read-more {
	align-self: flex-start;
	color: var(--rolc-blue);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: underline;
	text-underline-position: from-font;
}

.rolc-read-more:hover {
	color: var(--rolc-blue-hover);
}

.rolc-empty p {
	margin: 0;
	color: var(--rolc-text);
}

/* Previous Page · 1 2 3 4 … 36 · Next Page */
.rolc-pagination {
	gap: 16px;
	color: var(--rolc-blue);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
}

.rolc-pagination > * {
	margin: 0;
}

.rolc-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 4px;
}

.rolc-pagination .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 36px;
	padding: 0 4px;
	border-radius: 6px;
	color: var(--rolc-blue);
	text-decoration: none;
}

.rolc-pagination a.page-numbers:hover {
	background: rgba(18, 49, 117, 0.08);
}

.rolc-pagination .page-numbers.dots {
	min-width: 12px;
	padding: 0;
}

.rolc-pagination .page-numbers.current {
	background: var(--rolc-button-sheen), var(--rolc-blue);
	color: #ffffff;
}

.rolc-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	height: 36px;
	color: var(--rolc-blue);
	text-decoration: none;
}

.rolc-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	color: var(--rolc-blue-hover);
}

.rolc-pagination .wp-block-query-pagination-previous::before,
.rolc-pagination .wp-block-query-pagination-next::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background: no-repeat center / 24px 24px;
}

/* The Figma "previous" chevron is the "next" one mirrored. */
.rolc-pagination .wp-block-query-pagination-previous::before {
	background-image: url("img/news-page-prev.svg");
	transform: scaleX(-1);
}

.rolc-pagination .wp-block-query-pagination-next::after {
	background-image: url("img/news-page-next.svg");
}

/* ----------------------------------------------------------- single post */

.rolc-article {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Badge ── rule ── date */
.rolc-article-meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rolc-article-date {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	color: var(--rolc-text-muted);
	font-size: 14px;
	line-height: normal;
	white-space: nowrap;
}

.rolc-article-date::before {
	content: "";
	flex: 1;
	height: 1px;
	background: url("img/news-meta-line.svg") repeat-x left center / auto 1px;
}

.rolc-article-title {
	color: var(--rolc-blue);
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	text-transform: capitalize;
}

.rolc-article .rolc-content {
	color: var(--rolc-text);
	font-size: 14px;
	line-height: 20px;
	overflow-wrap: anywhere;
}

.rolc-content > * {
	margin-block: 0;
}

.rolc-content > * + * {
	margin-block-start: 16px;
}

/* A step heading and its copy read as one unit. */
.rolc-content > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 8px;
}

/* Screenshots get room around them. */
.rolc-content > :is(figure, .wp-block-image) + *,
.rolc-content > * + :is(figure, .wp-block-image) {
	margin-block-start: 36px;
}

.rolc-content :is(h1, h2, h3, h4, h5, h6) {
	color: var(--rolc-blue);
	line-height: normal;
}

.rolc-content :is(h1, h2) {
	font-size: 24px;
	font-weight: 700;
	text-transform: capitalize;
}

.rolc-content :is(h3, h4, h5, h6) {
	font-size: 16px;
	font-weight: 600;
}

.rolc-content a {
	color: var(--rolc-link);
}

.rolc-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.rolc-content figure {
	margin-inline: 0;
}

.rolc-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.rolc-content :is(th, td) {
	padding: 8px 12px;
	border: 1px solid var(--rolc-row-border);
	text-align: left;
}

.rolc-content th {
	background: var(--rolc-row);
	color: var(--rolc-blue);
}

.rolc-content :is(ul, ol) {
	padding-left: 1.4em;
}

/* Others News & Events: thumbnail, one-line title, two-line excerpt. */
.rolc-others-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rolc-others-list > li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.rolc-others-list > li > * {
	margin-block: 0;
}

.rolc-other-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rolc-other-title {
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rolc-other-title a {
	color: var(--rolc-blue);
	text-decoration: none;
}

.rolc-other-title a:hover {
	color: var(--rolc-blue-hover);
}

.rolc-other-excerpt p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--rolc-text);
	font-size: 14px;
	line-height: 20px;
}

/* ------------------------------------------------------------------ 404 */

/* One centred card in the space between navbar and footer. */
.rolc-page--center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rolc-404 {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 900px;
	padding: 40px 32px 32px;
	text-align: center;
}

.rolc-404 > * {
	margin-block: 0;
}

.rolc-404 .rolc-tag {
	align-self: center;
}

.rolc-404 .rolc-tag::after {
	left: 50%;
	transform: translateX(-50%);
}

.rolc-404-art {
	margin-bottom: 4px;
	filter: drop-shadow(0 8px 12px rgba(231, 97, 150, 0.35));
	animation: rolc-poring-hop 2.4s ease-in-out infinite;
}

.rolc-404-art img {
	display: block;
	height: auto;
}

@keyframes rolc-poring-hop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	.rolc-404-art {
		animation: none;
	}
}

.rolc-404-title {
	color: var(--rolc-blue);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

.rolc-404-lead {
	max-width: 420px;
	color: var(--rolc-text);
	font-size: 15px;
	line-height: 1.6;
}

.rolc-404-search {
	width: 100%;
	max-width: 400px;
	margin-top: 8px !important;
}

.rolc-404-actions {
	gap: 8px;
	margin-top: 4px !important;
}

/* Main-site buttons on core button blocks: primary (.btn-cta) and ghost
   (.btn-cta-ghost). */
:is(.rolc-button-primary, .rolc-button-ghost) .wp-block-button__link {
	padding: 8px 16px;
	border-radius: 6px;
	font-family: var(--rolc-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

.rolc-button-primary .wp-block-button__link {
	border: 1px solid var(--rolc-border);
	background: var(--rolc-button-sheen), var(--rolc-blue);
	color: #ffffff;
}

.rolc-button-primary .wp-block-button__link:hover {
	background: var(--rolc-button-sheen), var(--rolc-blue-hover);
	color: #ffffff;
}

.rolc-button-ghost .wp-block-button__link {
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 8px 24px 0 rgba(0, 0, 0, 0.12);
	color: var(--rolc-blue);
}

.rolc-button-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.8);
	color: var(--rolc-blue-hover);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1023px) {
	:root {
		/* compact navbar below 1024px (layout.css): 12px top padding + 69px pill */
		--rolc-page-top: calc(81px + 24px);
		--rolc-page-bottom: 88px;
	}

	.rolc-news-item {
		grid-template-columns: 280px minmax(0, 1fr);
	}

	.rolc-news-title {
		font-size: 20px;
	}
}

@media (max-width: 800px) {
	:root {
		--rolc-page-top: calc(81px + 16px);
		--rolc-page-bottom: 56px;
	}

	.rolc-shell,
	.rolc-shell--single {
		grid-template-columns: minmax(0, 1fr);
	}

	/* stacked: an ordinary block again */
	.rolc-shell > aside.rolc-sidebar {
		position: static;
	}

	/* Lists: search and filters stay above the posts. A post: banner, article,
	   then "Others News & Events" below it. */
	.rolc-page-head {
		min-height: 72px;
		padding: 16px 20px;
	}

	.rolc-page-head .rolc-page-title {
		font-size: 20px;
		white-space: normal;
	}

	.rolc-cats {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.rolc-cats a {
		min-height: 0;
		padding: 6px 12px;
		border-radius: 9999px;
	}

	/* phone pills keep the plain navy fill — the banner art is lost at pill size */
	.rolc-cats .current-cat > a {
		background: var(--rolc-button-sheen), var(--rolc-blue);
	}

	.rolc-news-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.rolc-news-list {
		gap: 24px;
	}

	.rolc-excerpt {
		max-width: none;
	}

	.rolc-pagination {
		flex-wrap: wrap;
		gap: 8px;
	}

	.rolc-article-title,
	.rolc-content :is(h1, h2) {
		font-size: 20px;
	}

	.rolc-404 {
		padding: 32px var(--rolc-panel-pad) var(--rolc-panel-pad);
	}

	.rolc-404-title {
		font-size: 26px;
	}

	.rolc-content table {
		display: block;
		overflow-x: auto;
	}
}