/**
 * @file Hovedstylesheet for Madmand (porteret fra D7)
 * */


/* Basic font and typography settings */
.cke_editable,
.cke_editable body,
iframe body,
body {
    font-family: Arial, Roboto;
    margin: 0;
    padding: 0;
}

/*
#header h1 {}
*/

#header h1,
#header h2,
#header h3 {
    text-align: center;
    margin: 0;
    text-shadow: 2px 1px 0px #000000;
}

#header h1 {
    margin-top: -12px;
}

#site-name,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Georgia, Gruppo, serif;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

.node .content p {
    margin-bottom: 1em;
}

#header h1,
h1 {
    font-size: 3em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

/* Layout */
body {
    max-width: 1300px;
    margin: 0 auto;
}

#page>div {
    padding: 10px;
}

.item-list ul li,
.item-list ol li,
ul li,
ol li {
    margin-top: 10px;
}

div.messages {
    position: absolute;
    z-index: 100;
}


/* Links */
a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    color: #999933;
    text-decoration: underline;
}

a:link {
    transition: all .4s ease-in-out;
}

.field-name-body a,
li a,
p a {
    text-decoration: underline;
}

#header h2,
#header h1 a {
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.page-taxonomy-term .field-name-body a,
.front .field-name-body a {
    text-decoration: none;
}


/* Color/style */

/* Grid */
#page {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
        "header header header"
        "menu menu menu"
        "sidebar-first content sidebar-second"
        "footer footer footer";
}

/* Grid */
#page.madmand-admin {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
        "header header header"
        "menu menu menu"
        "content content content"
        "footer footer footer";
}

#block-system-help {
    background-color: #eeeeee;
    padding: 4px;
}

#header {
    grid-area: header;
    background-image: url(../images/top.jpg);
    background-position: center;
    height: 110px;
    background-repeat: repeat-x;
}

#footer {
    grid-area: footer;
    text-align: center;
    background-color: #666633;
}

#footer p,
#footer a {
    margin: 0;
    color: #ffffff;
}

#content {
    grid-area: content;
    border-left: 2px solid #666633;
    border-right: 2px solid #666633;
}

#sidebar-first {
    grid-area: sidebar-first;
}

#sidebar-second {
    grid-area: sidebar-second;
}

#page.madmand-admin #content {
    border: 0;
}

#page.madmand-admin #header {
    height: auto;
}

table {
    width: 100%;
}

table tr td {
    vertical-align: top;
}

/* Menu */
/* When in header */
#main-menu {
    margin: 10px 0 0 0;
    padding: 0;
}

#main-menu #block-system-main-menu ul {
    padding: 0;
    margin: 0;
    text-align: center;
}

#main-menu #block-system-main-menu ul li {
    padding: 0;
    margin: 0 -3px;
    list-style: none;
    display: inline;
}

#main-menu #block-system-main-menu ul li a {
    text-decoration: none;
    padding: 6px 13px;
    margin: 0;
    font-weight: bold;
    background-color: #999933;
}

#main-menu #block-system-main-menu ul li a.active,
#main-menu #block-system-main-menu ul li a.is-active,
#main-menu #block-system-main-menu ul li a:hover {
    background: rgba(255, 255, 255, 0.8);
    color: #000000;
}


/* Articles */
.node-longread-simple-chapter .field-name-field-chapter-image,
.node-blog .field-name-field-cover-image,
.node-longread-article .field-name-field-cover-image {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.node-longread-simple-chapter.empty-center .field-name-field-chapter-image {
    float: none;
}
.node-longread-simple-chapter.empty-center .caption {
    max-width: none;
}

.node .field-name-field-cover-image .field-item,
.node-longread-article .field-name-field-cover-image .field-item,
.node-longread-simple-chapter .field-name-field-chapter-image .field-item {
    margin-bottom: 2em;
    margin-left: 1em;
}

blockquote {
    margin-left: -20px;
    background-color: #ffffff;
    font-size: 120%;
    font-weight: bold;
}

blockquote:before {
    content: '"';
    font-size: 200%;
    color: #666633;
}

blockquote p {
    display: inline;
}

.node-teaser .field-name-field-image {
    float: left;
    margin-right: 1em;
}

.submitted-by {
    display: block;
    color: #666633;
    margin-bottom: 4px;
}

.node .submitted {
    text-align: right;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #666633;
}

.node-teaser {
    border-bottom: 2px solid #666633;
    padding-bottom: 0.5em;
}

.node-longread-article .field-name-field-image img {
    width: 100%;
    height: auto;
}

.node-longread-article.escape-node .field-name-field-image img,
.node-longread-article.node-teaser .field-name-field-image img {
    width: auto;
    height: auto;
}

.node-type-article .node-longread-article .field-name-body div p:first-child::first-letter {
    font-size: 75px;
    color: #666633;
    float: left;
    line-height: 60px;
    padding-top: 0px;
    padding-right: 8px;
    padding-left: 0px;
}

.caption {
    text-align: center;
    color: #666666;
    max-width: 480px;
}

.node-type-recipe .caption {
    margin-bottom: 2em;
}

ul li.comment_forbidden {
    display: none;
}

#block-longread-longread-chapter-info .is-active {
    font-weight: bold;
}

.node-type-recipe .field-name-field-image {
    text-align: center;
}

/* Section pages */
.page-blog .submitted,
.view.section .submitted {
    margin-top: -20px;
}

#content[role=main],
.views-element-container .section .views-row article {
    padding: 0.5rem;
}

.content-type {
    position: absolute;
    background-color: transparent;
    font-family: Courier;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0 10px;
    /* margin-top: 70px; */
    transform: rotate(-5deg);
}

.longread-single-chapter .content-type {
    display: none;
}

/* Blocks */
#sidebar-first .block,
#sidebar-second .block {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #336666;
}

/* images */
.node-article .field-name-field-image,
.node-recipe .field-name-field-image {
    float: right;
    margin: 20px 0 0 20px;
}

/* Recipes */
.node-recipe .field-name-field-first-image {
    margin: 1em 0;
    text-align: center;
}

.node-recipe .field-name-field-first-image .caption {
    margin-left: auto;
    margin-right: auto;
}

.xnode-recipe h2,
.field-name-field-recipes h2,
.node-recipe .field-label,
.field-name-field-recipes .field-label {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 120%;
    margin-top: 10px;
    font-weight: bold;
}

.field-name-field-recipes>.field-label {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 150%;
}

.field-collection-table-view .time {
    font-weight: bold;
}

.node-recipe .field-name-field-image .field-item {
    margin-bottom: 15px;
}

.node-recipe .field-name-field-ingredients {
    clear: both;
}

/* Tags */

#block-system-main .view-id-subjects .view-content {
    column-count: 3;
    columns: 3;
}


.view-id-subjects h3 {
    margin-bottom: 0;
    margin-top: 1rem;
}

.view-id-subjects p {
    margin: 0;
}

.view-id-subjects .view-content .views-row {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 2px 0;
}

.block.subjects h3 {
    font-size: 200%;
}

/* Escape node */
.escape-node {
    margin-right: -100px;
    border: 2px solid #666633;
    clear: left;
    background-color: #ffffff;
    text-align: right;
}

/* Front page */
.view-display-id-front_3,
.view-display-id-front_2,
.view-display-id-front_1 {
    background-color: #efefef;
    padding: 10px;
    border-bottom: 10px solid #ffffff;
}

.page-forside #content h1 {
    display: none;
}

.page-forside .view-display-id-front_1 .clearer {
    clear: both;
}

.view-display-id-front_3 table,
.equal-cols table {
    table-layout: fixed;
}

.page-indhold .equal-cols table tr td {
    padding: 4px;
}

.page-indhold #content .views-field-field-image,
.page-indhold #content .views-field-field-cover-image,
.page-forside #content .views-field-field-image,
.page-forside #content .views-field-field-cover-image {
    float: right;
    margin: 0 0 10px 10px;
}

.view-display-id-front_3 table tr td {
    padding: 10px;
    height: 100px;
}

.page-forside #content table tr.even,
.page-forside #content table tr.odd {
    border: 0;
}

.page-forside #content table tr.even td .views-field-field-image,
.page-forside #content table tr.even td .views-field-field-cover-image {
    float: left;
    margin: 0 10px 10px 0;
}

#block-block-2 img,
#block-views-front-page-blog .views-field-field-cover-image {
    text-align: center;
}

#block-views-front-page-blog a img {
    margin: 10px auto;
}

#block-views-front-page-blog .views-row {
    margin-bottom: 20px;
}

/* Terms */
.page-taxonomy-term .view-taxonomy-term a img {
    float: right;
    margin-bottom: 10px;
}

.page-taxonomy-term .view-taxonomy-term .views-row {
    clear: both;
    margin-bottom: 10px;
}

#block-views-subjects-block .views-row {
    margin-left: 10px;
}

.region-content .view-id-subjects {
    columns: 3;
}


/* Drupal 11: responsive grids i stedet for D7's tabel-grids */
.views-view-responsive-grid__item {
    vertical-align: top;
}

.view-display-id-front_3 .views-view-responsive-grid__item {
    padding: 10px;
    min-height: 100px;
}

.page-indhold #content .views-view-responsive-grid__item {
    padding: 4px;
}

/*
.page-forside #content .view-display-id-front_2 .views-row:nth-child(even) .views-field-field-image,
.page-forside #content .view-display-id-front_2 .views-row:nth-child(even) .views-field-field-cover-image,
.page-forside #content .view-display-id-front_3 .views-view-responsive-grid__item:nth-child(4n+3) .views-field-field-image,
.page-forside #content .view-display-id-front_3 .views-view-responsive-grid__item:nth-child(4n+3) .views-field-field-cover-image,
.page-forside #content .view-display-id-front_3 .views-view-responsive-grid__item:nth-child(4n+4) .views-field-field-image,
.page-forside #content .view-display-id-front_3 .views-view-responsive-grid__item:nth-child(4n+4) .views-field-field-cover-image {
    float: left;
    margin: 0 10px 10px 0;
}
*/

.views-row::after,
.views-view-responsive-grid__item::after {
    content: "";
    display: block;
    clear: both;
}

/* Resumé som underrubrik og billedtekster */
.node .summary {
    font-size: 1.4em;
    margin-bottom: 1em;
}

.field-collection-table-view th {
    text-align: left;
}

.field-collection-table-view tr.time td {
    font-weight: bold;
}

.field-collection-table-view tr {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}

.field-collection-table-view tr th,
.field-collection-table-view tr td {
    padding: 0.5rem;
}

.field-collection-table-view tr th {
    background-color: white;
    border-bottom: 3px solid #ccc;
    padding-right: 1em;
    text-align: left;
}

table {
    border-collapse: collapse;
}

/* Faneblade og systembeskeder */
.tabs ul,
ul.tabs {
    padding: 0;
    margin: 0 0 1em 0;
}

.tabs li,
ul.tabs li {
    display: inline-block;
    margin: 0 4px 0 0;
}

.tabs a {
    display: block;
    padding: 4px 10px;
    background-color: #eeeeee;
    text-decoration: none;
}

.tabs a.is-active {
    background-color: #999933;
    color: #ffffff;
}

div.messages {
    background-color: #ffffee;
    border: 2px solid #666633;
    padding: 10px;
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
    word-wrap: normal;
}

/* Billeder må aldrig sprænge layoutet */
img {
    max-width: 100%;
    height: auto;
}

#block-views-front-page-front-2 .views-row {
    margin-bottom: 2rem;
}

#block-views-front-page-front-2 h2 {
    font-size: 1.5rem;
}

#block-views-front-page-blog h3,
#block-views-front-page-front-3 h2 {
    font-size: 1.25rem;
}

#block-local-tasks ul {
    border-bottom: 1px solid #bbb;
    border-collapse: collapse;
    height: auto;
    line-height: normal;
    list-style: none;
    margin: 5px;
    padding: 0 0 0 1em;
    white-space: nowrap;
}

#block-local-tasks ul li {
    display: inline;
}

#block-local-tasks ul li a {
    background-color: #ddd;
    border-color: #bbb;
    border-style: solid solid none solid;
    border-width: 1px;
    height: auto;
    margin-right: 0.5em;
    padding: 0 1em;
    text-decoration: none;
}

#block-local-tasks ul li.active a {
    background-color: #fff;
    border: 1px solid #bbb;
    border-bottom: 1px solid #fff;
}

.feed-icon {
    display: none;
}