/*!
Theme Name: Identity guide
Description: WordPress theme for Spektradesign
Author: Spektra Design
Author URI: https://spektradesign.se
Version: 1.0.0
*/

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

html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	        text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

::selection {
	background-color: var(--color-primary);
	color: var(--color-light);
}

::before,
::after {
	text-decoration: inherit;
	vertical-align: inherit;
}

svg,
body,
main,
fieldset,
label,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
ul,
ol,
figure,
hr {
	margin: 0;
	padding: 0;
	display: block;
}

ul,
ol {
	list-style: none;
}

a {
	color: inherit;
	background-color: transparent;
	text-decoration: none;
}

a:focus {
	outline: none;
}

b,
strong {
	font-family: var(--bauer-medium);
	font-weight: normal;
}

svg,
img {
	border-style: none;
	max-width: 100%;
	height: auto;
	-webkit-user-select: none;
	        user-select: none;
	image-rendering: -webkit-optimize-contrast;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote,
button,
input,
select,
textarea {
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
}

fieldset,
button,
input,
textarea,
select {
	overflow: visible;
	border: 0;
	border-radius: 0;
}

fieldset {
	padding: 0;
	margin: 0;
	min-width: 0;
	display: block;
}

textarea {
	resize: vertical;
	border: 0;
}

input::-webkit-contacts-auto-fill-button {
	background-color: currentColor;
}

hr {
	border: 0;
	height: 1px;
	background-color: currentColor;
}

[hidden] {
	display: none;
}

:root {
	--color-dark: #000;
	--color-light: #fff;
	--color-primary: #eee;
	--color-secondary: #c8a2c8;
	--font-size-sm: 1.8rem;
	--line-height-sm: 2.2rem;
	--font-size-md: 2.2rem;
	--line-height-md: 2.6rem;
	--font-size-lg: 3.6rem;
	--line-height-lg: 4rem;
	--font-size-xl: 4.8rem;
	--line-height-xl: 5.2rem;
	--letter-spacing: 0.03em;
	--site-width-xs: 57rem;
	--site-width-sm: 85rem;
	--site-width-md: 10.5rem;
	--site-width-lg: 12.8rem;
	--spacing-border: 3rem;
	--spacing-xxs: 0.5rem;
	--spacing-xs: 1rem;
	--spacing-sm: 2rem;
	--spacing-md: 4rem;
	--spacing-lg: 8rem;
	--spacing-xl: 10rem;
	--spacing-xxl: 23rem;
	--hover-transition: all .2s ease-out;
	--border: 1px solid var(--color-dark);
	--doc-height: 100%; /* Set with javascript */
}

/* If color themes */

/*
:root.themename1 {
	--color-primary: #fff;
	--color-secondary: #fff;
	--color-hover: #fff;
}

:root.themename2 {
	--color-primary: #000;
	--color-secondary: #000;
	--color-hover: #000;
}
*/

@font-face {
	font-family: Patron;
	src: url("../font/patron-regular.woff") format("woff");
	font-weight: var(--text-normal);
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Patron Italic";
	src: url("../font/patron-italic.woff") format("woff");
	font-weight: var(--text-normal);
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Patron Light";
	src: url("../font/patron-light.woff") format("woff");
	font-weight: var(--text-light);
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Patron Light Italic";
	src: url("../font/patron-light-italic.woff") format("woff");
	font-weight: var(--text-light);
	font-style: italic;
	font-display: fallback;
}

@font-face {
	font-family: "Patron Medium";
	src: url("../font/patron-medium.woff") format("woff");
	font-weight: var(--text-medium);
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Patron Bold";
	src: url("../font/patron-bold.woff") format("woff");
	font-weight: var(--text-bold);
	font-style: normal;
	font-display: fallback;
}

* {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

html {
	box-sizing: border-box;
	font: 400 100%/1 sans-serif;
	font-size: 16px;
}

div,
a {
	position: relative;
}

body {
	height: var(--doc-height) !important;
	display: flex;
	flex-direction: column;
}

body.no-scroll {
	overflow: hidden;
}

.no-transition {
	transition: none !important;
}

/* Avkommentera för js-reveal
html.sr .js-reveal {
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
} */

/* Used code above this line */

.Section-headline--xl {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-xl);
}

.Section-headline--lg {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-lg);
}

.Section-headline--md {
	font-family: var(--font-secondary);
	padding-bottom: 1em;
	font-size: var(--font-size-md);
	line-height: var(--line-height-md);
}

/* Used code above this line */

.u-hidden {
	display: none !important;
}

.u-hiddenVisually {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
}

@media (min-width: 769px) {
	.u-hiddenDesktop {
		display: none;
	}
}

@media (max-width: 769px) {
	.u-hiddenMobile {
		display: none;
	}
}

.u-alignright {
	text-align: right;
}

.u-centered {
	text-align: center;
}

.u-capitalize {
	text-transform: capitalize !important;
}

.u-smallcaps {
	font-variant: all-small-caps;
	letter-spacing: var(--letter-spacing-sm);
}

.u-uppercase {
	text-transform: uppercase !important;
	letter-spacing: var(--letter-spacing-sm);
}

/* Used code above this line */

.Flex {
	display: flex;
	flex-wrap: wrap;
}

.Flex-grid {
	margin: 0 calc(var(--site-spacing-xs * -1));
}

.Flex-item {

}

.Flex-item--size1of4 {
	width: 25%;
}

.Flex-item--size3of4 {
	width: 75%;
}

.Flex-item--size1of2 {
	width: 50%;
}

.Flex-item--size1of3 {
	width: 33.33%;
}

.Flex-item--size2of3 {
	width: 66.66%;
}

@media (min-width: 769px) {
	.Flex-item--size1of3,
	.Flex-item--size2of3,
	.Flex-item--size1of4,
	.Flex-item--size3of4 {
		width: 100%;
	}
}

.Flex-center {
	align-items: center;
	justify-content: center;
}

.Flex-centerJustify {
	justify-content: center;
}

.Flex-centerAlign {
	align-items: center;
}

.Flex-spaceBetween {
	justify-content: space-between;
}

/* Used code above this line */

input,
textarea,
button {
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	width: 100%;
}

input[type="checkbox"] {
	-webkit-appearance: checkbox;
	        appearance: checkbox;
	transform: scale(1.3);
	width: 17px;
	height: 17px;
	margin-right: .6rem;
}

input::input-placeholder,
textarea::input-placeholder {
	color: rgb(20 20 20 / 60%);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}

.Checkbox-group {
	margin-bottom: 1.5rem;
}

.Checkbox-wrapper {
	padding: 3px;
}

.Checkbox {
	display: flex;
	font-size: 1.4rem;
}

.Checkbox-input {
	opacity: 0%;
	width: 16px;
	height: 16px;
	margin: 0;
}

.Checkbox-label {
	margin-top: 4px;
}

.Checkbox-control {
	display: inline-grid;
	width: 16px;
	height: 16px;
	background-color: rgb(255 255 255 / 10%);
}

.Checkbox-inputWrap {
	display: grid;
	grid-template-areas: "checkbox";
	margin-right: 5px;
	margin-top: 2px;
}

.Checkbox-inputWrap > * {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: checkbox;
	padding: 5px;
}

.Checkbox-control svg {
	transition: transform .1s ease-in 25ms;
	transform: scale(0);
}

.Checkbox-input:hover + .Checkbox-control,
.Checkbox-input:checked + .Checkbox-control {
  background-color: var(--color-dark);
}

.Checkbox-input:checked + .Checkbox-control svg {
	transform: scale(2.5);
}

.Checkbox-container {
	display: block;
	position: relative;
	padding: 10px 0 10px 35px;
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
}

.Checkboxlabel a {
	text-decoration: underline;
}

.PageContentThumbnail {
    margin-bottom: 2rem;
}

.Site-main {
    padding-top: calc(var(--site-logo-height) + 5rem);
}

.PageSection {
  margin-bottom: 5rem;
}

.PageSection > h1,
.PageSection > h2  {
    margin-bottom: 0.7em;
}

.PageSection > * {
    margin-bottom: 3rem;
}

.PageSection > .wp-block-image > figcaption {
    width: 50%;
    margin-top: 2rem;
    margin-bottom: 0;
}

.PageSection > .wp-block-columns.is-layout-flex {
    gap: 1rem;
}

.PageSection > .wp-block-columns figcaption {
    margin-top: 2rem;
    margin-bottom: 0;
}

.PageSection > p,
.PageSection > h1,
.PageSection > h2,
.PageSection > h3,
.PageSection > h4 {
    width: 50%;
}

.PageSection > p.excerpt {
    width: 65%;
}

@media (max-width: 769px) {
	.Site-main {
		display: none;
	}

    .PageSection {
        margin-bottom: 3rem;
    }

    .PageSection:last-of-type, .PageSection:last-child > :last-child {
        margin-bottom: 0.5rem;
    }

    .PageSection > p,
    .PageSection > h1,
    .PageSection > h2,
    .PageSection > h3,
    .PageSection > h4 {
        width: 60%;
    }

    .PageSection > p.excerpt {
        width: 75%;
    }
}

@media (max-width: 600px) {
    .PageSection > p,
    .PageSection > h1,
    .PageSection > h2,
    .PageSection > h3,
    .PageSection > h4 {
        width: 70%;
    }

    .PageSection > p.excerpt {
        width: 80%;
    }
}

.Site .Site-container {
	display: grid;
	margin-top: 2.5rem;
	grid-template-columns: 3fr 8fr;
	column-gap: 1rem;
}

@media (max-width: 769px) {
	.Site .Site-container {
		grid-template-columns: 1fr;
		width: calc(100% - 1.75rem * 2);
		margin-top: 2rem;
	}
}

@media (max-width: 600px) {
	.Site .Site-container {
		width: calc(100% - 1.25rem * 2);
		margin-top: 1.5rem;
	}
}

/* Used code above this line */

.Site {
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	        text-size-adjust: 100%;
}

.Site-container {
	width: calc(100% - var(--spacing-border) * 2);
	margin: 0 auto;
}

.Site-container--xs {
	max-width: var(--site-width-xs);
}

.Site-container--sm {
	max-width: var(--site-width-sm);
}

.Site-container--md {
	max-width: var(--site-width-md);
}

.Site-container--lg {
	max-width: var(--site-width-lg);
}

.Site-container--content {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-sm);
}

.Site-main svg,
.Site-main img {
  width: 100%;
}

/* Used code above this line */

.Toggle--container {
	overflow: hidden;
}

.Toggle--btn {
	background: var(--color-light);
	cursor: pointer;
}

.Toggle--btn.is-active:after {
	transform: rotate(-90deg);
}

.Toggle--content {
	height: 0;
 transition: 0.4s all 0s;
  overflow: hidden;
}

@media (min-width: 769px) {
	.Mobile--toggleContent {
		height: 100%;
	}
}

/* Used code above this line */

.wp-block-image {
	overflow: hidden;
}

.wp-block-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	vertical-align: bottom;
	transition: all .4s ease;
  	object-position: left;
}

/* Editor style for block */

.gallery {
    display: grid;
    grid-template-columns: repeat(var(--images-count), 1fr);
    column-gap: 1rem;
}

.Site-container--content .gallery > a {
    text-decoration: none !important;
}

.gallery > a {
    display: grid;
    grid-template-rows: var(--images-height);
}

.gallery > a:has(div) {
    display: grid;
    row-gap: 1rem;
    grid-template-rows: var(--images-height) auto;
}

.gallery img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.gallery > a > div {
    height: fit-content;
}

.gallery a div p, .gallery a div a {
    font-size: calc(var(--p-font-size) - 2px) !important;
}

.gallery a div h1, .gallery a div h2, .gallery a div h3, .gallery a div p {
    margin-bottom: 0.5rem
}

.gallery a div p:last-of-type{
    margin-bottom: 0;
}

/* Editor style for block */

.assets {
    width: 50%;
    display: grid;
    row-gap: 1rem;
}

@media (max-width: 769px) {
    .assets {
        width: 60%;
    }
}

@media (max-width: 600px) {
    .assets {
        width: 70%;
    }
}

.assets > a {
    text-decoration: none !important;
    display: grid;
    grid-template-columns: 1rem 1fr auto;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 20px;
    align-items: center;
    height: 45px;
    column-gap: 0.75rem;
    transition: border 250ms ease-in-out;
}

.assets > a:hover {
    border: 1px solid rgba(0, 0, 0, 1);
}

.assets > a p {
    white-space: nowrap;
    font-size: calc(var(--p-font-size) - 2px) !important;
    margin-top: 1px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Used code above this line */

.Footer-container {
	background-color: var(--color-dark);
	color: var(--color-light);
	padding: var(--spacing-md) var(--spacing-border) var(--spacing-lg);
	margin-top: auto;
}

/* Cookies */

.Cookies {
	position: fixed;
	bottom: -100%;
	left: 3rem;
	width: 45rem;
	z-index: 3;
	padding: 3rem 7rem;
	transition: all .5s ease-in-out;
	text-align: center;
}

.Cookies .Button {
	background: rgb(245 155 0);
	border: 1px solid rgb(245 155 0);
	color: rgb(33 36 39);
	display: inline-block;
	padding: .8rem 3rem 1rem;
	margin: 3rem auto 0;
	box-sizing: border-box;
	font-size: 1.6rem;
	transition: all .2s ease-out;
}

.Cookies .Button:hover {
	background: none;
	color: rgb(245 155 0);
	border: 1px solid rgb(245 155 0);
}

@media (--md-mx-viewport) {
	.Cookies {
		left: 0;
		width: auto;
		right: 0;
		text-align: left;
		padding: 3rem 12rem 3rem 3rem;
	}

	.Cookies p {
		font-size: 1.6rem;
	}

	.Cookies .Button {
		position: absolute;
		bottom: 3rem;
		right: 3rem;
		padding: .8rem 2rem 1rem;
	}
}

@media (max-width: 600px) {
	.Cookies {
		padding: 3rem 12rem 3rem 2.5rem;
	}

	.Cookies .Button {
		bottom: 3rem;
		right: 2.5rem;
		padding: .8rem 2rem 1rem;
	}
}

/* Header */

.menu {
  padding-top: calc(var(--site-logo-height) + 5rem);
  position: fixed;
}

.menu .children a {
  font-size: calc(var(--menu-font-size) - 2px);
}

.menu > ul > li {
  margin-top: 0.75rem;
}

.menu > ul > li:first-child {
  margin-top: 0;
}

.menu > ul > li .Page-content {
  display: none;
}

.menu .children > li {
  margin-top: 0.5rem;
}

.menu .children > li:first-child {
  margin-top: 0.75rem;
}

.menu > li > a {
  position: relative;
  display: inline-block;
}

.menu .page_item_has_children > a::after, .menu .page_item_has_children > a::before {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 1px;
  background-color: black;
  right: -0.75rem;
  top: 52%;
  transform: translateY(-50%);
}

.menu .page_item_has_children > a::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 250ms ease-in-out;
}

.menu .page_item_has_children.current_page_item > a::after {
  transform: translateY(-50%) rotate(0deg);
}

.menu .page_item_has_children.current_page_item.active > a::after {
  transform: translateY(-50%) rotate(90deg);
}

li .page_item_has_children li:first-child {
  margin-top: 0.5rem;
}

.menu .current_page_item .page_item_has_children.active > a::after {
  transform: translateY(-50%) rotate(0deg);
}

.menu .page_item_has_children ul {
  padding-left: 1.5rem;
  display: none;
}

.menu .page_item_has_children.current_page_item ul {
  display: block;
}

.Head-logo {
  margin-bottom: 5rem;
  display: inline-block;
  position: fixed;
  z-index: 10;
}

.Head-logo--image {
  height: var(--site-logo-height);
}

.menu .current_page_item .page_item_has_children {
  overflow: hidden;
  max-height: var(--collapse-height, 20px);
  transition: max-height 250ms ease;
}

.menu .current_page_item .page_item_has_children.active {
  max-height: var(--expand-height, 100%);
}

.menu > ul > .current_page_item {
  transition: height 250ms ease;
  max-height: 100%;
  overflow: hidden;
}

@media (max-width: 769px) {
  .menu, .Head-logo {
    position: relative;
    padding-top: 0;
  }

  .menu .page_item > a::after, .menu .page_item > a::before {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 1px;
    background-color: black;
    right: -0.75rem;
    top: 52%;
    transform: translateY(-50%);
  }
  
  .menu .page_item > a::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform 250ms ease-in-out;
  }

  .menu .page_item.current_page_item > a::after {
    transform: translateY(-50%) rotate(0deg);
  }

  .menu .page_item_has_children.current_page_item ul {
    display: none;
  }

  .menu > ul > li {
    overflow: hidden;
    margin-top: 0;
    border-bottom: 1px solid black;
    padding: 0.4rem 0;
    transition: height 400ms ease-out;
    box-sizing: content-box;
  }

  .menu > ul > li:first-child {
    padding-top: 0;
  }

  .menu > ul > li .Page-content {
    padding-top: 1.5rem;
    display: block;
  }

  .Head-logo {
    margin-bottom: 2rem;
  }

  .Head {
    padding-bottom: 1rem;
  }
}