/*
 Theme Name:   William Mulholland (GeneratePress Child)
 Theme URI:    https://williammulholland.com.au/
 Description:  Recreation of the original williammulholland.com.au branding on GeneratePress + native Gutenberg blocks. Global styling lives in GeneratePress theme settings; this stylesheet covers only what GeneratePress settings and native blocks cannot express, plus the slider and lightbox presentation.
 Author:       Local recreation build
 Template:     generatepress
 Version:      2.4.0
 License:      GNU General Public License v2 or later
 Text Domain:  william-mulholland
*/

/*
 * SCOPE
 * -----
 * Colours, typography, spacing, container width and sidebar proportion are set
 * in Appearance > Customize (GeneratePress). The rules below exist only because
 * GeneratePress has no control for them. Each is labelled with its reason.
 */

/* 1. Original typeface (Droid Sans). */
@import url("https://fonts.googleapis.com/css?family=Droid+Sans:regular,bold");

/* 2. Header height. The original header was min-height:120px; GeneratePress
      has no such setting. */
.site-header .inside-header {
	min-height: 120px;
}

/* 3. Site title letter-spacing (-0.03em in the original). GeneratePress has no
      letter-spacing control. */
.main-title {
	letter-spacing: -0.03em;
}

/* 4. Right sidebar. GeneratePress pads every widget by 40px, which does not fit
      the original 190px sidebar (it left ~110px usable and clipped the 200px
      sidebar image). The original sidebar had no side padding, only a divider. */
.sidebar .widget,
.widget-area .widget {
	padding: 0 0 1.5em 0;
}

#right-sidebar.sidebar {
	border-left: 1px solid #333333;
	padding-left: 17px;
	margin-left: 13px;
}

/* 5. Primary navigation item spacing (original: padding 10px 14px, 10px gutter).
      GeneratePress uses a uniform 20px padding. */
.main-navigation .main-nav ul li a {
	padding: 10px 14px;
	margin-left: 10px;
	line-height: 1.5;
}

/* 6. Page content separator (the original `.node` rule). */
.entry-content {
	border-bottom: 1px solid #333333;
	padding-bottom: 20px;
}

/* 7. Full-width region below the header.
      The original site places the 900x400 slider ABOVE the content + sidebar
      row, spanning the full container width. In a classic theme that area sits
      outside the content column, so it is a widget region rendered here. Its
      content is ordinary blocks (a native Gallery block) — never PHP output. */
.wm-below-header {
	width: 100%;
	clear: both;
	background-color: #000000;
}

.wm-below-header .wm-below-header-widget {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 0 10px 0;   /* matches the original #slides padding */
	box-sizing: border-box;
}

/* ==========================================================================
   8. HOMEPAGE SLIDER — presentation
   --------------------------------------------------------------------------
   The slides are ordinary images inside a NATIVE GALLERY BLOCK, edited in the
   block editor (add / remove / reorder / replace). Dimensions and cropping match
   the original #slideshow: 900x400, object-fit: cover.
   ========================================================================== */
.wm-slider.wp-block-gallery {
	position: relative !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background-color: #000000;
	aspect-ratio: 900 / 400;
}

.wm-slider.wp-block-gallery figure.wp-block-image {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	transform: translateX(100%);
	transition: transform 0.35s ease;   /* the original used a 350ms slide */
}

.wm-slider.wp-block-gallery figure.wp-block-image.wm-slide-prev {
	transform: translateX(-100%);
}

.wm-slider.wp-block-gallery figure.wp-block-image.wm-slide-active {
	transform: translateX(0);
}

/* No-JS fallback: show the first slide rather than an empty box. */
.wm-slider.wp-block-gallery:not(.wm-slider--ready) figure.wp-block-image:first-child {
	transform: translateX(0);
}

.wm-slider.wp-block-gallery figure.wp-block-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Arrows.
   The original theme pointed at slides_arrows.png sprite positions that do not
   exist in the shipped sprite (it is 200x200 with artwork only in the top-left
   ~84x52px), so those arrows rendered blank. These are drawn as inline SVG so
   they are always visible, at the original 38x38 size and edge positions.
   The original revealed them on hover only; they sit at 85% opacity here so
   they are discoverable and keyboard-usable. */
.wm-slider__nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	pointer-events: none;
}

.wm-slider__prev,
.wm-slider__next {
	position: absolute;
	top: 50%;
	margin-top: -19px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	cursor: pointer;
	pointer-events: auto;
	background-color: rgba(0, 0, 0, 0.45);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	opacity: 0.85;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	text-indent: -9999px;
	overflow: hidden;
}

.wm-slider__prev {
	left: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.5 5 8l5.5 5.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wm-slider__next {
	right: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wm-slider__prev:hover,
.wm-slider__prev:focus,
.wm-slider__next:hover,
.wm-slider__next:focus {
	background-color: #019cff;
	opacity: 1;
	outline: none;
}

.wm-slider__prev:focus-visible,
.wm-slider__next:focus-visible,
.wm-slider__dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Pagination dots. Same story as the arrows: the sprite positions the original
   referenced are transparent in the shipped sprite, so these are drawn in CSS. */
.wm-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 11;
	display: flex;
	gap: 10px;
}

.wm-slider__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	opacity: 0.85;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wm-slider__dot.is-current {
	background-color: #019cff;
	border-color: #019cff;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wm-slider.wp-block-gallery figure.wp-block-image {
		transition: none;
	}
}

/* ==========================================================================
   9. GALLERY LIGHTBOX — presentation
   --------------------------------------------------------------------------
   Presentation only. The viewer is built by js/wm-lightbox.js on top of the
   native Gallery block's own links, so the gallery stays fully editable.
   ========================================================================== */
html.wm-lightbox-open {
	overflow: hidden;
}

.wm-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background-color: rgba(0, 0, 0, 0.92);
	display: none;
}

.wm-lightbox.is-open {
	display: block;
}

.wm-lightbox__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wm-lightbox__stage {
	margin: 0;
	max-width: 92vw;
	text-align: center;
}

.wm-lightbox__stage img {
	display: block;
	margin: 0 auto;
	max-width: 92vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	border: 0;
}

.wm-lightbox__stage figcaption {
	color: #bbbbbb;
	font-size: 12.8px;
	padding-top: 8px;
}

.wm-lightbox__close,
.wm-lightbox__prev,
.wm-lightbox__next {
	position: absolute;
	width: 44px;
	height: 44px;
	line-height: 1;
	font-size: 26px;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid #555555;
	border-radius: 3px;
	cursor: pointer;
	padding: 0;
}

.wm-lightbox__close { top: 14px; right: 14px; font-size: 30px; }
.wm-lightbox__prev { left: 14px; top: 50%; margin-top: -22px; }
.wm-lightbox__next { right: 14px; top: 50%; margin-top: -22px; }

.wm-lightbox__close:hover,
.wm-lightbox__close:focus,
.wm-lightbox__prev:hover,
.wm-lightbox__prev:focus,
.wm-lightbox__next:hover,
.wm-lightbox__next:focus {
	background-color: #019cff;
	border-color: #019cff;
}

.wm-lightbox__counter {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	text-align: center;
	color: #999999;
	font-size: 12.8px;
}

/* ==========================================================================
   10. Overflow safety and responsive tuning.
   ========================================================================== */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

img,
iframe,
table,
video,
.wp-block-embed {
	max-width: 100%;
}

@media (max-width: 900px) {
	.wm-below-header .wm-below-header-widget {
		padding: 14px 14px 10px 14px;
	}
}

@media (max-width: 768px) {
	.main-navigation .main-nav ul li a {
		margin-left: 0;
	}
	#right-sidebar.sidebar {
		border-left: 0;
		padding-left: 0;
		margin-left: 0;
		border-top: 1px solid #333333;
		padding-top: 20px;
	}
	.wm-slider__prev,
	.wm-slider__next {
		opacity: 0.95;
	}
	.wm-lightbox__prev,
	.wm-lightbox__next {
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   11. Slider controls — high-contrast override
   --------------------------------------------------------------------------
   The arrows and dots render, but at 45%-black with a thin white chevron they
   were effectively invisible over photography. These rules keep the original
   geometry (edges, vertically centred, 12px dots) but use the site's accent
   colour #019cff — the same colour the original used for links and buttons —
   so the controls are clearly visible and obviously clickable.
   ========================================================================== */
.wm-slider__prev,
.wm-slider__next {
	width: 44px;
	height: 44px;
	margin-top: -22px;
	background-color: #019cff;
	background-size: 18px 18px;
	border: 0;
	opacity: 1;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
	transition: background-color 0.2s ease;
}

.wm-slider__prev { left: 12px; }
.wm-slider__next { right: 12px; }

.wm-slider__prev:hover,
.wm-slider__prev:focus,
.wm-slider__next:hover,
.wm-slider__next:focus {
	background-color: #0178c4;
	opacity: 1;
	outline: none;
}

.wm-slider__prev:focus-visible,
.wm-slider__next:focus-visible,
.wm-slider__dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.wm-slider__dots {
	bottom: 12px;
	gap: 10px;
}

.wm-slider__dot {
	width: 12px;
	height: 12px;
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid #ffffff;
	opacity: 1;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.65);
}

.wm-slider__dot.is-current {
	background-color: #019cff;
	border-color: #ffffff;
	opacity: 1;
}

/* ==========================================================================
   12. Breadcrumbs
   --------------------------------------------------------------------------
   The original site shows a breadcrumb trail on every inner page and none on
   the homepage. WordPress core has no breadcrumb block and GeneratePress Free
   has no breadcrumb feature, so the trail is output by the theme (see
   wm_render_breadcrumbs) and styled here to match the original rules:
     #breadcrumbs { font-size: 0.89em; margin: 10px 0; }
     #breadcrumbs a { color: #ffffff }
     #breadcrumbs a:hover { color: #019cff; text-decoration: underline }
   ========================================================================== */
.wm-breadcrumbs-wrap {
	width: 100%;
	clear: both;
	background-color: #000000;
}

.wm-breadcrumbs {
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	font-size: 0.89em;          /* 11.39px against the 12.8px body size */
	line-height: 1.5;
	color: #bbbbbb;
	box-sizing: border-box;
}

.wm-breadcrumbs .breadcrumb {
	margin: 10px 0;             /* matches the original margin: 10px 0 */
}

.wm-breadcrumbs a {
	color: #ffffff;
	text-decoration: none;
}

.wm-breadcrumbs a:hover,
.wm-breadcrumbs a:focus {
	color: #019cff;
	text-decoration: underline;
}

.wm-breadcrumb-sep {
	color: #666666;
}

.wm-breadcrumb-current {
	color: #bbbbbb;
}

/* Screen-reader-only "You are here", as the original used element-invisible. */
.wm-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 900px) {
	.wm-breadcrumbs {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* ==========================================================================
   13. Contact form (Contact Form 7)
   --------------------------------------------------------------------------
   Minimal styling so the form fields match the original site's form, which
   used: 1px #acacac borders, 3px radius, 4px 5px padding, a #019cff submit
   button with a 1px #888 border and bold white text, and #454444 on hover.
   ========================================================================== */
.wpcf7-form label {
	display: block;
	color: #bbbbbb;
	font-size: 12.8px;
	margin-bottom: 2px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="subject"],
.wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background-color: #ffffff;
	color: #333333;
	border: 1px solid #acacac;
	border-radius: 3px;
	padding: 4px 5px;
	font-size: 12.8px;
	margin-bottom: 10px;
}

.wpcf7-form textarea {
	height: 120px;
}

.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
	background-color: #019cff;
	border: 1px solid #888888;
	border-radius: 0;
	color: #ffffff;
	padding: 4px 6px;
	font-size: 12.8px;
	font-weight: bold;
	text-shadow: 1px 1px 1px #300033;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
	width: auto;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
	background-color: #454444;
}

.wpcf7-not-valid-tip {
	color: #ff6b6b;
	font-size: 11.5px;
	display: block;
	margin-top: -6px;
	margin-bottom: 8px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border: 1px solid #ff6b6b;
	color: #ff6b6b;
}

.wpcf7 form.sent .wpcf7-response-output {
	border: 1px solid #46b450;
	color: #bbbbbb;
}

.wpcf7-response-output {
	border: 1px solid #555555;
	color: #bbbbbb;
	margin: 10px 0;
	padding: 8px;
	font-size: 12.8px;
}

.wpcf7-spinner {
	margin: 0 8px;
}

/* ==========================================================================
   14. Responsive: content + sidebar row
   --------------------------------------------------------------------------
   Desktop keeps the original two-column layout (678px content / 190px sidebar
   side by side). Below the container width the row stacks and the sidebar
   becomes a full-width block underneath the content, inset by the same amount
   as the content so it is not flush against the viewport edge.
   ========================================================================== */
@media (max-width: 900px) {

	/* stack the row */
	.separate-containers .site-content,
	.site-content {
		flex-direction: column;
		flex-wrap: wrap;
		max-width: 100%;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
	}

	#primary.content-area,
	.content-area {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	#right-sidebar.sidebar,
	.sidebar.is-right-sidebar {
		flex: 1 1 auto;
		order: 10;
		width: 100%;
		max-width: 100%;
		margin: 24px 0 15px 0;
		padding: 20px 0 0 0;
		border-left: 0;
		border-top: 1px solid #333333;
		box-sizing: border-box;
		text-align: left;
	}

	/* the sidebar blocks keep the content's left edge */
	#right-sidebar .widget,
	#right-sidebar .wp-block-group {
		margin-left: 0;
		padding-left: 0;
		text-align: left;
	}

	/* the divider sits above the block, so no extra top padding needed */
	.wm-below-header .wm-below-header-widget {
		padding: 14px 14px 10px 14px;
	}
}

/* Small phones: keep the sidebar readable. */
@media (max-width: 480px) {

	.separate-containers .site-content,
	.site-content {
		padding-left: 12px;
		padding-right: 12px;
	}

	#right-sidebar.sidebar,
	.sidebar.is-right-sidebar {
		margin-top: 20px;
		padding-top: 16px;
	}

	#right-sidebar .widget img,
	#right-sidebar .wp-block-image img {
		max-width: 100%;
		height: auto;
	}
}

/* ==========================================================================
   15. Sidebar — final override
   --------------------------------------------------------------------------
   GeneratePress outputs .widget-area .widget{padding:30px} and
   .sidebar .widget{font-size:17px} with the same specificity as the child
   stylesheet but later in the cascade, so the earlier rules could not win.
   These declarations are marked !important on purpose, and are scoped to the
   sidebar only. Target values come from the original theme: no widget padding,
   1px divider, 190px column (21% of 900px), body-sized text (12.8px).
   ========================================================================== */

/* No side padding inside the sidebar, and text at the site's body size. */
.sidebar .widget,
.widget-area .widget {
	padding: 0 0 1.5em 0 !important;
	font-size: 12.8px !important;
	background-color: transparent !important;
}

#right-sidebar.sidebar {
	border-left: 1px solid #333333;
	padding-left: 17px;
	margin-left: 13px;
}

/* GeneratePress wraps widgets in .inner-padding — neutralise that too. */
.sidebar .widget .inner-padding,
.sidebar .inner-padding {
	padding: 0 !important;
}

/* Block gaps inside sidebar widgets should be tight, not Gutenberg default. */
#right-sidebar .wp-block-group,
#right-sidebar .wp-block-group__inner-container {
	gap: 0.35em !important;
}

#right-sidebar .wp-block-heading,
#right-sidebar h1,
#right-sidebar h2,
#right-sidebar h3 {
	margin-top: 0 !important;
}

#right-sidebar .wp-block-image {
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   16. Sidebar — responsive
   --------------------------------------------------------------------------
   Desktop keeps the two-column layout. Below the container width the row
   stacks and the sidebar becomes a full-width block beneath the content, inset
   by the same amount as the content so it is not flush against the edge.
   ========================================================================== */
@media (max-width: 900px) {

	#right-sidebar.sidebar,
	.sidebar.is-right-sidebar {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		float: none !important;
		order: 10 !important;
		margin: 24px 0 15px 0 !important;
		padding: 20px 0 0 0 !important;
		border-left: 0 !important;
		border-top: 1px solid #333333 !important;
		box-sizing: border-box;
		text-align: left !important;
	}

	.site-content .content-area,
	#primary.content-area {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
	}
}

@media (max-width: 480px) {

	#right-sidebar.sidebar,
	.sidebar.is-right-sidebar {
		margin-top: 20px !important;
		padding-top: 16px !important;
	}
}

/* ==========================================================================
   17. Mobile menu toggle — align right
   --------------------------------------------------------------------------
   GeneratePress hides the menu items below 768px and sets
     .nav-align-right .inside-navigation { justify-content: space-between }
   which leaves the hamburger flush LEFT because it is the only visible item.
   These rules move it to the right and give the opened menu its own
   full-width row beneath it.
   ========================================================================== */
@media (max-width: 768px) {

	.main-navigation .inside-navigation,
	.nav-align-right .inside-navigation,
	.nav-align-center .inside-navigation,
	.nav-align-left .inside-navigation {
		justify-content: flex-end !important;
		flex-wrap: wrap;
	}

	.main-navigation .menu-toggle {
		margin-left: auto !important;
		margin-right: 0;
		order: 1;
	}

	/* Opened menu: full width on its own row, under the toggle. */
	.main-navigation .main-nav,
	.main-navigation.toggled .main-nav,
	.main-navigation .main-nav > ul,
	.main-navigation.toggled .main-nav > ul {
		order: 2;
		flex-basis: 100%;
		width: 100%;
		text-align: left;
	}

	.main-navigation .main-nav ul li a {
		text-align: left;
	}
}

/* ==========================================================================
   18. Mobile toggle — align its contents right
   --------------------------------------------------------------------------
   GeneratePress renders the toggle as a FULL-WIDTH button with its icon and
   label centred, so the hamburger sat in the middle of the bar regardless of
   the row justification. This aligns the button's contents to the right edge.
   ========================================================================== */
@media (max-width: 768px) {

	.main-navigation .menu-toggle,
	.main-navigation button.menu-toggle,
	.has-inline-mobile-toggle .main-navigation .menu-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		text-align: right !important;
		margin-left: auto !important;
		order: 1 !important;
		width: auto;
	}
}

/* Keep it right-aligned on very small phones too. */
@media (max-width: 480px) {
	.main-navigation .menu-toggle,
	.main-navigation button.menu-toggle {
		justify-content: flex-end !important;
		text-align: right !important;
	}
}

/* ==========================================================================
   19. Header — navigation inside the header
   --------------------------------------------------------------------------
   The primary navigation is rendered inside <header> (see functions.php), which
   matches the original Drupal structure and lets the branding and the menu
   button share a row on small screens.

   Desktop: branding left, navigation right, inside the 900px container, using
            the original header metrics (min-height 120px, brand 45px offset,
            navigation 50px offset).
   <=900px: one row — branding fills the space, the menu button takes 20% on the
            right. Slider, content+sidebar and footer each get their own row.
   ========================================================================== */

/* ---------------- desktop ---------------- */
.site-header .inside-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	min-height: 120px;
	box-sizing: border-box;
}

.site-header .site-branding-container {
	display: flex;
	align-items: flex-start;
	flex-shrink: 0;
	padding-top: 45px;
}

.site-header .site-logo {
	padding: 0 10px 0 0;
	margin: 0;
	line-height: 0;
	flex-shrink: 0;
}

.site-header .site-branding {
	padding-top: 0;
}

.site-header .main-navigation,
.site-header #site-navigation {
	margin-left: auto;
	padding-top: 50px;
	width: auto;
	max-width: none;
	background-color: transparent;
	flex-shrink: 0;
	order: 2;
	clear: none;
}

/* ---------------- tablet + mobile ---------------- */
@media (max-width: 900px) {

	.site-header {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		min-height: 0 !important;
		padding: 8px 14px !important;
		box-sizing: border-box;
	}

	.site-header .inside-header {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
	}

	.site-header .site-branding-container {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		padding-top: 0 !important;
		align-items: center !important;
		overflow: hidden;
	}

	.site-header .site-logo { padding: 0 10px 0 0 !important; }
	.site-header .main-title { font-size: 1.55em !important; line-height: 1.1em !important; }
	.site-header .site-description { padding-left: 0 !important; line-height: 1.3em !important; }

	.site-header .main-navigation,
	.site-header #site-navigation {
		flex: 0 0 20% !important;
		max-width: 20% !important;
		width: 20% !important;
		flex-shrink: 0 !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 !important;
		align-self: center;
		box-sizing: border-box;
	}

	.site-header .inside-navigation {
		width: 100% !important;
		justify-content: flex-end !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.site-header .menu-toggle {
		margin: 0 0 0 auto !important;
		padding: 0 0 0 8px !important;
		width: auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		text-align: right !important;
		order: 1 !important;
	}

	.site-header .main-navigation.toggled {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		order: 3 !important;
	}

	.site-header .main-navigation.toggled .inside-navigation { justify-content: flex-start !important; }
	.site-header .main-navigation.toggled .main-nav,
	.site-header .main-navigation.toggled .main-nav > ul { width: 100% !important; flex-basis: 100% !important; }
	.site-header .main-navigation .main-nav ul li a { text-align: left !important; margin-left: 0 !important; }
}