/* MATERIAL ICON FONT */
@font-face {
	font-family: "icon";
	font-style: normal;
	font-weight: 100 700;
	src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v228/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
		format("woff2");
}

.icon {
	font-family: "icon";
	font-size: inherit;
	font-weight: normal;
	font-style: normal;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	user-select: none;
	--fill: 0;
	--wght: 200;
	--grad: -25;
	--opsz: 24;
	font-variation-settings: "FILL" var(--fill), "wght" var(--wght),
		"GRAD" var(--grad), "opsz" var(--opsz);

	&.fill {
		--fill: 1;
	}
	&.w-100 {
		--wght: 100;
	}
	&.w-200 {
		--wght: 200;
	}
	&.w-300 {
		--wght: 300;
	}
	&.w-400 {
		--wght: 400;
	}
	&.w-500 {
		--wght: 500;
	}
	&.w-600 {
		--wght: 600;
	}
	&.w-700 {
		--wght: 700;
	}
	&.g-0 {
		--grad: -25;
	}
	&.g-1 {
		--grad: 0;
	}
	&.g-2 {
		--grad: 200;
	}
}

/* ENABLE PAGE TRANSITIONS */
@view-transition {
	navigation: auto;
}

/* THEMING */
:root {
	interpolate-size: allow-keywords;
	--primary: #ff6600;
	--black: #000;
	--white: #fff;
	--background: #fff;
	--color: #0e0e0e;
	--gray: color-mix(in oklab, var(--background), var(--color) 50%);
	--cover: color-mix(in oklab, var(--primary), var(--background) 80%);
	--input: #e4e4df;
	--success: color-mix(in oklab, var(--primary) 25%, #198754);
	--info: color-mix(in oklab, var(--primary) 25%, #0dcaf0);
	--warning: color-mix(in oklab, var(--primary) 25%, #ffc107);
	--danger: color-mix(in oklab, var(--primary) 25%, #dc3545);
	--ease: 200ms ease-in-out;
	--radius: 0.25em;
	--line: 0.125rem;
	--shadow: 0 0 0 var(--line) var(--cover);
	--font-sans: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
		Arial, sans-serif;
	--font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
	--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
		"DejaVu Sans Mono", monospace;
}

/* DARK MODE */
.dark {
	--background: #09090b;
	--color:#dedede;
	--input: #212121;
	color-scheme: light dark;
}

/* RESET */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	font-family: inherit;
	line-height: inherit;
	accent-color: var(--primary);
	text-wrap: pretty;
	color: inherit;
	text-underline-offset: 0.125em;
	outline-offset: 0.125rem;
}

::selection {
	background: var(--primary);
	color: lch(from var(--primary) calc(100 - l) c h);
}

html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-moz-tab-size: 2;
	text-transform: none;
	tab-size: 2;
	font: 400 clamp(16px, 0.55vmax + 0.55vmin, 32px) / 1 var(--font-sans), Inter,
		Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
	font-feature-settings: "kern", "liga" 1, "calt" 0;
	font-variation-settings: normal;
	font-optical-sizing: auto;
	font-kerning: normal;
	font-synthesis: none;
	scroll-behavior: smooth;
	overscroll-behavior: auto;
}

body {
	background: var(--background);
	color: var(--color);
	min-height: 100svh;
}

/* TYPOGRAPHY */
p,
ul,
ol,
menu {
	line-height: 1.5;
	width: 100%;
	max-width: 60ch;
}

i {
	font-family: var(--font-serif), "Bitstream Charter", "Sitka Text", Cambria,
		serif;
}

code {
	font-family: var(--font-mono), "Cascadia Code", "Source Code Pro", Menlo,
		Consolas, "DejaVu Sans Mono", monospace;
	background: var(--input);
	color: lch(from var(--input) calc(100 - l) c h);
	padding: 0.25em;
	margin-inline: 0.25em;
	border-radius: var(--radius);
	font-size: 0.875em;
}

hr {
	border: unset;
	border-bottom: var(--line) solid var(--color);
	background: var(--color);
	width: 100%;
}

a {
	transition: color var(--ease), translate var(--ease);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		color: var(--primary);
	}
}

fieldset {
	border: 1px solid var(--gray);
	border-radius: 0.25em;
	max-width: 100%;
}

ul,
ol,
menu {
	padding-left: 1.25em;
}

small {
	font-size: 0.75em;
}

mark {
	color: lch(from var(--primary) calc(100 - l) c h);
	background: var(--primary);
}

sup,
sub {
	font-size: 0.75em;
}

math {
	width: fit-content;
}

/* Tables */
.table-wrapper {
	max-width: calc(100% - 2px);
	overflow: auto;
	padding: 1px;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-style: hidden;
	box-shadow: 0 0 0 1px var(--gray);
	border-radius: 0.25em;
	text-align: start;

	caption {
		margin-bottom: 0.75em;
	}

	td,
	th {
		border: 1px solid var(--gray);
		padding: 0.5em 0.75em;
		text-align: inherit;
	}
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	text-wrap: balance;
	font-weight: 700;
	line-height: 1.2;
}
h1,
.h1 {
	font-size: 2rem;
}
h2,
.h2 {
	font-size: 1.75rem;
}
h3,
.h3 {
	font-size: 1.5rem;
}
h4,
.h4 {
	font-size: 1.25rem;
}
h5,
.h5 {
	font-size: 1.125rem;
}
h6,
.h6 {
	font-size: 1rem;
}

/* MEDIA */
img,
video,
picture,
canvas,
svg,
iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

/* FORM */
input,
button,
select,
textarea,
datalist,
.btn {
	border: unset;
	outline: unset;
	background: var(--input);
	border-radius: var(--radius);
	padding: 0.25em 0.75em 0.35em;
	font-size: inherit;
	width: fit-content;
	user-select: none;

	&:hover,
	&:focus-visible {
		box-shadow: 0 0 0 var(--line) var(--cover);
	}
}

input[type="checkbox"],
input[type="radio"] {
	width: 0.875em;
	height: 0.875em;
	translate: 0 0.125em;

	&:hover,
	&:focus-visible {
		box-shadow: unset;
	}
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn {
	background: var(--input);
	cursor: pointer;
	transition: background var(--ease), color var(--ease);

	&:hover,
	&:focus-visible,
	&:active {
		background: var(--primary);
		color: lch(from var(--primary) calc(100 - l) c h);
	}

	&.outline {
		background: unset;
		border: 1px solid currentColor;
	}
}

[disabled] {
	opacity: 0.75;
	cursor: not-allowed;
	pointer-events: none;
}

::placeholder {
	color: var(--gray);
}

select::marker,
summary::marker {
	content: "keyboard_arrow_down";
	font-family: "Icon";
}

/* DETAILS */
details {
	max-width: 50ch;

	summary {
		cursor: pointer;

		&::marker {
			content: "";
		}
	}

	&::details-content {
		background: var(--input);
		opacity: 0;
		block-size: 0;
		border-radius: var(--radius);
		overflow-y: clip;
		z-index: 1;
		transition: content-visibility var(--ease) allow-discrete, opacity var(--ease),
			block-size var(--ease), margin-top var(--ease);
	}

	&[open]::details-content {
		opacity: 1;
		block-size: auto;
		padding: 0.5em;
		margin-top: 0.5em;
	}

	&.fixed {
		position: relative;

		&::details-content {
			position: absolute;
		}
	}
}

/* POPOVER */
[popover] {
	border: unset;
	position: fixed;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	padding: 1rem;
	border-radius: var(--radius);

	&:popover-open {
		position: fixed;

		header {
			margin-bottom: 0.5em;
			justify-content: space-between;
		}
	}

	&::backdrop {
		background: rgba(from var(--black) r g b / 0.75);
	}
}

/* UTILITY CLASSES */

.contain {
	width: 75%;
	margin-inline: auto;
	transition: width var(--ease);

	@media (max-width: 1500px) {
		width: 85%;
	}

	@media (orientation: portrait) {
		width: 90%;
	}
}

.flex {
	display: flex;
	align-items: center;
	gap: 1em;
}
.grid {
	display: grid;
	align-content: start;
	gap: 1em;
}
.stack {
	display: grid;

	& > * {
		grid-area: 1 / 1;
	}
}

.card {
	padding: 1em;
	border-radius: var(--radius);
	background: var(--input);
	width: fit-content;
	max-width: 100%;
}

.glass {
	backdrop-filter: blur(8px) saturate(0.5) brightness(1.125);
  color: var(--white);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.75), 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.dark .glass {
	backdrop-filter: blur(8px) saturate(0.5) brightness(0.5);
	box-shadow: unset;
}

.sticky {
	position: sticky;
	top: 0;
	z-index: 1;
}

/* RESPONSIVE */

.mobile {
	@media (min-width: 767px) {
		display: none !important;
	}
}
.tablet-down {
	@media (min-width: 1280px) {
		display: none !important;
	}
}
.tablet {
	@media (min-width: 1280px) {
		display: none !important;
	}

	@media (max-width: 767px) {
		display: none !important;
	}
}
.tablet-up {
	@media (max-width: 767px) {
		display: none !important;
	}
}
.desktop {
	@media (max-width: 1280px) {
		display: none !important;
	}
}


/* CONTENT */

body {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 1rem;
}

header#header {
	padding-block: 1rem;
	color: var(--black);

	.flex {
		align-items: center;
		justify-content: space-between;
	}

	h2 {
		font-size: 1.25rem;
		gap: 0.25em;

		.icon {
			color: var(--primary);
		}
	}

	.header-nav {
		display: flex;
		align-items: center;
		gap: 1rem;
		flex: 1;
		justify-content: center;

		@media (max-width: 768px) {
			position: relative;
			order: 1;
			justify-content: end;
		}
	}

	.burger-btn {
		background: var(--background);
		color: var(--color);
		border: none;
		padding: 0.5rem;
		border-radius: var(--radius);
		cursor: pointer;
		display: none;

		@media (max-width: 768px) {
			display: flex;
			align-items: center;
			font-size: 2em;
		}

		&:hover {
			background: var(--primary);
			color: lch(from var(--primary) calc(100 - l) c h);
		}
	}

	.header-links {
		display: flex;
		align-items: center;
		gap: 1rem;

		@media (max-width: 768px) {
			position: absolute;
			top: 100%;
			right: 0;
			background: var(--background);
			border: 1px solid var(--gray);
			border-radius: var(--radius);
			padding: 1rem;
			flex-direction: column;
			gap: 0.75rem;
			min-width: 120px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			opacity: 0;
			visibility: hidden;
			transform: translateY(-10px);
			transition: opacity var(--ease), visibility var(--ease), transform var(--ease);
			z-index: 10;

			&.open {
				opacity: 1;
				visibility: visible;
				transform: translateY(0);
			}
		}
	}

	a {
		text-transform: capitalize;
		color: var(--color);
		opacity: 0.875;
		white-space: nowrap;

		&.active,
		&:hover,
		&:focus-within {
			text-decoration: underline;
			opacity: 1;
		}
	}

	#toggle {
		background: var(--background);
		color: var(--color);
		flex-shrink: 0;
	}
}

main#main {
	#feed {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;

		@media(max-width: 1280px) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
		}

		article {
			width: 100%;
			grid-template-rows: 1fr auto auto;
			gap: 0.5rem;
			border: 0px solid;
			border-color: light-dark(#0001, var(--input));
			padding: 0 0 1rem;
			background: var(--background);
			transition: background var(--ease), translate var(--ease);

			.card-header {
				position: relative;
				display: grid;
				gap: 0.5rem;
			}

			.title {
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical; 
				height: 3.9rem;
			}

			.bookmark-btn {
				position: absolute;
				top: 0.5rem;
				right: 0.5rem;
				background: rgba(0, 0, 0, 0.7);
				color: var(--white);
				border: none;
				border-radius: 50%;
				width: 2.5rem;
				height: 2.5rem;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				z-index: 2;
				transition: all var(--ease);
				backdrop-filter: blur(4px);

				.bookmark-icon {
					font-size: 1.125rem;
					--fill: 0;
					color: var(--white);
					transition: all var(--ease);
				}

				&:hover {
					background: rgba(0, 0, 0, 0.9);
					transform: scale(1.1);
				}

				&.bookmarked {
					background: var(--primary) !important;
					
					.bookmark-icon {
						--fill: 1;
						color: var(--white) !important;
					}

					&:hover {
						background: color-mix(in oklab, var(--primary), var(--black) 20%) !important;
						transform: scale(1.1);
					}
				}
			}

			a {
				gap: 0.5rem;
			}

			.icon {
				translate: 0 1px;
			}

			.links {
				border-top: 1px solid var(--gray);
				padding-top: 0.5rem;

				& > * {
					white-space: nowrap;
				}

				.flex {
					gap: 0.25em;	
				}
			}

			.img-wrapper {
				background-size: cover;
				position: relative;
				overflow: hidden;
				border-radius: 1.1rem;
				background: #555;
			}

			img,
			picture {
				width: 100%;
				aspect-ratio: 16 / 9;
				object-fit: cover;
				height: auto;
				transition: opacity var(--ease);
				border-radius: 1rem;
			}

			.optimized-image {
				opacity: 1;
				transition: opacity 0.3s ease-in-out;
			}

			.optimized-image.image-loading {
				opacity: 0.5;
			}

			.optimized-image.image-loaded {
				opacity: 1;
			}

			.optimized-image.image-error {
				opacity: 1;
				filter: grayscale(1);
			}

			/* Loading animation for images */
			.img-wrapper::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					90deg,
					transparent,
					rgba(255, 255, 255, 0.2),
					transparent
				);
				animation: loading-shimmer 1.5s infinite;
				z-index: 1;
			}

			.img-wrapper:has(.image-loaded)::before,
			.img-wrapper:has(.image-error)::before {
				content: unset;
			}

			/* Fallback for browsers that don't support :has() */
			.img-wrapper.image-loaded::before,
			.img-wrapper.image-error::before {
				content: unset;
			}

			@keyframes loading-shimmer {
				0% {
					left: -100%;
				}
				100% {
					left: 100%;
				}
			}

			/* Responsive image optimization */
			@media (max-width: 480px) {
				img,
				picture {
					aspect-ratio: 4 / 3;
				}
			}

			@media (max-width: 768px) {
				img,
				picture {
					aspect-ratio: 3 / 2;
				}
			}

			h2 {
				font-size: 1.125rem;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			&:hover,
			&:focus-within {
				translate: 0 -1px;
			}
		}
	}
}

footer#footer {
	padding-block: 1rem;

	.contain {
		justify-content: center;

		a {

			&.active {
				color: var(--primary);
			}
		}
	}

	.loading-indicator {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		font-size: 0.875rem;
		color: var(--gray);

		.spinner {
			width: 1.5rem;
			height: 1.5rem;
			margin: 0;
		}
	}
}

/* SKELETON LOADER */
.skeleton-card {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 0.5rem;
  padding: 1em;
  border-radius: var(--radius);
  background: var(--input);
  width: 100%;
  max-width: 100%;
  min-height: 220px;
  box-sizing: border-box;
  animation: skeleton-fade 1.2s infinite alternate;
}
.skeleton-img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--gray) 25%, var(--input) 50%, var(--gray) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
}
.skeleton-title {
  width: 70%;
  height: 1.2em;
  border-radius: 0.25em;
  background: var(--gray);
  margin: 0.5em 0;
  animation: skeleton-fade 1.2s infinite alternate;
}
.skeleton-meta {
  width: 50%;
  height: 0.8em;
  border-radius: 0.25em;
  background: var(--gray);
  animation: skeleton-fade 1.2s infinite alternate;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes skeleton-fade {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* SPINNER */
.spinner {
  display: block;
  margin: 2em auto;
  width: 2.5em;
  height: 2.5em;
  border: 0.3em solid var(--gray);
  border-top: 0.3em solid var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}