/*
Theme Name: Wereldbouw
Template: blankslate
*/

/* FONTS */
@font-face {
    font-family: "OpenSans";
    src: url("fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "OpenSans";
    src: url("fonts/OpenSans-Italic.ttf");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "OpenSans";
    src: url("fonts/OpenSans-Bold.ttf");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "Cinzel";
    src: url("fonts/Cinzel-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Cinzel";
    src: url("fonts/Cinzel-Bold.ttf");
    font-weight: bold;
    font-style: normal;
}

/* GENERAL STYLING */
body {
    font-family: OpenSans, sans-serif;
}
h1 {
    font-family: Cinzel, serif;
    font-size: 2rem;
}
h2 {
    font-family: Cinzel, serif;
    font-size: 1.7rem;
}
h3 {
    font-weight: bold;
}
a {
    color: #31512a;
}
a:hover {
    color: #57c43f;
}
b,
strong {
    font-weight: bold;
}
i,
em {
    font-style: italic;
}
code,
kbd,
tt {
    font-family:
        Courier New,
        Courier,
        monospace;
    font-size: 1.1rem;
    color: #262740;
    text-shadow: 0.5px 0 0 #262740; /* Simulates semibold text */
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    border: 1px solid #eeeeee;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid #97642a;
    box-shadow:
        0 0 2px black inset,
        0 0 5px white;
    padding: 0.5rem;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus {
    background-color: white;
    outline: 0;
}

/* BACKGROUND */
#wrapper {
    background-image: url(images/header.jpg), url(images/background.jpg);
    background-repeat: no-repeat, repeat-y;
    background-size: 100%, 100%;
    background-position:
        top left,
        top right;
}

/* MAIN MENU BAR */
#menu {
    background-image: url(images/button.jpg);
    background-size: auto 3rem;
    background-repeat: repeat;
    display: flex; /* Places the div.menu-main-menu-container next to div#search */
    gap: 1rem;
    padding: 0 1rem 0 0; /* Just a margin on the right (for the search field) on small displays */
}

@media (min-width: 42rem) {
    #menu {
        padding: 0 calc(50vw - 40rem); /* Centers the menu */
    }
}
#menu .menu-main-menu-container {
    flex: 1; /* Adapts width */
}
#menu-main-menu {
    /* ul element */
    display: flex;
    flex-wrap: wrap;
}
#menu-main-menu > li {
    background-image:
        url(images/button-left.png), url(images/button-right.png),
        url(images/button.jpg);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position:
        top left,
        top right,
        top left;
    background-size: auto 100%;
    flex: 1;
    height: 3rem;
    position: relative; /* For dropdown menu */
}
#menu-main-menu a {
    display: block;
    color: #451d0f;
    height: 3rem;
    padding: 1rem 1rem 0 1rem;
    font-family: Cinzel, serif;
    font-weight: bold;
    text-decoration: none;
    text-shadow: white 0 0 6px;
}
#menu-main-menu > li:hover,
#menu-main-menu > li.current_page_item,
#menu-main-menu > li.current_page_parent {
    /* Hovering and current page --> li tag */
    background-image:
        url(images/button-left-hover.png), url(images/button-right-hover.png),
        url(images/button-hover.jpg);
}
#menu-main-menu a:hover,
#menu-main-menu li.current_page_item a,
#menu-main-menu li.current_page_parent a {
    /* Hovering and current page --> a tag */
    color: black;
}
#menu-main-menu .sub-menu {
    /* Any popup menu of the main menu */
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #ede0c8;
    background-image: url(images/parchment.jpg);
    background-position: center center;
    box-shadow: 0 8px 16px 0 black;
    min-width: 12rem;
}
#menu-main-menu > li:hover .sub-menu {
    display: block; /* Make menu appear on hover over parent */
}
#menu-main-menu .sub-menu a {
    padding: 0.5rem;
    height: auto;
}
#menu-main-menu .sub-menu a:hover,
#menu-main-menu .sub-menu li.current_page_item a {
    /* Hovering and current page */
    background: white;
    color: #57c43f;
}
#search .search-field {
    height: 2rem;
    margin: 0.5rem 0 0 0;
    background-image: url(images/search-icon.png);
    background-repeat: no-repeat;
    background-size: auto 1.5rem;
    background-position: 95% center;
    padding: 0.5rem;
}
#search .search-submit {
    display: none;
}

/* BRANDING */
#branding-home {
    min-height: 38vw;
    padding-top: 23vw;
}
@media (min-width: 65rem) {
    #branding-home {
        padding-top: 27vw;
    }
}
#branding {
    min-height: 12rem;
    padding-top: 4rem;
}
#branding-contents {
    text-align: center;
}
#site-title a {
    color: #f4cf91;
    font-size: 3rem;
    font-family: Cinzel, serif;
    text-shadow:
        0 0 2px white,
        0 0 10px black,
        0 0 10px black,
        0 0 10px black;
    text-decoration: none;
}
#branding-home #site-title a {
    font-size: 4rem; /* Larger font on homepage */
}
#site-description {
    color: white;
    text-shadow:
        0 0 5px black,
        0 0 5px black,
        0 0 5px black,
        0 0 5px black;
    font-size: 1.3rem;
    font-family: Georgia, serif;
}

/* MAIN AND SIDEBAR */
@media (min-width: 45rem) {
    #container {
        display: flex;
        gap: 2rem;
        max-width: 65rem;
        margin: 0 auto;
    }
    #content {
        flex: 1; /* Adapts width */
        min-width: 0; /* Prevents elements from within from expanding the container */
        overflow: hidden;
    }
    #sidebar {
        width: 18rem;
        margin-top: 4rem;
        flex-shrink: 0; /* Prevents sidebar from getting less wide */
        align-self: flex-start; /* Otherwise sidebar uses entire page height. */
    }
}
@media (min-width: 90rem) {
    /* At this side, we make the page a bit wider. */
    #container {
        max-width: 80rem;
    }
    #sidebar {
        width: 19.25rem;
    }
}
#content {
    /* main element */
    background-color: #ede0c8;
    background-image: url(images/parchment.jpg);
    background-repeat: repeat-y;
    background-size: 100%;
    box-shadow: 0 0 50px black;
    padding: 0.01rem 2rem 2rem 2rem; /* Child elements have margin at top, so no padding here. However, 0 padding sometimes collapses the margins for whatever reason. */
}
#sidebar {
    background-color: rgba(229, 195, 214, 0.7);
    backdrop-filter: blur(5px);
    padding: 2rem;
}
#sidebar a {
    text-decoration: none;
}
#sidebar a:hover {
    color: #48793d;
    text-decoration: underline;
}

/* FOOTER */
#footer {
    padding: 2rem;
    margin: 0 auto;
    color: #ede0c8;
}
@media (min-width: 45rem) {
    /* Keep width aligned to #container */
    #footer {
        max-width: 65rem;
    }
}
@media (min-width: 90rem) {
    #footer {
        max-width: 80rem;
    }
}

/* CONTENT FORMATTING */
#content p {
    margin: 0 0 0.7rem 0;
    line-height: 1.3;
}
#content h1,
#content h2 {
    margin: 2rem 0 0.7rem 0;
}
#content ul:not(.is-grid) {
    margin: 0 0 0.7rem 1.2rem;
    line-height: 1.3;
    list-style: square;
}
#content ol:not(.is-grid) {
    margin: 0 0 0.7rem 1.3rem;
    line-height: 1.3;
    list-style: upper-roman;
}
#content img.wp-post-image {
    max-width: 100%;
    height: auto;
    display: block; /* Prevents small layout glitches */
    margin: 0 0 0.7rem 0;
}
#content .entry-title {
    clear: both;
    padding-top: 1rem;
}
#content .entry-meta {
    margin: 0 0 0.7rem 0;
    color: #555555;
}
@media (min-width: 38rem) {
    /* Place image next to text */
    #content .entry-summary img {
        max-width: 40%;
        float: left;
        margin-right: 1rem;
    }
}
#content .nav-links {
    display: flex;
    clear: both;
}
#content .nav-links .nav-previous {
    flex: 1;
}
#content .nav-links .nav-next {
    flex: 1;
    text-align: right;
}

/* BUTTONS */
#content input[type="submit"],
#content button,
#sidebar button,
#content .wp-block-button a {
    background-color: #eba445;
    background-image:
        url(images/button-left.png), url(images/button-right.png),
        url(images/button.jpg);
    background-size: auto 100%;
    background-position:
        top left,
        top right,
        top left;
    background-repeat: no-repeat, no-repeat, repeat-x;
    border: none;
    padding: 0.5rem 0.7rem;
    font-family: Cinzel, serif;
    font-weight: bold;
    font-size: 1rem;
    text-shadow: white 0 0 6px;
    box-shadow: 0 0 3px black;
    border-radius: 0;
    cursor: pointer;
    color: #451d0f;
}
#content .wp-block-button a {
    /* Make the "fake" Wordpress buttons a bit bigger */
    padding: 1rem;
    margin: 0.3rem;
    font-size: 1.2rem;
    color: #451d0f !important; /* Unfortunately needed to prevent Wordpress overrides */
}
#content input[type="submit"]:hover,
#content button:hover,
#sidebar button:hover,
#content .wp-block-button a:hover {
    background-color: #f2ba79;
    background-image:
        url(images/button-left-hover.png), url(images/button-right-hover.png),
        url(images/button-hover.jpg);
    box-shadow: 0 0 3px #777777;
    color: black;
}
#content .wp-block-button a:hover {
    color: black !important; /* Unfortunately needed to prevent Wordpress overrides */
}

/* COMMENTS FORMATTING */
#content #comments ul {
    /* Disable normal list styling */
    list-style: none;
    margin-left: 0rem;
}
#content #comments li {
    padding-top: 0.7rem;
}
#content #comments ul.children {
    margin-left: 2rem;
}
#content #comments .comment-meta {
    display: flex;
}
#content #comments .comment-meta div {
    flex: 1;
}
#content #comments .comment-meta div.comment-metadata {
    text-align: right;
}
#content #comments .avatar {
    vertical-align: bottom;
    height: 1.5rem;
    width: auto;
}
#content #comments label {
    display: inline-block;
    min-width: 5rem;
}
#content #respond {
    margin-top: 2rem;
}

/* BBPRESS FORUMS FORMATTING */
#content #bbpress-forums ul.forums,
#content #bbpress-forums ul.forum,
#content #bbpress-forums ul.topic,
#content #bbpress-forums ul.bbp-forums,
#content #bbpress-forums ul.bbp-topics,
#content #bbpress-forums .bbp-template-notice ul,
#content #bbpress-forums ul.forum-titles {
    margin: 0;
    list-style: none;
}
#content div.bbp-template-notice,
#content li.bbp-header,
#content li.bbp-footer {
    border: 1px solid transparent;
    background: rgba(229, 195, 214, 0.7);
}
#content #bbpress-forums li.even,
#content #bbpress-forums ul.even {
    /* li element used in forum topic list or forums list */
    background: transparent;
}
#content #bbpress-forums li.odd,
#content #bbpress-forums ul.odd {
    /* li element used in forum topic list or forums list */
    background: rgba(255, 255, 255, 0.3);
}
#content #bbpress-forums div.even,
#content #bbpress-forums div.odd {
    /* li element used in topic replies */
    background: transparent;
}
#content #bbpress-forums ul.bbp-forums,
#content #bbpress-forums ul.bbp-topics,
#content #bbpress-forums ul.bbp-replies,
#content #bbpress-forums ul.topic,
#content #bbpress-forums ul.forum {
    border: 1px solid transparent;
}
#content #bbpress-forums div.bbp-reply-header {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid transparent;
}
#content #bbpress-forums fieldset {
    border: none;
    margin: 0;
    padding: 0 5px 5px 0; /* Right and bottom padding for shadow of submit button */
}
#content #bbpress-forums .wp-editor-container {
    border: 1px solid #97642a;
    box-shadow:
        0 0 5px black inset,
        0 0 5px white;
}
#sidebar .bbp-login-form label {
    width: auto;
}

/* SIDEBAR FORMATTING */
#sidebar {
    line-height: 1.3;
}
#sidebar h2,
#sidebar h3 {
    /* Modern widgets use h2, legacy h3 */
    font-family: Cinzel, serif;
    font-weight: normal;
    font-size: 1.5rem;
    margin: 0;
}
#sidebar .widget-container {
    margin: 0 0 1rem 0;
}
#sidebar ul {
    margin: 0;
}