/*
Theme Name: MG Portfolio
Version: 1.0.0
*/

/* ==================================================================================================== */
/* Base/Reset CSS
/* ==================================================================================================== */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;

	/* Useful for url#anchors */
	scroll-behavior: smooth;

	/* Respects user defined font preferences */
	font-size: 100%;

	/* Use a more-intuitive box-sizing model */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	/* Allow percentage-based heights */
	height: 100%;
}

body {
	/* Disabled subpixel antialiasing across MacOS/iOS systems */
	-webkit-font-smoothing: antialiased;
	
	/* Allow percentage-based heights */
	height: 100%;
}

*,
*:before,
*:after {
	/* Use a more-intuitive box-sizing model */
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

:target {
	/* Useful for url#anchors */
	scroll-margin-top: 0;
}

button,
input,
textarea,
select {
	/* Remove built-in form typography styles */
	font: inherit;
}

table {
	table-layout: fixed;
}





/* ==================================================================================================== */
/* Shared Classes
/* ==================================================================================================== */
.scrollMargin {
	scroll-margin: 60px 0 0 0;
}





/* ==================================================================================================== */
/* Custom breakpoints since GenerateBlocks Free doesn't have them
/* ==================================================================================================== */
@media screen and (max-width: 515px) {
	#heroimg img {
		margin-top: -8vw;
	}
}

@media screen and (max-width: 1440px) and (min-width: 1025px) {
	#heroimg {
		border-radius: 0 24px 24px 0;
	}
	
	div.project {
		border-radius: 0;
	}
}





/* ==================================================================================================== */
/* Custom Styling of the Main Nav Menu
/* ==================================================================================================== */

/* Change the breakpoint to 1023px */
@media (min-width: 1023px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
    }
}

/* Remove the default 600px breakpoint */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
    }
}



/* Desktop Styling */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	height: 36px;
	width: 36px;
}

.wp-block-navigation .mainMenuHeader {
	display: none;
}



/* Only apply scrolled styles on desktop */
header {
	background-color: transparent;
	transition: background-color 1s ease;
}

header.scrolled {
	position: sticky;
	top: 0;
	background-color: rgba(39, 40, 46, 0.8);
	backdrop-filter: blur(10px);
}



/* Mobile Styling */
@media (max-width: 1023px) {
	/* Generic Style */
	.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
		color: white;
	}
	
	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		background: #15141A;
		height: 100vh;
	}
	
	/* Container Style */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		padding-top: 0;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		flex-direction: initial;
		gap: 0;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		flex: 0 1 100%;
	}
	
	/* Items Style */
	.wp-block-navigation-link::after {
		background: linear-gradient(to right, #5B5B66 0%, rgba(0, 0, 0, 0) 85%);
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1px;
	}
	
	.wp-block-navigation .wp-block-navigation-item__content {
		text-indent: 24px;
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
	}
	
	.wp-block-navigation .mainMenuHeader .wp-block-navigation-item__content {
		height: 80px;
		font-family: var(--wp--preset--font-family--poppins);
		font-size: var(--wp--preset--font-size--custom-4);
		font-style: normal;
		font-weight: 600;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:nth-last-child(-n+2) {
		flex: 1;
		align-items: center;
		background: #27282E !important;
		padding: 24px 0;
	}
	
	/* Close Button */
	.wp-block-navigation__responsive-container-close {
		margin: 22px 24px 0 0;
	}
}





/* ==================================================================================================== */
/* Custom Styling for my picture :D
/* ==================================================================================================== */
#myPicEffects {
	background: conic-gradient(
		from 0deg,
		rgba(255,255,255,0.25) 0deg 45deg,     /* Red for first quarter */
		transparent 45deg 180deg, /* Transparent for half the circle */
		rgba(255,255,255,0.25) 180deg 225deg,   /* Blue for opposite quarter */
		transparent 225deg 360deg
	);
}