@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--rgb-light_blue: 145 195 206;
		--rgb-green: oklch(64% 0.145 191);
	}

	:not(.admin) {
		*::selection {
			color: var(--color-fg);
			background-color: var(--color-accent);
		}
	}

	.light {
		--color-fg: rgba(0, 0, 0, 0.85);
		--color-fg-secondary: rgba(0, 0, 0, 0.5);
		--color-fg-tertiary: rgba(0, 0, 0, 0.25);
		--color-fg-quaternary: rgba(0, 0, 0, 0.1);
		--color-fg-quinary: rgba(0, 0, 0, 0.05);
		--color-fg-inverted: rgba(255, 255, 255, 0.85);

		--color-surface: 255 255 255;
		--color-surface-secondary: 230 230 230;
	}

	.dark {
		--color-fg: rgba(255, 255, 255, 0.85);
		--color-fg-secondary: rgba(255, 255, 255, 0.55);
		--color-fg-tertiary: rgba(255, 255, 255, 0.25);
		--color-fg-quaternary: rgba(255, 255, 255, 0.1);
		--color-fg-quinary: rgba(255, 255, 255, 0.05);
		--color-fg-inverted: rgba(0, 0, 0, 0.85);

		--color-surface: 0 0 0;
		--color-surface-secondary: 51 51 51;
	}

	.theme-purple {
		.light { --color-accent: oklch(76% 0.145 300); }
		.dark { --color-accent: oklch(72% 0.145 300); }
	}

	.theme-green {
		.light { --color-accent: oklch(68% 0.145 191); }
		.dark { --color-accent: oklch(64% 0.145 191); }
	}

	.theme-light_blue {
		.light { --color-accent: oklch(76% 0.145 205); }
		.dark { --color-accent: oklch(72% 0.145 205); }
	}

	.theme-orange {
		.light { --color-accent: oklch(76% 0.145 45); }
		.dark { --color-accent: oklch(72% 0.145 45); }
	}

	.theme-yellow {
		.light { --color-accent: oklch(80% 0.145 80); }
		.dark { --color-accent: oklch(76% 0.145 80); }
	}

	.theme-red {
		.light { --color-accent: oklch(76% 0.145 25); }
		.dark { --color-accent: oklch(72% 0.145 25); }
	}
}

@layer components {
	.field_with_errors {
		display: contents;
	}

	.field_with_errors label {
		color: theme("colors.red.600");
	}

	.header__mobile_transition {
		transition: opacity .75s cubic-bezier(0.65, 0, 0.35, 1);
	}

	.header__mobile_menu_button {
		position: relative;
		z-index: 20;
		justify-self: end;
		height: 100%;
		aspect-ratio: 1;
		position: relative;

		span {
			height: 1px;
			width: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: var(--color-fg);
			transition: transform, background-color, .35s cubic-bezier(0.65, 0, 0.35, 1);

			&:nth-of-type(1) {
				transform: translateX(-50%) translateY(-7px);
			}
			&:nth-of-type(2) {
				transform: translateX(-50%) translateY(0);
			}
			&:nth-of-type(3) {
				transform: translateX(-50%) translateY(7px);
			}
		}
	}

	.header__mobile_nav {
		position: absolute;
		z-index: 10;
		top: 100%;
		left: 0;
		background-color: var(--color-accent);
		height: 100vh;
		width: 100%;
		opacity: 0;
		pointer-events: none;
		user-select: none;
	}

	@media screen and (max-width: 1024px) {
		[data-header-mobile-menu-opened-value="true"] {
			.header__mobile_menu_button {
				span {
					&:nth-of-type(1) {
						transform: translateX(calc(-50% + 3px)) rotate(45deg);
					}
					&:nth-of-type(2) {
						opacity: 0;
					}
					&:nth-of-type(3) {
						transform: translateX(calc(-50% + 3px)) rotate(-45deg);
					}
				}
			}

			.header__mobile_nav {
				opacity: .85;
				pointer-events: initial;
				user-select: initial;
			}
		}
	}
}

.trix-content {
	color: theme("colors.fg.DEFAULT");
	font-size: theme("fontSize.lg");
	line-height: theme("lineHeight.7");

	h1 {
		font-size: theme("fontSize.2xl");
		line-height: theme("lineHeight.8");
		margin-bottom: theme("spacing.2");
	}

	a {
		color: theme("colors.accent");

		&:hover {
			text-decoration: underline;
		}
	}

	strong {
		font-weight: 500;
	}

	blockquote {
		border-inline-start: solid 1.5px theme("colors.accent");
		margin: 0;
		padding-inline-start: theme("spacing.8");
		font-style: italic;
		color: theme("colors.fg.secondary");
	}

	ul {
		list-style-type: disc;
		list-style-position: inside;

		li {
			margin: 0;

			&::marker {
				color: theme("colors.accent");
			}

			ul {
				list-style-type: square;

				ul { list-style-type: circle; }

				li { margin-inline-start: theme("spacing.4"); }
			}
		}
	}

	ol {
		list-style-type: decimal;
		list-style-position: inside;

		li {
			margin: 0;

			&::marker {
				color: theme("colors.accent");
			}

			ol {
				list-style-type: upper-alpha;

				ol { list-style-type: upper-roman; }

				li { margin-inline-start: theme("spacing.4"); }
			}
		}
	}

	img {
		border-radius: theme("borderRadius.2xl");
	}

	action-text-attachment .attachment {
		margin-block: theme("spacing.4");

		.attachment__caption {
			font-size: theme("fontSize.sm");
			line-height: theme("lineHeight.5");
			color: theme("colors.fg.secondary");
			margin-block-start: theme("spacing.2");
		}

		img, video {
			cursor: zoom-in;
		}

		&.attachment--zoomed {
			position: fixed;
			background-color: rgba(0, 0, 0, 0.9);
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;
			margin: 0;
			z-index: 50;

			img, video {
				display: block;
				max-inline-size: 100%;
				cursor: zoom-out;
				outline-offset: theme("spacing.1");

				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.attachment-gallery {
		margin-block: theme("spacing.4");
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: theme("spacing.4");
		row-gap: theme("spacing.6");

		&.attachment-gallery--2 {
			grid-template-columns: repeat(2, 1fr);
		}

		action-text-attachment {
			flex: none !important;
			padding: 0 !important;
			max-width: 100% !important;

			.attachment {
				margin-block: 0;
			}
		}
	}
}