/* "light" and "dark" have high contrast, for a black-and-white monitor */
:root {
	color-scheme: light;
	--fg: #ffffff;
	--bg: #47516d;
	--accent: auto;
}

html[data-theme="light"] {
	--fg: #000000;
	--bg: #ffffff;
	--accent: #000000;
}

html[data-theme="dark"] {
	color-scheme: dark;
	--fg: #ffffff;
	--bg: #000000;
	--accent: #ffffff;
}

body {
	font-size: 24px;
	color: var(--fg) !important;
	font-family: Arial !important;
	background-color: var(--bg);
	accent-color: var(--accent);
}

a:link, a:visited {
	color: var(--fg);
}

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
border-style: solid;
border-width: 1px;
}


/* the text column may get narrower than its longest word (the long addresses wrap), or the
   page would be wider than the window up to about 900 px */
@media (min-width: 768px) {
.container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	grid-template-rows: auto 1fr auto;
}
}

header {
grid-column: span 3;
padding: 5px;
text-align: center;
#font-size: 1.4em;
color: var(--fg);
}

main {
flex: 1;
padding: 20px;
border-style: solid;
border-width: 1px;
}

side_bar {
padding: 20px;
border-style: solid;
border-width: 1px;
}

footer {
grid-column: span 3;
padding: 10px;
text-align: center;
font-size: 1.0em;
color: var(--fg);
}

h1 {
margin-bottom: 1em;
font-size: 1.3em;
font-weight: bold;
}

fieldset {
	border: 0;
	text-align: center;
}

#searched_text {
	width: 90%;
}

#button_search {
	width: 45%;
}

#language {
	width: 45%;
}

.hover_img { text-align: center; overflow-wrap: break-word; }
.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { position: relative; display: block; }

.bold {
	text-align: center;
	font-weight: bold;
}

/* reset.css makes them plain text: translations in the results, labels in the text */
b, strong {
	font-weight: bold;
}

main p, main ul {
	margin-bottom: 1em;
}

main ul {
	list-style: disc;
	padding-left: 1.2em;
}

main li {
	margin-bottom: 0.5em;
}

.app-link {
	display: block;
	margin-bottom: 16px;
	padding: 10px;
	border: 2px solid var(--fg);
	border-radius: 12px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
}

.img_flag {
	margin: 3px
}

/* in the high contrast themes the logo is drawn in the text colour, framed like the colour switch */
.logo {
	float: left;
	box-sizing: border-box;
	width: 100px;
	height: 100px;
}

.logo-tile { fill: #387ff2; }
.logo-art { fill: #ffffff; }
html:is([data-theme="light"], [data-theme="dark"]) .logo { border: 2px solid var(--fg); border-radius: 12px; }
html:is([data-theme="light"], [data-theme="dark"]) .logo-tile { fill: none; }
html:is([data-theme="light"], [data-theme="dark"]) .logo-art { fill: var(--fg); }

/* in line with the flags: the same height and margin */
.theme-toggle {
	float: right;
	box-sizing: border-box;
	width: 52px;
	height: 20pt; /* as tall as the flag pictures */
	margin: 3px;
	padding: 0;
	border: 2px solid var(--fg);
	border-radius: 4px;
	background: linear-gradient(to right, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
	color: #ffffff;
	cursor: pointer;
}

.theme-toggle svg {
	display: block;
	width: 22px;
	height: 22px;
	margin: auto;
}

/* a black edge keeps the white sun readable on every colour of the rainbow */
.theme-toggle .sun-edge { stroke: #000000; stroke-width: 4.5; }

html[data-theme="light"] .theme-toggle { background: #ffffff; color: #000000; }
html[data-theme="light"] .theme-toggle .sun-edge { stroke: none; }
html[data-theme="dark"] .theme-toggle { background: #000000; }

/* on a phone, floating beside the title, the flags and the colour switch did not fit */
@media (max-width: 767px) {
header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
}

.logo {
	float: none;
	width: min(100px, 14vw);
	height: min(100px, 14vw);
}

/* takes the rest of the row and wraps inside it */
header h1 {
	order: 1;
	flex: 1 1 0;
	margin: 0;
	font-size: min(1.3em, 6.5vw);
}

header .theme-toggle {
	float: none;
	order: 2;
}

/* ends the first row */
header::after {
	content: "";
	flex-basis: 100%;
	order: 3;
}

header > a {
	order: 4;
	margin-top: 8px;
	line-height: 0;
}

header .img_flag {
	display: block;
	float: none;
}

.tagline {
	order: 5;
	flex-basis: 100%;
	margin-top: 8px;
	font-size: min(1em, 5.5vw);
}
}

#results {
	--result-fg: #000000;
	--result-bg: #ffffff;
	color: var(--result-fg);
	background: var(--result-bg);
	padding: 16px;
	line-height: 1.5;
	overflow-wrap: anywhere;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 640px;
}

html[data-theme="dark"] #results {
	--result-fg: #ffffff;
	--result-bg: #000000;
}

#results:focus-visible {
	outline: 2px solid var(--result-fg);
	outline-offset: -2px;
}

.result-group + .result-group {
	margin-top: 28px;
}

.result-headword {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--result-bg);
	background: var(--result-fg);
	padding: 4px 8px 4px 16px;
	margin-bottom: 4px;
}

.result-word {
	flex: 1;
	min-width: 0;
	margin: 8px 0;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2;
}

.speech-button {
	flex-shrink: 0;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 10px;
	color: inherit;
	background: none;
	border: 0;
	vertical-align: middle;
	cursor: pointer;
}

.speech-button svg {
	display: block;
	fill: currentColor;
}

.speech-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

.result-entry {
	border-bottom: 1px solid var(--result-fg);
}

.result-entry summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
}

.result-entry summary::-webkit-details-marker {
	display: none;
}

.result-entry summary::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-right: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
}

.result-entry[open] summary::after {
	transform: rotate(225deg);
}

.result-summary {
	flex: 1;
	min-width: 0;
}

.result-translation {
	display: block;
	font-weight: bold;
}

.result-labels, .result-note {
	display: block;
	margin-top: 4px;
	font-size: 0.75em;
}

.result-detail {
	border-left: 3px solid var(--result-fg);
	margin-top: 12px;
	margin-bottom: 16px;
	padding-left: 12px;
	font-size: 0.75em;
}

.result-pair, .result-author {
	margin-bottom: 12px;
}

.result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.result-actions button {
	font: inherit;
	color: var(--result-fg);
	background: var(--result-bg);
	border: 1px solid currentColor;
	border-radius: 4px;
	min-height: 44px;
	max-width: 100%;
	padding: 8px 12px;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.result-entry summary:focus-visible, .result-actions button:focus-visible {
	outline: 3px solid var(--result-fg);
	outline-offset: 3px;
}

.result-status:not(:empty) {
	margin-top: 12px;
}

.result-message {
	margin-top: 12px;
	font-size: 0.75em;
}