/*

Theme Name: bemt
Description: Custom made theme for specific client
Author: WP and coding by Abrovink, Design by Djungeltelegrafen
Author URI: https://www.abrovink.se
Text Domain: bemt
Version: 1.1.0

*/


:root{


	
	/* Padding for different element types */
	--padding-section: 24px;
	--padding-content: 24px;
	--padding-card: 24px;
	
	--gap-columns: 60px;
	--gap-grid: 24px;
	--gap-chips: 8px;

	/* --- Transitions --- */
	--transition-fast:   0.15s ease;
	--transition-base:   0.4s ease;
	--transition-slow:   0.5s ease;

	/* --content-wrap-max-width: 800px; */
	--content-wrap-max-width: 100%;

	/* --- Palette — raw swatches (swap per client) --- */
	--palette-darkblue:  #0b3b5b;
	--palette-midblue:   #2f5873;
	--palette-steelblue: #3f5870;
	--palette-muted:     #859dad;
	--palette-silver:    #dbe2e7;
	--palette-lightgray: #f5f6f7;
	--palette-white:     #ffffff;
	--palette-green:     #63bca1;

	/* --- Context tokens — adaptive, overridden by .bg-* classes ---
	   Components read --ctx-* so they adapt to whatever background
	   they sit on. No more specificity battles for color. */
	--ctx-bg:         var(--palette-lightgray);
	--ctx-fg:         var(--palette-darkblue);
	--ctx-fg-heading: var(--palette-darkblue);
	--ctx-fg-muted:   var(--palette-muted);
	--ctx-border:     var(--palette-darkblue);
	--ctx-accent:     var(--palette-darkblue);
	--ctx-accent-fg:  var(--palette-white);
	--ctx-surface:    var(--palette-silver);

	/* --- Legacy aliases (referenced by older code / layout CSS) --- */
	/*
	--color-white:     var(--palette-white);
	--color-lightgray: var(--palette-lightgray);
	--color-darkblue:  var(--palette-darkblue);
	--color-midgray:   var(--palette-silver);
	--color-antiloop-green: var(--palette-green);
	*/

	/* --- Borders --- */
	--border-color: var(--ctx-border);
	--border-radius: 6px;

	/* --- Layout --- */
	--header-height: 100px;
	
	/* Images aspect ratio for boxes/grid items/cards etc? */
	/* Perhaps not NEEDED but may be good to help with consistency */
	/* --aspect-ratio-img-card: 4/3; */
	/* --aspect-ratio-img-card: 4/3; */
	
}



@media screen and (min-width: 768px) {

	:root {

		--padding-section: 48px;
		--padding-content: 48px;

	}

}

@media screen and (min-width: 1024px) {

	:root {

		--header-height: 112px;
		
		--padding-section: 48px;
		--padding-content: 48px;


	}

}


/*

font-family: lexend, sans-serif;
font-weight: 500;
font-style: normal;

font-family: lexend, sans-serif;
font-weight: 600;
font-style: normal;

font-family: lexend, sans-serif;
font-weight: 800;
font-style: normal;

*/

/* ============================================================
   MODERN CSS RESET
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	height: 100%;
	overflow-y: scroll;
}

body {
	min-height: 100%;
	background: var(--ctx-bg);
	font-family: lexend, sans-serif;
	font-size: 16px;
	line-height: 1.71;
	font-weight: 400;
	color: var(--ctx-fg);
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

fieldset {
	min-width: inherit;
}

caption,
th,
td {
	font-size: .85em;
	line-height: 1.5;
	font-weight: 400;
	text-align: left;
}

/* ************************************************************************************** */
/* general typographic
/* ************************************************************************************** */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-display: swap;
	font-optical-sizing: auto;
	color: inherit;
	clear: both;
	margin: 0;
	padding: 0;
}

h1, h2, h3 {
    text-wrap: pretty;
}

h1,
h2.as-h1{
	margin: 0 0 1em 0;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 800;
}
h2 {
	margin: 0 0 .66em 0;
	font-size: 22px;
	line-height: 1.27;
	font-weight: 800;
	color: inherit;
}
h2.hidden{
	display: none;
}
h3 {
	margin: 0 0 .25em 0;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 800;
	color: inherit;
}
h4 {
	margin: 0 0 .25em 0;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 600;
	color: inherit;
}
p, .gallery, table {
	margin-bottom: 2em;
	color: inherit;
	text-wrap: pretty;
}
p + p{
	margin-top: -.25em;
}

strong, b{
	font-weight: 600;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
strong em,
em strong{
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: +.075em;
	font-weight: 600;
}

blockquote{
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
	margin: 0 0 .5em 0;
	padding: 0;
	font-size: 1.37em;
	line-height: 1.33;
	font-weight: 700;
	color: inherit;
	font-style: normal;	
	letter-spacing: -.025em;
}
blockquote p:last-child{
	margin-bottom: 0;
}

@media screen and (min-width: 1024px) {
	blockquote{
		font-size: 36px;
	}
}

cite{
	font-style: normal;
	font-weight: 400;
}

blockquote p{}
blockquote .caption{}
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote strong{ font-style: italic; }
address {
	font-style: normal;
	margin: 0 0 1.5em;
}
pre {
	background: var(--ctx-surface);
	font-family: Courier, monospace;
	font-size: 0.8em;
	line-height: 1.6em;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
code, kbd, tt, var {
	font-family: Courier, monospace;
	font-size: .8em;
}
abbr, acronym {
	border-bottom: 1px dotted var(--border-color);
	cursor: help;
}
mark, ins {
	background: var(--ctx-surface);
	text-decoration: none;
}
small {
	font-size: smaller;
	font-weight: 500;
}
big {
	font-size: bigger;
}
:focus {
	outline: none;
}
hr {
	display: block;
	width: 100%;
	float: none;
	clear: both;
	background-color: var(--border-color);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}
ul, ol {
	margin: 0 0 1em 1.5em;
	padding: 0;
}
p + ul{ margin-top: -24px; }
ul { list-style: square; }
ol { list-style: decimal; }
li, li p{ margin-bottom: .25em; }
ul li::marker{ color: inherit; }
li > ul, li > ol { margin-bottom: 0; }

dt { font-weight: 700; }
dd { margin: 0 1.5em 1.5em; }

sup{
	font-size: 65%;
	line-height: 1;
	font-weight: 100;
	white-space: break-after;
}
sub{
	font-size: 65%;
	line-height: 1;
	font-weight: 100;
	white-space: break-after;
}

table {
	border-collapse: collapse;
	margin: 0 0 2em 0;
	width: 100%;
}
thead th {
	border-bottom: 2px solid var(--border-color);
	padding-bottom: 0.5em;
}
th {
	padding: .4em;
	font-weight: 500;
	text-align: left;
}
tr {
	border-bottom: 1px solid var(--border-color);
}
td {
	padding: 0.4em;
}
th:first-child,
td:first-child {
	padding-left: 0;
}
th:last-child,
td:last-child {
	padding-right: 0;
}
a {
	color: inherit;
	text-decoration: underline;
	transition: all .25s;
}
a:hover,
a:active,
a:focus {
	outline: 0;
}
img,
svg{
	display: block;
	max-width: 100%; /* Adhere to container width. */
	height: auto; /* Make sure images are scaled correctly. */
}
a img,
a svg {
	border: 0;
}
.alignleft {
	float: left;
	margin-right: 1.5em;
}
.alignright {
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
video {
	display: inline-block;
	max-width: 100%; /* Adhere to container width. */
	height: auto; /* Make sure images are scaled correctly. */
	
	-ms-interpolation-mode: bicubic;
	border: 0;
	vertical-align: middle;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
canvas {
	max-width: 100%;
	margin-bottom: 0;
}
p > embed,
p > iframe,
p > object{
	max-width: 100%;
	margin-bottom: 0;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption-text {
	margin: 1.25em 0;
	font-size: .85em;
	line-height: 1.5em;
	font-weight: 300;
}

/* Handle dynamic height of iframes etc */
.embed-container,
figure { 
	position: relative; 
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0 0 1.5em 0;
} 
figure iframe,
.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container canvas { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.embed-container + p{
	margin-bottom: 0;
}


/* ************************************************************************************** */
/* gallery defaults - small screen, override column setting */
/* ************************************************************************************** */
.gallery{
	display: grid;
	gap: var(--gap-grid);
	grid-template-columns: 1fr 1fr;
}
.gallery > br{
	display: none;
}

@media screen and (min-width: 768px){

	.gallery{
		margin-top: 5px;
	}
	.gallery.gallery-columns-3,
	.gallery.gallery-columns-4,
	.gallery.gallery-columns-5
	.gallery.gallery-columns-6{
		grid-template-columns: 1fr 1fr 1fr;
	}
	
}

@media (min-width: 1024px) {

	.gallery.gallery-columns-4{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

}

@media (min-width: 1280px) {

	.gallery.gallery-columns-5{	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;	}
	.gallery.gallery-columns-6{	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;	}
	
}




/* ************************************************************************************** */
/* form styles */
/* ************************************************************************************** */
form{}
fieldset{}
form legend{}
form label{
	display: inline-block;
	margin-bottom: 2px;
	font-size: inherit;
	font-size: 12px;
	font-weight: 400;
	color: var(--ctx-fg);
}
form p{
	margin-bottom: 1em;
}
form input,
form select,
form textarea{
	display: inline-block;
	margin: 0;
	padding: .5em .5em;
	border: solid 2px var(--ctx-border);
	border-radius: var(--border-radius);
	background: rgba(255,255,255, 0);
	font-size: inherit;
	font-weight: 400;
	transition: all .2s ease;
}
form input[type="text"],
form input[type="email"],
form input[type="date"],
form input[type="time"],
form textarea{
	width: 100%;
}
form textarea{
	height: 150px;
}
form input[type="checkbox"]{
	/*transform: scale(125%);*/
}
form input:focus,
form textarea:focus{
	background: rgba(255,255,255, 1);
}
form button,
form submit,
form input[type="button"],
form input[type="submit"]{
	position: relative;
	margin: 12px 0;
	padding: 8px 36px;
	font-weight: 600;
	color: var(--ctx-accent);
	border-radius: 50px;
	cursor: pointer;
	text-align: left;
	transition: all .2s ease;
}
form button:hover,
form submit:hover,
form input[type="button"]:hover,
form input[type="submit"]:hover{
	color: var(--ctx-accent-fg);
	background-color: var(--ctx-accent);
}

form submit,
form input[type="submit"]{
	padding-right: 52px;
	background: no-repeat center right 24px transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E");
	background-size: 24px 24px;
}
form button:hover,
form submit:hover,
form input[type="button"]:hover,
form input[type="submit"]:hover{
	color: var(--ctx-accent-fg);
	background-color: var(--ctx-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E");
}
form button:focus,
form input[type="button"]:focus,
form input[type="submit"]:focus{}
form input[type="submit"]:disabled{}

/* form layout specs */
form .form-field{
	padding-right: 24px;
}
form .form-row{
	float: none;
	clear: both;
}
form .form-field.w100{
	width: 100%;
	float: none;
	clear: both;
}

@media screen and (min-width: 768px){

	/* responsive form field widths */
	form .form-field.w50{
		width: 50%;
		float: left;
	}
	form .form-field.w25{
		width: 25%;
		float: left;
	}
	
}

/* contact form 7 overrides */
div.wpcf7{
	padding-top: 1.25em;
}
.wpcf7-form > p:last-of-type{
	margin-bottom: 0;
	padding-bottom: 0;
}
form .wpcf7-form-control-wrap span{}
form .wpcf7-not-valid{
	border-color: #cc3333;
}
form .wpcf7-form-control-wrap .wpcf7-not-valid-tip{
	display: inline-block;
	margin-top: -7px;
	padding: 2px 12px;
	background: #cc3333;
	border-radius: var(--border-radius);
	font-size: .775em;
	color: var(--palette-white);
}
.wpcf7-list-item{
	margin-left: 2px;
}
.wpcf7-list-item-label{
	margin-left: 6px;
}
.wpcf7-checkbox{
	display: block;
	margin-bottom: 2.5em;
}
.wpcf7-checkbox > span{
	display: block;
}
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output{
	margin: 0;
	margin-top: 0;
	padding: .75em 1.5em;
	border: 0;
	border-radius: var(--border-radius);
	color: var(--palette-white);
	background: #cc3333;
}
form .wpcf7-spinner{
	position: relative;
	top: 5px;
	display: inline-block;
	background: var(--palette-darkblue);
	opacity: 1;
	/* testing visibility: visible; */
}
.wpcf7-spinner::before{
	background: var(--palette-white);
}
form .wpcf7-acceptance{}
form .wpcf7-acceptance label{
	display: block;
	position: relative;
	top: 0;
	left: -6px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
form .wpcf7-acceptance .wpcf7-list-item{
	margin: 0;
	padding: 0;
}

/* Hide the browser's default checkbox */
form .wpcf7-acceptance input{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
form .wpcf7-acceptance .wpcf7-list-item-label{
	position: relative;
	padding-top: 2px;
	padding-left: 32px;
}

/* Create a custom checkbox */
form .wpcf7-acceptance .wpcf7-list-item-label::before{
	position: absolute;
	top: 0;
	left: 0;
	height: 22px;
	width: 22px;
	background-color: #ced8de;
	border: solid 2px #ced8de;
	border-radius: var(--border-radius);
}
/* On mouse-over, add a grey background color */
/*
form .wpcf7-acceptance label:hover input ~ .wpcf7-list-item-label::before {
  background-color: #ccc;
}
*/

/* When the checkbox is checked, add a blue background */
form .wpcf7-acceptance label input:checked ~ .wpcf7-list-item-label::before {
	border-color: var(--palette-green);
	background-color: var(--palette-green);
}

/* Create the checkmark/indicator (hidden when not checked) */
.wpcf7-list-item-label::after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
form .wpcf7-acceptance label input:checked ~ .wpcf7-list-item-label::after {
  display: block;
}

/* Style the checkmark/indicator */
form .wpcf7-acceptance label .wpcf7-list-item-label::after{
  left: 7px;
  top: 2px;
  width: 8px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}










/* ************************************************************************************** */
/* Extra RTE stylings */
/* ************************************************************************************** */
p.introtext{
	font-size: 1.2em;
	line-height: 1.5;
	letter-spacing: -.015em;
}
li p.introtext{
	margin-bottom: 0;
}
p.caption{
	margin: 0 0 24px 0;
	font-size: 14px;
	font-weight: 400;
}
p.footnote{
	margin: 12px 0 24px 0;
	font-size: 14px;
}
p.pre-headline{
	font-size: 1.2em;
	line-height: 1.5;
	letter-spacing: -.015em;
	margin-bottom: .25em;
	font-weight: 600;
}
.rounded{
	border-radius: var(--border-radius);
	overflow: hidden;
}



/* ************************************************************************************** */
/* a.button-primary + a.button-secondary */
/* ************************************************************************************** */
a.button-primary,
a.button-secondary{
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	margin: .5em .5em .5em 0;
	padding: 10px 18px 10px 18px;
	font-weight: 400;
	color: var(--ctx-accent);
	border: solid 2px var(--ctx-accent);
	background: transparent;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
	transition: all .2s;
}
a.button-primary::after,
a.button-secondary::after{
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 8px;
	background: no-repeat center center transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E");
	background-size: 24px 24px;
}
a.button-primary:hover,
a.button-secondary:hover{
	color: var(--ctx-accent-fg);
	border-color: var(--ctx-accent);
	background: var(--ctx-accent);
	text-decoration: none !important;
}
a.button-primary:hover::after,
a.button-secondary:hover::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E");
}

/* Button arrow SVG colour overrides per background.
   Color/border are now handled by --ctx-accent tokens;
   only the SVG data-URIs need explicit dark/light variants. */

/* dark bg + hero — white arrows */
.hero .item a.button-primary::after,
.bg-darkblue a.button-primary::after,
.item.bg-darkblue a.button-primary::after,
.light-text a.button-primary::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E");
}
.hero .item a.button-primary:hover::after,
.bg-darkblue a.button-primary:hover::after,
.item.bg-darkblue a.button-primary:hover::after,
.light-text a.button-primary:hover::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E");
}

/* ************************************************************************************** */

.read-more{
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	margin: auto 0 .5em 0;
	font-weight: 400;
	cursor: pointer;
	text-decoration: none;
}
.read-more:hover{
	text-decoration: none;
}
.read-more::after{
	content: "";
	display: inline-block;
	width: 21px;
	height: 21px;
	margin-left: 4px;
	background: no-repeat center center transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E");
	background-size: 20px 20px;
	transition: margin-left .2s;
}
.read-more:hover::after{
	margin-left: 10px;
}

.bg-darkblue .read-more::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E");
}

.read-more-wrap{
	margin: auto 0 0 0;
}

.more-items{
	text-align: center;
}

/*
li.download,
li.checkmark{
	padding-left: 8px;
}
li.download::marker{
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2376e39d' d='M14 11v2h-12v-2h-2v4h16v-4zM12 6h-3v-5h-2v5h-3l4 6z'%3E%3C/path%3E%3C/svg%3E%0A");
}
li.checkmark::marker{
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2363bca1; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='11.19 13.48 7.73 10.01 6.31 11.42 11.19 16.31 17.69 9.81 16.27 8.4 11.19 13.48'/%3E%3C/svg%3E");
}
*/


/* ************************************************************************************** */
/* button.toggle-button */
/* ************************************************************************************** */
button.toggle-button{
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	margin: 0 0 2em 0;
	padding: 0;
	font-size: 1em;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	border: 0;
	background: transparent;
	cursor: pointer;
}
button.toggle-button::after{
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-left: .5em;
	border-radius: 50px;
	background: no-repeat center center var(--ctx-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %230b3b5b; stroke-width: 3; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3Cline class='cls-1' x1='12' y1='18' x2='12' y2='6'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 24px 24px;
	transition: transform .2s;
}
button.toggle-button.active::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %230b3b5b; stroke-width: 3; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3C/svg%3E");
	transform: rotate(180deg);
}

/* Toggle-button bg-class overrides.
   Light-bg variants removed — base rule + context tokens handle them.
   Dark-bg still needs explicit SVG (white stroke vs dark stroke). */
.bg-darkblue button.toggle-button::after,
.item.bg-darkblue button.toggle-button::after{
	background-color: var(--ctx-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23ffffff; stroke-width: 3; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3Cline class='cls-1' x1='12' y1='18' x2='12' y2='6'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-darkblue button.toggle-button.active::after,
.item.bg-darkblue button.toggle-button.active::after{
	background-color: var(--ctx-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23ffffff; stroke-width: 3; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3C/svg%3E");
}

/* used by expandable panels through shortcode - not the best solution... */
.initially-hidden{
	display: none;
}

/* ************************************************************************************** */



p.va_bottom{
	margin-top: auto;
	margin-bottom: 0;
}
p.va_bottom .button-primary,
p.va_bottom .button-secondary{
	margin-bottom: 0;
}
.visually-hidden { 
	position: absolute !important;
	height: 1px; 
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.soft-hyphen::after{
	display: block;
	float: none;
	clear: both;
	content: "";
}
.clearfix::after,
.container::after,
.container ul::after,
.items-container::after{
	content: "";
	display: table;
	clear: both;
}

/* sticky footer */
html, body {
	height: 100%;
}
body {
	display: flex;
	flex-direction: column;
}
#main {
	flex: 1 0 auto;
}
#footer {
	flex-shrink: 0;
}
/* /sticky footer */


.pad{
	padding: 0 var(--padding-section);
}
.container{
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	
	/* debug */
	/*
	background: url(assets/gfx/12-grid.png) repeat-y top center transparent;
	background-size: 100% auto;
	*/
	
}





/* ************************************************************************************** */
/* page sections — base rules */
/* ************************************************************************************** */

/* --- Base section --- */
.page-section {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: var(--padding-section) 0;
	background: url() no-repeat center center transparent;
}

/* --- First section header offset (non-hero) --- */
/* #main margin-top is (header-height - 44px); add the 44px back when the first section isn't a hero */
#main > .page-section:first-child:not(.hero) {
	padding-top: calc( var(--padding-section) + 44px );
}

/* --- Padding utilities (via additional CSS class) --- */
.page-section.no-padding { padding: 0; }
.page-section.no-padding-top { padding-top: 0; }
.page-section.no-padding-bottom { padding-bottom: 0; }
.page-section.extra-padding { padding: calc( var(--padding-section) * 2 ); }
.page-section.extra-padding-top { padding-top: calc( var(--padding-section) * 2 ); }
.page-section.extra-padding-bottom { padding-bottom: calc( var(--padding-section) * 2 ); }

/* --- Section intro & outro --- */
.section-intro,
.section-outro {
	display: block;
	width: 100%;
	max-width: var(--content-wrap-max-width);
	margin: 0 auto 0 0;
	padding: 0;
}
.section-intro { padding-bottom: var(--padding-content); }
.section-outro { padding-top: var(--padding-content); }
.page-section.centered .section-intro,
.page-section.centered .section-outro { margin: 0 auto; }

.page-section.section-intro-w50c .section-intro {
	width: 47%;
	margin-left: auto;
	margin-right: auto;
}

/* --- Width constraint utility --- */
.page-section.w66 .items-container {
	width: 66%;
	margin-left: auto;
	margin-right: auto;
}

/* --- Content-wrap base + vertical alignment --- */
.content-wrap {
	width: 100%;
	max-width: var(--content-wrap-max-width);
	padding: 0;
}
.va_top .content-wrap {
	align-self: flex-start;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.va_middle .content-wrap { align-self: center; }
.va_bottom .content-wrap { align-self: flex-end; }


/* backgrounds for sections, cells and whatnots
   Each .bg-* class overrides --ctx-* tokens so child components
   automatically adapt their colours — no extra selectors needed. */
.bg-transparent{ background-color: transparent; color: inherit; }
.bg-inherit{ background-color: inherit; }
.bg-image{ background: url() no-repeat center center transparent; background-size: cover; }

.bg-white, .item.bg-white, .ibg-white .container{
	--ctx-bg:         var(--palette-white);
	--ctx-fg:         var(--palette-steelblue);
	--ctx-fg-heading: var(--palette-darkblue);
	--ctx-fg-muted:   var(--palette-muted);
	--ctx-border:     var(--palette-darkblue);
	--ctx-accent:     var(--palette-darkblue);
	--ctx-accent-fg:  var(--palette-white);
	--ctx-surface:    var(--palette-silver);
	background-color: var(--ctx-bg);
	color:            var(--ctx-fg);
	border-color:     var(--ctx-border);
}
.bg-lightgray, .item.bg-lightgray, .ibg-lightgray .container{
	--ctx-bg:         var(--palette-lightgray);
	--ctx-fg:         var(--palette-darkblue);
	--ctx-fg-heading: var(--palette-darkblue);
	--ctx-border:     var(--palette-darkblue);
	--ctx-accent:     var(--palette-darkblue);
	--ctx-accent-fg:  var(--palette-white);
	--ctx-surface:    var(--palette-silver);
	background-color: var(--ctx-bg);
	color:            var(--ctx-fg);
}
.bg-midgray, .item.bg-midgray, .ibg-midgray .container{
	--ctx-bg:         var(--palette-silver);
	--ctx-fg:         var(--palette-darkblue);
	--ctx-fg-heading: var(--palette-darkblue);
	--ctx-border:     var(--palette-darkblue);
	--ctx-surface:    var(--palette-lightgray);
	background-color: var(--ctx-bg);
	color:            var(--ctx-fg);
}
.bg-darkblue, .item.bg-darkblue, .ibg-darkblue .container{
	--ctx-bg:         var(--palette-darkblue);
	--ctx-fg:         var(--palette-white);
	--ctx-fg-heading: var(--palette-white);
	--ctx-fg-muted:   var(--palette-muted);
	--ctx-border:     var(--palette-white);
	--ctx-accent:     var(--palette-white);
	--ctx-accent-fg:  var(--palette-darkblue);
	--ctx-surface:    var(--palette-midblue);
	background-color: var(--ctx-bg);
	color:            var(--ctx-fg);
	border-color:     var(--ctx-border);
}

/* Text color overrides — for use with background images via additional CSS class */
.light-text {
	--ctx-fg:         var(--palette-white);
	--ctx-fg-heading: var(--palette-white);
	--ctx-fg-muted:   var(--palette-white);
	--ctx-border:     var(--palette-white);
	--ctx-accent:     var(--palette-white);
	--ctx-accent-fg:  var(--palette-darkblue);
	color:            var(--ctx-fg);
}
.dark-text {
	--ctx-fg:         var(--palette-darkblue);
	--ctx-fg-heading: var(--palette-darkblue);
	--ctx-fg-muted:   var(--palette-muted);
	--ctx-border:     var(--palette-darkblue);
	--ctx-accent:     var(--palette-darkblue);
	--ctx-accent-fg:  var(--palette-white);
	color:            var(--ctx-fg);
}


.hero .content-wrap *{ color: #fff; }



/* ************************************************************************************** */
/* single */
/* ************************************************************************************** */
.single .wp-post-image{
	margin-bottom: 48px;
}

.article-meta{
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 24px;
	font-size: 14px;
	font-style: italic;
	text-transform: uppercase;
}
.article-meta ul.post-categories{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.article-meta .post-categories li{}

.single .cell-1 .content-wrap{
	max-width: 100%;
}
.single .cell-2 .content-wrap{
	padding-right: 48px;
}
/* ************************************************************************************** */





/* ************************************************************************************** */
/* search.php */
/* ************************************************************************************** */
.search-results__heading{
	margin-bottom: var(--padding-content);
}
.search-results__heading em{
	font-style: italic;
}
.search-result{
	margin-bottom: var(--padding-content);
}
.search-result__label{
	font-size: 14px;
	margin-bottom: 0.25em;
	color: var(--ctx-fg-muted, #666);
}
.search-result__separator{
	margin: 0 0.35em;
}
.search-result__title{
	margin-bottom: 0.25em;
}
.search-result__excerpt{
	margin-bottom: 0.25em;
}
.search-result__link{
	margin-top: 0;
}
.search-results__pagination{
	margin-top: var(--padding-content);
}
/* ************************************************************************************** */



/* ************************************************************************************** */
/* Narrow centered utilities — mirrors cols_8_centered / cols_6_centered in standard_content */
/* ************************************************************************************** */
@media screen and (min-width: 1024px){
	.page-section.cols-8-centered > .pad > .container > *{
		max-width: calc(8 / 12 * 100%);
		margin-inline: auto;
	}
	.page-section.cols-6-centered > .pad > .container > *{
		max-width: calc(6 / 12 * 100%);
		margin-inline: auto;
	}
}
/* ************************************************************************************** */



@media screen and (min-width: 768px){

	.soft-hyphen{
		display: none;
	}

	h1,
	h2.as-h1{
		font-size: 48px;
	}

}

@media (max-width: 1023px) {

	.hide-s{
		display: none;
	}

}
	
@media (min-width: 1024px) {

	body{
		font-size: 17px;
	}
	
	.hide-l{
		display: none;
	}

}

@media (min-width: 1280px) {

	h1,
	h2.as-h1{
		font-size: 54px;
	}
	p.pre-headline{
		font-size: 1.5em;
	}

}


/* ----------------------------------------------------------------------
   Fallback template (index.php)
   Lightweight grid so index.php works without standard_content layout CSS.
   ---------------------------------------------------------------------- */

.fallback-template .columns-wrap {
	display: flex;
	flex-direction: column;
}

.fallback-template .col {
	width: 100%;
}

.fallback-template .col .content-wrap {
	max-width: var(--content-wrap-max-width);
}

@media (min-width: 1024px) {

	.fallback-template .columns-wrap {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--gap-columns);
		align-items: start;
	}

	.fallback-template .cell-1 { grid-column: span 8; }
	.fallback-template .cell-2 { grid-column: span 4; }

}

/* --- Default sidebar widgets --- */

.default-sidebar .widget {
	margin-bottom: 48px;
}

.default-sidebar .widget:last-child {
	margin-bottom: 0;
}

.default-sidebar .widget-title {
	font-size: 1em;
	margin-bottom: .75em;
}

/* --- Sidebar cards (shared by Related Posts + Browse Categories) --- */

.sidebar-cards {
	display: flex;
	flex-direction: column;
	gap: calc(var(--gap-grid) / 2);
}

.sidebar-cards .item {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	border-radius: var(--border-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: opacity var(--transition-fast);
}

.sidebar-cards .item:hover {
	opacity: .8;
}

.sidebar-cards .item.active {
	outline: 2px solid var(--ctx-fg);
	outline-offset: -2px;
}

/* Thumbnail */
.sidebar-cards .image-wrap {
	flex: 0 0 72px;
	width: 72px;
	overflow: hidden;
}

.sidebar-cards .image-wrap img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.sidebar-cards .item:hover .image-wrap img {
	transform: scale(1.04);
}

/* Content */
.sidebar-cards .content-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: .6em .8em;
}

/* No bg — less padding, tighter feel */
.sidebar-cards .item:not([class*="bg-"]) .content-wrap,
.sidebar-cards .item.bg-transparent .content-wrap {
	padding: .3em 0;
}

.sidebar-cards .heading {
	display: block;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.3;
}

.sidebar-cards .meta {
	display: block;
	font-size: .75em;
	opacity: .6;
	margin-bottom: .15em;
}

.sidebar-cards .count {
	font-weight: 400;
	opacity: .5;
	font-size: .85em;
}