:root {
	/* Colors */
	--green: #5a634f;
	--bg: #f7f7fb;
	--card: #fff;
	--card-reserved: #ffffff80;
	--muted: #6b7280;
	--text: #0f172a;
	--text-reserved: #54585f;
	/* --primary-crimson: #5a634f; */
	--primary-crimson: #b91c1c;
	/* --primary-crimson: #f7f7fb; */
    --neutral: rgba(15, 23, 42, 0.06);
    --control: #eef2ff;
	--control-dark: #778191;
	--remove-hover: #ef4444;

	/* Layout */
	--card-pad-vertical: 0.75rem;
	--card-pad-horizontal: 1rem;
	--card-radius: 10px;
	--card-border-width: 1px;

	/* Fonts */
	--font-sans: 'Cause', system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
	--font-festive: 'Cherry Cream Soda', cursive;
	/* --font-sans: 'Gotham', system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
	--font-festive: 'Alta', cursive; */
    --header-size: 3rem;
}

.read-mode .edit-only {
	display: none !important;
}

body {
	font-family: var(--font-sans);
	background: var(--bg);
	color: var(--text);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

main {
	width: 100vw;
	max-width: 920px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Text styles */
h1 {
  margin: 0 0 0.75rem;
  font-size: var(--header-size);
  font-family: var(--font-festive);
  color: var(--primary-crimson);
  line-height: 2;
  text-align: center;
  /* text-shadow: 0 0 8px var(--green); */
}

p.lead {
	margin: 0 0 1rem;
	color: var(--muted);
    font-family: var(---font-sans);
}

a {
	color: var(--primary-crimson);
	text-decoration-color: var(--text);
	/* text-decoration: none; */
	font-style: italic;
}

.hidden {
	display: none !important;
}

/* Card styles */

.card,
.card-item {
	background: var(--card);
	padding: var(--card-pad-vertical) var(--card-pad-horizontal);
	border-radius: var(--card-radius);
	border: var(--card-border-width) solid var(--neutral);
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0 10px 28px var(--neutral);
}

.card-item.reserved {
	background: var(--card-reserved);
	color: var(--text-reserved);
}

#header-card {
	text-align: center;
	background: none;
	border: none;
	box-shadow: none;
	/* background-image: url('/Images/PortraitBackground.webp');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 120%;
	width: 150%; */
}

/* Item card styling */

ul {
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
	width: 100%;
}

.card-item {
    display: grid;
    grid-template-columns: 8fr 3fr 1fr;
    grid-template-rows: 2rem auto 1rem auto 2rem;
	grid-template-areas:
		"title title cardBtns"
		"description image image"
		"link image image"
		". image image"
		"reserve reserve reserve";
    gap: 8px;
}
.item-title {
	grid-area: title;
	font-weight: 600;
}
.item-link {
	grid-area: link;
}
.item-description {
	grid-area: description;
	white-space: pre-wrap;
}
.item-image {
	grid-area: image;
    max-width: calc(100% - 20px);
	max-height: 200px;
	margin-left: auto;
}

.reservation {
	grid-area: reserve;
	text-align: right;
	font-size: 0.9rem;
	color: var(--muted);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}
.reservation-input {
	margin-left: auto;
	border: none;
}
.reservation-name {
	/* font-weight: 500; */
	text-align: left;
}
.reserver {
	font-weight: 600;
	color: var(--primary-crimson);
}
.reserve-button.card-button {
	padding: 0.3rem 0.5rem;
	font-size: 0.8rem;
	margin-left: 0;
}
/* .reserve-button, */
.reservation-input {
	border: 1px solid #8f8f9d;
	border-radius: 2px;
}

.card-buttons {
	grid-area: cardBtns;
	display: flex;
	/* flex-direction: row; */
}

#new-item-card {
	grid-template-rows: 2rem auto 1.5rem 2rem;
}
#new-item-title {
	grid-column: 1 / -1;
}
#add-entry {
	grid-area: reserve;
}
#new-item-image {
	width: 100%;
}
#new-item-description {
	resize: vertical;
}

/* Footer button card styling */
footer {
	margin-top: 1rem;
	text-align: right;
	color: var(--muted);
	font-size: 0.9rem;
}

/* Controls and remove button */
.list-controls {
	display: flex;
	justify-content: flex-end;
}

button {
    cursor: pointer;
	border: none;
}

.card-button {
	background: var(--control);
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
}

.card-button:hover {
	background: var(--control-dark);
	color: var(--card);
}

.card-button {
	margin-left: auto;
	background: transparent;
	color: var(--control-dark);
	font-size: 0.9rem;
}

.remove-button:hover {
	color: var(--remove-hover);
}