/*
	Theme Name: grgarside
	Theme URI: https://georgegarside.com/blog/
	Description: George Garside Website Theme
	Author: George Garside
	Author URI: https://www.georgegarside.com/
	Version: 1.0
*/

:root {
	color-scheme: light dark;
}

.background-right-slope {
	clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%);
}

.comment-reply-link::after {
	content: " \21b5 ";
}

.wp-block-comments .comment p {
	margin: 0;
}

.wp-block-post-comments-form {
	.comment-form {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: masonry;
		grid-gap: 1em;

		@media (min-width: 600px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	p {
		margin: 0;
	}

	.comment-notes {
		color: #777;
		grid-column-start: 1;
		grid-column-end: 3;
	}

	label {
		font-size: 0.9em;
	}

	input:not([type="submit"]), textarea {
		border: 1px solid #bfcfda;
		border-radius: 4px;
		width: calc(100% - 24px);
		font-size: 1em;
		padding: 8px;
		line-height: 1.4;
		resize: none;
	}

	textarea {
		height: 12em;
	}

	input[type="submit"] {
		line-height: 1;
	}

	label[for="author"]::before {
		content: "Display ";
	}

	label[for="email"]::after {
		content: " (private, no spam, only for comment replies)";
	}

	.comment-form-url, .required, .comment-notes, .required-field-message {
		display: none;
	}
}

/* Maths */
.maths-fbox {
	--maths-colour: var(--wp--preset--color--dark);
	color: var(--maths-colour);
	border: 2px solid var(--maths-colour);
	padding: 2px 4px;
}

.maths-shift {
	--maths-colour: rgb(170, 136, 0);
}

.maths-alpha {
	--maths-colour: maroon;
}

/* Code */
pre, code {
	word-wrap: break-word;
	white-space: pre-wrap;
}

.shcb-code-table {
	display: table;
	line-height: 1.7;
	overflow: hidden;
	counter-reset: line;
}

.shcb-line-numbers > .shcb-loc {
	counter-increment: line;
}

.shcb-line-numbers > .shcb-loc::before {
	content: counter(line);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
	text-align: right;
	display: inline-block;
	width: 16px;
	margin-right: 12px;
	font-size: 0.8em;
}

.shcb-language {
	display: none;
}

.language-bash {
	color: var(--wp--preset--color--default);
}

.hljs-string {
	color: var(--wp--preset--color--syntax-string);
}
.hljs-keyword, .hljs-built_in, .hljs-tag {
	color: var(--wp--preset--color--syntax-keyword);
}
.hljs-default {
	color: var(--wp--preset--color--syntax-default);
}
.hljs-meta {
	color: var(--wp--preset--color--syntax-meta);
}
.hljs-variable {
	color: var(--wp--preset--color--syntax-variable);
}
.hljs-title {
	color: var(--wp--preset--color--syntax-title);
}
.hljs-number {
	color: var(--wp--preset--color--syntax-number);
}
.hljs-type {
	color: var(--wp--preset--color--syntax-type);
}
.hljs-comment {
	color: var(--wp--preset--color--mg);
}

.hljs-keyword, .hljs-tag > .hljs-name {
	font-weight: bold;
}

p > code {
	font-size: 1.1em;
}

.content-basis {
	flex: 1 1 var(--wp--style--global--content-size)
}

.wp-block-navigation.is-vertical.siteslinks {
	.wp-block-navigation__container {
		display: unset;
	}

	.wp-block-navigation-item {
		align-items: unset;
		display: grid;
		grid-template-areas:
			"disclosure title  "
			".......... content";
		column-gap: var(--wp--preset--spacing--20);
		grid-template-columns: auto 1fr;

		&.has-child {
			grid-template-rows: 1.5em auto;
			padding-bottom: var(--wp--preset--spacing--40);
			row-gap: var(--wp--preset--spacing--20);

			> .wp-block-navigation-item__content > .wp-block-navigation-item__label {
				font-size: var(--wp--preset--font-size--medium);
			}
		}

		&:has(> button[aria-expanded="true"]) > .wp-block-navigation-item__content > .wp-block-navigation-item__description {
			opacity: 0;
			transform: translateY(4px);
		}
	}

	.wp-block-navigation__submenu-icon {
		align-self: unset;
		grid-area: disclosure;
		padding-top: 0.5em;
		transition: transform .2s ease-out;

		&[aria-expanded="false"] {
			transform: rotate(-90deg) translateX(-0.5em) translateY(-0.5em);
		}
	}

	.wp-block-navigation-item__description {
		display: block;
		transition: opacity .2s ease-out, transform .2s ease-out;

		.has-child > .wp-block-navigation-item__content > & {
			padding-left: 1.9em;
		}
	}

	.wp-block-navigation-item__label {
		grid-area: title;
		font-weight: bold;
	}

	.wp-block-navigation-item__content {
		display: flex;
		flex-direction: column;
		color: unset;
		padding: 0;
		a& > :first-child:hover {
			color: var(--wp--preset--color--a);
			.has-header-gradient-background & {
				color: color-mix(in srgb, var(--wp--preset--color--a), white 73%);
			}
		}
	}

	.wp-block-navigation__submenu-container {
		position: unset;
		display: flex;
		flex-direction: unset;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
		grid-area: content;
		margin-left: 1.9em;
		margin-bottom: var(--wp--preset--spacing--20);
		border: none;
		background: none;
		color: unset;
		height: unset;
		width: unset;
		transition: opacity .2s ease-out, transform .2s ease-out;
		visibility: visible;

		[aria-expanded="false"] ~ & {
			opacity: 0;
			transform: translateY(-4px);
		}
	}
}

.home > .wp-site-blocks > .wp-block-group.has-header-gradient-background:first-child {
	position: relative;
	background: none !important;
	&::before {
		background: var(--wp--preset--gradient--header);
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - 6vh)); /* 6vh from padding on .wp-block-group */
	}
}

.iso-stack {
	display: grid !important;
	grid-template-areas: "stack";
	transform: rotateX(55deg) translateX(-5%) translateY(40%) rotateZ(45deg);
	transform-style: preserve-3d;
	width: 44%;
	margin: 0 auto;
	max-width: 100%;
	box-sizing: border-box;

	figure {
		grid-area: stack;
		margin: 0;
		width: 100%;
		height: auto;
		max-width: 100%;
		transition: transform .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	}

	figure:nth-child(1) {
		transform: rotateY(-90deg) translateX(120%) rotateY(90deg);
		&:has(~ :hover) {
			transform: rotateY(-90deg) translateX(175%) rotateY(90deg);
		}
	}
	figure:nth-child(2) {
		transform: rotateY(-90deg) translateX(80%) rotateY(90deg);
 		&:has(~ :hover) {
			transform: rotateY(-90deg) translateX(135%) rotateY(90deg);
		}
	}
	figure:nth-child(3) {
		transform: rotateY(-90deg) translateX(40%) rotateY(90deg);
 		&:has(~ :hover) {
			transform: rotateY(-90deg) translateX(95%) rotateY(90deg);
		}
	}
	figure:nth-child(4) {
		transform: rotateY(-90deg) translateX(0%) rotateY(90deg);
	}

	img {
		object-fit: cover;
		box-shadow: var(--wp--preset--shadow--natural);
	}

	figcaption {
		color: var(--wp--preset--color--white) !important;
		text-shadow: 1px 1px 5px black !important;
	}
}

.align-items-baseline {
	align-items: baseline;
}

[class*="wp-image-"]:not([style]) {
	zoom: 0.5;
}

img[src*="/casio-calculator-tutorials/"][src*=".png"] {
	image-rendering: pixelated;
}