/* Christian forslag til endringer */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

:root {
  
	--fontLogo: 'Figtree', sans-serif;
	--fontSans: 'Source Sans 3';
	--fontSerif: 'Souce Serif 4';
    --contentLineHeight:           1.5;
	--contentLinkColor: #474e8e;
	--pageWidth: 1440px;
}

body > main {
    & #ssrows {
        & .ssrow {

			

			> div {
				.ssfrag-vacancy-index {

					h1 {
						
					}

					.lead {
						font-size: var(--fontSizeSmall);
						
					}
					.meta {
						margin: 0 0 1em 0;
					}

					.linkbox {
						margin: 1rem 0;
					}

				}
			}

            &.vacancy {

				& .component {
					
				}
                
				background-color: #fff
            }
        }
    }
}
bo

section.issue, section.article, section.news, section.vacancy, section.book, section.page {
    & #content,
	& article {

		

        & header {
            & details {

                font-size: var(--fontSizeSmall);
				

				ul {
					
					margin: 1em 0;
					padding: 0;
					border: none;
				}

				ul li {
					color: #000;
					margin: 1em 0;

					.name {
						font-weight: 700;
					}

					.info {
						margin-bottom: 1rem;
					}

					.address {
						margin-top: 1em;
					}

					.address::before {
						content: "Kontakt";
						font-weight: 700;
						text-transform: uppercase;
						letter-spacing: 1px;
						font-size: calc(var(--fontSizeSmall)*0.85);
					}

				}

				ul li:first-of-type::before {
						content: "Tilhørighet";
						display: block;
						font-weight: 700;
						text-transform: uppercase;
						letter-spacing: 1px;
						font-size: calc(var(--fontSizeSmall)*0.85);
						margin-bottom: 1.5rem;
					}

                summary::after {
                    content: " \007C  Se mer";
                    font-weight: 700;
                }

                dl {
                    margin: 2rem 0;
                }

                dt {
                    font-weight: 700;
                }

                dd + dt {
                    margin-top: 2rem;
                }

                dd,dt {
                    margin-bottom: 0.25rem;
                }

                dl::before,
                dt:last-of-type {     
                    display: block;
                    text-transform: uppercase;
                    font-weight: 700;
                    font-size: smaller;
                    letter-spacing: 1px;      
                }

                dl::before {
                content: "Tilhørighet"; 
                margin-bottom: 2rem;
                }
            }

            div.pubInfo {
                font-size: var(--fontSizeSmall);
            }  
            
            & details[open] {
                summary::after {
                    content: " \007C  Se mindre";
                }
            }
            
        }

    }

    & #content, & article {

		& p {

			& em {

				font-style: italic;
				font-weight: 400;

				& .italic {
					//font-weight: 700;
				}
			}
		}

		& a {
			color: var(--contentLinkColor);
			text-decoration: underline;
		}

		h1 {
			font-size: 2em;
		}

		& figure {

			figcaption {

				p:last-of-type {
					display: inline-block;
				}
				
				p:last-of-type::after {
					content: ". ";
				}

				p + div.origin {
					display: inline-block;
					color: var(--variantColor3);
				}

			}
			
		}

		.box.fact.debatt {
			background-color: #eee5d5;
			border: none;
			padding: 2rem;

			p:last-child {
				margin-bottom: 0;
			}

			details[open] {

				summary {
					border-bottom: 1px solid #aa8135;
					margin-bottom: 1rem;
					padding-bottom: 1rem;
				}

			}

			&.debatt-halv {
				width: 40%;
				float: right;
				margin: 2rem;
				margin-right: 0;
				font-size: var(--fontSizeSmall);
			}
		}

        ul.bullet li p {
            margin-bottom: 0.75rem;
        }

         & .synopses {

			 input[type="radio"]:checked + label {    
					background-color: #fff;
					border-bottom: 2px solid #000;
					text-align: left;
				}        

				label h2 {
					text-align: left;
				}

            & .synopsis {
                p {
                    font-size: 1.875rem;
                    line-height: 1.375;
                }

               
            }
        }

        /* heading */
        h2 {
            font-size: calc(var(--fontSize)*1.8);
            margin-bottom: .5rem;
            //text-align: center;
        }

        h3,h4 {
            font-size: calc(var(--fontSize)*1.4);
            margin-bottom: .5rem;
        }

        h4 {
            font-style: italic;
        }

        h5, h6 {
            font-family: var(--fontSerif);
            margin: 0;
        }

        h6 {
            font-style: italic;
        }

        & .sourcelist {

            details {

                h3::before {
                    content: "\002B   ";
                }

                summary::marker {
                    content: "";
                }

            }

            details[open] {
                
                h3:before {
                    content: "\2212  ";
                    font-weight: 400;
                }

            }

            ol {
                margin: 0;
            }
        
            & p {
                margin: 0;
                padding: 2rem 0;
                text-indent: 0;
                border-bottom: 1px solid var(--dividor);
            }

        }
    
        & .box {
         
            &.excerpt p { 
            }
        }

        /* Tabeller */

        figure > h1 {
            margin-bottom: 0;
        }

        table {
            width: 100%;
            margin: 0;

            caption {
                margin: 0 0 1rem 0;
            }

            tbody {
                border-top: 1px solid var(--dividor);
                border-bottom: 1px solid var(--dividor);   
            }

            th, td {
                border: 0;
                padding: .75rem 0;
                text-align: center;
            }

            tr > th:first-of-type,
            tr > td:first-of-type {
                text-align: left;
            }

        }
    }

    

    /* Galleri - mulig? */

    .gallery {
        display: flex;
        gap: 2rem;
        width: 100%;
        height: auto;

        figure {
            flex: 1;
            display: flex;
            flex-direction: column;
        }   

        figure > img {
            width: 100%;
            height: auto;
        }
    }

}

/* more */
.results .more > div {
	position: relative;
	width: 5em;
	padding: 5px 30px 5px 10px;
	border: 1px solid var(--dividor);
	border-radius: var(--miniBoxRadius);
	text-transform: capitalize;
	line-height: 1.4;
	cursor: pointer;
	&::after {
		position: absolute;
		top: 7px;
		right: 3px;
		content: ' \002B';
		width: 25px;
		height: 25px;
		//background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m108.73,86l294.53,170L108.73,426V86Z"/></svg>') no-repeat 0 0;
        background: none;
	}
	&:hover {
		background-color: var(--colLineColor);
	}
}

/* search */
.ssfrag-search > div {
	display: grid;
	grid-template-columns: 62% 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"topbanner topbanner"
		"form form"
		"content aside"
		"bottombanner bottombanner";
	gap: 40px var(--colGap);
	font-family: var(--fontSans);
	line-height: 1.4;
	& .advertisement.top {
		grid-area: topbanner;
	}
	& .advertisement.bottom {
		grid-area: bottombanner;
	}
	& form {
		grid-area: form;
		display: flex;
		width: 62%;
		& input,
		& button {
			padding: .5em;
			border: 1px solid var(--dividor);
			border-radius: 7px;
			font-size: var(--fontSizeBig);
		}
		& input {
			flex-grow: 1;
		}
		& button {
			margin-left: 1em;
			padding-left: 1em;
			padding-right: 1em;
			background-color: transparent;
			& svg {
				width: 1em;
				height: 1em;
			}
			&:hover {
				cursor: pointer;
				background-color: var(--colLineColor);
			}
		}
	}
	& .showfilters {
		display: none;
	}
	& .results.filter {
		display: contents;
		& aside {
			grid-area: aside;
			& h2 {
				margin-bottom: 1em;
				font-size: var(--fontSizeBig);
			}
			& .facetgroup {
				display: grid;
				grid-template-columns: 1fr auto;
				grid-template-rows: auto 1fr;
				grid-template-areas:
					"header check"
					"facets facets";
				gap: 0;
				padding: 1em 0;
				border-top: 1px solid var(--dividor);
				&:has(ul .selected) {
					& label {
						cursor: unset;
					}
					& input {
						display: none;
					}
				}
				&:not(input:checked) {
					ul {
						display: none;
					}
				}
				&:has(input:checked) {
					ul {
						display: block;
					}
				}
				& label {
					display: contents;
					h3 {
						grid-area: header;
						font-size: var(--fontSize);
						cursor: pointer;
							&:hover {
							& + span input::before {
							visibility: visible;
							}
						}
					}
					& span {
						display: contents;
						& input {
							grid-area: check;
							appearance: none;
							width: 1px;
							height: 1px;
							&:not(:checked)::before {
								content: '+';
								margin-left: -.5em;
								font-size: var(--fontSizeBig);
							}
							&:checked::before {
								content: '-';
								visibility: hidden;
								margin-left: -.5em;
								font-size: var(--fontSizeBig);
							}
							&:not(:checked) + ul {
								display: none;
							}
							&:checked + ul {
								display: block;
							}
						}
					}
				}
				& ul {
					grid-area: facets;
					list-style: none;
					& li {
						& a {
							display: flex;
							justify-content: space-between;
							margin: .5em 0;
							border-bottom: 1px solid transparent;
							& .check { /* WHAT IS THIS FOR? */
								display: none;
							}
							&:hover {
								border-bottom-color: var(--colLineColor);
							}
						}
						&.selected {
							font-weight: bold;
						}
						&.empty {
							display: none;
						}
					}
					&:has(li.selected) {
						display: block;
					}
				}
			}
		}
		& > div {
			grid-area: content;
			position: relative;
			&::after {
				position: absolute;
				top: 0;
				right: var(--colLinePos);
				width: 2px;
				height: 100%;
				content: '';
				background-color: var(--colLineColor);
			}
			& .head {
				display: flex;
				justify-content: space-between;
				margin-bottom: 2em;
			}
			& .result {
				margin: 1em 0;
				padding-bottom: 1em;
				border-bottom: 1px solid var(--dividor);
				& a {
					display: grid;
					grid-template-columns: 20% 1fr;
					grid-template-rows: auto 1fr;
					grid-template-areas:
						"meta meta"
						"header header"
						"image lead";
					gap: 10px 20px;
					a {
						display: contents;
					}
					& .meta {
						grid-area: meta;
						font-size: var(--fontSizeSmall);
						& .type {
							font-weight: 700;
						}
						& .date {
							&::before {
								content: ' | ';
							}

						}
					}
					h3 {
						grid-area: header;
						margin-top: 0;
						font-size: var(--fontSizeBig);
					}
					.articleimg {
						grid-area: image;
						& img {
							width: 100%;
							aspect-ratio: 16 / 9;
							object-fit: cover;
							border: 1px solid var(--dividor);
						}
					}
					.lead {
						grid-area: lead;
						max-height: 11.1em;
						overflow: hidden;
						font-size: var(--fontSizeSmall);
						word-break: break-word;
						& em {
							font-weight: 700;
						}
					}
				}
			}
		}
	}
}

.categoryCollection { /* category collection landing page */
	& > div {
		& > div {
			&.ssfrag {

                .meta {
                   margin: 0;
                }
				& > div {
					height: unset;

					& h1 { 
						
					}

					.linkbox {
						grid-template-columns: 25% 1fr !important;
						grid-template-areas:
						"image meta"
						"image header"
						"image lead" !important;
						margin: 2em 0 !important;
						padding-bottom: 2em !important;
						border-bottom: 1px solid var(--dividor) !important
						& img {
							width: 100%;
							aspect-ratio: 16 / 9;
							object-fit: cover;
							border: 1px solid var(--dividor);
                            }
						& h1 {
							font-size: var(--fontSizeBig);
                            margin: 0;
						}
						& .lead p {
							font-size: var(--fontSizeSmall);
						}
						&:last-of-type {
							border: none;
						}

                        span.type {
                            font-weight: 700;
                        }
					}
				}
			}
		}
	}
}

.ssfrag-vacancy-index-sectionTitle {
				color: red;

				a { color: inherit;}
			}