/* Guestbook: entry list and entry form. Base .btn/.input live in style.css. */

/* One column width for toolbar, entries, note and form so right edges line up. */
.toolbar,
#entry-list,
div.note-block,
form {
	max-width: 68ch;
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

.pager {
	display: flex;
	gap: 8px;
}

.btn-nav {
	background-color: white;
	border-color: var(--rose);
	color: var(--berry-dark);
}

.btn-nav:hover {
	background-color: var(--rose-pale);
}

.btn-nav.btn-disabled,
.btn-nav:disabled {
	opacity: 0.45;
	cursor: default;
	background-color: white;
	box-shadow: none;
}

/* Entries (rendered by guestbook.js) */

#entry-list {
	display: grid;
	gap: 18px;
}

div.content-block {
	padding: 18px 22px 20px;
	background: white;
	border-radius: 16px;
}

div.content-block div.content-descriptor {
	margin-bottom: 6px;
	font-size: 0.85em;
	color: var(--ink-soft);
}

div.content-block div.content-descriptor b {
	font-family: var(--font-hand);
	font-weight: 600;
	font-size: 1.45em;
	color: var(--berry);
	margin-right: 4px;
}

div.message {
	overflow-wrap: break-word;
}

/* Entry form */

div.note {
	margin-bottom: 24px;
	padding: 16px 20px;
	background: white;
	border-radius: 16px;
}

div.note p:last-child {
	margin-bottom: 0;
}

div.input-block {
	margin-bottom: 18px;
}

div.content-descriptor {
	margin-bottom: 4px;
	font-weight: 500;
}

form .input {
	width: 100%;
}

form textarea.input {
	resize: vertical;
}

.erroneous {
	border-color: #B40202;
	background-color: #FBEDEA;
}

div.input-error {
	margin-top: 6px;
	color: #B40202;
}

div.input-error p {
	margin: 0;
}

p.consent-note {
	font-size: 0.85em;
	color: var(--ink-soft);
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

/* Flash messages */

div.box-holder {
	margin-bottom: 24px;
	text-align: left;
}

.flash_success {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 12px;
	background-color: var(--leaf-dark);
	color: white;
}

/* Spam trap: invisible to humans, but not type=hidden, which bots skip. */
div.honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}