/*
Theme Name: ELE
Description: The look of elet.gr, the Hellenic Range & Pasture Society. A child of Twenty Twenty-Five: colours, type and the templates for news and publications. The content model lives in the elet-core plugin.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: elet
*/

/* Colours, fonts and sizes are in theme.json. What is here is what
   theme.json cannot say: the header bar, cards, and the publication details. */

/* --------------------------------------------------------------- focus */

/* Twenty Twenty-Five outlines whatever has focus, so a tap or a click left a
   box round what was touched: the first item of the phone menu, which
   WordPress focuses when the menu opens, and any button pressed. The outline
   stays for the keyboard, where it shows where you are. Its rule comes after
   this file, hence the class rather than :where(). */
.wp-site-blocks :focus:not(:focus-visible) {
	outline: none;
}

/* -------------------------------------------------------------- header */

.elet-header {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.elet-header .wp-block-site-logo img {
	width: 66px;
	height: auto;
}

.elet-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	white-space: nowrap; /* "Γίνετε μέλος" is one label, not two lines */
}

/* The old site's menu: uppercase, spaced, grey that darkens on hover (in
   theme.json), and dropdowns as plain white boxes with hairline borders and
   one rule between items, a little smaller than the menu itself. */
.elet-header .wp-block-navigation .wp-block-navigation__submenu-container {
	padding: 0;
	border: 1px solid #ebebeb;
	border-radius: 0;
	background: #fff;
	box-shadow: 0 6px 16px rgb(0 0 0 / 6%);
}

/* Wide enough for the old menu's long topic names. Set on the open states
   only — WordPress's rule for an open dropdown outranks a plain one, and a
   width on a closed one could widen the page. */
.elet-header .wp-block-navigation .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container,
.elet-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: 18rem;
}

.elet-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 1px solid #ebebeb;
}

.elet-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.elet-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.7rem 1rem;
	font-size: 0.71875rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	white-space: normal;
}

.elet-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: #f1f1f1;
}

/* The phone menu: the same items as plain lists, set left, each level a step
   in, with room to tap — the desktop dropdown boxes don't belong there. */
.elet-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 3.5rem;
}

.elet-header .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation-item, .wp-block-navigation__submenu-container) {
	align-items: flex-start !important;
	text-align: left;
}

.elet-header .is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	padding: 0 0 0 1.1rem !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.elet-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.elet-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: none;
}

.elet-header .is-menu-open .wp-block-navigation-item__content {
	padding: 0.45rem 0 !important;
	font-size: 0.8125rem;
}

/* The current page's item, quietly marked as the old menu marked it. */
.elet-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: #111;
}

/* EL and EN side by side: Polylang's block takes the full width and lets its
   list wrap, so in a crowded header it shrank to one code's width and put EN
   under EL. It keeps its own width now, and the menu gives way instead. */
.elet-lang-switcher {
	flex: none;
	width: auto;
}

.elet-lang-switcher ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.elet-lang-switcher a {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
}

.elet-lang-switcher .current-lang a {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
}

/* Between a phone and a wide screen the name, the menu and the language codes
   do not all fit in one row. The logo keeps its size however crowded the row
   gets; under 1100px the menu's items close up; and under 1000px (a tablet
   held upright) the menu is the phone one, behind its button, as WordPress
   makes it only under 600px. */
.elet-header .wp-block-site-logo,
.elet-footer .wp-block-site-logo {
	flex: none;
}

/* On a phone the logo, the name, the menu button and EL EN share 375px: the
   logo and the name a step smaller, so the name takes two lines, not three,
   and keeps clear of the button. */
@media (max-width: 600px) {
	.elet-header .wp-block-site-logo img {
		width: 50px;
	}

	.elet-header .wp-block-site-title {
		font-size: 0.9375rem;
	}

	.elet-header .wp-block-navigation {
		margin-left: 0.5rem;
	}
}

@media (max-width: 1100px) {
	.elet-header .wp-block-navigation__container {
		gap: 1rem !important;
	}
}

@media (min-width: 600px) and (max-width: 999px) {
	.elet-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.elet-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* -------------------------------------------------------------- cards */

/* A card's title: at most four lines, the rest behind an ellipsis; the full
   title is on the article. */
.elet-cards .wp-block-post-title > a {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.elet-cards .wp-block-post {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 10px;
	overflow: hidden;
}

.elet-cards .wp-block-post > .wp-block-group {
	flex: 1;
}

.elet-cards .wp-block-post-featured-image {
	margin: 0;
}

.elet-cards .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

/* A card whose post has no picture gets a band of the brand colour instead. */
.elet-cards .wp-block-post:not(:has(.wp-block-post-featured-image img))::before {
	content: "";
	display: block;
	height: 6px;
	background: var(--wp--preset--color--accent-1);
}

/* ------------------------------------------------------- publications */

.elet-paper-list .wp-block-post {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.elet-paper-list .wp-block-post:first-child {
	padding-top: 0;
}

/* A paper's congress may wrap: some names are longer than a phone is wide. */
.elet-paper-list .wp-block-post-terms a {
	white-space: normal;
}

.elet-authors {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}

.elet-congress-list ul,
ul.elet-congress-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elet-congress-list li {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
}

.elet-congress-list li a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.elet-congress-list li a:hover {
	color: var(--wp--preset--color--accent-1);
}

.elet-congress-list li.current-cat a {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
}

.elet-publication-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.6rem 1.5rem;
	margin: 2rem 0;
	padding: 1.5rem;
	background: var(--wp--preset--color--accent-5);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--medium);
}

.elet-publication-details dt {
	font-weight: 600;
	color: var(--wp--preset--color--accent-4);
}

.elet-publication-details dd {
	margin: 0;
}

.elet-pdf-size {
	font-weight: 400;
	opacity: 0.8;
	margin-left: 0.4rem;
	font-size: 0.875em;
}

@media (max-width: 600px) {
	.elet-publication-details {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.elet-publication-details dd {
		margin-bottom: 0.6rem;
	}
}

/* ---------------------------------------------------- imported content */

/* Old posts carry fixed-width images and captions from the old theme. */
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.875rem;
}

/* An old table (the Books page has six columns) gets the wide column, not the
   text column it would otherwise be squeezed into. */
.wp-block-post-content.is-layout-constrained > table {
	max-width: var(--wp--style--global--wide-size) !important;
}

.wp-block-post-content td img {
	border-radius: 2px;
}

.wp-block-post-content td,
.wp-block-post-content th {
	border: 1px solid var(--wp--preset--color--accent-6);
	padding: 0.4rem 0.6rem;
	vertical-align: top;
}

/* ------------------------------------------------------------- search */

/* The papers' search box: one rounded field with its button inside. */
/* The form spans the column, so it lines up with the heading above it (in a
   constrained group WordPress centres anything narrower); the field inside
   is what is narrow. */
.elet-paper-search {
	margin-top: var(--wp--preset--spacing--30);
}

.elet-paper-search .wp-block-search__inside-wrapper {
	max-width: 38rem;
	display: flex;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
}

.elet-paper-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 0;
	background: transparent;
	font: inherit;
}

.elet-paper-search .wp-block-search__button {
	margin: 0;
	padding: 0.55rem 1.2rem;
}


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

/* The header stays in reach while reading, frosted over what scrolls past. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* The frosted glass sits on a layer behind the header's content, not on the
   header itself: a backdrop-filter on an element confines its position:fixed
   children to its own box, and the phone menu's overlay is one — on the
   header it opened as a strip instead of over the screen. */
.elet-header.has-base-background-color {
	position: relative;
	background-color: transparent !important;
}

.elet-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgb(251 250 246 / 88%);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}

/* --------------------------------------------------------- page header */

/* Every page, category, the papers' archive and search open the same way: a
   landscape photograph under a dark green veil, 320px high, the title at its
   foot. The cover has no side padding of its own: its inner area takes the
   site's, and the title's box is the content's (1240px, centred), so it starts
   where the logo and the page's sections start, however short it is. */
.elet-page-cover :is(.wp-block-post-title, .wp-block-query-title, h1) {
	margin-top: 0;
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--xx-large); /* every H1 alike */
	text-wrap: balance;
}

/* Its side padding inside its width, or on a phone it would stand 60px wider
   than the screen and push the title off the left edge. */
.elet-page-cover .wp-block-cover__inner-container {
	box-sizing: border-box;
}

.elet-page-cover .wp-block-cover__inner-container > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.elet-page-cover .wp-block-cover__inner-container p {
	max-width: none;
	opacity: 0.92;
}

.elet-page-cover.wp-block-cover {
	align-items: flex-end;
	padding-bottom: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------- congresses as covers */

/* auto-fit: a short row of covers spreads across the column instead of
   leaving empty tracks at its end. */
.elet-congresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	gap: 2rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elet-congress a {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.elet-congress__cover {
	display: block;
	aspect-ratio: 7 / 10;
	margin-bottom: 0.5rem;
	overflow: hidden;
	border-radius: 4px;
	background: var(--wp--preset--color--accent-5);
	box-shadow: 0 1px 2px rgb(30 38 28 / 12%), 0 8px 20px rgb(30 38 28 / 12%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.elet-congress a:hover .elet-congress__cover,
.elet-congress a:focus-visible .elet-congress__cover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgb(30 38 28 / 14%), 0 14px 30px rgb(30 38 28 / 18%);
}

.elet-congress__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.elet-congress__label {
	font-family: var(--wp--preset--font-family--verdana);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}

.elet-congress a:hover .elet-congress__label {
	color: var(--wp--preset--color--accent-1);
}

/* The old site's congress titles are in capitals; set small, they read as a label. */
.elet-congress__theme {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--wp--preset--color--accent-1);
}

.elet-congress__meta {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-4);
}

/* A cover drawn in type, for the congresses whose proceedings have none. */
.elet-cover-type {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 1rem;
	background: var(--wp--preset--color--accent-3);
	background-image: radial-gradient(circle at 80% 110%, rgb(184 137 43 / 45%), transparent 60%);
	color: var(--wp--preset--color--accent-2);
}

.elet-cover-type__society {
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.elet-cover-type b {
	font-family: var(--wp--preset--font-family--verdana);
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--base);
}

.elet-cover-type > span:last-child {
	font-size: 0.8125rem;
}

/* A congress's own page opens with its cover. */
.elet-congress-header {
	display: grid;
	grid-template-columns: minmax(8rem, 12rem) 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: end;
}

.elet-congress-header h1 {
	margin: 0.25rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--xx-large);
}

.elet-congress-header__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.elet-congress-header .elet-congress__theme {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
}

.elet-congress-header__facts {
	margin: 0;
	font-weight: 600;
}

.elet-congress-header__book {
	margin: 0.25rem 0 1rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--accent-4);
}

@media (max-width: 600px) {
	/* On a phone the cover sits above the text, which then has the width. */
	.elet-congress-header {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.elet-congress-header > .elet-congress__cover {
		width: 9rem;
	}

	.elet-congresses {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 1rem;
	}
}

/* ------------------------------------------- old content's alignments */

/* The old posts align pictures with classes the old theme floated:
   alignleft, alignright, aligncenter, on an image or on its caption box. */
.wp-block-post-content :is(img, .wp-caption).alignright {
	float: right;
	margin: 0.35em 0 1em 1.5em;
}

.wp-block-post-content :is(img, .wp-caption).alignleft {
	float: left;
	margin: 0.35em 1.5em 1em 0;
}

.wp-block-post-content :is(img, .wp-caption).aligncenter {
	display: block;
	margin: 1.5em auto;
}

.wp-block-post-content .wp-caption-text {
	margin: 0.4em 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}

.wp-block-post-content img {
	border-radius: 6px;
}

/* A float never hangs out of the bottom of the article. */
.wp-block-post-content::after {
	content: "";
	display: block;
	clear: both;
}

/* On a phone there is no room beside a picture: it sits on its own line. */
@media (max-width: 600px) {
	.wp-block-post-content :is(img, .wp-caption):is(.alignleft, .alignright) {
		float: none;
		display: block;
		margin: 1em auto;
	}

	/* Justified text, which many old pages used, stretches the gaps between
	   words in a column this narrow; on a phone it is aligned left instead.
	   The old pages set it in an inline style, which only !important outranks. */
	.wp-block-post-content :is([style*="text-align:justify"], [style*="text-align: justify"], .has-text-align-justify) {
		text-align: left !important;
	}
}

/* Linked pictures show they can be opened. The link stays inline: as an
   inline-block it would hold a floated picture inside the line of text. */
.wp-block-post-content a:has(> img) {
	cursor: zoom-in;
}

/* ------------------------------------------------------------ lightbox */

/* The page stays put behind an open lightbox. */
html:has(dialog.elet-lightbox[open]) {
	overflow: hidden;
}

/* The dialog itself covers the screen and carries the dark: ::backdrop is
   not styled the same way in every browser. */
.elet-lightbox {
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(16 22 15 / 94%);
	color: #fff;
}

.elet-lightbox::backdrop {
	background: transparent;
}

.elet-lightbox figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	height: 100%;
	margin: 0;
	padding: 3.5rem 4.5rem;
	box-sizing: border-box;
}

.elet-lightbox img {
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 12px 40px rgb(0 0 0 / 45%);
}

.elet-lightbox figcaption {
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
	opacity: 0.85;
}

.elet-lightbox button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.elet-lightbox button:hover,
.elet-lightbox button:focus-visible {
	background: rgb(255 255 255 / 25%);
}

.elet-lightbox button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ochre);
	outline-offset: 2px;
}

.elet-lightbox__close {
	top: 1rem;
	right: 1rem;
}

.elet-lightbox__previous,
.elet-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.elet-lightbox__previous {
	left: 1rem;
}

.elet-lightbox__next {
	right: 1rem;
}

.elet-lightbox__count {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.8125rem;
	opacity: 0.7;
}

@media (max-width: 600px) {
	.elet-lightbox figure {
		padding: 3.5rem 0.75rem 4rem;
	}

	.elet-lightbox__previous,
	.elet-lightbox__next {
		top: auto;
		bottom: 0.75rem;
		transform: none;
	}
}

/* -------------------------------------------------------------- footer */

.elet-footer-heading {
	margin-bottom: 0.75rem;
	opacity: 0.85;
}

.elet-footer .has-small-font-size {
	line-height: 1.7;
}

/* An email address is one word: it never breaks across lines. */
.elet-footer a[href^="mailto:"] {
	white-space: nowrap;
}

.elet-footer-bottom {
	border-top: 1px solid rgb(231 238 223 / 18%);
}

.elet-footer-bottom p {
	margin: 0;
}

/* Paper of the day: one paper from the archive, a different one each day. */
.elet-paper-of-the-day {
	padding: 1.25rem;
	border-radius: 10px;
	background: rgb(255 255 255 / 6%);
	border: 1px solid rgb(231 238 223 / 14%);
}

.elet-paper-of-the-day p {
	margin: 0;
}

.elet-paper-of-the-day__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ochre);
}

.elet-paper-of-the-day__title {
	margin-top: 0.5rem !important;
	font-family: var(--wp--preset--font-family--verdana);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.elet-paper-of-the-day__title a {
	text-decoration: none;
}

.elet-paper-of-the-day__title a:hover {
	text-decoration: underline;
}

.elet-paper-of-the-day__meta {
	margin-top: 0.4rem !important;
	font-size: 0.8125rem;
	opacity: 0.8;
}

.elet-paper-of-the-day__more {
	margin-top: 0.85rem !important;
	font-size: 0.8125rem;
}

/* -------------------------------------------------------------- slider */

/* The old site's slideshow, in the home page's hero: photographs fade into
   one another behind the text. */
.elet-hero-slider .elet-slide {
	opacity: 0;
	transition: opacity 1.4s ease;
}

.elet-hero-slider .elet-slide.is-current {
	opacity: 1;
}

.elet-slider-controls {
	position: absolute;
	z-index: 2;
	right: max(var(--wp--preset--spacing--50), calc((100% - 1240px) / 2));
	bottom: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.elet-slider-dot {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.elet-slider-dot::before {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	margin: auto;
	border-radius: 50%;
	background: rgb(255 255 255 / 50%);
	transition: width 0.3s ease, background 0.3s ease;
}

.elet-slider-dot[aria-current="true"]::before {
	width: 1.25rem;
	border-radius: 0.25rem;
	background: #fff;
}

.elet-slider-toggle {
	width: 2rem;
	height: 2rem;
	margin-left: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 18%);
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: -0.05em;
	cursor: pointer;
}

:is(.elet-slider-dot, .elet-slider-toggle):focus-visible {
	outline: 2px solid var(--wp--preset--color--ochre);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.elet-hero-slider .elet-slide {
		transition: none;
	}
}

@media (max-width: 600px) {
	.elet-slider-controls {
		bottom: 0.75rem;
	}

	.elet-slider-dot {
		width: 1.1rem;
	}
}

/* --------------------------------------------------------------- icons */

/* One set of outline icons (Lucide, ISC licence, lucide.dev), drawn in CSS in
   the text's own colour: an element with the class elet-i and one of
   elet-i-pin, -phone, -mail, -file, -book, -search, -calendar or -external shows that
   icon before its text, so the content carries a class and no SVG. The same
   icons go on the PDF buttons, the search button, the news dates and the
   Books cards below. */
:root {
	--elet-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--elet-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--elet-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	--elet-i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
	--elet-i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
	--elet-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
	--elet-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
	--elet-i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
}

.elet-i-pin { --elet-i: var(--elet-i-pin); }
.elet-i-phone { --elet-i: var(--elet-i-phone); }
.elet-i-mail { --elet-i: var(--elet-i-mail); }
.elet-i-file { --elet-i: var(--elet-i-file); }
.elet-i-book { --elet-i: var(--elet-i-book); }
.elet-i-search { --elet-i: var(--elet-i-search); }
.elet-i-calendar { --elet-i: var(--elet-i-calendar); }
.elet-i-external { --elet-i: var(--elet-i-external); }

.elet-i::before,
.elet-pdf::before,
.elet-paper-search .wp-block-search__button::before,
main .wp-block-post-date::before,
.elet-books td:nth-child(5) a::before,
.elet-books td:nth-child(6) a::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.5em;
	vertical-align: -0.18em;
	background-color: currentColor;
	-webkit-mask: var(--elet-i) center / contain no-repeat;
	mask: var(--elet-i) center / contain no-repeat;
}

.elet-pdf,
.elet-books td:nth-child(5) a { --elet-i: var(--elet-i-file); }
.elet-paper-search .wp-block-search__button { --elet-i: var(--elet-i-search); }
main .wp-block-post-date { --elet-i: var(--elet-i-calendar); }
.elet-books td:nth-child(6) a { --elet-i: var(--elet-i-book); }

/* A paragraph with an icon: the icon in a column of its own, so an address
   over several lines keeps its lines together beside it. */
p.elet-i {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.6em;
	align-items: start;
}

p.elet-i::before {
	margin: 0.2em 0 0;
	opacity: 0.75;
}

/* ----------------------------------------------------- the Books cards */

/* The Books page keeps its table in the editor, where the society can add a
   row as before; on the page each row is a card: the cover (or a book icon
   where there is none), the year, the title, the details, and the PDF and the
   papers as two links with their icons. Two cards a row on a wide screen,
   one on a phone. */
.elet-books,
.elet-books tbody {
	display: block;
	width: 100%;
	border: 0;
}

.elet-books tbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
	gap: 1.25rem;
}

.elet-books tr {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	grid-auto-rows: min-content;
	column-gap: 1.25rem;
	row-gap: 0.4rem;
	align-content: start;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 10px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.elet-books tr:hover {
	box-shadow: 0 8px 24px rgb(63 79 72 / 12%);
	transform: translateY(-2px);
}

.elet-books td {
	display: block;
	width: auto !important;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.elet-books td:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 6;
}

.elet-books td:nth-child(n + 2) {
	grid-column: 2;
}

.elet-books td:nth-child(1) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

/* No cover: a quiet page-coloured block with a book on it. */
.elet-books td:nth-child(1):not(:has(img)) {
	aspect-ratio: 2 / 3;
	border-radius: 4px;
	background-color: var(--wp--preset--color--accent-2);
	--elet-i: var(--elet-i-book);
	position: relative;
}

.elet-books td:nth-child(1):not(:has(img))::after {
	content: "";
	position: absolute;
	inset: 30%;
	background-color: var(--wp--preset--color--accent-1);
	opacity: 0.5;
	-webkit-mask: var(--elet-i) center / contain no-repeat;
	mask: var(--elet-i) center / contain no-repeat;
}

/* The year as a small badge. */
.elet-books td:nth-child(2) strong {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.elet-books td:nth-child(3) {
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.elet-books td:nth-child(4) {
	color: var(--wp--preset--color--accent-4);
}

.elet-books td:nth-child(5),
.elet-books td:nth-child(6) {
	margin-top: 0.2rem;
}

.elet-books td:nth-child(5) img {
	display: none; /* the old site's PDF picture: the icon replaces it */
}

.elet-books td:nth-child(n + 5) a {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
}

.elet-books td:nth-child(n + 2):empty,
.elet-books td:nth-child(5):not(:has(a)) {
	display: none;
}

@media (max-width: 600px) {
	.elet-books tr {
		grid-template-columns: 4.5rem 1fr;
		column-gap: 1rem;
		padding: 1rem;
	}
}


/* ------------------------------------------------------- footer ground */

/* The footer's green carries faint contour lines, as on a map of the hills,
   under a thin line of the society's orange. */
.elet-footer.has-accent-3-background-color {
	border-top: 3px solid var(--wp--preset--color--ochre);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120' fill='none' stroke='white' stroke-opacity='0.07' stroke-width='1.2'%3E%3Cpath d='M0,14 c40,-9 80,-9 120,0 s80,9 120,0 s80,-9 120,0 s80,9 120,0'/%3E%3Cpath d='M-60,38 c40,-13 80,-13 120,0 s80,13 120,0 s80,-13 120,0 s80,13 120,0'/%3E%3Cpath d='M-150,62 c40,-7 80,-7 120,0 s80,7 120,0 s80,-7 120,0 s80,7 120,0'/%3E%3Cpath d='M-30,86 c40,-15 80,-15 120,0 s80,15 120,0 s80,-15 120,0 s80,15 120,0'/%3E%3Cpath d='M-110,110 c40,-10 80,-10 120,0 s80,10 120,0 s80,-10 120,0 s80,10 120,0'/%3E%3C/svg%3E");
	background-size: 360px 180px;
}

/* The society's Facebook page, by its icon, under the footer's links. */
.elet-footer-social {
	margin-top: var(--wp--preset--spacing--30);
}

.elet-footer-social .wp-social-link,
.elet-footer-social .wp-social-link a {
	color: var(--wp--preset--color--base) !important;
}

/* Social links' labels: the size of the text around them, not 0.65 of the
   icon's (WordPress sizes the whole list for its icons, and sets the label
   with a selector this one has to outweigh). */
.wp-block-social-links .wp-social-link .wp-block-social-link-label:not(.screen-reader-text) {
	font-size: var(--wp--preset--font-size--medium);
}

.elet-footer-social .wp-social-link .wp-block-social-link-label:not(.screen-reader-text) {
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------- the Useful links cards */

/* The Useful links page is one list in the editor, an item a link: its name,
   a line break and a line about it. On the page each item is a card in the
   Books cards' manner, the whole card one link, with an arrow out of the site. */
.elet-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elet-links li {
	position: relative;
	margin: 0;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.elet-links li:hover,
.elet-links li:focus-within {
	box-shadow: 0 8px 24px rgb(63 79 72 / 12%);
	transform: translateY(-2px);
}

.elet-links li > br {
	display: none;
}

.elet-links a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	--elet-i: var(--elet-i-external);
}

/* The whole card answers to the link. */
.elet-links a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.elet-links a::after {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.15em;
	background-color: var(--wp--preset--color--accent-1);
	-webkit-mask: var(--elet-i) center / contain no-repeat;
	mask: var(--elet-i) center / contain no-repeat;
}

.elet-links a:hover,
.elet-links a:focus-visible {
	color: var(--wp--preset--color--accent-1);
}

/* -------------------------------------------------------- contact form */

/* Contact Form 7, in the site's own look: labels above full-width fields,
   the theme's button, and its messages as quiet boxes. */
.wpcf7 form {
	max-width: 40rem;
}

.wpcf7 form p {
	margin: 0 0 1rem;
}

.wpcf7 label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent-3);
}

.wpcf7 :is(input[type="text"], input[type="email"], textarea) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

.wpcf7 textarea {
	min-height: 9rem;
	resize: vertical;
}

/* The quiz's answer: a short field after its question. */
.wpcf7 input.wpcf7-quiz[type="text"] {
	display: inline-block;
	width: 5rem;
	margin: 0.35rem 0 0 0.4rem;
}

.wpcf7 :is(input, textarea):focus {
	outline: 2px solid var(--wp--preset--color--ochre);
	outline-offset: 1px;
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-weight: 400;
	color: var(--wp--preset--color--accent-4);
}

.wpcf7 .wpcf7-list-item {
	margin: 0;
}

.wpcf7 input[type="submit"] {
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--accent-3);
}

.wpcf7 input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	color: var(--wp--preset--color--rust);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
}