/* BASICS */
:root {
    --base-font-size: 17px;
    --red: #A81309;
    --not-so-dark: #666;
    --not-so-dark-border: 2px solid var(--not-so-dark);
    --content-width: 930px;
    --blockquote-width: calc(var(--content-width) / 2);
    --outer-width: 1320px;
    --medium-width: 430px;
    --medium-height: 240px;
    --body-font-size: var(--base-font-size);
    --menu-font-size: calc(var(--body-font-size) / 3 * 5);
    --medium-font-size: calc(var(--body-font-size) / 3 * 5);
    --h2-top-story-font-size: calc(var(--body-font-size) / 3 * 10);
    --chapter-font-size: calc(var(--body-font-size) * 1.3);
    --thin-line: 1px solid #000;
    --light-background: #f3f3f3;
    --not-as-light-background: #e6e6e6;
    --sentence-width: 46rem;
}

/* DEV SETTINGS */
body.url-pio25-ddev-site {
    border-left: 0px solid yellow;
}

/* FONTS TYPOGRAPHY */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    /* Range of supported weights */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    /* Range of supported weights */
    font-style: italic;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: var(--body-font-size);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    margin: 0;
    padding: 0;
}

em {
    font-style: italic;
    /* font-weight: 300; */
}

.frontpage-section h2,
.term-grid-page h2,
h1,
.pio-2-top-story h2,
.pio-top-story h2 {
    font-size: var(--h2-top-story-font-size);
    line-height: 1.2em;
}

h2.node__title {
    font-size: var(--h2-top-story-font-size);
}

h1 p,
h2 p,
h3 p {
    margin: 0;
    padding: 0;
}

h2.sub-title {
    font-weight: normal;
    margin-bottom: 2rem;
    margin-top: -1rem;
}

.pio-2-top-story h4.rider,
.pio-top-story h4.rider {
    font-size: var(--medium-font-size);
}

.merged_tags li a::first-letter,
blockquote::first-letter,
.rider::first-letter {
    text-transform: capitalize;
}

/* RICH TEXT HEADINGS */
span.red {
    color: var(--red);
}

span.red-background-white {
    color: #fff;
    background-color: var(--red);
}

span.red-background-black {
    color: #000;
    background-color: var(--red);
}

span.yellow-background {
    background-color: yellow;
}


/* LINKS */
a:visited,
a {
    text-decoration: none;
    color: #000;
    /* color: var(--red); */
}

a:hover,
a:active {
    color: var(--red);
}

a.is-active {
    font-weight: bold;
}

.field--name-description a,
article a {
    font-weight: bold;
    color: var(--red) !important;
    border: 0;
}

.node--type-book a,
.field--type-entity-reference a,
.field--name-body a {
    /* border-bottom: 1px solid #999; */
}

/* LAYOUT, STRUCTURE */
/* Container with burger | logo | search */
.page-top {
    display: grid;
    grid-template-columns: 1fr 440px 1fr
}

#pio-logo a {
    margin: 0 auto;
    display: block;
    width: fit-content;
}

#pio-logo a#pio-home {
    display: none;
}

#pio-logo img {
    height: 120px;
    width: auto;
}

.content-top {
    width: var(--outer-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr var(--content-width) 1fr;
    z-index: -100;
}

#messages,
#content,
.pio-booster,
.page-top {
    width: var(--content-width);
    margin: 0 auto;
}

#messages {
    margin-top: 2rem;
}

/* EDITOR TABS - class set by block classes moduele */
.pio-editor-tabs {
    border-bottom: var(--not-so-dark-border);
    margin: 1rem 0;
    padding: 0;
}

.pio-editor-tabs ul {
    margin: 0 0 0.5rem 0;
    padding: 0;
}

.pio-editor-tabs ul li {
    display: inline;
    list-style: none;
    border: var(--not-so-dark-border);
    border-bottom: 0;
    padding: 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.pio-editor-tabs ul li:has(a.is-active) {
    font-weight: bold;
    background-color: var(--red);
}

.pio-editor-tabs ul li:has(a.is-active) a {
    color: #fff;
}

/* ADS */

/* DEMO ADS - NOT IN USE
.pio-ad {
    background-color: lime;
    text-align: center;
}

.pio-ad1,
.pio-ad4 {
    height: 130px;
    width: var(--outer-width);
    margin: 0 auto 1rem auto;
}

.pio-ad4 {
    position: relative;
    left: 50%;
    margin-left: calc(-1 * var(--outer-width) / 2);
    background-color: aquamarine;
}

.pio-ad2,
.pio-ad3 {
    height: 1200px;
    width: 170px;
}

.pio-ad2 {
    float: left;
    background-color: pink;
}

.pio-ad3 {
    background-color: orange;
    float: right;
}
*/
#ad3 {
    margin-left: 2rem;
}

#ad1,
#ad5 {
    margin-bottom: 1rem;
    max-height: 130px;
    width: auto;
    overflow: hidden;
}

#ad5 {
    /* margin-bottom: 5rem; */
}

body.page-node-type-article .content-top {
    display: block;
    position: absolute;
    width: var(--outer-width);
    /* Maintain your width */
    left: 50%;
    /* Push the element to the center of the page */
    transform: translateX(-50%);
    /* Offset it back by half its width */
    margin: 0;
    /* Ensure no extra margin interferes */
}

body.page-node-type-article .content-top #ad2 {
    float: left;
}

body.page-node-type-article .content-top #ad3 {
    width: fit-content;
    float: right;
}

.simpleads ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.simpleads ul li img {
    margin: 0 auto;
}

.block-simpleads img {
    max-width: var(--content-width);
    height: auto;
}

.simpleads ul {
    margin: 0;
    padding: 0;
}


/* MESSAGES */
div[data-drupal-messages] {
    background-color: #393;
    padding: 1rem;
    color: #fff;
    margin-bottom: 2rem;
}

div[data-drupal-messages] a {
    color: #fff;
    ;
}

/* BOOSTER MENU */
.pio-booster {
    display: flex;
}

.pio-booster ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: -3rem;
}

.pio-booster ul li {
    display: inline;
    list-style: none;
    font-size: var(--menu-font-size);
    flex: 1;
    text-align: center;
}

/* BURGER MENU */
#ssmm-wrapper #ssmm_trigger span {
    width: 45px;
    height: 5px;
    margin-bottom: 10px;
}

#ssmm-wrapper #ssmm_trigger input:checked~span.burger:nth-child(3) {
    transform: translate(0px, 1px) rotate(-45deg);
}

#ssmm-wrapper {
    right: auto;
    top: auto;
    position: relative;
    font-size: var(--chapter-font-size);
    margin-left: 6.5rem;
    margin-top: 3rem;
}

#ssmm-wrapper .burger {
    background: var(--red) !important;
}

#ssmm-wrapper #ssmm_trigger>ul {
    right: auto;
    background-color: #fff;
    border: var(--not-so-dark-border);
    padding: 0.5rem;
    text-align: left;
    width: auto;
    border: var(--thin-line);
    border-radius: 0;
    margin-top: 0;
}

#burger_menu {
    visibility: hidden;
}

/* FRONT PAGE */
.pio-top-story {
    margin-bottom: 2rem;
}

.pio-stories-block-page,
.pio-stories-block>div>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    grid-template-rows: 1fr 1fr;
    /* Two equal rows */
    gap: 10px;
    /* Optional: space between the grid items */
}

.pio-stories-block-page nav ul {
    position: absolute;
    width: 100%;
    left: 0;
    margin-left: -3rem;
}

.pio-stories-block-page .views-row h3 {
    width: 90%;
}

.pio-stories-block {
    margin: 2rem 0;
}

body.path-frontpage #content {
    /* border-top: var(--thin-line); */
    /* padding-top: 2rem; */
    margin-top: 2rem;
}

.frontpage-section h3,
.medium-story .views-row h3 {
    font-size: var(--medium-font-size);
    max-width: var(--medium-width);
    margin: 0;
    padding: 0;
}

h4.rider {
    color: var(--red);
    max-width: var(--medium-width);
    margin: 0;
    padding: 0;
}

.feed-icon {
    display: none;
}

/* LEFT RIGHT STORIES */
#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:nth-child(2),
#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:first-child {
    grid-column: 1 / -1;
}

#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:nth-child(2) .views-field-field-media,
#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:first-child .views-field-field-media {
    float: left;
    margin-right: 1rem;
    width: 456px;
}

#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:nth-child(2) h3,
#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:first-child h3,
#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:nth-child(2) h4.rider,
#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:first-child h4.rider {
    max-width: none;
    padding-right: 2rem;
}

#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:nth-child(2) h4.rider,
#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:first-child h4.rider {
    margin-top: 2rem;
}

#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:nth-child(2) h3,
#block-pio-theme-views-block-sektioner-block-6--2 .frontpage-section .views-row:first-child h3 {
    font-size: 2rem;
}

/* NEW FRONT PAGE */
.frontpage-section.top-story {
    margin-bottom: 2rem;
}

.frontpage-section.sub-stories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.frontpage-section .views-field-field-eyebrow a {
    color: var(--red);
    font-size: var(--medium-font-size);
    font-weight: bold;
}

.frontpage-section.sub-stories .views-field-field-eyebrow a {
    font-size: 1rem;
}

.frontpage-section.sub-stories img {
    width: 100%;
    height: auto;
}

.frontpage-section.top-story h3 {
    width: 90%;
}

.views-element-container:has(.podcast-block)>h2,
.views-element-container:has(.did-you-read)>h2,
.views-element-container:has(.frontpage-section)>h2 {
    text-align: center;
    font-size: 200%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 0.5rem;
    margin: 4rem auto 2rem auto;
    color: var(--red);
}

.frontpage-section.theme {}

/* LEFT_RIGHT STORIES */
#block-pio-theme-views-block-frontpage-block-4--2 .views-row:nth-child(2),
#block-pio-theme-views-block-frontpage-block-4--2 .views-row:first-child {
    grid-column: 1 / -1;
}

#block-pio-theme-views-block-frontpage-block-4--2 .views-row:nth-child(2) .views-field-field-media,
#block-pio-theme-views-block-frontpage-block-4--2 .views-row:first-child .views-field-field-media {
    float: left;
    margin-right: 1rem;
}

#block-pio-theme-views-block-frontpage-block-4--2 .views-row:nth-child(2) h3,
#block-pio-theme-views-block-frontpage-block-4--2 .views-row:first-child h3,
#block-pio-theme-views-block-frontpage-block-4--2 .views-row:nth-child(2) h4.rider,
#block-pio-theme-views-block-frontpage-block-4--2 .views-row:first-child h4.rider {
    max-width: none;
    padding-right: 2rem;
}

#block-pio-theme-views-block-frontpage-block-4--2 .views-row:nth-child(2) h4.rider,
#block-pio-theme-views-block-frontpage-block-4--2 .views-row:first-child h4.rider {
    margin-top: 2rem;
}

/* HOT RIGHT NOW */

.hot-wrapper {
    border: 2px solid var(--red);
    padding: 0.5rem;
    height: 240px !important;
    width: 440px;
}

.hot-wrapper .views-field-counter {
    font-weight: bold;
    float: left;
    width: 2rem;
    color: var(--red);
}

.hot-wrapper .views-row {
    font-size: 1.1rem;
    line-height: 2rem;
}

.hot-wrapper h3 {
    margin-bottom: 1rem;
}

/* NEWSLETTER RED BOX */
.newsletter-red {
    background-color: var(--red);
    color: white;
    padding: 1rem;
    text-align: center;
    height: 224px !important;
}

.newsletter-red #mc-embedded-subscribe {
    background-image: none !important;
}

.newsletter-red input[type=email] {
    width: 80% !important;
    font-size: 1.2rem;
}

.newsletter-red input[type=submit] {
    background-color: pink !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    padding: 1rem !important;
    color: #000 !important;
    background-color: var(--light-background) !important;
    margin: 1rem auto;
}

.newsletter-red .signup-text {
    font-size: 1.2rem;
}

/* DID YOU READ */
.did-you-read {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.did-you-read .views-row {
    margin-bottom: 2rem;
    border: 2px solid var(--red);
    padding: 0.5rem;
    font-weight: bold;
    font-size: 1.2rem;
}


/* FRONTPAGE BOTTOM BLOCK FOR ARTICLES */
#block-pio-theme-views-block-frontpage-block-6,
#block-pio-theme-views-block-frontpage-block-6--2 {
    padding-top: 2rem;
    border-top: var(--thin-line);
}

#block-pio-theme-views-block-frontpage-block-6 h2,
#block-pio-theme-views-block-frontpage-block-6--2 h2 {
    font-size: 200%;
}

#block-pio-theme-views-block-frontpage-block-6 .views-col,
#block-pio-theme-views-block-frontpage-block-6--2 .views-col {
    max-width: 45%;
}

#block-pio-theme-views-block-frontpage-block-6 .views-col.col-1,
#block-pio-theme-views-block-frontpage-block-6--2 .views-col.col-1 {
    margin-right: 5rem;
}

#block-pio-theme-views-block-frontpage-block-6 .views-row,
#block-pio-theme-views-block-frontpage-block-6--2 .views-row {
    margin-bottom: 2rem;
}

/* ARTICLES */
.field--name-field-eyebrow {
    color: var(--red);
    font-size: var(--medium-font-size);
    font-weight: bold;
}

/* .field--name-field-image-credit {
    margin-top: -3.5rem;
    padding: 0.5rem;
    color: #fff;
    text-shadow: 1px 1px #000;
    text-align: right;
}*/

h1.article-heading p,
.field--name-field-image-caption p {
    margin: 0;
    padding: 0;
}

body.path-node h1,
h1.article-heading {
    margin-bottom: 2rem;
}

.field--name-field-image-caption {
    font-style: italic;
    color: #666;
    margin: 0.5rem 2rem 0.5rem 2rem;
}

.caption-credit {
    text-align: right;
}


.caption-credit p,
.caption-credit div {
    display: inline;
}


article.node--type-article h3 {
    margin: 2rem 0 0 0;
    font-size: var(--chapter-font-size);
}

article.node--type-article h3+p {
    margin-top: 0;
}

article.node--type-article header {
    display: none;
}

article.node--unpublished {
    background-color: pink;
}

h3 p {
    margin: 0;
    padding: 0;
}

article.node--type-article blockquote {
    margin: 2rem auto;
    font-weight: bold;
    width: var(--blockquote-width);
    font-size: var(--chapter-font-size);
    text-align: center;
    /* background-image: url(/themes/custom/pio_theme/images/quote.png); */
    /* background-repeat: no-repeat; */
    /* background-position: top left; */
    padding: 5px 0 5px 30px;
}

article.node--type-article blockquote::before {
    content: url(/themes/custom/pio_theme/images/quote.png);
    margin-right: 0.5rem;
}

article.node--type-article blockquote p {
    display: inline;
}

/* If something is in italics in a blockquote, it's the name of the quote originator and it should be rendered like the usual body text */
article.node--type-article blockquote em {
    font-style: normal;
    font-size: var(--base-font-size);
    font-weight: normal;
}

/* If something is in bold in a blockquote, it's supposed to be redered in red */
article.node--type-article blockquote strong {
    color: var(--red);
}

.merged_tags,
.field--name-field-categories,
.field--name-field-tags {
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: var(--thin-line);
    /* border-bottom: var(--thin-line); */
}

.merged_tags {
    margin: 0;
    padding: 1rem 0;
    font-weight: bold;
}

.merged_tags li {
    display: inline-block;
    list-style: none;
    margin-right: 2rem;
}

.merged_tags li a {
    break-inside: avoid;
}

.merged_tags ul,
.merged_tags h3 {
    display: inline;
}

.field--name-field-categories .field__label,
.field--name-field-tags .field__label {
    font-weight: bold;
    font-size: var(--chapter-font-size);
    color: var(--red);
    margin-bottom: 0.5rem;
}

.field--name-field-authors {
    font-style: italic;
}

.pio-stories-block-page .views-row {
    margin: 1rem 0 2rem 0;
}

.pio-stories-block .views-field-field-media {
    max-height: 242px;
    overflow: hidden;
}

/* FACTBOX */
.factbox {
    /* background-color: var(--light-background);*/
    border: 2px solid var(--red);
    background-color: #f9f9f9;
    padding: 0 1rem;
    width: auto;
    margin-bottom: 1rem;
}

.factbox.right, .factbox.right p {
    width: 50%;
    float: right;
    margin-left: 2rem;
}

.factbox.left, .factbox.left p{
    width: 50%;
    float: left;
    margin-right: 2rem;
}

article.node--type-article .factbox p {
    width: auto;
}

.factbox h2 {
    margin-top: 0.5rem;
    color: var(--red);
}

/* COMMENTS */
.comment-block.open {
    max-height: 40rem;
    overflow: scroll;
}

.comment-block h2 {
    cursor: pointer;
    font-family: 'Newsreader';
    font-weight: bold;
    background-color: var(--red);
    text-align: center;
    color: #fff;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.comment-block h2 {
    cursor: pointer;
}

.comment-block h2~h2 {
    cursor: auto;
}

.comment-block form,
.comment-block article,
.comment-block h2~h2 {
    display: none;
}

.comment-block .indented {
    margin-left: 2rem;
}

.comment-block form,
.comment-block article {
    background-color: var(--light-background);
    margin-bottom: 2rem;
    padding: 0.5rem;
}

.comment-block article footer .contextual-region {
    display: none;
}

.comment-block article footer,
.comment-block article footer p,
.comment-block article footer article {
    margin: 0;
}

#edit-comment-body-0-format {
    display: none;
}

section:has(.comment-form) {
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: var(--thin-line);
}

section:has(.comment-form) label {
    display: block;
    font-weight: bold;
    margin-top: 0.5rem;
}

section:has(.comment-form) .form-actions {
    margin: 2rem 0;
}

section:has(.comment-comment-form),
section:has(.js-comment) {
    /* background-color: var(--light-background); */
    padding: 0.5rem;
}

section:has(.js-comment) ul.links.inline li {
    display: inline;
}

section:has(.js-comment) footer a {
    display: block;
    float: right;
    margin-top: -2.5rem;
}

section:has(.js-comment) article {
    padding: 0.5rem;
    transition: all ease-in-out 0.5s;
}

section:has(.js-comment) article:hover {
    background-color: var(--not-as-light-background);
}

.comment-block form textarea {
    padding: 0.5rem;
}

.comment-block form textarea,
.comment-block form input[type=text] {
    width: 30rem;
}

/* SEARCH */
.search-block-form img {
    margin-top: 35px;
    margin-left: 50px;
    cursor: pointer;
}

.search-block-form {
    margin-top: 2.3rem;
    margin-left: 1rem;
}

.search-block-form form {
    /* width: 200px; */
    /* position: absolute;
    background-color: #fff;
    border: var(--thin-line);
    padding: 0.5rem;

    margin-top: 25px;
    margin-left: -100px; */
    /* display: none; */
}

.search-block-form form input.form-search {
    width: 160px;
    margin: 0.5rem;
    display: inline;
}

.search-block-form form input[type=submit] {
    background-image: url('/themes/custom/pio_theme/images/loupe-red.png');
    background-size: cover;
    /* Ensures the image covers the button */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    width: 40px;
    /* Adjust width to fit image */
    height: 40px;
    /* Adjust height to fit image */
    border: none;
    cursor: pointer;
    text-indent: -9999px;
    /* Hides text */
}

.search-block-form .form-item-keys,
.search-block-form form .form-actions,
.search-block-form form input[type=submit] {
    display: inline;
}

#edit-help-link {
    display: inline-block;
    color: var(--red);
    margin-bottom: 1rem;
    text-align: right;
    width: 100%;
}

/* TERMS */
.term-grid-page h2 {
    margin-bottom: 2rem;
}


.term-grid-page .views-col {
    margin-bottom: 2rem;
    width: var(--medium-width) !important;
}

.term-grid-page .views-view-grid .views-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}

.no-pic,
.term-grid-page .views-col .views-field-field-media {
    /* width: var(--medium-width) !important; */
    width: 430px;
    background-color: var(--light-background);
    /* height: var(--medium-height); */
    height: 226px;
    overflow: hidden;
    margin-bottom: 4px;
}

.no-pic {
    text-align: center;
    padding-top: 1rem;
    /* max-height: calc(var(--medium-height) - 2rem); */
}

/* PAGERS */
.pager {
    text-align: center;
    margin: 1rem auto 3rem auto;

}

.pager ul li {
    display: inline;
}

section:has(.js-comment) ul.links.inline li a,
.pager ul li a {
    padding: 0 0.5rem;
    margin: 0 .5rem;
    background-color: var(--red);
    color: #fff !important;
}

/* FORMS */
input[type=submit] {
    background-color: var(--red);
    color: #fff;
    border: 0;
    padding: 0.5rem;
}

input[type=submit]:hover {
    outline: var(--thin-line);
    border-color: #999;
}

input[type=submit]:focus {
    outline: var(--thin-line);
}

form label {
    display: block;
}

label.form-required::after {
    content: ' *';
    color: var(--red);
}

.form-item {
    margin-bottom: 0.5rem;
}

.contextual-links[hidden] {
    display: none;
}

form select,
form input[type] {
    padding: 0.5rem;
    font-size: 1em;
}

form.comment-form summary {
    margin-bottom: 1rem;
    cursor: pointer;
}

form.comment-form input[type=radio],
form.comment-form #edit-status label {
    display: inline !important;
}

#edit-preview {
    background-color: green;
}

.comment-comment-form.comment-form .view-mode-full.content-type-article {
    display: none;
}

/* PODCASTS */
.podcast-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}

body.page-node-type-cast iframe,
body.page-node-type-cast .field--name-body {
    margin: 2rem 0;
}

.podcast-block .views-row {
    margin-bottom: 2rem;
    border: 2px solid var(--red);
    padding: 0.5rem;
}

.podcast-block .views-row h3 {
    font-size: 1.5rem;
}

.podcast-block .views-row::before {
    content: '▶';
    color: var(--red);
    font-size: 300%;
    position: absolute;
    margin-left: 5rem;
}

.podcast-block.no-button .views-row .views-field-name {
    font-weight: bold;
}

.podcast-block.no-button .views-row::before {
    content: '';
}

.podcast-page .views-row {
    margin-bottom: 2rem;
}

#views-exposed-form-podcasts-page-1 .js-form-item,
#views-exposed-form-podcasts-page-1 #edit-actions,
#views-exposed-form-podcasts-page-1 input {
    display: inline;
}

#views-exposed-form-podcasts-page-1 {
    margin-bottom: 2rem;
}

body.page-node-type-book .content-top {
    display: block;
    clear: both;
}

.view-mode-full.taxonomy-podcasts .field--name-field-image {
    float: right;
}

.field--name-field-podcast-series {
    border-top: 1px solid black;
    padding-top: 2rem;
}

.view-mode-overview.taxonomy-author,
.field--name-field-podcast-series,
.view-mode-full.taxonomy-podcasts {
    border-bottom: 1px solid black;
    margin-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.view-mode-overview.taxonomy-author {
    border-bottom: 0;
    border-top: 1px solid black;
    padding-top: 1rem;
}

.view-mode-overview.taxonomy-author::after,
.view-mode-overview.taxonomy-podcasts::after,
.view-mode-full.taxonomy-podcasts::after {
    content: '';
    display: block;
    clear: both;
}

.podcasts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.podcasts-grid nav.pager,
.podcasts-grid header {
    grid-column: 1 / -1;
}

.podcasts-grid .views-row .views-field-field-media img {
    width: 100% !important;
    height: auto !important;
}

.view-mode-overview.taxonomy-podcasts .field--name-field-image {
    float: right;
}

.field--name-field-spreaker-rss {
    background-image: url(/themes/custom/pio_theme/images/rss.svg);
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
    background-clip: border-box;
    padding-left: 1.2rem;
}

/* BOOKS */
body.page-node-type-book h2.node__title {
    font-size: var(--medium-font-size);
}

#block-pio-theme-bognavigation,
#block-pio-theme-bognavigation--2 {
    float: right;
    padding: 0.5rem;
    border: 1px solid #999;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

body.page-node-type-book .links.inline,
body.page-node-type-book #content nav[role=navigation] {
    display: none;
}

/* SOME ICONS */
.social-icons {
    float: right;
    margin-top: 1.5rem;
}

.social-icons.bottom {
    margin-top: -1rem;
}

/* DASHBOARD */
nav#menu .dashboard {
    position: absolute;
    display: inline-block;
    margin: -4rem 0 0 2rem;
}

nav#menu .dashboard a {
    padding: 2rem;
    border: 2px solid var(--red);
}

/* NEWSLETTER */
.newsletter form {
    padding: 1rem 0 1rem 1rem;
    /* width: fit-content; */
    background-color: var(--light-background);
    text-align: center;
    margin: 2rem 0;
}

.newsletter form input {
    padding: 0.5rem;
}

.newsletter form p,
.newsletter form .mc-field-group {
    display: inline;
}

#mc-embedded-subscribe {
    background-image: url(/themes/custom/pio_theme/images/checkmark.png) !important;
}

.fact-box {
    background-color: pink;
    padding: 1rem;
}

.more-link {
    float: right;
    font-weight: bold;
    color: var(--red);
}

a.more-link {
    color: var(--red);
}

footer {
    grid-column: 1 / -1;
}

#edit-delete {
    float: right;
}

figure {
    margin: 0;
}

figure[role=group]:has(.align-right) {
    float: right;
    margin-left: 2rem;
    margin-bottom: 2rem;
}

.align-right {
    margin-left: 2rem;
    margin-bottom: 2rem;
}

figure[role=group]:has(.align-left) {
    float: left;
    margin-right: 2rem;
    margin-bottom: 2rem;
}

figure[role=group] .align-right,
figure[role=group] .align-left {
    float: none;
}

.ck4-media-element.file-kvart-spaltebredde {
    width: 25%;
}

.ck4-media-element.file-halv-spaltebredde {
    width: 50%;
}

.ck4-media-element.file-hel-spaltebredde {
    width: 100%;
}

.file-hel-spaltebredde img {
    width: 100%;
    height: auto;
}

.field--name-field-authors {
    padding-top: 1rem;
}

.author-bio {
    margin-bottom: 2rem;
}

.author-bio .field--name-field-user-picture img {
    border-radius: 70px;
    border: 0px solid red;
    margin-right: 20px;
    width: 100px;
    height: auto;
    overflow: hidden;
    text-align: center;
    float: left;
}

.view-mode-overview.taxonomy-author .field--name-field-user-picture {
    order: 1;
}

.view-mode-overview.taxonomy-author h2 {
    order: 2;
}

.view-mode-overview.taxonomy-author .field--name-field-short-description {
    order: 3;
    margin-top: -0.5rem;
    margin-left: 1rem;
    width: 70%;
    /*
    background-color: pink;
    position: absolute;
    display: block;
    margin-top: 3rem;
    margin-left: 7rem;
    */
}


.view-mode-overview.taxonomy-author {
    margin-bottom: 2rem;
    display: flex;
}

.view-mode-full.taxonomy-author .field__label {
    font-weight: bold;
    margin-top: 1rem;
}

.view-mode-full.taxonomy-author .field__item {
    margin-bottom: 1rem;
}

.pio-list {
    font-weight: bold;
    color: var(--red);
    font-size: var(--chapter-font-size);
}

.view-mode-full.content-type-page .field--name-field-redaktionsmedlem  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.view-mode-full.content-type-page .field--name-field-redaktionsmedlem > .field__item {
    /* background-color: var(--light-background); */
    /* background-color: #EDF4FC; */
    padding: 0.5rem;
    overflow: hidden;
}

.view-mode-full.content-type-page .field--name-field-redaktionsmedlem .field__item {
    margin-bottom: 0.5rem;
}

.opnion-wrapper {
    margin: 1rem 0;
    border-left: 2px solid var(--red);
    padding-left: 1rem;
    font-style: italic  ;
}

#block-pio-theme-footer {
    margin-bottom: 10rem;
}

.is-front-page #block-pio-theme-sidetitel--2 {
    display: none;
}

#block-pio-theme-sidetitel--2 h1::first-letter {
    text-transform: capitalize;
}

.also-read {
    background-color: var(--red);
    color: white;
    margin-right: 0.5rem;
}

.also {
    margin: 1rem 0;
}

a.also {
    color: black !important;
}

#ad3 .slick-track,
#ad3 .slick-slide.slick-current.slick-active,
#ad2 .slick-track,
#ad2 .slick-slide.slick-current.slick-active {
    width: auto !important;
    height: auto !important;
}

.bottom-front-page-more {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}

article.node--type-article h3,
article.node--type-article p {
    width: var(--sentence-width);
    margin-left: auto;
    margin-right: auto;
}

.node-type-article .author-bio .field--name-field-short-description p {
    width: 43rem;
}

#placeholder1, #placeholder2, #placeholder3, #placeholder4, #placeholder5, #placeholder6 {
    padding-left: 6rem;
}

/* MEGANYHED BREAKING */
.pulse-loader {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-left: -29px;
    position: absolute;
    margin-top: 23px;
    -moz-animation: pulse-loader 0.7s linear infinite alternate;
    -webkit-animation: pulse-loader 0.7s linear infinite alternate;
    animation: pulse-loader 0.7s linear infinite alternate;
    border: 2px solid var(--red);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    text-indent: 50px;
  }

  @-moz-keyframes pulse-loader {
    0% {
      -moz-box-shadow: var(--red) 0 0 0px 20px;
      box-shadow: var(--red) 0 0 0px 20px;
    }
    40% {
      -moz-box-shadow: none;
      box-shadow: none;
    }
    100% {
      -moz-box-shadow: var(--red) 0 0 0px 25px inset;
      box-shadow: var(--red) 0 0 0px 25px inset;
    }
  }
  @-webkit-keyframes pulse-loader {
    0% {
      -webkit-box-shadow: var(--red) 0 0 0px 20px;
      box-shadow: var(--red) 0 0 0px 20px;
    }
    40% {
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    100% {
      -webkit-box-shadow: var(--red) 0 0 0px 25px inset;
      box-shadow: var(--red) 0 0 0px 25px inset;
    }
  }
  @keyframes pulse-loader {
    0% {
      -moz-box-shadow: var(--red) 0 0 0px 20px;
      -webkit-box-shadow: var(--red) 0 0 0px 20px;
      box-shadow: var(--red) 0 0 0px 20px;
    }
    40% {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    100% {
      -moz-box-shadow: var(--red) 0 0 0px 25px inset;
      -webkit-box-shadow: var(--red) 0 0 0px 25px inset;
      box-shadow: var(--red) 0 0 0px 25px inset;
    }
  }

  .block-pio-theme-stotnetavisenpio-modal ._0er-title {
    text-align: center;
    padding: 4rem;
  }

  .block-pio-theme-stotnetavisenpio-modal ._0er-title {
    display: none
  }

  .block-pio-theme-stotnetavisenpio-modal a {
    color: white;
    background-color: var(--red);
    padding: 0.5rem;
    font-weight: bold;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
    display: block;
    border-radius: 5px;
  }

.block-pio-theme-stotnetavisenpiomobilepaybetalingsforsllag-modal a {
    color: white;
    background-color: var(--red);
    padding: 0.5rem;
    font-weight: bold;
    /* text-align: center;*/
    width: fit-content;
    margin: 0 auto;
    display: block;
    border-radius: 5px;
  }

  /* Only style the content links, not Drupal's contextual menu */
#block-pio-theme-donationstest .field__item a, #block-pio-theme-donationforside .field__item a {
  display: inline-block;
  color: #fff;
  background-color: var(--red);
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1;
}

#block-pio-theme-donationstest .field__item a:hover,
#block-pio-theme-donationstest .field__item a:focus,
#block-pio-theme-donationforside  .field__item a:hover,
#block-pio-theme-donationforside .field__item a:focus{
  filter: brightness(1.05);
  text-decoration: underline;
}

#block-pio-theme-donationstestmobil {
        display: none;
}
#block-pio-theme-donationstest {
        display: block;
}

#block-pio-theme-speakeasyblock {
    display: block;
    float: inline-end;
    margin-top: -77px;
}

#block-pio-theme-speakeasyblock h2{
    font-size: 14px;
}

.speakeasy-button {
  padding: 0;
  font-size: 36px;
  background-color: white;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.speakeasy-button:hover {
  background-color: #f0f0f0;
}

.speakeasy-button:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

#block-pio-theme-speakeasyblock .contextual-region, #block-pio-theme-speakeasyblock .contextual {
    position: static !important;
    display: none !important;
}