/**
This file includes rules that are used in the RTE-editor in MODX to make it look and feel the same as the site. The following CSS is loaded into the TinyMCE in the following order:

  -Custom fonts (if applicable)
  -Font Awesome
  -bootstrap-custom.min.css
  -rte.ccs

Keep this file simple. Include only rules that are needed to keep a consistent look and feel in RTE, such as font-familiy, sizes, bullets, tables, etc.
The files above, including rte.css will also be loaded into the site as a basis, before site.css
**/

:root {
    --cm-content-color-rgb: var(--bs-body-color-rgb);
    --cm-invert-color-rgb: var(--bs-light-rgb);
}
/* The following variables are used to style elements according to the background they are placed on */
.text-bg-primary,
.text-bg-info,
.text-bg-dark {
    --cm-content-color-rgb: var(--bs-light-rgb);
    --cm-invert-color-rgb: var(--bs-body-color-rgb);
}
.text-bg-light {
    color: var(--bs-body-color) !important;
}
.lead {
    font-family: "eb-garamond", serif;
}
img, video, picture {
    max-width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius-xl);
}
table {
    border-collapse: collapse;
	width: 100% !important;
	height: auto !important;
	border: none;
	margin-bottom: 1.5rem;
	border-radius: var(--bs-border-radius-lg);
	overflow: hidden;
}
table tr {
	border-top: 1px solid var(--bs-border-color);
	width: auto !important;
	height: auto !important;
}
table tr:first-child {
	border-top: none;
}
table tr:hover td {
	filter: brightness(0.97)
}
table col {
	width: auto !important;
}
table td {
    background-color: var(--bs-light);
	padding: .5rem;
	width: auto !important;
	height: auto !important;
	vertical-align: top;
}
table td:first-child {
    padding-left: 1rem;
}
table td > *:last-child {
    margin-bottom: 0;
}
table thead tr {
	font-weight: 700;
}
table thead tr td {
    background-color: var(--bs-info);
    color: #FFF;
    vertical-align: bottom;
}
table tfoot tr td {
	font-weight: 600;
	border-top: 1px solid var(--bs-primary);
	border-bottom: 1px solid var(--bs-primary);
}
table tr.row-subheading {}
table tr.row-summary {}
table td.cell-highlighted {
    background-color: var(--bs-light);
}
blockquote {
    border-left: .25rem solid var(--bs-primary);
    padding-left: .5rem;
    font-size: 1.2rem;
    font-weight: 600;
}
.unbreakable {
    white-space: nowrap;
}
.caption {
    font-style: italic;
}
li::marker {
  color: var(--bs-primary);
}

/* Styles only applied inside Rich text editor */
#tinymce .btn-light,
#tinymce .btn-outline-light,
#tinymce .btn-outline-white {
    filter: brightness(80%);
}
#tinymce .btn,
.rte-wrapper .btn {
    border-radius: var(--bs-border-radius-pill) !important;
}
.btn-simple-link {
    color: inherit;
    border-color: transparent !important;
    padding-left: 0;
    padding-right: 0;
}
.btn-simple-link:hover {
    color: inherit;
    text-decoration: underline;
}
.btn-icon-start::before {
    content: var(--fa);
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
    font-size: 1em;
    margin-right: .5em;
}
.btn-icon-end::after {
    content: var(--fa);
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
    font-size: 1em;
    margin-left: .5em;
}
#tinymce .btn i,
.rte-wrapper .btn i {
    padding-left: 0.25em;
}


/* Setter gap mellom knappene som plasseres i Richtext */
#tinymce p:has(> .btn + .btn),
.rte-wrapper p:has(> .btn + .btn) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1rem;
}
#tinymce p:has(> .btn + .btn),
.rte-wrapper p[style*="text-align: center"]:has(> .btn + .btn) {
    justify-content: center;
}
a:hover {
    text-decoration: none;
}


/* Many times, buttons are placed dynamically on different background. Just use the class .btn-inherit or .btn-outline-inherit and a color will be chosen in the same style as the text. */
.btn-inherit {
    background-color: rgba(var(--cm-content-color-rgb), 1);
    border-color: rgba(var(--cm-content-color-rgb), 1);
    color: rgba(var(--cm-invert-color-rgb), 1);
}
.btn-inherit:hover {
    background-color: rgba(var(--cm-content-color-rgb), .8);
    border-color: rgba(var(--cm-content-color-rgb), .8);
    color: rgba(var(--cm-invert-color-rgb), .8);
}
.btn-outline-inherit {
    border-color: rgba(var(--cm-content-color-rgb), 1);
    color: rgba(var(--cm-content-color-rgb), 1);
}
.btn-outline-inherit:hover {
    border-color: rgba(var(--cm-content-color-rgb), 1);
    background-color: rgba(var(--cm-content-color-rgb), 1);
    color: rgba(var(--cm-invert-color-rgb), 1);
}

[class*="text-bg"] a {
    color: rgba(var(--cm-content-color-rgb), 1);
}
[class*="text-bg"] a:hover {
    color: rgba(var(--cm-content-color-rgb), 1);
    text-decoration: none;
}





/** ################################################## MEDIA QUERIES ################################################## **/

/** Small devices (landscape phones, 576px and up) **/
/** Bootstrap: -sm **/
@media (min-width: 576px) {
	html,body {
	}
}

/** Medium devices (tablets, 768px and up) **/
/** Bootstrap: -md **/
@media (min-width: 768px) {
	html,body {
	}
}

/** Large devices (desktops, 992px and up) **/
/** Bootstrap: -lg **/
@media (min-width: 992px) {
	html,body {
	}
}

/** Extra large devices (large desktops, 1200px and up) **/
/** Bootstrap: -xl **/
@media (min-width: 1200px) {
	html,body {
	}
    h1,.h1 {
        font-size: 4rem;
    }
    h2,.h2 {
        font-size: 3rem;
    }
    h3,.h3 {
        font-size: 2rem;
    }
    h4,.h4 {
        font-size: 1.5rem;
    }
    h5,.h5 {
        font-size: 1rem;
    }
    h6,.h6 {
        font-size: 0.75rem;
    }
}

/** Extra Extra large devices (extra large desktops, 1400px and up) **/
/** Bootstrap: -xxl **/
@media (min-width: 1400px) {
	html,body {
	}
}