/* =================================================================
   Snårskogen Productions - overrides for the Solarize theme
   Loaded last by base.html.twig:45, so no !important is needed.
   ================================================================= */

/* -----------------------------------------------------------------
   Header
   The theme absolutely positions #nav to the header's right edge
   (style.css:606), which slides the menu over a long site title.
   #header > .container is the real parent of both the h1 and #nav.
   ----------------------------------------------------------------- */

#header > .container {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;              /* never let the menu drop to its own row */
	gap: 2rem;
	height: 100%;                   /* vertically centers both in the 4em band */
}

#header h1 {
	/* h1 wraps #logo here, not the other way around */
	margin: 0;
	padding: 0;
	flex: 0 1 auto;
	min-width: 0;
}

#logo {
	font-size: clamp(1.1rem, 3vw, 2em);
	white-space: nowrap;
}

#nav {
	position: static;               /* back into the flow */
	top: auto;
	right: auto;
	margin-left: auto;              /* keeps the theme's right alignment */
	min-width: 0;                   /* shrink instead of shoving the title out */
}

#nav > ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding-left: 0;
	white-space: nowrap;
}

#nav > ul > li a {
	line-height: 2.5em;             /* theme's 4em inflates the flex row */
}

/* the theme hides the logo and centers the menu on the front page */
.homepage #header > .container {
	justify-content: center;
}

/* -----------------------------------------------------------------
   Main content
   ----------------------------------------------------------------- */

#main.wrapper.style4,
#main.wrapper.plain {
	/* sticky footer on short pages: viewport minus the 4em header
	   band and the 4em footer band */
	min-height: calc(100vh - 8em);
	min-height: calc(100dvh - 8em);

	/* banner bleeds down from the header and dissolves into white
	   before the content starts */
	background-color: #ffffff;
	background-image:
		linear-gradient(to bottom,
			rgba(255, 255, 255, 0.78) 0,
			rgba(255, 255, 255, 0.94) 260px,
			rgba(255, 255, 255, 1.00) 480px),
		url('images/banner.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

/* -----------------------------------------------------------------
   Footer
   Mirrors the header band, cropped to the bottom of the same image.
   .wrapper.style1 already supplies the image + cover from
   style.css:477, so only the crop position is overridden here.
   ----------------------------------------------------------------- */

.wrapper.style1.footer-wrapper {
	background-position: center bottom;
}

.footer-wrapper #footer {
	height: 4em;                    /* identical to #header */
	padding: 0;                     /* kills the theme's 6em 0 2em */
	background: rgba(0, 0, 0, 0.5); /* identical overlay to #header */
	color: white;
}

.footer-wrapper #footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.footer-wrapper #copyright {
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 0.9em;
	opacity: 0.7;
}

.footer-wrapper #footer ul.icons {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.footer-wrapper #footer ul.icons li {
	padding: 0 0 0 1em;
}

.footer-wrapper #footer ul.icons li a {
	display: block;
	color: white;
	opacity: 0.75;
}

.footer-wrapper #footer ul.icons li a:hover {
	opacity: 1;
}

.footer-wrapper #footer ul.icons li a svg {
	display: block;
}

/* -----------------------------------------------------------------
   Mobile
   ----------------------------------------------------------------- */

/* replaces the missing css/images/toggle.svg (style-narrower.css:148) */
#titleBar .toggle:after {
	background: none;
	border-top: 3px solid rgba(255, 255, 255, .75);
	border-bottom: 3px solid rgba(255, 255, 255, .75);
	box-shadow: 0 5px 0 0 rgba(255, 255, 255, .75) inset;
	height: 13px;
	width: 20px;
}

@media screen and (max-width: 736px) {
	.footer-wrapper #footer {
		height: auto;
		padding: 1.25em 0;
	}

	.footer-wrapper #footer .container {
		flex-direction: column;
		gap: 0.75em;
	}

	.footer-wrapper #copyright {
		text-align: center;
	}

	.footer-wrapper #footer ul.icons li {
		padding: 0 0.75em;
	}
}