@import "postlist.css";

/* Define colors for dark and light in principle */
:root {
	--brand-color-light: var(--wa-color-red-40);
	--brand-color-dark: var(--wa-color-green-60);
	--brand-color: var(--brand-color-light);
	--highlight-color-bg: var(--wa-color-gray-20);
	--highlight-color-fg: var(--wa-color-gray-60);
}

.wa-dark {
	--brand-color: var(--brand-color-dark);
	--highlight-color-bg: var(--wa-color-gray-80);
	--highlight-color-fg: var(--wa-color-gray-40);
}

/* Use the brand color for the link colors. */
a {
	color: var(--brand-color);
}

a:visited {
	color: var(--brand-color);
}

a:hover,
a:focus {
	color: color-mix(in srgb, var(--brand-color) 70%, black);
}

/* Style the divider all the time with brand color. */
wa-divider {
	color: var(--brand-color);
}
/* Style buttons with brand color. That is the toggle button for dark/light, and does not work. */
wa-button {
	/* background-color: var(--brand-color); */
	color: white;
}

/* .header-buttons wa-button {
	font-size: 150%;
} */

/* wa-button.wa-filled:hover,
wa-button.wa-filled:focus {
	background-color: color-mix(in srgb, var(--brand-color) 10%, black);
} */

/* Position the darkLight button to top right all the time. */
#darkLight {
	position: fixed;
	top: 30px;
	right: 10px;
	z-index: 1000;
}

/* Not sure where that belongs to. button-group-toolbar is not used at all. */
main {
	margin: 2em;
	margin-left: 4em;
	margin-right: 4em;
}

.header-anchor {
	display: none;
}

/** Define anew the the authors list as grid of cards. Perhaps we could use instead the features of
	WebAwesome here, which would eliminate part of the definitions then, and allow us styling, ... anyway.
	Will be a separate project at some point in time. */
.authors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}

.author-image {
	overflow: hidden;
	margin-bottom: 1rem;
}

.author-image-small {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
d Frank Elling .author-image-large {
	width: 200px;
	height: 200px;
	border-radius: 50%; /* Changed to 50% to make it circular */
}

.author-image-placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--highlight-color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
	color: var(--highlight-color-fg);
}

/* Author name layout */
/* Add these new styles */
.wa-grid.authors {
	--min-column-size: 20rem; /* This matches the inline style in your HTML */
}

wa-card.card-overview {
	width: 100%; /* Make sure the card takes full width of its grid cell */
}

wa-flank {
	display: flex;
	align-items: center;
}

.author-name-container {
	min-width: 0; /* This is crucial for text wrapping */
	flex: 1;
	padding-left: 1rem; /* Add some space between the image and the name */
}

.author-name {
	display: block;
	font-size: 180%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	hyphens: auto; /* This allows the browser to insert hyphens for very long words */
	max-width: 100%; /* Ensures the text doesn't overflow the container */
}

/* Styles for postlist are now in a separate file: postlist.css */

/* Ensures that cover is small enough to be usable on mobile phone in portrait mode. Not the best solution ... */
.post-cover,
.book-cover {
	width: 20%;
	max-width: 200px;
	margin-top: 1em;
}

.read-date {
	font-size: 0.7em;
}