/**
 * Custom styles to immediately follow Tailwind’s `components` layer
 *
 * “Add more opinionated, complex classes like buttons, form controls, alerts,
 * etc; the sort of pre-built components you often see in other frameworks that
 * you might need to override with utility classes.”
 *
 * — from https://tailwindcss.com/docs/plugins#adding-components
 */

/**
 * Post title styles
 *
 * These will be applied to all headings with a `page-title` or `entry-title`
 * class on the frontend and to the post title in the block editor.
 *
 * The supplied styles are meant to match the default `h1` classes from
 * Tailwind Typography.
 */
.page-title,
.entry-title {
	@apply max-w-content mx-auto mb-6 text-3xl font-extrabold text-neutral-900;
}

/**
 * Layout styles for centered content areas
 *
 * If you are controlling the width of your content area with styles applied
 * to its container, you can delete the following styles whose selectors begin
 * with `.page-content >` and `.entry-content >`. For more details, please see
 * the following:
 *
 * https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/
 */

.entry-content > .alignwide {
	/* Wide width from the `theme.json` file */
	@apply max-w-wide;
}

.entry-content > .alignfull {
	@apply max-w-none;
}

.entry-content > .alignleft {
	@apply float-left mr-8;
}

.entry-content > .alignright {
	@apply float-right ml-8;
}

:where(.wp-block-columns) {
	margin-bottom: 0 !important;
}

a {
	text-decoration: none !important;
}

header {
	background-size: cover;
	background-position: center;

	#site-navigation {
		img.linkedin {
			height: 1rem;
		}
	}

	.header-cointainer {
		@apply pt-6 grid items-center;
		height: 75vh;
		position: relative
	}

	.video-container {
		overflow: hidden;
		width: 100%;
		position: absolute;
		z-index: 0;
		top: 0;
		height: 75vh;

		video {
			width: 100%;
		}
	}

	&:not(.home) {
		img.linkedin {
			filter: invert(1);
		}

		h1 {
			background-size: cover;
			background-position: center;
		}
	}


}

footer {
	ul.menu li::before {
		@apply mr-3 italic;
		content: "|";
	}
}

.contact-block {
	@apply relative;

	.overlay {
		@apply absolute drop-shadow-xl;
		top: 15%;
		z-index: 1000;
		width: 40vw;
		margin-left: 15vw;
	}
}

.text-over-image {
	@apply relative;
	overflow: visible;

	.text {
		@apply absolute;
		left: -10vw;
		top: 10vw;
	}
}

.overlay-icons {
	@apply absolute drop-shadow-xl p-5;
	width: 40vw;

	img {
		width: 100px;
	}

	p {
		width: 250px;
	}
}