/* Human-centric editorial portfolio system. */

@theme {
	--color-primary: #f2f2f2;
	--color-primary-50: #ffffff;
	--color-primary-100: #f7f7f7;
	--color-primary-500: #f2f2f2;
	--color-primary-600: #d9d9d9;
	--color-primary-700: #bdbdbd;
	--color-primary-900: #666666;

	--color-secondary: #9a9a9a;
	--color-secondary-50: #fafafa;
	--color-secondary-100: #e8e8e8;
	--color-secondary-200: #d4d4d4;
	--color-secondary-300: #b0b0b0;
	--color-secondary-500: #8a8a8a;
	--color-secondary-600: #6b6b6b;
	--color-secondary-700: #444444;
	--color-secondary-900: #171717;

	--color-neutral: #151515;
	--color-background: #0b0b0b;
	--color-surface: #111111;
	--color-foreground: #f2f2f2;
	--color-muted: #8c8c8c;
	--color-border: #262626;

	--font-sans: "Open Sans", "Archivo", ui-sans-serif, "Segoe UI", sans-serif;
	--font-mono: "Open Sans", "Archivo", ui-sans-serif, "Segoe UI", sans-serif;
	--font-display: "Open Sans", "Archivo", ui-sans-serif, "Segoe UI", sans-serif;

	--text-sm: .8rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.5rem;
	--text-5xl: 3.5rem;
}

@layer base {
	html,
	body {
		background: var(--color-background);
	}

	body {
		color: var(--color-foreground);
		font-family: var(--font-sans);
		font-weight: 300;
		line-height: 1.65;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	a:hover {
		color: var(--color-foreground);
		text-shadow: none;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-display);
		font-weight: 300;
		line-height: 1;
		letter-spacing: -.03em;
	}

	::selection {
		background: var(--color-foreground);
		color: var(--color-background);
	}
}

@layer components {
	.site-container {
		width: 100%;
		max-width: 78rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: clamp(1.25rem, 3vw, 3.5rem) !important;
		padding-right: clamp(1.25rem, 3vw, 3.5rem) !important;
	}

	.nav-link {
		position: relative;
		padding-block: .2rem;
	}

	.nav-link::after {
		display: none;
	}

	.mobile-menu-details summary::-webkit-details-marker {
		display: none;
	}

	.mobile-menu-details[open] .mobile-menu-icon {
		transform: rotate(90deg);
	}

	.mobile-menu-icon {
		transition: transform .2s ease;
	}

	.mobile-primary-menu > li {
		border-top: 1px solid var(--color-border);
	}

	.mobile-primary-menu > li > a,
	.mobile-primary-menu .sub-menu a {
		display: block;
		text-decoration: none;
		font-weight: 300;
	}

	.mobile-primary-menu > li > a {
		padding: .85rem 0;
	}

	.mobile-primary-menu .sub-menu {
		list-style: none;
		margin: 0 0 .5rem;
		padding: 0 0 0 1rem;
		border-left: 1px solid var(--color-border);
	}

	.mobile-primary-menu .sub-menu a {
		padding: .55rem 0;
	}

	.mob-menu-header-holder {
		display: none !important;
	}

	@media (min-width: 768px) {
		.menu-main-navigation-container > ul > .menu-item-has-children {
			position: relative;
		}

		.menu-main-navigation-container .sub-menu {
			position: absolute;
			top: calc(100% + .7rem);
			left: 0;
			z-index: 50;
			display: none;
			min-width: 14rem;
			margin: 0;
			padding: .7rem 0;
			list-style: none;
			background: var(--color-surface);
			border: 0;
		}

		.menu-main-navigation-container .menu-item-has-children:hover > .sub-menu,
		.menu-main-navigation-container .menu-item-has-children:focus-within > .sub-menu {
			display: block;
		}

		.menu-main-navigation-container .sub-menu .menu-item-has-children {
			position: relative;
		}

		.menu-main-navigation-container .sub-menu .sub-menu {
			top: -.7rem;
			left: 100%;
		}

		.menu-main-navigation-container .sub-menu a {
			display: block;
			padding: .55rem 1rem;
			white-space: nowrap;
			text-decoration: none;
		}
	}

	.btn {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		border: 0;
		color: var(--color-muted);
		padding: 0;
		font-size: var(--text-sm);
		font-weight: 300;
		text-decoration: none;
		background: transparent;
	}

	.btn:hover {
		color: var(--color-foreground);
		background: transparent;
	}

	.card {
		background: transparent;
		border: 0;
		overflow: visible;
	}

	.pill {
		display: inline;
		border: 0;
		background: transparent;
		color: var(--color-muted);
		font-size: var(--text-sm);
		padding: 0;
	}

	.breadcrumbs a {
		text-decoration: none;
	}

	.nav-cta a {
		display: inline-flex;
		align-items: center;
		border: 0;
		color: var(--color-muted) !important;
		padding: 0;
		text-decoration: none !important;
	}

	.nav-cta a:hover {
		color: var(--color-foreground) !important;
		background: transparent;
	}

	.nav-cta .nav-link::after {
		display: none;
	}

	.social-links a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
		border: 0;
		color: var(--color-muted);
		text-decoration: none;
	}

	.social-links a:hover {
		color: var(--color-foreground);
		background: transparent;
	}
}