/*!
Theme Name: schallaboeck-v2
Theme URI: https://baningo.com
Author: baningo GmbH
Author URI: https://baningo.com
Description: Description
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: schallaboeck
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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.

schallaboeck is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */





/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	h1 {
	font-size: 1.5em;
	margin: 0.67em 0;
	}}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	h1 {
	font-size: 2em;
	margin: 0.67em 0;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	h1 {
	font-size: 2em;
	margin: 0.67em 0;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	h1 {
	font-size: 2.5em;
	margin: 0.67em 0;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	h1 {
	font-size: 2.5em;
	margin: 0.67em 0;
}
}




/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */

legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
	display: none;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #000;
	font-family: sans-serif;
	font-size: 17px;
	font-size: 1.1rem;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul, ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

figure {
	margin: 1em 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: royalblue;
}

/* a:visited {
	color: white;
} */

/* a:hover, a:focus, a:active {
	color: midnightblue;
} */

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/



.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
	/* Make sure select elements fit in widgets. */
}

.widget select {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
## baningo custom styling
--------------------------------------------------------------*/
.site-header {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	/* The illustration (main-bg.jpg) has all its content in its left third
	   — the rest is blank. Anchoring left (not the old "right") keeps the
	   tree visible and leaves the naturally-blank right side for the hero
	   text below to sit over. */
	background-position: left center;
	position: relative;
}

/* The illustration is mostly white and previously ran straight into the
   (also white) content area below with no visual break at all. A flat
   solid bar reads as basic — this instead has real depth: a gradient
   strip (not one flat hex value) that a soft color-matched glow bleeds out
   from underneath, rather than a hard-edged rectangle just sitting there. */
.site-header::after {
	/* .site-header:after (identical pseudo-element — the :after/::after
	   syntax difference is cosmetic) already has a rule from the _s
	   boilerplate clearfix earlier in this file: content:""; display:table;
	   table-layout:fixed. That display:table was never overridden here
	   before, and combined with the position/sizing below it silently
	   produced a zero-size element — nothing rendered. Reset explicitly. */
	content: "";
	display: block;
	table-layout: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 6px;
	background: linear-gradient(90deg, #F7931D 0%, #ffb454 50%, #F7931D 100%);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(247, 147, 29, 0.45);
}

.site-branding {
	text-align: center;
	color: #F7931D;
	padding-top: 40px;
}

/*--------------------------------------------------------------
## Hero (front page only) — makes real use of the first ~600px
instead of a mostly-empty illustration with just a logo on it.
--------------------------------------------------------------*/
.hero {
	display: flex;
	align-items: center;
	/* Reserve real hero height instead of the old padding-top:23% trick
	   (which sized the header purely off image aspect ratio, regardless
	   of what — if anything — sat inside it). */
	min-height: 360px;
	padding: 24px 0;
	/* Positioned so it paints above the header's blur layer (see
	   .site-header--page::before), keeping the text sharp. */
	position: relative;
}

/* Same wider side gutters as the inner pages' title band. */
@media screen and (min-width: 783px) {
	.hero__inner {
		padding-left: 48px;
		padding-right: 48px;
	}
}

/* .hero__inner also carries .container, so the hero spans exactly the same
   width as the page content below it. */

/* Desktop nav bar straddles the header's bottom edge (see .site-navigation
   in the Navigation section), so its upper half sits inside the hero —
   the bottom padding has to clear that (~44px) on top of the normal gap,
   or the CTA ends up pressed against the bar. */
@media screen and (min-width: 992px) {
	.hero {
		padding-bottom: 84px;
	}
}


.hero__content {
	width: 100%;
	max-width: 560px;
	margin: 0;
	text-align: left;
}

.hero__eyebrow {
	margin: 0 0 0.25em;
	color: #A6540A;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	/* Same white halo as the inner pages' title band. */
	text-shadow:
		0 0 2px rgba(255, 255, 255, 0.9),
		0 0 6px rgba(255, 255, 255, 0.7);
}

.hero__title {
	margin-top: 0;
	margin-bottom: 0.1em;
	color: #1a1a1a;
	text-shadow:
		0 0 2px rgba(255, 255, 255, 0.9),
		0 0 10px rgba(255, 255, 255, 0.7);
}

.hero__subtitle {
	margin: 0 0 1em;
	color: #1a1a1a;
	font-size: 1.3rem;
	font-weight: 600;
	text-shadow:
		0 0 2px rgba(255, 255, 255, 0.9),
		0 0 10px rgba(255, 255, 255, 0.7);
}

.hero__cta {
	display: inline-block;
	padding: 14px 32px;
	background: linear-gradient(to bottom right, #F9992A 0%, #F28A14 100%);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	border: 0;
	border-radius: 12px;
	box-shadow:
		0 10px 15px -3px rgba(247, 147, 29, 0.3),
		0 4px 6px -4px rgba(247, 147, 29, 0.3);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.hero__cta:hover,
.hero__cta:focus {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	filter: brightness(1.04);
	box-shadow:
		0 14px 22px -4px rgba(247, 147, 29, 0.45),
		0 6px 8px -4px rgba(247, 147, 29, 0.35);
}

@media screen and (max-width: 782px) {
	/* Same approach as the inner pages' title band: copy at the bottom of
	   the band, on the open ground below the horizon, with the tree crowns
	   left visible above it. */
	.hero {
		align-items: flex-end;
		min-height: 300px;
		padding: 24px 0;
	}
}

/* Inner pages (not the front page): a short title band over the
   illustration instead of the tall hero — just enough room for the page
   title, replacing what used to be an empty logo-only header. Clean,
   left-aligned typography rather than a heavy pill wrapped around the
   whole headline — a small eyebrow chip carries the brand accent instead,
   so the title itself stays legible and scales to any length. */
.page-header-band {
	display: flex;
	align-items: center;
	min-height: 280px;
	/* Bottom padding is larger to also clear the upper half of the
	   desktop nav pill, which straddles the header's bottom edge. */
	padding: 72px 0 104px;
}

/* Inner pages: the illustration is softly blurred so the page title
   stands out from it. A backdrop-filter layer over the header's own
   background rather than filter: blur on a copy of the image — no second
   image layer to keep in sync, and no soft, semi-transparent fringe
   around the edges (backdrop-filter doesn't blur past its own box).
   Overrides the _s clearfix's display:table on this pseudo-element. */
.site-header--page::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(2.5px);
	backdrop-filter: blur(2.5px);
	pointer-events: none;
}

/* Positioned so it paints above the blur layer, keeping the title sharp. */
.page-header-band {
	position: relative;
}

/* .page-header-band__inner also carries .container (Bootstrap) in the
   markup — same max-width/centering/gutters as #primary in page.php, so
   the title lines up with the body content's edges below it instead of
   using an independent width here.

   No backdrop behind the title (a frosted card and a white glow were both
   tried and read as foreign to the airy illustration) — instead the text
   is placed where the picture itself is empty, so it needs none. Inner
   pages use a mirrored copy of the illustration (main-bg-flipped.jpg,
   chosen in header.php) with the trees on the right, so the title is
   left-aligned in the blank sky on the left on desktop, and below the
   horizon on mobile (see the max-width: 782px block further down). */
.page-header-band__inner {
	width: 100%;
}

/* Plain small caps text in the deep orange (same treatment as
   .hero__eyebrow on the front page) rather than a solid orange pill —
   the pill competed with the title for attention. */
.page-header-band__eyebrow {
	margin: 0 0 0.5em;
	color: #A6540A;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* Same halo as the title below, scaled down for the small text. */
	text-shadow:
		0 0 2px rgba(255, 255, 255, 0.9),
		0 0 6px rgba(255, 255, 255, 0.7);
}

.page-header-band__title {
	margin: 0;
	color: #1a1a1a;
	/* Tight white halo hugging the letters only (not a backdrop box), so
	   the dark glyphs don't merge with a leaf or trunk passing behind
	   them. Two layers: a crisp near outline plus a softer wider one. */
	text-shadow:
		0 0 2px rgba(255, 255, 255, 0.9),
		0 0 10px rgba(255, 255, 255, 0.7);
}

/* Desktop: the band is far wider than tall, so background-size: cover
   scales the illustration to the full width and the old vertically
   centered crop landed on the trunks, cutting off the leaves above. Anchor
   near the top instead so the leaves of both trees are in view. Per header:
   15% for the page band, the very top for the taller front-page hero,
   which then shows both crowns in full with the horizon right above
   the nav. */
@media screen and (min-width: 783px) {
	.site-header {
		background-position: left top;
	}

	/* Wider side gutters than .container's own 15px, so titles don't run
	   out to the band's edges. */
	.page-header-band__inner {
		padding-left: 48px;
		padding-right: 48px;
	}

	/* Anchored right: the mirrored image has its trees on the right. */
	.site-header--page {
		background-position: right 15%;
	}

	/* The taller front-page hero shows the crowns from the very top. */
	.site-header--front {
		background-position: right top;
	}
}

@media screen and (max-width: 782px) {
	/* The band is narrow here, so background-size: cover scales the
	   illustration by height and the small tree lands dead center — right
	   where centered text sat. Text is pushed to the bottom instead, onto
	   the plain grey ground below the horizon, with the tree's crown left
	   visible above it. min-height (not padding) sets the band height so
	   the horizon stays at a predictable spot above the text. */
	.page-header-band {
		align-items: flex-end;
		min-height: 240px;
		/* No side padding: the inner .container's own 15px gutter then
		   matches the page content below. */
		padding: 24px 0;
	}

	/* Anchored right: the mirrored image has its trees on the right, so
	   the bottom-left — where the title sits — is open ground. */
	.site-header--page {
		background-position: right center;
	}

	.page-header-band__eyebrow {
		font-size: 0.7rem;
	}

	/* Tighter line-height so titles that wrap stay one compact block. */
	.page-header-band__title {
		font-size: 2em;
		line-height: 1.15;
	}

	/* Long (SEO-style) titles: stepped down so they wrap to two or three
	   lines instead of filling the whole band. The class is set in
	   header.php by title length — CSS alone can't size text to fit. */
	.page-header-band__title--long {
		font-size: 1.5em;
	}
}


a, a:hover, a:visited a:active, a:focus {
	color: #F7931D;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.site-branding a:hover {
	text-decoration: none;
}

.site-branding h1 {
	font-weight: 400;
	font-size: 50px;
}

body {
	font-family: "Roboto", Arial, sans-serif;
	font-weight: 400;
	/* Softer than pure black (#000, from the _s boilerplate) — less harsh
	   against the mostly-white layout, standard modern-UI practice. */
	color: #3A3A3A;
}

/* Restrained heading accent: only h1/h2 carry the brand orange, weighted
   bold for real emphasis at the top of the scale. h3-h6 step down to a
   near-black (#1a1a1a) — deliberately darker than body text (#3A3A3A), not
   the same tone as it was before, so they read as headings rather than
   bold body copy at a glance. A real font-size scale replaces the absence
   of one before (only h2/h3 had explicit sizes; h1/h4/h5/h6 fell back to
   the browser's generic UA defaults, unrelated to this design). */
h1, h2, h3, h4, h5, h6, h7 {
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-bottom: 0.75em;
}

h1, h2 {
	color: #F7931D;
}

h3, h4, h5, h6, h7 {
	color: #1a1a1a;
}

h1 {
	font-size: 2.75em;
}

h2 {
	font-size: 2.125em;
}

h3 {
	font-size: 1.625em;
}

h4 {
	font-size: 1.3em;
}

h5 {
	font-size: 1.125em;
}

h6, h7 {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

@media only screen and (max-width: 600px) {
	h1 {
		font-size: 2em;
	}

	/* Stepped down further than before so the page title (2em in the
	   header band) stays clearly the largest heading on a phone, without
	   having to blow it up to a size long titles can't take. */
	h2 {
		font-size: 1.375em;
	}

	h3 {
		font-size: 1.2em;
	}

	h4 {
		font-size: 1.1em;
	}
}

.wp-block-separator {
	background-color: #F7931D;
}

.site-footer {
	width: 100%;
	background: #F7931D;
}

/*--------------------------------------------------------------
## Footer photo strip (CSS scroll-snap, no JS)
--------------------------------------------------------------*/
.photo-strip {
	position: relative;
}

.photo-strip__viewport {
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* Hide the scrollbar (still natively scrollable via touch/trackpad/arrows). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.photo-strip__viewport::-webkit-scrollbar {
	display: none;
	height: 0;
}

.photo-strip__track {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.photo-strip__item {
	/* Always exactly 3 items visible, at every viewport width. Height is
	   tied to width (1:1) to match the slider images, which are square. */
	position: relative;
	flex: 0 0 33.333%;
	scroll-snap-align: start;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.photo-strip__item img {
	/* Absolute positioning (rather than height:100%) guarantees the image
	   fills the item regardless of how width/height attributes on <img>
	   interact with the browser's automatic aspect-ratio sizing. */
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Prev/next arrow buttons, styled like the old Owl nav buttons. */
.photo-strip__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	padding: 0 0 5px;
	border: 0;
	border-radius: 100%;
	font-size: 200%;
	font-weight: bolder;
	line-height: 1;
	color: #fff;
	background-color: rgba(247, 147, 29, 0.8);
	cursor: pointer;
	z-index: 1;
}

.photo-strip__nav:hover,
.photo-strip__nav:focus {
	background-color: rgba(247, 147, 29, 0.95);
}

.photo-strip__nav--prev {
	left: 10px;
}

.photo-strip__nav--next {
	right: 10px;
}

@media screen and (max-width: 600px) {
	.photo-strip__nav {
		width: 44px;
		height: 44px;
		font-size: 140%;
	}
}

/* Respect reduced-motion preferences for the smooth snap scroll. */
@media (prefers-reduced-motion: reduce) {
	.photo-strip__viewport {
		scroll-behavior: auto;
	}
}

.footer-content-container {
	background: #F7931D;
	padding: 40px 5% 32px;
	color: #fff;
	line-height: 1.6;
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 48px;
	max-width: 1140px;
	margin: 0 auto;
}

.footer-col {
	min-width: 0;
}

.footer-content__bottom {
	grid-column: 1 / -1;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.footer-col p,
.footer-col address {
	margin: 0 0 1em;
}

.footer-content a {
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.footer-content a:hover,
.footer-content a:focus {
	text-decoration-thickness: 2px;
}

.footer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	transition: background-color 0.2s, color 0.2s;
}

.footer-social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.footer-content a.footer-social {
	text-decoration: none;
}

.footer-social:hover,
.footer-social:focus {
	background: #fff;
	color: #F7931D;
}

.footer-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 1em;
}

.footer-payments img {
	max-width: 60px;
	height: auto;
	background: #fff;
	border-radius: 4px;
	padding: 3px 5px;
}

.footer-content__legal {
	margin: 0;
}

.footer-navigation {
	text-align: right;
}

.footer-navigation__title {
	margin: 0 0 1em;
	color: #fff;
	font-size: inherit;
	font-weight: bold;
	line-height: inherit;
}

.footer-navigation__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-navigation__menu li {
	margin: 0;
}

@media screen and (max-width: 991px) {
	.footer-content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 600px) {
	.footer-content {
		grid-template-columns: 1fr;
	}

	.footer-navigation {
		text-align: left;
	}
}

/*--------------------------------------------------------------
## Navigation: horizontal bar on desktop, off-canvas panel on mobile
--------------------------------------------------------------*/
.site-navigation {
	position: relative;
}

/* Hamburger toggle button. Always drawn on its own solid chip (rather than
   transparent over the hero photo) so it stays visible regardless of what
   part of the image sits behind it — the photo's brightness varies by
   position/viewport and plain white bars on transparent were disappearing
   against lighter areas. Bars are centered with flexbox (rather than
   hand-placed top/left offsets) so the button can be resized per breakpoint
   without the bars drifting out of alignment. */
.nav-panel-toggle {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background-color: #F7931D;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	z-index: 2;
}

.nav-panel-toggle__bars,
.nav-panel-toggle__bars::before,
.nav-panel-toggle__bars::after {
	width: 18px;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}

.nav-panel-toggle__bars {
	position: relative;
}

.nav-panel-toggle__bars::before,
.nav-panel-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-panel-toggle__bars::before {
	top: -7px;
}

.nav-panel-toggle__bars::after {
	top: 7px;
}

/* Turn the hamburger into an X while the panel is open. Only reached when
   the panel isn't hiding the toggle outright (see the >991px rule below);
   kept for the no-JS-hides-nothing edge case and as a safe default. */
.nav-panel-toggle[aria-expanded="true"] .nav-panel-toggle__bars {
	background-color: transparent;
}

.nav-panel-toggle[aria-expanded="true"] .nav-panel-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-panel-toggle[aria-expanded="true"] .nav-panel-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* On small screens, keep the toggle reachable while the (tall) hero header
   scrolls out of view — mirrors the old fixed navbar's behaviour. The chip
   styling itself is unconditional (see .nav-panel-toggle above); this just
   pins it to the viewport instead of the header. */
@media screen and (max-width: 991px) {
	.nav-panel-toggle {
		position: fixed;
		top: 12px;
		left: 12px;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
		z-index: 1060;
	}
}

/* Only one "close" control at a time: hide the floating toggle while the
   panel is open so it doesn't compete with the panel's own × button. */
.nav-panel-open .nav-panel-toggle {
	display: none;
}

/* Dark backdrop behind the panel. */
.nav-panel-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity .25s ease;
	z-index: 1040;
}

.nav-panel-overlay.is-visible {
	opacity: 1;
}

/* The sliding panel itself. */
.nav-panel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 300px;
	max-width: 85vw;
	background: #fff;
	transform: translateX(-100%);
	transition: transform .3s ease, box-shadow .3s ease;
	z-index: 1050;
	overflow-y: auto;
}

.nav-panel.is-open {
	transform: translateX(0);
	/* Only cast the shadow while open — with blur, a shadow on a fixed
	   element still bleeds a few px past its edge even when the element
	   itself is translated fully off-screen. */
	box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
}

.nav-panel__header {
	display: flex;
	justify-content: flex-end;
	padding: 10px;
}

.nav-panel-close {
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: #333;
	cursor: pointer;
}

/* The × glyph sits low in its line box; nudge it up to the optical centre. */
.nav-panel-close > span[aria-hidden] {
	display: block;
	transform: translateY(-0.08em);
}

.nav-panel__menu {
	list-style: none;
	margin: 0;
	padding: 0 0 20px;
}

.nav-panel__item {
	border-bottom: 1px solid #eee;
}

/* Wraps the link + submenu toggle for one row. Positioning context for the
   toggle button, so its height matches just this row — not the whole <li>,
   which grows taller once the submenu below it is expanded. */
.nav-panel__row {
	position: relative;
}

.nav-panel__link {
	display: block;
	padding: 14px 20px;
	color: #333;
	font-size: 1.05rem;
	font-weight: 600;
}

/* Leave room so link text never sits under the full-height submenu toggle. */
.has-submenu .nav-panel__link {
	padding-right: 56px;
}

.nav-panel__link:hover,
.nav-panel__link:focus {
	background-color: #fdf1e0;
	text-decoration: none;
}

.nav-panel__item.current > .nav-panel__row > .nav-panel__link {
	background-color: #fdf1e0;
	box-shadow: inset 4px 0 0 #F7931D;
	color: #C45A04;
	font-weight: 700;
}

/* Submenu expand/collapse toggle. Sized and colored to read clearly as its
   own control, distinct from the parent link next to it. */
.nav-panel__submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	border: 0;
	border-left: 1px solid #eee;
	background: transparent;
	cursor: pointer;
}

.nav-panel__submenu-toggle:hover,
.nav-panel__submenu-toggle:focus {
	background-color: #fdf1e0;
}

.nav-panel__submenu-toggle span {
	display: block;
	width: 12px;
	height: 12px;
	border-right: 3px solid #F7931D;
	border-bottom: 3px solid #F7931D;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

/* Chevron points "down" (expanded) by default, "up" when collapsed. */
.has-submenu.is-collapsed > .nav-panel__submenu-toggle span {
	transform: rotate(-135deg);
}

.nav-panel__submenu {
	/* Visible by default (no-JS fallback: there'd be no toggle script to
	   ever open it otherwise). With JS running, nav-panel.js adds
	   .is-collapsed to every .has-submenu on load, so in practice submenus
	   start closed and this default only matters if JS fails to run. */
	list-style: none;
	margin: 0;
	padding: 0;
	background: #f9f9f9;
	max-height: 1000px;
	overflow: hidden;
	transition: max-height .25s ease;
}

.has-submenu.is-collapsed > .nav-panel__submenu {
	max-height: 0;
}

.nav-panel__submenu .nav-panel__link {
	padding-left: 36px;
	font-size: .95rem;
}

/* When JS hasn't run (or is disabled), keep the panel usable: show it
   inline instead of hidden off-screen, and always show submenus. */
.no-js .nav-panel {
	position: static;
	width: auto;
	max-width: none;
	transform: none;
	box-shadow: none;
}

.no-js .nav-panel__submenu {
	max-height: none;
}

.no-js .nav-panel-toggle,
.no-js .nav-panel-close,
.no-js .nav-panel__submenu-toggle {
	display: none;
}

/* Zero-size marker at the nav's natural (pre-sticky) position. Always in
   the DOM — only meaningful to the IntersectionObserver on desktop, so it's
   harmless (and unused) on mobile where the nav isn't sticky. */
#nav-panel-sticky-sentinel {
	position: relative;
	height: 1px;
}

/* Desktop (>=992px): a plain horizontal bar, links inline, submenus open on
   hover — no off-canvas panel, no hamburger, no chevron. Declared last in
   this section so it wins the cascade over the mobile/base rules above it. */
@media screen and (min-width: 992px) {
	.nav-panel-toggle,
	.nav-panel-overlay {
		display: none;
	}

	/* Straddle the orange divider (.site-header::after) instead of sitting
	   at the top of the hero: a zero-height strip pinned to the header's
	   bottom edge, with its contents centered on it as a column, so the
	   pill overflows equally above and below the line. Done with layout
	   rather than a transform on purpose — a transformed ancestor would
	   become the containing block for .nav-panel.is-stuck's
	   position:fixed and break the sticky behaviour. The sentinel is part
	   of the centered column too, so it still marks the bar's visual top
	   edge for nav-panel.js (and keeps doing so once it's given the bar's
	   height while stuck). */
	.site-navigation {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 0;
	}

	/* Room for the lower half of the bar, which now hangs over the top of
	   the content area. */
	.site-content {
		padding-top: 48px;
	}

	/* ...and for its upper half, on the logo-only header (archives, search,
	   404), where nothing else leaves space above the line. */
	.site-branding {
		padding-bottom: 48px;
	}

	/* position: sticky doesn't work here — .nav-panel's containing block is
	   .site-header (tall, but not page-length), so a sticky element inside
	   it can only stay pinned until .site-header itself scrolls out of
	   view, then it scrolls away with it. Using position: fixed instead,
	   toggled on by .is-stuck (added by nav-panel.js via
	   IntersectionObserver once the sentinel above leaves the viewport) —
	   that un-anchors it from .site-header entirely so it stays pinned to
	   the viewport for the rest of the scroll, not just while the header
	   is still on screen. At rest (not yet stuck) it's positioned exactly
	   where it used to sit in normal flow. */
	.nav-panel {
		position: relative;
		top: auto;
		left: auto;
		/* The base (mobile) rule sets bottom:0 for the full-height off-canvas
		   panel — left un-reset, a fixed-position element with both top:0
		   and bottom:0 stretches to fill the entire viewport height, which
		   is exactly what .is-stuck below does if this isn't cleared here. */
		bottom: auto;
		z-index: 1000;
		display: flex;
		justify-content: center;
		width: auto;
		max-width: none;
		height: auto;
		padding: 12px 0;
		background: transparent;
		box-shadow: none;
		transform: none;
		transition: background-color .2s ease, box-shadow .2s ease;
		overflow: visible;
	}

	/* Stuck state only changes positioning (pinned to the viewport instead
	   of sitting in normal flow) — the pill itself (.nav-panel__menu, just
	   below) keeps exactly the same solid orange background and white text
	   it has at rest, so the bar looks identical whether scrolled or not. */
	.nav-panel.is-stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		height: auto;
	}

	.nav-panel__header {
		display: none;
	}

	.nav-panel__container {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	/* Solid background (not translucent) — the hero photo behind this bar is
	   mostly near-white, so anything relying on backdrop contrast (a glassy
	   translucent pill, white text on transparent, etc.) disappears against
	   it. An opaque brand-orange pill stays legible regardless of what part
	   of the image sits behind it. */
	.nav-panel__menu {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
		padding: 10px 16px;
		margin: 0;
		max-width: 1140px;
		background: #F7931D;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		border-radius: 999px;
		transition: box-shadow .2s ease;
	}

	/* Deeper, darker shadow while pinned to the viewport, so the bar reads
	   as clearly lifted above the page content scrolling underneath it. */
	.nav-panel.is-stuck .nav-panel__menu {
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
	}

	.nav-panel__item {
		position: relative;
		border-bottom: 0;
	}

	.nav-panel__row {
		display: flex;
		align-items: center;
	}

	.nav-panel__link {
		padding: 10px 18px;
		color: #fff;
		/* 600, available from the variable Roboto (see theme.json) — the nav
		   is where thin body-weight text read weakest. */
		font-weight: 600;
		font-size: .95rem;
		border-radius: 999px;
		transition: background-color .15s ease, color .15s ease;
	}

	.has-submenu .nav-panel__link {
		padding-right: 18px;
	}

	.nav-panel__link:hover,
	.nav-panel__link:focus {
		background-color: #fff;
		color: #F7931D;
		text-decoration: none;
	}

	.nav-panel__item.current > .nav-panel__row > .nav-panel__link {
		background-color: #FFE5C4;
		color: #C45A04;
		box-shadow: none;
	}

	/* No chevron on desktop — the submenu opens on hover, so the toggle
	   button is redundant (its click behaviour is mobile-only). */
	.nav-panel__submenu-toggle {
		display: none;
	}

	/* Submenus open on hover/focus, as a dropdown card with a small gap and
	   a triangle pointing back up at the link that opened it. The gap
	   itself is bridged by ::before (below) so hovering down from the link
	   into the dropdown doesn't lose :hover partway through — that empty
	   space would otherwise sit outside both elements' boxes. */
	.nav-panel__submenu {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 1;
		transform: translateX(-50%);
		margin-top: 10px;
		/* CSS multi-column (column-width + width:max-content) doesn't
		   actually work here — width:auto/max-content on an absolutely
		   positioned element don't reliably grow to fit the columns
		   multi-column layout wants to produce, across browsers, so a long
		   submenu's second column existed but was invisible, clipped by
		   overflow:hidden. flex-direction:column + flex-wrap:wrap with a
		   fixed (not max-) height is the reliable equivalent: items fill
		   one column top-to-bottom, then wrap into a new one — and because
		   it's ordinary flex sizing (not multi-column intrinsic sizing),
		   the container correctly grows wide enough to show every column. */
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: flex-start;
		min-width: 240px;
		max-width: 90vw;
		/* Sized to content by default — a short submenu (1-2 items) should
		   just be a small box, not a tall one with empty space at the
		   bottom. The height needed to make flex-wrap column-break (see
		   .nav-panel__submenu--wide below) is only applied once JS has
		   already determined a submenu actually needs two columns. */
		height: auto;
		padding: 8px;
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .15s ease, visibility .15s;
	}

	/* A position:absolute flex/multi-column container's width:auto doesn't
	   grow to fit wrapped content across browsers (tried both approaches),
	   so it was staying stuck at min-width regardless of whether a second
	   column existed. nav-panel.js counts each submenu's items up front and
	   adds this class when one column can't fit them all, sizing the box
	   explicitly for two 220px columns instead of relying on intrinsic
	   sizing that doesn't actually account for the wrap.
	   Width = 8px padding + 220px + 220px + 8px padding = 456px; a previous
	   444px was 12px short, which ate into the right padding.
	   flex-wrap needs a *definite* height to decide when to start a new
	   column — max-height alone doesn't reliably establish that on a
	   position:absolute flex container across browsers, so this height is
	   only set here (once JS has confirmed the content needs two columns),
	   not on every submenu regardless of length. */
	.nav-panel__submenu--wide {
		width: 456px;
		height: min(60vh, 460px);
		overflow: hidden;
	}

	/* Each item gets a fixed basis so short submenus (which don't fill the
	   .nav-panel__submenu height) still show as a normal vertical list
	   rather than being stretched by the flex container to fill it. */
	.nav-panel__submenu .nav-panel__item {
		flex: 0 0 auto;
		width: 220px;
	}

	/* The triangle and hover-bridge live on .has-submenu (the <li>, not
	   .nav-panel__submenu itself) because the submenu box needs
	   overflow:hidden for the column-fill trick below, which would clip
	   pseudo-elements positioned on it. .has-submenu shares the same
	   position:relative context, so top/left math here matches exactly
	   what .nav-panel__submenu below uses. */

	/* Invisible bridge filling the gap above the card, keeping the hover
	   area contiguous from the link down into the dropdown. */
	.has-submenu::before {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 10px;
		opacity: 0;
		pointer-events: none;
	}

	.has-submenu:hover::before,
	.has-submenu:focus-within::before {
		pointer-events: auto;
	}

	/* Triangle pointing up at the link that opened this dropdown. Rotated
	   square, half tucked behind the card's top edge so only its top-left
	   corner (the "point") shows above the card. */
	.has-submenu::after {
		content: "";
		position: absolute;
		top: calc(100% + 5px);
		left: 50%;
		width: 14px;
		height: 14px;
		background: #fff;
		border-radius: 3px 0 0 0;
		transform: translateX(-50%) rotate(45deg);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .15s ease, visibility .15s;
	}

	.has-submenu:hover::after,
	.has-submenu:focus-within::after {
		opacity: 1;
		visibility: visible;
	}

	/* .is-collapsed (added by JS to every .has-submenu on load, all
	   viewports — see nav-panel.js) sets max-height:0 in the base/mobile
	   rule near the top of this file, at higher specificity (two classes)
	   than a plain .nav-panel__submenu rule. Neutralized here at matching
	   specificity so it can't silently zero out this element's height on
	   desktop — but only max-height, not height itself: this element is
	   sized by height:auto (short menus) or .nav-panel__submenu--wide's
	   own height (long ones), and forcing a height here for every
	   collapsed submenu regardless of length is exactly the "short
	   submenus render as a tall box" bug this is meant to avoid. */
	.has-submenu.is-collapsed > .nav-panel__submenu {
		max-height: none;
	}

	.has-submenu:hover > .nav-panel__submenu,
	.has-submenu:focus-within > .nav-panel__submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* .nav-panel__row is flex (see the base rule above), which shrinks to
	   fit its content by default — stretch it so the link's own
	   display:block can actually fill the dropdown's full width. */
	.nav-panel__submenu .nav-panel__row {
		display: block;
	}

	.nav-panel__submenu .nav-panel__link {
		display: block;
		width: 100%;
		padding: 10px 16px;
		color: #333;
		font-size: .9rem;
		font-weight: 400;
		border-radius: 8px;
		box-sizing: border-box;
	}

	.nav-panel__submenu .nav-panel__link:hover,
	.nav-panel__submenu .nav-panel__link:focus {
		background-color: #fdf1e0;
		color: #F7931D;
	}
}

/*--------------------------------------------------------------
## Block editor: wide & full-width alignment
Breaks blocks out of Bootstrap's fixed-width .container, which
wraps page content (see page.php). Without this, the "wide" and
"full width" toolbar options in the block editor have no visible
effect.
--------------------------------------------------------------*/
.content-area.container .alignwide {
	width: 100vw;
	max-width: 1400px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.content-area.container .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.content-area.container .alignfull img {
	width: 100%;
}