/*
Theme Name: Ungdomsmagasin25
Theme URI: https://gnistdesign.no
Author: Gnist Design
Author URI: https://gnistdesign.no
Description: A boilerplate FSE theme for 2024.
Tags: full-site-editing, block-patterns, accessibility-ready, block-styles, custom-colors, custom-logo, custom-menu, editor-style one-column, template-editing, translation-ready, wide-blocks
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.2
Version: 1.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: ungdomsmagasin25

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Global Normalizer */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

html {
	box-sizing: border-box;
	-ms-overflow-style: scrollbar;
	scroll-behavior: smooth;
}

a:not(.wp-block-navigation-item__content):not(.wp-element-button) {
	text-underline-offset: 30%;

	&:hover {
		text-decoration: none;
	}
}

*,
*::before,
*::after {
	box-sizing: inherit;
	min-width: 0;
	font-synthesis: none !important;
}

:focus-visible {
	border-radius: 12px;
	outline: 1px solid #3D8526;
	outline-offset: 8px;
}

/* FSE Fix for images. */
figure img {
	width: 100%;
	object-fit: contain;
}

.site-footer {
	margin-block-start: 0;
}

.z-index-10 {
	z-index: 10;
}

.rotate {
	transform: rotate(-10deg);
	margin-top: -80px;
	z-index: 10;
	position: relative;

	img {
		transform: scale(1.1);
	}
}

/* Hide elements on desktop */
@media all and (min-width: 1025px) {
	.hide-on-desktop {
		display: none !important;
	}
}

/* Elements on mobile */
@media all and (max-width: 1024px) {
	.hide-on-mobile {
		display: none !important;
	}

	.bottom-on-mobile {
		order: 2;

		&+div {
			order: 1;
		}
	}
}

@media all and (max-width: 783px) {
	.invert-on-mobile {
		flex-direction: column-reverse !important;
	}
}

@media screen and (max-width: 600px) {
	.site-header {
		.wp-block-site-logo {
			max-width: 150px;
		}

		.wp-block-buttons {
			display: none;
		}
	}
}

.wp-block-site-logo {
	img {
		transition: opacity 0.3s ease;
		opacity: 1;
		cursor: pointer;
	}
	.custom-logo-link:hover,
	.custom-logo-link:focus {
		img {
			opacity: 0.7;
		}
	}
}

/* Fix dropdown positioning to expand leftward instead of rightward */
.site-header .wp-block-mlp-language-menu.is-dropdown ul {
	left: auto !important;
	right: 0 !important;
}

.site-header .main-header {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	gap: 20px;

	&:first-child {
		justify-self: start;
	}
	&:last-child {
		justify-self: end !important;
	}

	/* Specifically target the language switcher nav */
	nav:last-child {
		justify-self: end !important;
	}
}

/* Adjust the navigation block breakpoint */
@media screen and (max-width: 673px) {
	html:not( .has-modal-open ) {
		.wp-block-navigation {
			flex: 1 0 auto;
			justify-content: end;
			align-self: center;
			padding-top: 5px;
		}
	}

	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: none !important;
	}

	.site-header .main-header {
		grid-template-columns: min-content 1fr min-content;
		grid-template-areas: "logo language menu";
		gap: 20px;
		padding-right: 20px;

		/* Logo */
		.wp-block-site-logo {
			grid-area: logo;
			width: 64px;
		}

		/* Menu - first child */
		&:first-child {
			grid-area: menu;

			svg {
				width: 35px;
				height: 35px;
			}
		}

		/* Language switcher */
		nav:last-child {
			grid-area: language;
		}
	}
}