/*
Theme Name: Klaas Boeder
Description: Thema voor klaasboeder.nl, gebaseerd op het oorspronkelijke ontwerp.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: klaasboeder
*/

/* common */

body {
    margin: 8px;
    font-family: verdana;
    font-size: 10pt;
    background: #A8BFDC;
    color: #05499A;
}

h1 {
    font: 300 24pt "Times New Roman", times, serif;
}

h3, h2, a {
    color: #05499A;
}

form {
    margin: 0px;
}

fieldset, table {
    width: 650px;
    margin: 0px;
    padding: 0px;
}

hr {
    color: #606060;
    background-color: #606060;
    margin: 5px 0px 20px 0px;
}

a:hover {
    text-decoration: none;
}

.header {
    position: relative;
    left: 155px;
    width: 665px;
    height: 110px;
    margin-top: 10px;
    text-align: center;
}

/*
 * Menu buttons: CSS recreation of the original button images (grey bar with
 * fading "crosshair" lines, blue on hover) so any label works. At most five
 * buttons (enforced in functions.php), each in a 132.5px slot (slightly
 * narrower than the original images, for a little more room on the right); labels
 * that do not fit are cut off with an ellipsis.
 */
.menu {
    position: absolute;
    left: 155px;
    top: 73px;
    width: 665px;
    display: flex;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

.menu li {
    flex: 0 0 132.5px;
    min-width: 0;
    max-width: 132.5px;
}

.menu li a {
    position: relative;
    display: block;
    height: 28px;
    margin: 17px 5px 21px 3px;
    padding: 0 6px 0 12px;
    min-width: 0;
    border: 1px solid #606060;
    border-bottom-color: rgba(64, 64, 64, 0.6);
    box-shadow: 0 -1px 0 #d7d7d7, 0 1px 0 #afafaf, inset -1px 0 0 rgba(0, 0, 0, 0.12);
    background: linear-gradient(97deg, #dcddde 0%, #c3c4c6 45%, #a2a4a7 100%);
    color: #4d4d4d;
    font: 16px/28px verdana, "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
    text-decoration: none;
}

.menu li a .label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu li a:hover,
.menu li a:focus-visible {
    background: linear-gradient(97deg, #5d8fd8 0%, #2e69b7 35%, #054898 65%, #17234b 100%);
    color: #fff;
    text-shadow: 0 0 2px #0a2a66, 0 0 1px #0a2a66;
    outline: none;
}

/* vertical lines running past the corners, fading out at both ends */
.menu li a::before {
    content: "";
    position: absolute;
    top: -16px;
    bottom: -17px;
    left: -1px;
    right: -1px;
    background:
        linear-gradient(to bottom, rgba(96, 96, 96, 0), #606060 45%, #606060 62%, rgba(96, 96, 96, 0)) left / 1px 100% no-repeat,
        linear-gradient(to bottom, rgba(96, 96, 96, 0), #606060 30%, #606060 70%, rgba(96, 96, 96, 0)) right / 1px 100% no-repeat;
    pointer-events: none;
}

/* horizontal lines running past the corners, fading out at both ends */
.menu li a::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -4px;
    right: -8px;
    background:
        linear-gradient(to right, rgba(96, 96, 96, 0), #606060 4px, #606060 calc(100% - 8px), rgba(96, 96, 96, 0)) top / 100% 1px no-repeat,
        linear-gradient(to right, rgba(110, 110, 110, 0), rgba(64, 64, 64, 0.6) 4px, rgba(64, 64, 64, 0.6) calc(100% - 8px), rgba(110, 110, 110, 0)) bottom / 100% 1px no-repeat;
    pointer-events: none;
}

.container {
    position: relative;
    width: 836px;
    left: 50%;
    margin-left: -418px;
    background: #FFF;
    overflow: hidden;
}

/* The old XHTML doctype rendered the image-only top line without descender
   space; recreate that so everything sits at the original height. */
.container > .content_top_left {
    display: block;
}

.container > .content_top_right {
    top: 0;
}

.bar_top {
    position: absolute;
    left: 10px;
    top: 60px;
}

.bar {
    position: absolute;
    left: 22px;
    top: 90px;
    width: 113px;
    height: 618px;
    background: url(images/bar_gradient.png);
}

.content {
    margin-left: 160px;
    margin-right: 23px;
    text-align: justify;
    color: #606060;
    min-height: 500px;
    height: auto;
}

.content_bottom {
    clear: both;
}

.terms {
    /* core's list block CSS sets ul { box-sizing: border-box } on pages with lists */
    box-sizing: content-box;
    position: relative;
    height: 40px;
    left: 140px;
    z-index: 1;
    list-style-type: none;
    padding: 75px 0px 0px 25px;
    margin: 20px 0px 0px 0px;
    background: url(images/terms_left.png) no-repeat;
}

.terms li {
    font: italic 300 16pt "Times New Roman", times, serif;
    float: left;
    margin-left: 28px;
}

.content_bottom_left, .content_bottom_right {
    position: absolute;
    bottom: 0px;
}

.content_bottom_left {
    left: 0px;
}

.content_bottom_right {
    right: 0px;
}

.copyright {
    margin-top: 10px;
    color: #05499A;
    text-align: center;
}

/* text and images (old classes and WordPress blocks) */

.content p {
    margin: 0 0 1em 0;
}

.image_left,
.content .alignleft {
    float: left;
    clear: left;
    margin: 10px;
    margin-left: 0px;
}

.image_right,
.content .alignright {
    float: right;
    clear: right;
    margin: 10px;
    margin-right: 0px;
}

.image_left, .image_right, .image_inline,
.content .wp-block-image img {
    border: solid 1px #606060;
}

.content .wp-block-image img {
    box-sizing: content-box;
}

/* A list split around a floated image reads as one list. Classic themes
   render aligned images as <div class="wp-block-image"><figure class="alignright">. */
.content .wp-block-list:has(+ .wp-block-image + .wp-block-list) {
    margin-bottom: 0;
}

.content .wp-block-list + .wp-block-image + .wp-block-list {
    margin-top: 0;
}

/* the old site floated such an image from the last line of the item before
   its blank line; pull it up those two lines */
/* same margins as the old .image_left / .image_right */
.content .wp-block-image .alignright {
    margin: 10px 0 10px 10px;
}

.content .wp-block-image .alignleft {
    margin: 10px 10px 10px 0;
}

.content .wp-block-list + .wp-block-image:has(+ .wp-block-list) > figure {
    margin-top: -2em;
}

.content figure.wp-block-image {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* forms */

fieldset {
    border: none;
}

dl {
    clear: left;
}

dl dt {
    float: left;
    text-align: right;
    margin-top: 2px;
    margin-right: 10px;
    width: 25%;
}

dl dd.se-bericht {
    clear: left;
    margin: 0;
    padding-top: 10px;
}

input, textarea, select, button {
    background: #F9FEFF;
    border: 1px solid #98AAB1;
    font-family: verdana;
}

textarea {
    height: 300px;
    width: 646px;
    font-size: 10pt;
}

.errors, .success {
    font-weight: bold;
}

.submit {
    margin-top: 10px;
    text-align: center;
}

blockquote {
    margin-right: 0px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}