/* ============================================
   M3 Components — OM Designs
   ============================================ */

/* --- Typography utility classes --- */

.display-large {
	font-family: var(--md-sys-typescale-display-font);
	font-size: var(--md-sys-typescale-display-large-size);
	line-height: var(--md-sys-typescale-display-large-line-height);
	font-weight: var(--md-sys-typescale-display-large-weight);
}

.display-medium {
	font-family: var(--md-sys-typescale-display-font);
	font-size: var(--md-sys-typescale-display-medium-size);
	line-height: var(--md-sys-typescale-display-medium-line-height);
	font-weight: var(--md-sys-typescale-display-medium-weight);
}

.display-small {
	font-family: var(--md-sys-typescale-display-font);
	font-size: var(--md-sys-typescale-display-small-size);
	line-height: var(--md-sys-typescale-display-small-line-height);
	font-weight: var(--md-sys-typescale-display-small-weight);
}

.headline-large {
	font-family: var(--md-sys-typescale-display-font);
	font-size: var(--md-sys-typescale-headline-large-size);
	line-height: var(--md-sys-typescale-headline-large-line-height);
	font-weight: var(--md-sys-typescale-headline-large-weight);
}

.headline-medium {
	font-family: var(--md-sys-typescale-display-font);
	font-size: var(--md-sys-typescale-headline-medium-size);
	line-height: var(--md-sys-typescale-headline-medium-line-height);
	font-weight: var(--md-sys-typescale-headline-medium-weight);
}

.headline-small {
	font-family: var(--md-sys-typescale-display-font);
	font-size: var(--md-sys-typescale-headline-small-size);
	line-height: var(--md-sys-typescale-headline-small-line-height);
	font-weight: var(--md-sys-typescale-headline-small-weight);
}

.title-large {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-title-large-size);
	line-height: var(--md-sys-typescale-title-large-line-height);
	font-weight: var(--md-sys-typescale-title-large-weight);
}

.title-medium {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-title-medium-size);
	line-height: var(--md-sys-typescale-title-medium-line-height);
	font-weight: var(--md-sys-typescale-title-medium-weight);
}

.title-small {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-title-small-size);
	line-height: var(--md-sys-typescale-title-small-line-height);
	font-weight: var(--md-sys-typescale-title-small-weight);
}

.body-large {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-body-large-size);
	line-height: var(--md-sys-typescale-body-large-line-height);
	font-weight: var(--md-sys-typescale-body-large-weight);
}

.body-medium {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-body-medium-size);
	line-height: var(--md-sys-typescale-body-medium-line-height);
	font-weight: var(--md-sys-typescale-body-medium-weight);
}

.body-small {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-body-small-size);
	line-height: var(--md-sys-typescale-body-small-line-height);
	font-weight: var(--md-sys-typescale-body-small-weight);
}

.label-large {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-label-large-size);
	line-height: var(--md-sys-typescale-label-large-line-height);
	font-weight: var(--md-sys-typescale-label-large-weight);
}

.label-medium {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-label-medium-size);
	line-height: var(--md-sys-typescale-label-medium-line-height);
	font-weight: var(--md-sys-typescale-label-medium-weight);
}

.label-small {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-label-small-size);
	line-height: var(--md-sys-typescale-label-small-line-height);
	font-weight: var(--md-sys-typescale-label-small-weight);
}

/* --- Buttons --- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	padding: 0 1.5rem;
	border-radius: var(--md-sys-shape-corner-full);
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	line-height: var(--md-sys-typescale-label-large-line-height);
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	border: none;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.button--filled {
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
}

.button--filled:hover {
	box-shadow: var(--md-sys-elevation-1);
	background-image: linear-gradient(
		rgba(255, 255, 255, var(--md-sys-state-hover-opacity)),
		rgba(255, 255, 255, var(--md-sys-state-hover-opacity))
	);
}

.button--filled:focus-visible {
	outline: 2px solid var(--md-sys-color-primary);
	outline-offset: 2px;
	background-image: linear-gradient(
		rgba(255, 255, 255, var(--md-sys-state-focus-opacity)),
		rgba(255, 255, 255, var(--md-sys-state-focus-opacity))
	);
}

.button--filled:active {
	background-image: linear-gradient(
		rgba(255, 255, 255, var(--md-sys-state-pressed-opacity)),
		rgba(255, 255, 255, var(--md-sys-state-pressed-opacity))
	);
}

.button--outlined {
	background-color: transparent;
	color: var(--md-sys-color-primary);
	border: 1px solid var(--md-sys-color-outline);
}

.button--outlined:hover {
	background-color: rgba(139, 94, 60, var(--md-sys-state-hover-opacity));
}

.button--outlined:focus-visible {
	outline: 2px solid var(--md-sys-color-primary);
	outline-offset: 2px;
	background-color: rgba(139, 94, 60, var(--md-sys-state-focus-opacity));
}

.button--outlined:active {
	background-color: rgba(139, 94, 60, var(--md-sys-state-pressed-opacity));
}

.button--text {
	background-color: transparent;
	color: var(--md-sys-color-primary);
	padding: 0 0.75rem;
}

.button--text:hover {
	background-color: rgba(139, 94, 60, var(--md-sys-state-hover-opacity));
}

.button--text:focus-visible {
	outline: 2px solid var(--md-sys-color-primary);
	outline-offset: 2px;
}

.button--danger {
	background-color: var(--md-sys-color-error);
	color: var(--md-sys-color-on-error);
}

.button--danger:hover {
	box-shadow: var(--md-sys-elevation-1);
	background-image: linear-gradient(
		rgba(255, 255, 255, var(--md-sys-state-hover-opacity)),
		rgba(255, 255, 255, var(--md-sys-state-hover-opacity))
	);
}

/* --- Card --- */

.card {
	background-color: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-medium);
	overflow: hidden;
	box-shadow: var(--md-sys-elevation-1);
	transition: box-shadow 0.2s ease;
}

.card:hover {
	box-shadow: var(--md-sys-elevation-2);
}

.card__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.card__content {
	padding: 1rem;
}

/* --- Text field --- */

.text-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 1rem;
}

.text-field__label {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-body-small-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	color: var(--md-sys-color-on-surface-variant);
}

.text-field__input {
	padding: 0.75rem 1rem;
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-extra-small);
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-body-large-size);
	line-height: var(--md-sys-typescale-body-large-line-height);
	color: var(--md-sys-color-on-surface);
	background-color: transparent;
	transition: border-color 0.2s ease;
}

.text-field__input:hover {
	border-color: var(--md-sys-color-on-surface);
}

.text-field__input:focus {
	outline: none;
	border-color: var(--md-sys-color-primary);
	border-width: 2px;
	padding: calc(0.75rem - 1px) calc(1rem - 1px);
}

.text-field__input--textarea {
	resize: vertical;
	min-height: 6rem;
}

.text-field__supporting {
	font-size: var(--md-sys-typescale-body-small-size);
	color: var(--md-sys-color-on-surface-variant);
}

.text-field--error .text-field__input {
	border-color: var(--md-sys-color-error);
}

.text-field--error .text-field__supporting {
	color: var(--md-sys-color-error);
}

/* --- Chip --- */

.chip {
	display: inline-flex;
	align-items: center;
	height: 2rem;
	padding: 0 1rem;
	border-radius: var(--md-sys-shape-corner-small);
	border: 1px solid var(--md-sys-color-outline);
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	color: var(--md-sys-color-on-surface-variant);
	background-color: transparent;
}

.chip--filled {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
	border: none;
}

/* --- Top app bar --- */

.top-app-bar {
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	padding: 0.75rem 1rem;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--md-sys-elevation-1);
}

.top-app-bar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 72rem;
	margin: 0 auto;
}

.top-app-bar__title {
	font-family: var(--md-sys-typescale-display-font);
	font-size: var(--md-sys-typescale-title-large-size);
	font-weight: var(--md-sys-typescale-title-large-weight);
	color: var(--md-sys-color-primary);
	text-decoration: none;
}

.top-app-bar__menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--md-sys-color-on-surface);
	cursor: pointer;
	padding: 0.5rem;
	border-radius: var(--md-sys-shape-corner-full);
}

.top-app-bar__menu-toggle:hover {
	background-color: rgba(0, 0, 0, var(--md-sys-state-hover-opacity));
}

.top-app-bar__links {
	display: flex;
	list-style: none;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.top-app-bar__links a {
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	color: var(--md-sys-color-on-surface);
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	border-radius: var(--md-sys-shape-corner-full);
	transition: background-color 0.2s ease;
}

.top-app-bar__links a:hover {
	background-color: rgba(0, 0, 0, var(--md-sys-state-hover-opacity));
}

@media (max-width: 600px) {
	.top-app-bar__menu-toggle {
		display: block;
	}

	.top-app-bar__links {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--md-sys-color-surface-container);
		padding: 0.5rem 0;
		box-shadow: var(--md-sys-elevation-2);
	}

	.top-app-bar__links--open {
		display: flex;
	}

	.top-app-bar__links a {
		padding: 0.75rem 1rem;
		border-radius: 0;
	}
}

/* --- Navigation drawer (admin) --- */

.nav-drawer {
	width: 16rem;
	background-color: var(--md-sys-color-surface-container-low);
	border-right: 1px solid var(--md-sys-color-outline-variant);
	padding: 1rem 0;
	min-height: 100vh;
}

.nav-drawer__header {
	padding: 0.75rem 1.5rem 1rem;
	font-family: var(--md-sys-typescale-display-font);
	font-size: var(--md-sys-typescale-title-large-size);
	color: var(--md-sys-color-primary);
}

.nav-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-drawer__item a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.5rem;
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: var(--md-sys-typescale-label-large-weight);
	color: var(--md-sys-color-on-surface-variant);
	text-decoration: none;
	border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0;
	transition: background-color 0.2s ease;
}

.nav-drawer__item a:hover {
	background-color: rgba(0, 0, 0, var(--md-sys-state-hover-opacity));
}

.nav-drawer__item--active a {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
	font-weight: 700;
}

/* --- Snackbar --- */

.snackbar {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--md-sys-color-inverse-surface);
	color: var(--md-sys-color-inverse-on-surface);
	padding: 0.875rem 1rem;
	border-radius: var(--md-sys-shape-corner-extra-small);
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-body-medium-size);
	box-shadow: var(--md-sys-elevation-3);
	z-index: 200;
}

/* --- Data table --- */

.data-table {
	width: 100%;
	border-collapse: collapse;
}

.data-table th,
.data-table td {
	text-align: left;
	padding: 0.75rem 1rem;
	font-family: var(--md-sys-typescale-body-font);
	font-size: var(--md-sys-typescale-body-medium-size);
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.data-table th {
	font-weight: var(--md-sys-typescale-label-large-weight);
	color: var(--md-sys-color-on-surface-variant);
}

.data-table tr:hover {
	background-color: rgba(0, 0, 0, var(--md-sys-state-hover-opacity));
}