/* ============================================
   fernan.dev - Core Styles
   Base: font-size 100% (16px), 1.5rem (24px) default, 2rem line-height, 2rem spacing
   ============================================ */

:root {
	/* Colors - WCAG AA Compliant */
	--black: hsl(0, 0%, 8%);
	--dark: hsl(0, 0%, 28%);
	--gray: hsl(0, 0%, 55%);
	--light: hsl(0, 0%, 80%);
	--white: hsl(0, 0%, 96%);
	
	/* Typography Scale with fluid sizing using clamp() */
	--font-xs: clamp(1rem, 0.95rem + 0.25dvw, 1.125rem);
	--font-sm: clamp(1.125rem, 1.05rem + 0.35dvw, 1.25rem);
	--font-md: clamp(1.25rem, 1.15rem + 0.5dvw, 1.5rem);
	--font-lg: clamp(1.5rem, 1.35rem + 0.75dvw, 1.75rem);
	--font-xl: clamp(1.75rem, 1.55rem + 1dvw, 2rem);
	--font-2xl: clamp(2rem, 1.75rem + 1.25dvw, 2.25rem);
	--font-3xl: clamp(2.25rem, 2rem + 1.5dvw, 2.75rem);
	
	/* Line Heights (based on 2rem = 32px base) */
	--lh-xs: 1.5rem;       /* 24px */
	--lh-sm: 1.625rem;     /* 26px */
	--lh-md: 2rem;         /* 32px - base */
	--lh-lg: 2.25rem;      /* 36px */
	--lh-xl: 2.5rem;       /* 40px */
	--lh-2xl: 3rem;        /* 48px */
	--lh-3xl: 3.5rem;      /* 56px */
	
	/* Spacing Scale (based on 2rem = 32px) */
	--space-0: 0;
	--space-1: 0.25rem;    /* 4px */
	--space-2: 0.5rem;     /* 8px */
	--space-3: 0.75rem;    /* 12px */
	--space-4: 1rem;       /* 16px */
	--space-5: 1.25rem;    /* 20px */
	--space-6: 1.5rem;     /* 24px */
	--space-8: 2rem;       /* 32px - base */
	--space-10: 2.5rem;    /* 40px */
	--space-12: 3rem;      /* 48px */
	--space-16: 4rem;      /* 64px */
	--space-20: 5rem;      /* 80px */
	--space-24: 6rem;      /* 96px */
	
	/* Borders (all in rem) */
	--border-sm: 0.0625rem;  /* 1px */
	--border-md: 0.125rem;   /* 2px */
	--border-lg: 0.25rem;    /* 4px */

	/* Shadows */
	--shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
	--shadow-md: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
	
	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-md: 0.25s ease;
	--transition-slow: 0.4s ease;
	
	/* Focus Ring */
	--focus-ring: 0 0 0 0.1875rem var(--light);
	--focus-ring-color: rgba(255, 255, 255, 0.5);
}

@font-face {
	font-family: 'outfit';
	src: url('/fonts/outfit.ttf') format('truetype-variations');
	font-weight: 1 999;
	font-display: optional;
}

@font-face {
	font-family: 'emoji';
	src: url('/fonts/emoji.ttf') format('truetype-variations');
	font-weight: 1 999;
	font-display: optional;
}

@font-face {
	font-family: 'code';
	src: url('/fonts/FiraCode.ttf') format('truetype-variations');
	font-weight: 1 999;
	font-display: optional;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*[icon]::before {
	content: attr(icon);
	display: inline;
	font-size: inherit;
	line-height: inherit;
	font-family: 'emoji';
	color: inherit;
	letter-spacing: 0.28rem;
}

html,
body {
	font-family: 'outfit', sans-serif;
	font-size: 100%;
	line-height: var(--lh-md);
	margin-bottom: var(--lh-md);
	font-weight: 300;
	width: 100dvw;
	min-height: 100dvh;
	background-color: var(--black);
	position: relative;
	overflow: hidden;
	user-select: text;
	color: var(--white);
	scroll-behavior: smooth;
}

/* Skip Link for Accessibility */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	background: var(--dark);
	color: var(--light);
	padding: var(--space-3) var(--space-4);
	z-index: 1000;
	text-decoration: none;
	font-size: var(--font-md);
	border-radius: 0.25rem;
	box-shadow: var(--shadow-md);
}

.skip-link:focus {
	top: var(--space-4);
	outline: 0.1875rem solid var(--white);
	outline-offset: 0.125rem;
}

/* Visually Hidden (for screen readers only) */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Global Link Styles */
a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.08rem;
	text-underline-offset: 0.12rem;
	transition: all var(--transition-md);
	font-size: var(--font-md);
	line-height: var(--lh-md);
}

a:hover {
	color: var(--color);
	text-underline-offset: 0.30rem;
	text-decoration-style: wavy;
}

a:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
}

/* Focus styles for buttons (copy buttons, tool buttons) */
button:focus,
button:focus-visible {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
	background-color: var(--dark);
}

/* Article Links (homepage and lists) */
.article-list a,
.tools-list a,
.resources-list a {
	font-size: var(--font-md);
	line-height: var(--lh-md);
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.08rem;
	text-underline-offset: 0.12rem;
	transition: all var(--transition-md);
}

.article-list a:hover,
.tools-list a:hover,
.resources-list a:hover {
	color: var(--color);
	text-underline-offset: 0.24rem;
	text-decoration-style: wavy;
}

body {
	display: flex;
	flex-direction: column;
}

/* Navigation */
nav {
	display: flex;
	flex-direction: row;
	align-items: center;
    background-color: var(--black);
    z-index: 100;
    height: var(--space-16);
    border-bottom: var(--border-sm) solid var(--dark);
    font-size: var(--font-md);
    line-height: var(--lh-md);
    padding: 0 var(--space-8);
	width: 100%;
	justify-content: space-between;
}

nav > a.logo {
	flex-shrink: 0;
}

nav > button.toggle {
	flex-shrink: 0;
	margin-left: auto;
}

nav a {
	display: inline-block;
	height: var(--font-md);
	line-height: var(--font-md);
	padding: 0;
	border: 0;
	outline: none;
	text-decoration: none;
	cursor: pointer;
}

nav a:focus,
nav button:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
}

/* Active Navigation State */
nav a.active {
	color: var(--light);
	text-decoration: underline;
	text-decoration-thickness: 0.125rem;
}

body > nav > a.logo {
	width: 3rem;
	height: 3rem;
	fill: var(--white);
	padding: .75rem 0;
}
body > nav > a.logo > svg {
	fill: var(--white);
}

body > nav > button {
	background-color: transparent;
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	outline: none;
	cursor: pointer;
}

nav > button > svg {
	width: 100%;
	height: 100%;
	fill: var(--white);
	pointer-events: none;
}

nav > ul {
	display: none;
	list-style: none;
	padding: 0;
	height: var(--lh-md);
	margin: 0;
}

nav > ul > li > a {
	height: var(--lh-md);
	margin-left: 0;
}

/* Main Content */
main {
	height: calc(100dvh - 4rem);
	background-color: var(--black);
	overflow: hidden;
}

nav.menu > button > svg {
	transform: rotate(45deg);
}

nav.menu > ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-4);
	position: fixed;
	inset-inline: 0;
	height: calc(100dvh - var(--space-16));
	top: var(--space-16);
	padding: var(--space-6) var(--space-8);
	align-items: flex-end;
}

nav.menu > ul::before {
	content: '';
	display: block;
	background-color: hsla(0, 0%, 8%, 64%);
	position: absolute;
	inset-inline: 0;
	height: calc(100dvh - var(--space-16));
	top: 0;
	backdrop-filter: saturate(25%) blur(var(--space-1));
}

nav.menu > ul > li {
	position: relative;
	display: block;
	text-align: right;
	z-index: 2;
}

main > section {
	display: block;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;

}
main > section::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

main > section > article {
	padding: var(--space-8);
}

main > section > article > *:not(:last-child) {
	margin-bottom: var(--space-8);
}

main > section > article > * {
	width: 100%;
	display: block;
	text-align: left;
}

/* Typography in Articles */
main > section > article h1 {
	font-size: var(--font-2xl);
	line-height: var(--lh-2xl);
	color: var(--light);
}

main > section > article h2 {
	font-size: var(--font-lg);
	line-height: var(--lh-lg);
	color: var(--light);
	margin-bottom: var(--space-4);
}

main > section > article h3 {
	font-size: var(--font-md);
	line-height: var(--lh-md);
	color: var(--light);
	margin-bottom: var(--space-4);
}

main > section > article h4 {
	font-size: var(--font-sm);
	line-height: var(--lh-sm);
	color: var(--light);
	margin-bottom: var(--space-4);
}

main > section > article > h1.mainTitle,
main > section > article p {
	font-size: var(--font-md);
	line-height: var(--lh-md);
	color: var(--light);
	margin-top: 0;
	font-weight: 300;
}

main > section > article ul {
	list-style: disc;
	padding-left: var(--space-6);
	margin: var(--space-4) 0;
}

main > section > article ol {
	list-style: decimal;
	padding-left: var(--space-6);
	margin: var(--space-4) 0;
}

main > section > article ul li,
main > section > article ol li {
	font-size: var(--font-md);
	line-height: var(--lh-md);
	color: var(--light);
	font-weight: 300;
	margin-bottom: var(--space-2);
}

main > section > article ul ul,
main > section > article ol ol {
	margin: var(--space-2) 0;
}

main > section > article > p:first-child {
	margin-top: var(--space-10);
}

main > section > article strong {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	font-weight: 600;
}

main > section > article a {
	font-size: inherit;
	line-height: inherit;
	text-decoration-thickness: 0.08rem;
	text-underline-offset: 0.25rem;
	color: inherit;
	display: inline;
}

main > section > article input[name="filter"] {
	padding: var(--space-1) var(--space-2);
	line-height: var(--lh-xs);
	font-size: var(--font-xs);
	font-family: 'code', monospace;
	height: var(--lh-xs);
	margin: 0;
	outline: none;
	color: var(--dark);
	background-color: var(--light);
	border: none;
	width: auto;
	max-width: 100%;
}

main > section > article input[name="filter"]:focus {
	outline: 0.125rem solid var(--gray);
	outline-offset: 0.125rem;
}

main > section > article code {
	padding: var(--space-1) var(--space-2);
	font-family: 'code', monospace;
	font-size: var(--font-sm);
	color: var(--light);
}

main > section > article pre {
	padding: var(--space-4);
	overflow-x: auto;
	margin: var(--space-4) 0;
}

main > section > article pre code {
	background-color: transparent;
	padding: 0;
	color: var(--light);
}

/* Custom Scrollbar */
.scroll {
	display: none;
}

.scroll.show {
	display: inline-block;
	position: fixed;
	width: 0.375rem;
	top: calc(50% + 2rem);
	right: var(--space-3);
	height: 6rem;
	max-height: calc(100dvh - 5rem);
	transform: translate(0, -50%);
}

.scroll > .track {
	position: absolute;
	inset-inline: 0;
	height: 100%;
	background-color: var(--dark);
}

.scroll.grabbing > .track {
	background-color: var(--gray);
}

.scroll > .thumb {
	background-color: var(--light);
	left: 0;
	position: absolute;
	inset-inline: 0;
	min-height: 0.375rem;
	cursor: grab;
}

.scroll.grabbing > .thumb {
	background-color: var(--color);
	cursor: grabbing;
}

/* Notifications */
main > aside#notifications {
	position: fixed;
	top: var(--space-10, 4rem);
	right: 0;
	z-index: 100;
}

main > aside#notifications > div {
	position: relative;
	padding: var(--space-4);
	margin: var(--space-4);
	overflow: hidden;
}

main > aside#notifications > div::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	inset-inline: 0;
	height: 100%;
	background-color: var(--color);
	opacity: 0.5;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Disable custom scrollbar for reduced motion */
	.scroll {
		display: none !important;
	}

	/* Disable color animation */
	#colorGeneratedVariable {
		display: none;
	}
}

/* Responsive - Desktop */
@media screen and (min-width: 48rem) {
	body {
		flex-direction: column-reverse;
	}
	
	nav {
		border-top: var(--border-sm) solid var(--dark);
		border-bottom: 0;
	}
	
	nav > button {
		display: none;
	}
	
	nav > ul {
		display: flex;
		width: fit-content;
		flex-direction: row;
		gap: var(--space-4);
		height: var(--space-16);
		align-content: center;
		align-items: center
	}
	
	nav > ul > li {
		padding: 0;
		display: inline-block;
		list-style: none;
		height: 2.25rem;
		line-height: 2.25rem;
	}
	
	main > aside#notifications {
		top: 0;
	}
}

/* Hover Effects */
@media (hover: hover) {
	a:hover {
		color: var(--color);
	}
	
	nav > a:hover > svg {
		fill: var(--color);
	}
	
	nav > button:hover > svg {
		fill: var(--color);
		transition: transform var(--transition-slow);
	}
}