/* ==========================================================================
   AMARTANGAIL.COM — components
   Each block styles one template part. Mobile first; the header switches
   from an off-canvas menu to an inline one at 1280px.

   1. Icons and icon buttons     7. Breadcrumb
   2. Utility bar                8. Section header
   3. Header and navigation      9. Cards
   4. Search                    10. Pills, stat, empty state, pagination
   5. Social links              11. Entry (single view)
   6. Footer                    12. Section filters
                                13. Forms and their messages
                                14. Language switcher
                                15. Search: results and suggestions

   ========================================================================== */

/* 1. Icons and icon buttons ----------------------------------------------- */
.at-icon {
	flex: none;
	vertical-align: -0.2em;
}

.at-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--at-control-height);
	height: var(--at-control-height);
	padding: 0;
	border: 0;
	border-radius: var(--at-radius-button);
	background: none;
	color: var(--at-green-deep);
	cursor: pointer;
}

.at-icon-button:hover {
	background: var(--at-bg);
	color: var(--at-green);
}

/* 2. Utility bar: wide screens only --------------------------------------- */
.at-utility {
	display: none;
	font-size: var(--at-text-sm);
}

.at-utility__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--at-space-5);
	min-height: 40px;
}

/* The utility links sit at the start of the bar; icons and languages stay at the end. */
.at-utility__nav {
	margin-inline-end: auto;
}

.at-utility__menu {
	display: flex;
	gap: var(--at-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-utility__menu a {
	text-decoration: none;
}

.at-utility__menu a:hover {
	text-decoration: underline;
}

@media (min-width: 1280px) {
	.at-utility {
		display: block;
	}
}

/* 3. Header and navigation ------------------------------------------------ */
.at-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid var(--at-border);
	background: var(--at-white);
}

.at-header__inner {
	display: flex;
	align-items: center;
	gap: var(--at-space-3);
	min-height: 72px;
	padding-block: var(--at-space-2);
}

.at-header__actions {
	display: flex;
	gap: var(--at-space-1);
	margin-inline-start: auto;
}

/* Without JavaScript the buttons cannot work, so they are not shown and the
   navigation and search form below stay visible instead. */
html:not(.js) .at-header__actions,
html:not(.js) .at-nav__toggle,
html:not(.js) .at-nav__head {
	display: none;
}

html:not(.js) .at-header__inner {
	flex-wrap: wrap;
}

html:not(.js) .at-nav {
	flex-basis: 100%;
}

.at-nav__list,
.at-nav__sub,
.at-nav__utility {
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.at-nav__link,
.at-nav__sublink,
.at-nav__utility a {
	display: block;
	padding: 12px;
	border-radius: var(--at-radius-button);
	color: var(--at-green-deep);
	text-decoration: none;
}

.at-nav__link {
	flex: 1;
	font-weight: 600;
}

.at-nav__link:hover,
.at-nav__sublink:hover,
.at-nav__utility a:hover {
	background: var(--at-bg);
	color: var(--at-green);
}

/* The current section is not marked in the menu (owner's choice, 9 October); screen readers still hear it through aria-current. */

.at-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--at-control-height);
	height: var(--at-control-height);
	padding: 0;
	border: 0;
	border-radius: var(--at-radius-button);
	background: none;
	color: var(--at-green-deep);
	cursor: pointer;
}

.at-nav__toggle .at-icon {
	transition: transform 0.15s ease;
}

.at-nav__toggle[aria-expanded="true"] .at-icon {
	transform: rotate(180deg);
}

.at-nav__sub {
	flex-basis: 100%;
	padding-inline-start: var(--at-space-4);
}

/* With JavaScript, a submenu is closed until its button opens it. */
.js .at-nav__sub {
	display: none;
}

.js .at-nav__item.is-open > .at-nav__sub {
	display: block;
}

.at-nav__head,
.at-nav__extra {
	display: none;
}

/* Narrow screens with JavaScript: the navigation is an off-canvas panel. */
@media (max-width: 1279.98px) {
	.js .at-nav {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		z-index: 40;
		display: flex;
		flex-direction: column;
		width: min(86vw, 360px);
		padding: var(--at-space-3) var(--at-space-4) var(--at-space-6);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--at-white);
		box-shadow: -8px 0 32px rgba(0, 56, 50, 0.18);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.js .at-nav.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.2s ease;
	}

	.js .at-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--at-space-2);
		padding-bottom: var(--at-space-2);
		border-bottom: 1px solid var(--at-border);
	}

	.at-nav__heading {
		color: var(--at-green-deep);
		font-size: var(--at-text-lg);
		font-weight: 700;
	}

	.js .at-nav__extra {
		display: block;
		margin-top: var(--at-space-5);
		padding-top: var(--at-space-4);
		border-top: 1px solid var(--at-border);
	}

	.at-nav__extra .at-social {
		margin-top: var(--at-space-4);
		padding-inline: var(--at-space-3);
	}

	.at-nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 30;
		background: rgba(0, 56, 50, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	.at-nav-backdrop.is-visible {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.2s ease;
	}

	/* The page behind an open panel must not scroll. */
	.at-nav-open {
		overflow: hidden;
	}

	/* The panel lives inside the header, whose layer sits under the backdrop's:
	   while the menu is open the header is lifted above it, or the backdrop
	   would cover the panel and take every tap. */
	.at-nav-open .at-header {
		z-index: 50;
	}
}

/* Wide screens: an inline bar with drop-down panels. */
@media (min-width: 1280px) {
	.at-header__menu-button {
		display: none;
	}

	.at-nav {
		margin-inline-start: auto;
	}

	.at-header__actions {
		margin-inline-start: 0;
	}

	.at-nav__list {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.at-nav__item {
		position: relative;
		flex-wrap: nowrap;
	}

	.at-nav__link {
		padding: 10px 12px;
		white-space: nowrap;
	}

	.at-nav__item.has-children > .at-nav__link {
		padding-inline-end: 2px;
	}

	.at-nav__toggle {
		width: 28px;
	}

	.at-nav__sub {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: 25;
		min-width: 220px;
		padding: var(--at-space-2);
		border: 1px solid var(--at-border);
		border-radius: var(--at-radius-card);
		background: var(--at-white);
		box-shadow: var(--at-shadow-card);
	}

	/* A long submenu becomes a two-column "mega" panel. */
	.at-nav__sub--wide {
		min-width: 440px;
		columns: 2;
	}

	.at-nav__sub li {
		break-inside: avoid;
	}

	.at-nav__sublink {
		padding: 9px 12px;
		white-space: nowrap;
	}

	/* The last panels open towards the left so they stay on screen. */
	.at-nav__item:nth-last-child(-n + 2) > .at-nav__sub {
		inset-inline: auto 0;
	}

	/* A mouse opens a panel by hovering; keyboard and touch use the button. */
	.js .at-nav__item.has-children:hover > .at-nav__sub,
	html:not(.js) .at-nav__item:hover > .at-nav__sub,
	html:not(.js) .at-nav__item:focus-within > .at-nav__sub {
		display: block;
	}

	html:not(.js) .at-nav__sub {
		display: none;
	}
}

/* 4. Search ---------------------------------------------------------------- */
.at-search-panel {
	padding-block: var(--at-space-4);
	border-top: 1px solid var(--at-border);
	background: var(--at-bg);
}

.js .at-search-panel:not(.is-open) {
	display: none;
}

.at-search {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--at-muted);
	border-radius: var(--at-radius-pill);
	background: var(--at-white);
}

.at-search:focus-within {
	outline: 3px solid var(--at-focus);
	outline-offset: 2px;
}

.at-search__icon {
	display: inline-flex;
	padding-inline-start: var(--at-space-4);
	color: var(--at-muted);
}

.at-search .at-search__input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding-inline: var(--at-space-3);
	border: 0;
	border-radius: var(--at-radius-pill);
	background: transparent;
	color: var(--at-text);
}

/* The outline is drawn on the whole form instead. */
.at-search .at-search__input:focus {
	outline: none;
}

.at-search__input::placeholder {
	color: var(--at-text-muted);
	opacity: 1;
}

.at-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 44px;
	margin-inline-end: 4px;
	border: 0;
	border-radius: var(--at-radius-pill);
	background: var(--at-green);
	color: var(--at-white);
	cursor: pointer;
}

.at-search__submit:hover {
	background: var(--at-green-deep);
}

.at-search-page__form {
	max-width: var(--at-width-reading);
	margin-block: var(--at-space-5);
}

/* 5. Social links ---------------------------------------------------------- */
.at-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--at-green-deep);
}

.at-social__link:hover {
	background: var(--at-green-deep);
	border-color: var(--at-green-deep);
	color: var(--at-white);
}

.at-surface--deep .at-social__link {
	border-color: var(--at-gold);
	color: var(--at-gold);
}

.at-surface--deep .at-social__link:hover {
	background: var(--at-gold);
	color: var(--at-green-deep);
}

.at-utility .at-social__link {
	width: 28px;
	height: 28px;
}

/* A light rule between the social icons and the language choice. */
.at-utility .at-social + .at-lang {
	padding-inline-start: var(--at-space-5);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
}

/* Account links: in the utility bar on wide screens, in the menu on phones. */
.at-account__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-4);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-account__link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	text-decoration: none;
}

.at-account__link:hover {
	text-decoration: underline;
}

.at-utility .at-account + .at-lang,
.at-utility .at-social + .at-account {
	padding-inline-start: var(--at-space-5);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
}

.at-account--nav {
	margin-top: var(--at-space-4);
}

/* 6. Footer ---------------------------------------------------------------- */
.at-footer {
	margin-top: var(--at-section-space);
}

.at-footer__main {
	display: grid;
	gap: var(--at-space-7) var(--at-space-6);
	padding-block: var(--at-space-8) var(--at-space-7);
}

@media (min-width: 600px) {
	.at-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.at-footer__about {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.at-footer__main {
		grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	}

	.at-footer__about {
		grid-column: auto;
	}
}

/* The official logo is not recoloured; on the dark footer it sits on a
   light panel so its lettering stays legible. */
.at-brand--on-dark {
	color: var(--at-white);
}

.at-brand--on-dark:hover {
	color: var(--at-gold);
}

.at-brand--on-dark .at-brand__logo {
	padding: 4px;
	border-radius: var(--at-radius-card);
	background: var(--at-white);
}

.at-brand--on-dark .at-brand__subtitle {
	color: var(--at-on-deep-muted);
}

.at-footer__tagline {
	max-width: 36ch;
	margin: var(--at-space-4) 0;
	color: var(--at-on-deep-muted);
}

.at-footer__heading {
	margin-bottom: var(--at-space-3);
	font-size: var(--at-text-base);
}

.at-footer__menu,
.at-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-footer__menu a,
.at-footer__legal a {
	display: inline-block;
	padding-block: 6px;
	color: var(--at-on-deep-muted);
	text-decoration: none;
}

.at-footer__menu a:hover,
.at-footer__legal a:hover {
	color: var(--at-white);
	text-decoration: underline;
}

.at-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: var(--at-text-sm);
}

.at-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space-2) var(--at-space-5);
	padding-block: var(--at-space-4);
}

.at-footer__copy {
	margin: 0;
	color: var(--at-on-deep-muted);
}

.at-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--at-space-4);
}

/* One line on wide screens: the copyright at the start, the policy links
   at the end (TD-164). */
@media (min-width: 1280px) {
	.at-footer__bar-inner {
		flex-wrap: nowrap;
	}

	.at-footer__copy {
		flex: none;
		white-space: nowrap;
	}

	.at-footer__legal {
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 0 var(--at-space-3);
		white-space: nowrap;
	}
}

/* 7. Breadcrumb ------------------------------------------------------------ */
.at-breadcrumb {
	margin-bottom: var(--at-space-5);
	font-size: var(--at-text-sm);
}

.at-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-1) 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-breadcrumb__item + .at-breadcrumb__item::before {
	content: "›";
	margin-inline: var(--at-space-2);
	color: var(--at-muted);
}

.at-breadcrumb__item [aria-current] {
	color: var(--at-text-muted);
}

/* 8. Section header -------------------------------------------------------- */
.at-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--at-space-2) var(--at-space-5);
	margin-bottom: var(--at-space-5);
}

.at-section-header__title {
	margin: 0;
	font-size: var(--at-text-2xl);
}

.at-section-header__lede {
	margin: var(--at-space-1) 0 0;
	color: var(--at-text-muted);
}

.at-section-header__link {
	display: inline-flex;
	align-items: center;
	gap: var(--at-space-1);
	font-weight: 600;
	text-decoration: none;
}

.at-section-header__link:hover {
	text-decoration: underline;
}

/* 9. Cards ----------------------------------------------------------------- */
.at-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-card);
	background: var(--at-white);
	box-shadow: var(--at-shadow-card);
}

.at-card:hover {
	border-color: var(--at-green);
}

/* The whole card is one link target, while the link text stays the title. */
.at-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.at-card:focus-within {
	outline: 3px solid var(--at-focus);
	outline-offset: 2px;
}

.at-card__link:focus-visible {
	outline: none;
}

.at-card__media {
	aspect-ratio: 3 / 2;
	background: var(--at-bg);
}

.at-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--at-muted);
}

.at-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--at-space-1);
	padding: var(--at-space-4);
}

.at-card__type {
	margin: 0;
	color: var(--at-gold-ink);
	font-size: var(--at-text-xs);
	font-weight: 600;
}

.at-card__title {
	margin: 0;
	font-size: var(--at-text-lg);
}

.at-card__link {
	color: inherit;
	text-decoration: none;
}

.at-card:hover .at-card__link {
	color: var(--at-green);
}

.at-card__meta,
.at-card__excerpt {
	margin: 0;
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

.at-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* People: a round portrait above a centred name. */
.at-card--person {
	align-items: center;
	padding-top: var(--at-space-5);
	text-align: center;
}

.at-card--person .at-card__media {
	width: 112px;
	height: 112px;
	overflow: hidden;
	border-radius: 50%;
	aspect-ratio: 1;
}

.at-card--person .at-card__body {
	align-items: center;
}

/* 10. Pills, stat, empty state, pagination --------------------------------- */
.at-pills__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-pill {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 4px 16px;
	border: 1px solid var(--at-muted);
	border-radius: var(--at-radius-pill);
	background: var(--at-white);
	color: var(--at-green-deep);
	font-size: var(--at-text-sm);
	text-decoration: none;
}

.at-pill:hover {
	border-color: var(--at-green);
	color: var(--at-green);
}

.at-pill[aria-current="true"] {
	border-color: var(--at-green-deep);
	background: var(--at-green-deep);
	color: var(--at-white);
}

.at-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--at-space-1);
	text-align: center;
}

.at-stat__icon {
	color: var(--at-green);
}

.at-stat__label {
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

.at-stat__value {
	color: var(--at-green-deep);
	font-size: var(--at-text-2xl);
	font-weight: 700;
	line-height: 1.2;
}

.at-empty-state {
	max-width: var(--at-width-reading);
	padding: var(--at-space-6);
	border: 1px dashed var(--at-muted);
	border-radius: var(--at-radius-card);
	background: var(--at-white);
}

.at-empty-state__title {
	margin: 0 0 var(--at-space-2);
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
	font-weight: 600;
}

.at-empty-state__text {
	color: var(--at-text-muted);
}

.at-empty-state > :last-child {
	margin-bottom: 0;
}

.at-pagination {
	margin-top: var(--at-space-7);
}

.at-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
}

.at-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--at-control-height);
	min-height: var(--at-control-height);
	padding-inline: var(--at-space-3);
	border: 1px solid var(--at-muted);
	border-radius: var(--at-radius-button);
	background: var(--at-white);
	color: var(--at-green-deep);
	text-decoration: none;
}

.at-pagination a.page-numbers:hover {
	border-color: var(--at-green);
	color: var(--at-green);
}

.at-pagination .page-numbers.current {
	border-color: var(--at-green-deep);
	background: var(--at-green-deep);
	color: var(--at-white);
}

.at-pagination .page-numbers.dots {
	border: 0;
	background: none;
}

/* 11. Entry (single view) -------------------------------------------------- */
.at-entry__type {
	margin: 0 0 var(--at-space-1);
	color: var(--at-gold-ink);
	font-size: var(--at-text-sm);
	font-weight: 600;
}

.at-entry__figure {
	max-width: var(--at-width-reading);
	margin: 0 0 var(--at-space-5);
}

.at-entry__figure img {
	display: block;
	border-radius: var(--at-radius-card-lg);
}

.at-404__home {
	margin-top: var(--at-space-5);
}

/* 12. Section filters ------------------------------------------------------- */
.at-filters {
	display: grid;
	gap: var(--at-space-4);
	margin-block: var(--at-space-5) var(--at-space-6);
}

.at-filters__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--at-space-2) var(--at-space-3);
}

.at-filters__form label {
	margin: 0;
}

.at-filters__form select {
	width: auto;
	min-width: 200px;
	max-width: 100%;
}

.at-filters__reset {
	margin: 0;
	font-size: var(--at-text-sm);
}

/* 13. Forms and their messages ---------------------------------------------- */
.at-form-intro {
	margin-bottom: var(--at-space-6);
}

.at-form__group {
	margin: 0 0 var(--at-space-6);
	padding: var(--at-space-5);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-card);
	background: var(--at-white);
}

.at-form__group legend {
	padding-inline: var(--at-space-2);
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
	font-weight: 700;
}

.at-form__field {
	margin: 0 0 var(--at-space-5);
}

.at-form__field:last-child,
.at-form__check:last-child {
	margin-bottom: 0;
}

.at-form__field label {
	display: block;
}

.at-form__hint,
.at-form__help {
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

.at-form__help,
.at-form__error {
	display: block;
	margin-top: var(--at-space-1);
}

/* An error is said in words, marked with a symbol and a border: never by colour alone. */
.at-form__error {
	color: var(--at-error);
	font-size: var(--at-text-sm);
	font-weight: 600;
}

.at-form__error::before {
	content: "! ";
}

.at-form [aria-invalid="true"] {
	border: 2px solid var(--at-error);
}

.at-form input[type="file"] {
	display: block;
	width: 100%;
	padding: var(--at-space-3);
	border: 1px dashed var(--at-muted);
	border-radius: var(--at-radius-button);
	background: var(--at-bg);
}

.at-form__check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--at-space-1) var(--at-space-3);
	margin: 0 0 var(--at-space-4);
}

.at-form__check input {
	width: 22px;
	height: 22px;
	margin: 4px 0 0;
}

.at-form__check label {
	margin: 0;
	font-weight: 400;
}

.at-form__check .at-form__error {
	grid-column: 2;
}

/* Hidden from people; left in the page for programs that fill in everything. */
.at-form__trap {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.at-form-message {
	margin-bottom: var(--at-space-6);
	padding: var(--at-space-5);
	border: 1px solid var(--at-border);
	border-inline-start: 6px solid var(--at-green);
	border-radius: var(--at-radius-card);
	background: var(--at-white);
}

.at-form-message--error {
	border-inline-start-color: var(--at-error);
}

.at-form-message__title {
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
	font-weight: 700;
}

.at-form-message ul {
	margin: 0 0 var(--at-space-3);
	padding-inline-start: 1.3em;
}

.at-form-message__note {
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

.at-form-message > :last-child {
	margin-bottom: 0;
}

/* 14. Language switcher ----------------------------------------------------- */
.at-lang__list {
	display: flex;
	gap: var(--at-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-lang__link {
	display: block;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: var(--at-radius-button);
	text-decoration: none;
}

.at-lang__link:hover,
.at-lang__link[aria-current="true"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* The language you are reading looks like a hovered link: underlined, not boxed. */
.at-lang__link[aria-current="true"] {
	color: var(--at-link-hover);
}

.at-nav .at-lang {
	margin-top: var(--at-space-3);
	padding: var(--at-space-3) 12px 0;
	border-top: 1px solid var(--at-border);
}

@media (min-width: 1024px) {
	/* On wide screens the switcher is in the utility bar instead. */
	.at-nav .at-lang {
		display: none;
	}
}

/* 15. Search: results and suggestions ---------------------------------------- */
.at-results__filter {
	margin: var(--at-space-4) 0;
}

.at-pill__count {
	margin-inline-start: 6px;
	font-weight: 400;
	opacity: 0.8;
}

.at-results {
	max-width: 760px;
	margin: var(--at-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.at-result {
	padding: var(--at-space-4) 0;
	border-bottom: 1px solid var(--at-border);
}

.at-result__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2) var(--at-space-3);
	align-items: center;
	margin: 0 0 var(--at-space-1);
	font-size: var(--at-text-sm);
	color: var(--at-text-muted);
}

.at-result__place {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.at-result__title {
	margin: 0;
	font-size: var(--at-text-lg);
}

.at-result__snippet {
	margin: var(--at-space-2) 0 0;
	color: var(--at-text);
}

/* A marked word keeps the text colour: the mark is a background and a weight, not a colour change alone. */
.at-result mark {
	padding: 0 2px;
	background: var(--at-highlight, #fff3bf);
	color: inherit;
	font-weight: 700;
}

.at-search {
	position: relative;
}

.at-suggest {
	position: absolute;
	z-index: 20;
	top: 100%;
	right: 0;
	left: 0;
	margin-top: 4px;
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-card);
	background: var(--at-surface, #fff);
	box-shadow: var(--at-shadow-md, 0 8px 24px rgb(0 0 0 / 12%));
	color: var(--at-text);
	text-align: start;
}

.at-suggest__list {
	margin: 0;
	padding: 4px;
	list-style: none;
}

.at-suggest__link {
	display: flex;
	gap: var(--at-space-3);
	align-items: baseline;
	justify-content: space-between;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--at-radius-button);
	color: var(--at-text);
	text-decoration: none;
}

.at-suggest__link:hover,
.at-suggest__link:focus-visible {
	background: var(--at-surface-alt, #f3f5f4);
	text-decoration: underline;
}

.at-suggest__type {
	flex: none;
	font-size: var(--at-text-sm);
	color: var(--at-text-muted);
}

.at-results__place {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2) var(--at-space-3);
	align-items: center;
	margin: var(--at-space-4) 0 0;
}

.at-results__place label {
	font-weight: 600;
}

/* News row: a small picture beside a headline and a date. Used on the homepage and on place pages. */
.at-news-row {
	position: relative;
	display: flex;
	gap: var(--at-space-3);
}

.at-news-row:focus-within {
	outline: 3px solid var(--at-focus);
	outline-offset: 4px;
	border-radius: var(--at-radius-button);
}

.at-news-row__media {
	flex: none;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: var(--at-radius-button);
	background: var(--at-white);
}

.at-news-row__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-news-row__title {
	margin: 0;
	font-size: var(--at-text-base);
	line-height: 1.4;
}

.at-news-row__meta {
	margin: var(--at-space-1) 0 0;
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

.at-news-row:hover .at-card__link {
	color: var(--at-green);
}

/* Map: outlines of the district's upazilas or of an upazila's unions. Used on the homepage and on place pages. */
.at-map {
	margin: 0;
}

.at-map__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80vh;
	overflow: visible;
}

/*
 * Twelve soft fills, so that neighbours can be told apart. Colour is never
 * the only sign: every shape has its name or its number on it, a white line
 * around it, and the same place in a list beside the map.
 */
.at-map__shape {
	fill: #D5E8C8;
	stroke: var(--at-white);
	stroke-width: 1.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.at-map__shape--1 { fill: #F6E7B0; }
.at-map__shape--2 { fill: #CFE2F3; }
.at-map__shape--3 { fill: #F5D3CC; }
.at-map__shape--4 { fill: #DCD3EF; }
.at-map__shape--5 { fill: #C6E8DE; }
.at-map__shape--6 { fill: #F8DDB8; }
.at-map__shape--7 { fill: #D9E6B5; }
.at-map__shape--8 { fill: #EBD3E3; }
.at-map__shape--9 { fill: #BFDDEA; }
.at-map__shape--10 { fill: #F1E6C8; }
.at-map__shape--11 { fill: #CBEBD0; }

/* On an upazila's own page: this one stands out, the others step back. */
.at-map__shape.is-muted {
	fill: #D3DDD7;
}

.at-map__shape.is-current {
	fill: var(--at-green);
}

.at-map__link:hover .at-map__shape,
.at-map__link:focus .at-map__shape {
	fill: var(--at-gold);
}

.at-map__link:focus {
	outline: none;
}

/* The keyboard's position: a dark line three times as thick, drawn on the shape itself. */
.at-map__link:focus-visible .at-map__shape {
	stroke: var(--at-focus);
	stroke-width: 4;
}

.at-map__label {
	fill: var(--at-text);
	font-size: 15px;
	font-weight: 600;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
	/* A light halo keeps a name readable where it crosses a border. */
	paint-order: stroke;
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 3px;
	stroke-linejoin: round;
}

.at-map--numbers .at-map__label {
	font-size: 26px;
	font-weight: 700;
	stroke-width: 5px;
}

.at-map__legend {
	margin: var(--at-space-4) 0 0;
	padding-left: 2em;
	columns: 2;
	column-gap: var(--at-space-5);
	font-size: var(--at-text-sm);
}

/* The numbers of the list are written like the numbers on the map. */
html[lang^="bn"] .at-map__legend {
	list-style-type: bengali;
}

.at-map__legend li {
	padding-block: 3px;
	break-inside: avoid;
}

.at-map__unplaced {
	margin: var(--at-space-3) 0 0;
	font-size: var(--at-text-sm);
}

.at-map__credit {
	margin-top: var(--at-space-2);
	color: var(--at-text-muted);
	font-size: var(--at-text-xs);
	line-height: 1.5;
}

/* The credit is one small link until opened. */
.at-map__source summary {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 24px;
	cursor: pointer;
	list-style: none;
	text-decoration: underline;
	text-decoration-color: rgba(0, 0, 0, 0.25);
	text-underline-offset: 3px;
}

.at-map__source summary::-webkit-details-marker {
	display: none;
}

.at-map__source summary::before {
	content: "i";
	display: inline-grid;
	place-items: center;
	width: 14px;
	height: 14px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 10px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.at-map__source summary:hover {
	color: var(--at-heading);
}

.at-map__source p {
	margin: var(--at-space-1) 0 0;
}

/* Section page: one sentence under the title. */
.at-archive__lede {
	max-width: 62ch;
	margin: calc(var(--at-space-3) * -1) 0 var(--at-space-5);
	color: var(--at-text-muted);
	font-size: var(--at-text-lg);
}