/* vim:set foldmethod=marker: */

:root {
	--color-green: #00955F;
	--color-bright-green: #33B633;
	--color-pale-green: #F0FFF0;

	--color-grey: #939598;
	--color-light-grey: #F0F0F0;
	--color-lighter-grey: #F5F5F5;

	/* used by the menu */
	--color-transparent-grey: rgba(200,200,200,0.5);
	--color-transparent-light-grey: rgba(220,220,220,0.5);

	/* used by the sticky header */
	--color-transparent-white: rgba(255,255,255,0.85);

	--color-form-button-background: var(--color-bright-green);

	--color-form-highlight: var(--color-bright-green);
	--color-form-button-error: #FF0000;
	--color-form-option-active: var(--color-bright-green);
	--color-form-option-selected: var(--color-green);

	--color-pii-toggle-background: var(--color-green);

	--dim-highlight-padding: 3em;
	--dim-highlight-min-height: 400px;

	--shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.25);
}

/************************************************************************
 * Element styling
 ***********************************************************************/

body {
	hyphens: auto;
}

main a {
	font-weight: bold;
	color: var(--color-bright-green);
}

figure {
	margin: 0;
}

svg {
	display: inline-block;
}

::-moz-selection,
::selection {
	color: white;
	background-color: var(--color-bright-green);
}

ul {
	padding-left: 1em;
}

p img {
	margin: 0.5rem;
}

/************************************************************************
 * Global style
 ***********************************************************************/

.green {
	color: var(--color-bright-green);
}

/************************************************************************
 * Block styling
 ***********************************************************************/
/*{{{ Block */

.block-system-branding-block svg,
.block-system-branding-block img {
	max-width: 100%;
}

.block--type-image-link .field--name-field-image .field__items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.block--type-image-link .field--name-field-image .field__item {
	margin: 0.25em 0.375em;
}

.block--type-image-link .field--name-field-image .field__item a {
	display: block;
	transition: all .2s ease-in-out;
}

.block--type-image-link .field--name-field-image .field__item a:hover {
	box-shadow: var(--shadow);
	margin-top: -0.25rem;
	border-radius: 0.25rem;
}

.block--type-image-link img,
.block--type-image-link svg {
	display: block;
}

.block--type-image-link.large img,
.block--type-image-link.large svg {
	width: 5em;
	height: auto;
}

/* front page services block */

.block.services {
	text-align: center;
	background-color: var(--color-pale-green);
	padding: 3%;
	clip-path: polygon(0% 5%,100% 0%,100% 100%,0% 95%);
}

.block.services .block-content {
	text-align: initial;
}

.block.services .block-label {
	display: inline-block;
	padding: 0 1em;

	text-transform: uppercase;

	color: var(--color-bright-green);

	border-width: 0 0 0.125em 0;
	border-style: solid;
}

.block.services .paragraph--type--highlight .field--name-field-image {
	position: relative;
	box-sizing: border-box;
}

.block.services .paragraph--type--highlight .field--name-field-image:after {
	content: '';
	display: block;
	position: absolute;

	top: 1em;
	left: 1em;
	right :1em;
	bottom: 1em;

	border-width: 1px;
	border-style: solid;
	border-color: white;
}

/* front page highlights block */

.block.highlights .block-content > .field--name-field-paragraphs > .field__items > .field__item {
	margin: 2em 0;
}

.block.highlights .group-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	color: white;
	background-color: var(--color-green);
}

/* reset duck margins because this is now a flex */
.block.highlights .group-wrapper > * {
	margin: 0;
}

.block-language ul.links {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.block-language ul.links li {
	border-width: 0 1px 0 0;
	border-style: solid;
	border-color: white;
	margin: 0.25rem 0;
}

.block-language ul.links li:last-child {
	border-width: 0;
}

.block-language ul.links li > a,
.block-language ul.links li > span {
	display: block;
	padding: 0 0.5em;
}

/*}}}*/

/************************************************************************
 * Generic Form
 ***********************************************************************/

.generic-form .form-wrapper:not(.form-composite) {
	box-sizing: border-box;
	padding: 0.5em;
}

.front .generic-form .form-actions {
	text-align: center;
}

.front .generic-form .form-actions .g-recaptcha {
	display: inline-block;
}

/************************************************************************
 * Field styling
 ***********************************************************************/

.field__label {
	font-size: 105%;
	font-weight: bold;
}

.field--label-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
}

.field--label-inline .field__label::after {
	content: ':';
	margin-right: 0.25em;
}

/************************************************************************
 * Content
 ***********************************************************************/

/* {{{ Content */

.layout-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

header#super_header {
	color: white;
	background-color: var(--color-grey);
}

.region-super-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
}

.region-super-header > *:first-child {
	flex-grow: 1;
}

.region-super-header p {
	margin: 0;
}

header#header {
	border-width: 0 0 2px 0;
	border-style: solid;
	border-color: var(--color-light-grey);
}

.region-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.region-header > .block-system-branding-block {
	flex-shrink: 1;
}

.region-header > nav {
	flex-grow: 1;
}

.region-header > nav .menu-item > span,
.region-header > nav .menu-item > a {
	display: block;

	box-sizing: border-box;
	padding: 1em;

	text-transform: uppercase;
	cursor: pointer;
}

.region-header > nav .menu-item.menu-item--active-trail > a,
.region-header > nav .menu-item.menu-item--active-trail > span,
.region-header > nav .menu-item > a.is-active  {
	font-weight: bold;
	color: var(--color-green);
	background-color: var(--color-transparent-grey);
}

.region-header > nav .responsivemenu-fold-toggle {
	color: var(--color-bright-green);
}

main {
	flex-grow: 1;
	padding: 1.5em 0;
}

.region-fp-content > .block {
	margin: 3em auto;
}

footer a {
	font-weight: bold;
}

footer {
	--color-form-button-text: var(--color-bright-green);
	--color-form-button-background: white;

	--color-logo-outline: white;
	--color-logo-subtext: white;

	color: white;
	background-color: var(--color-green);
	padding: 2em 0;
}

.region-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.region-footer .block-system-branding-block {
	margin-bottom: 2em;
}

/* }}} */

/************************************************************************
 * Nodes
 ***********************************************************************/

/* {{{ hero */

.node--view-mode-hero .node__content {
	height: 75vh;
	min-height: 800px;

	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: 1em;
	box-sizing: border-box;
}

/* }}} */
/* {{{ card */

.node--view-mode-card {
	box-sizing: border-box;
	padding: 1em;
}

.node--view-mode-card .node__content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.node--view-mode-card .group-content {
	flex-grow: 1;

	display: flex;
	flex-direction: column;
}

.node--view-mode-card .field--name-body {
	flex-grow: 1;
}

.node--view-mode-card .field--name-field-image img,
.node--view-mode-card .field--name-field-card-image img {
	display: block;

	border-width: 0.125em;
	border-style: solid;
	border-color: var(--color-green);
}

.node--view-mode-card .field--name-title .field__item > *,
.node--view-mode-card .field--name-field-card-title .field__item > * {
	text-transform: uppercase;
}

.node--view-mode-card .field--name-body {
	margin-bottom: 1.5em;
}

.node--view-mode-card .field--name-read-more {
	text-align: center;
}

.node--view-mode-card .group-content {
	padding: 1em;
}
/* }}} */
/* {{{ large card */

.node--view-mode-card-large .group-content {
	padding: var(--dim-highlight-padding);
	box-sizing: border-box;
}

.node--view-mode-card-large .field--name-field-image,
.node--view-mode-card-large .field--name-field-card-image {
	min-height: var(--dim-highlight-min-height);
}
/* }}} */
/* {{{ Banner */

.node--type-banner.node--view-mode-hero .field--name-body {
	max-width: 50%;
	text-shadow: 0 0 0.25em rgba(255,255,255,0.5);
}

.node--type-banner.node--view-mode-hero .field--name-body .button {
	text-shadow: none;
}

/* }}} */
/*{{{ Node */

/* full */

.node--type-page.node--view-mode-full > .node__content > .layout > .layout__region--first,
.node--type-page.node--view-mode-full > .node__content > .layout > .layout__region--second {
	flex-basis: auto;
}

.node--type-page.node--view-mode-full > .node__content > .layout > .layout__region--first {
	width: 75%;
	flex-grow: 1;
	flex-shrink: 0;
}

.node--type-page.node--view-mode-full > .node__content > .layout > .layout__region--second {
	max-width: 25%;
	flex-grow: 0;
	flex-shrink: 1;
}

/* work around drupal's inability to determine if regions are empty, thus
 * making it impossible to hide region container markup for those that are and
 * makes it dificult to apply gutters to a layout
 */
.node--type-page.node--view-mode-full > .node__content > .layout > .layout__region--second > * {
	margin: 0 0 0 1.5em;
}

.node--type-page.node--view-mode-full .layout__region > .field--name-field-paragraphs > .field__items > .field__item {
	margin: 6em 0;
}

/*}}}*/
/** {{{ Reference */

.node--type-reference.node--view-mode-full .field--name-field-image img {
	display: block;

	border-width: 1px;
	border-style: solid;
	border-color: var(--color-bright-green);
}

.node--type-reference.node--view-mode-full .field--name-field-image .field__item {
	box-sizing: border-box;
	padding: 1em;
}

/* }}} */

/************************************************************************
 * Paragraphs
 ***********************************************************************/
/* {{{ Triplet container */
.paragraph--type--triplet-container > .field--name-field-paragraphs > .field__items {
	text-align: center;
}

.paragraph--type--triplet-container > .field--name-field-paragraphs > .field__items > .field__item {
	display: inline-block;
	text-align: initial;
}
/* }}} */
/* {{{ person / address */

.paragraph--type--person,
.paragraph--type--address {
	text-align: center;
	padding: 2em;
  hyphens: none;
}

.paragraph--type--person .field--name-field-image img {
	border-width: 0.5em;
	border-style: solid;

	border-top-color: var(--color-grey);
	border-left-color: var(--color-grey);
	border-right-color: var(--color-green);
	border-bottom-color: var(--color-green);

	border-radius: 50%;
}

/* }}} */
/* {{{ highlight */

.paragraph--type--highlight .group-content {
	padding: var(--dim-highlight-padding);
	box-sizing: border-box;
}

.paragraph--type--highlight .field--name-field-image {
	min-height: var(--dim-highlight-min-height);
}
/* }}} */
/* {{{ rekry */

.paragraph--type--rekry {
	padding: 1em;
	margin: 1em auto;

	border-width: 1px;
	border-style: solid;
	border-color: var(--color-green);
}

.paragraph--type--rekry .field--name-field-title {
	hyphens: auto;
	word-break: break-all; /* better than overflowing */
}
/* }}} */
/* {{{ icon text */

.paragraph--type--icon-text .field--name-field-image {
	text-align: center;
}

.paragraph--type--icon-text .field--name-field-text {
	padding: 0.5em;
}
/* }}} */
/* {{{ flex container */

.paragraph--type--flex-container {
	padding: 3em 0;
}

.paragraph--type--flex-container > .field--name-field-title {
	text-align: center;
}

.paragraph--type--flex-container > .field--name-field-paragraphs > .field__items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.paragraph--type--flex-container > .field--name-field-paragraphs > .field__items > .field__item {
	flex: 1 2 20%;
	min-width: 10em;
	max-width: 20em;
}
/* }}} */
/* {{{ image with text overlay */

.paragraph--type--image-with-text-overlay {
	min-height: 35em;
	margin: 0.25rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.paragraph--type--image-with-text-overlay .group-content {
	flex-basis: 15em;
	margin: 0.5em;
	padding: 0.5em;

	background-color: var(--color-transparent-white);
}

.paragraph--type--image-with-text-overlay .field--name-field-title {
	text-align: center;
}
/* }}} */
/* {{{ text | image */

.paragraph--type--text-image {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.5em;
}

.paragraph--type--text-image > .field--name-field-text,
.paragraph--type--text-image > .group-content {
	flex-basis: 60%;
}

.paragraph--type--text-image > .field--name-field-image,
.paragraph--type--text-image > .group-image {
	flex-basis: 40%;
}

.paragraph--type--text-image > .group-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.paragraph--type--text-image .field--name-field-video video {
	max-width: 100%;
	max-height: 100%;
}

/* }}} */
/* {{{ images */

.paragraph--type--images .field--name-field-image img {
	width: 100%;
	height: auto;
}

/* }}} */