:root {
    --primary: #043cad;
    --secondary: #e1eafc;
}

/* =============================================================================
 * Misc
 * ========================================================================== */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #f8fafe;
    color: #222330;
}

h1 {
    font-size: 2rem;
    background-color: var(--secondary);
    color: var(--primary);
    margin-top: 0;
    padding: .625rem 1.25rem;
    border-radius: .625rem;
}

#main-wrapper main a {
    color: #FF841F;
}

#page-wrapper {
    padding: 0 18.75rem;
    margin-top: 1.25rem;
}

.visually-hidden-focusable {
    display: none;
}

/* =============================================================================
 * Pagina verdeling
 * ========================================================================== */
#main-wrapper {
    margin-top: 3.125rem;
}

#main-wrapper #main > .row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3.125rem;
}
#main-wrapper #main > .row main {
    grid-column: 1 / 5;
    background-color: #fff;
    border-radius: 1.25rem;
    padding: 1.875rem;
    box-shadow: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%);
}
#main-wrapper #main > .row .sidebar {
    grid-column: 5 / 7;
}

/* =============================================================================
 * Navbar
 * ========================================================================== */
#header .navbar {
    display: flex;
    justify-content: space-between;
}

#header .navbar-brand {
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
}
#header .navbar-brand img {
    height: 3.125rem;
    background-color: var(--primary);
    padding: 1.25rem;
    border-radius: 1.25rem;
    margin-right: 1rem;
}

#header #block-nalans-main-menu {
    background-color: var(--primary);
    padding: 1.875rem;
    font-size: 1.125rem;
    border-radius: 1.25rem 0 0 1.25rem;
    display: flex;
    align-items: center;
    margin-left: auto;
}
#header .navigation ul {
    display: flex;
    margin: 0;
    padding: 0;
}
#header .navigation ul li {
    margin-left: 1.875rem;
    list-style-type: none;
}
#header #block-nalans-main-menu ul li:first-of-type {
    margin-left: 0;
}
#header #block-nalans-main-menu ul li.active a, #header #block-nalans-main-menu ul li a.is-active {
    text-decoration: underline;
}

#header #block-nalans-main-menu ul li a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
#header #block-nalans-main-menu ul li a:hover {
    text-decoration: underline;
}

.language-switcher-language-url {
    background-color: #002879;
    padding: 1.25rem;
    font-size: 1rem;
    border-radius: 0 1.25rem 1.25rem 0;
    display: flex
;
    align-items: center;
}
.language-switcher-language-url nav {
    display: flex;
    flex-direction: column;
}
.language-switcher-language-url nav .nav-link:first-of-type {
    margin-bottom: .625rem;
}
.language-switcher-language-url nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.language-switcher-language-url nav a:hover, .language-switcher-language-url nav a.is-active {
    text-decoration: underline;
}

.highlighted {
    background-color: var(--secondary);
    padding: 1.25rem 3.125rem;
    font-size: 1rem;
    margin-top: 1.25rem;
    border-radius: 1.25rem;
}
.highlighted ul {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}
.highlighted ul li {
    margin-left: 1.875rem;
    list-style-type: none;
}
.highlighted ul li:first-of-type {
    margin-left: 0;
}

.highlighted ul li a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.highlighted ul li a:hover, .highlighted ul li a.active {
    text-decoration: underline;
}

/* =============================================================================
 * Sidebar
 * ========================================================================== */
.sidebar .block {
    border-radius: 1.25rem;
    background-color: #fff;
    padding: 1.875rem;
    color: var(--primary);
    border: none;
    box-shadow: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%);
}
.sidebar .block h2 {
    text-shadow: none;
    font-size: 1.25rem;
    background-color: var(--secondary);
    color: var(--primary);
    padding: .5rem 1rem;
    border-radius: .625rem;
    line-height: 1;
    border-bottom: none;
    margin-bottom: 1rem;
}

.sidebar .views-row {
    margin-bottom: 1rem;
    border-bottom: 1px solid #ff841f;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 2rem;
    position: relative;
}
.sidebar .views-row:after {
    content: url('../images/link-pijltje.svg');
    margin-left: auto;
    flex-shrink: 0;
    height: auto;
    width: .625rem;
    padding-left: 1rem;
    transition: .3s;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.sidebar .views-row:hover:after {
    transform: translate(-5px, -50%);
}

.sidebar a {
    color: #222330;
    font-weight: 600;
    text-decoration: none;
}
.sidebar a:hover {
    color: var(--primary);
}

.sidebar .views-row:last-of-type a {
    margin-bottom: 0;
}

/* =============================================================================
 * Bewerk tabs
 * ========================================================================== */
.nav-tabs {
    display: flex;
    background-color: #f8fafe;
    padding: 1.875rem;
    border-radius: .625rem;
}
.nav-tabs li {
    list-style-type: none;
}
.nav-tabs a {
    color: var(--primary) !important;
    border: 2px solid var(--primary);
    border-radius: .625rem;
    padding: .625rem;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    margin-right: 1.875rem;
}
.nav-tabs a:hover {
    background-color: var(--primary);
    color: #fff !important;
}

/* =============================================================================
 * Zoeken
 * ========================================================================== */
.block-views-exposed-filter-blockzoeken-block-1 .flex-wrap, .view-id-zoeken .flex-wrap {
    position: relative;
}

.block-views-exposed-filter-blockzoeken-block-1 input[type=text], .view-id-zoeken input[type=text] {
    width: 100%;
    box-sizing: border-box;
    padding: .625rem;
    border-radius: .625rem;
    border: 1px solid #000;
}
.block-views-exposed-filter-blockzoeken-block-1 .description, .view-id-zoeken .description {
    margin-bottom: 1rem;
    display: inline-block;
}

.block-views-exposed-filter-blockzoeken-block-1 .js-form-type-select, .view-id-zoeken .js-form-type-select {
    margin-bottom: 1rem;
}
.block-views-exposed-filter-blockzoeken-block-1 .js-form-type-select label, .view-id-zoeken .js-form-type-select label {
    width: 100%;
    display: inline-block;
}
.block-views-exposed-filter-blockzoeken-block-1 .js-form-type-select select, .view-id-zoeken .js-form-type-select select {
    width: 100%;
    box-sizing: border-box;
    padding: .625rem;
    border-radius: .625rem;
    border: 1px solid #000;
}

.block-views-exposed-filter-blockzoeken-block-1 .form-actions, .view-id-zoeken .form-actions {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 0;
}
.view-id-zoeken .form-actions {
    top: 1.15rem;
}
.block-views-exposed-filter-blockzoeken-block-1 .form-actions:after, .view-id-zoeken .form-actions:after {
    content: url("../images/search-icon.svg");
    width: 1rem;
    height: 1rem;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.block-views-exposed-filter-blockzoeken-block-1 .form-actions:hover:after, .view-id-zoeken .form-actions:hover:after {
    filter: contrast(2) invert(1) hue-rotate(175deg);
}

.block-views-exposed-filter-blockzoeken-block-1 input.button, .view-zoeken input.button {
    color: transparent;
    border: 2px solid var(--primary) !important;
    border-radius: .625rem;
    padding: .625rem;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    background-color: #fff;
    font-size: .8rem;
}
.block-views-exposed-filter-blockzoeken-block-1 input.button:hover, .view-zoeken input.button:hover {
    background-color: var(--primary) !important;
    color: transparent !important;
}

.view-zoeken .views-exposed-form {
    background-color: #f8fafe;
    padding: 1.25rem;
    border-radius: .625rem;
    margin-bottom: 3.125rem;
}

/* Zoekresultaten */
.view-zoeken .view-content li {
    margin-bottom: calc(3.125rem / 2);
    border-bottom: 1px solid #e1eafc;
    padding-bottom: calc(3.125rem / 2);
}

.view-zoeken .view-content li .views-field-title a {
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary) !important;
}
.view-zoeken .view-content li .views-field-title a:hover {
    text-decoration: underline;
}

.view-zoeken .view-content li .views-field-created {
    font-size: .85rem;
    opacity: .7;
}

.view-zoeken .view-content li .views-field-body h2 {
    font-size: 1rem;
    margin: .625rem 0 -.625rem 0;
}
.view-zoeken .view-content li .views-field-body p {
    margin: .625rem 0 0 0;
}

.view-zoeken ul.pagination {
    display: flex;
    margin: 0;
    padding: 0;
}
.view-zoeken ul.pagination li {
    list-style-type: none;
}
.view-zoeken ul.pagination li.active .page-link {
    background-color: var(--primary);
    color: #fff !important;
}
.view-zoeken ul.pagination .page-link {
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: .625rem;
    padding: .625rem;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    margin-right: 1.25rem;
    cursor: pointer;
    background-color: #fff;
}
.view-zoeken ul.pagination .page-link:hover {
    background-color: var(--primary);
    color: #fff !important;
}

/* =============================================================================
 * Nieuws
 * ========================================================================== */
.main-content .view-nieuws .view-content .views-row {
    margin-bottom: 3.125rem;
}

.main-content .view-nieuws .view-content .views-row .views-field-title a {
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary) !important;
}
.main-content .view-nieuws .view-content .views-row .views-field-title a:hover {
    text-decoration: underline;
}

.main-content .view-nieuws .view-content .views-row .views-field-body p {
    margin: .625rem 0 0 0;
}

.main-content .view-nieuws .view-content .views-row .views-field-view-node a {
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: .625rem;
    padding: .625rem;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
}
.main-content .view-nieuws .view-content .views-row .views-field-view-node a:hover {
    background-color: var(--primary);
    color: #fff !important;
}

.main-content .view-nieuws ul.pagination {
    display: flex;
    margin: 0;
    padding: 0;
}
.main-content .view-nieuws ul.pagination li {
    list-style-type: none;
}
.main-content .view-nieuws ul.pagination li.active .page-link {
    background-color: var(--primary);
    color: #fff !important;
}
.main-content .view-nieuws ul.pagination .page-link {
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: .625rem;
    padding: .625rem;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    margin-right: 1.25rem;
}
.main-content .view-nieuws ul.pagination .page-link:hover {
    background-color: var(--primary);
    color: #fff !important;
}

/* =============================================================================
 * Activiteiten / workshops
 * ========================================================================== */
.main-content .view-activiteiten .view-content .views-row {
    margin-bottom: 3.125rem;
}

.main-content .view-activiteiten .view-content .views-row .views-field-title a {
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary) !important;
}
.main-content .view-activiteiten .view-content .views-row .views-field-title a:hover {
    text-decoration: underline;
}

.main-content .view-activiteiten .view-content .views-row .views-field-body p {
    margin: .625rem 0 0 0;
}

.main-content .view-activiteiten .view-content .views-row .views-field-view-node a {
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: .625rem;
    padding: .625rem;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
}
.main-content .view-activiteiten .view-content .views-row .views-field-view-node a:hover {
    background-color: var(--primary);
    color: #fff !important;
}

.main-content .view-activiteiten ul.pagination {
    display: flex;
    margin: 0;
    padding: 0;
}
.main-content .view-activiteiten ul.pagination li {
    list-style-type: none;
}
.main-content .view-activiteiten ul.pagination li.active .page-link {
    background-color: var(--primary);
    color: #fff !important;
}
.main-content .view-activiteiten ul.pagination .page-link {
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: .625rem;
    padding: .625rem;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    margin-right: 1.25rem;
}
.main-content .view-activiteiten ul.pagination .page-link:hover {
    background-color: var(--primary);
    color: #fff !important;
}

/* =============================================================================
 * Accordion
 * ========================================================================== */
.ui-accordion .ui-state-default {
    background: #f8fafe;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: .625rem;
    margin-bottom: 1.875rem;
}
.ui-accordion .ui-state-default:hover {
    background: var(--primary);
    color: #fff;
}

.ui-accordion .ui-state-active {
    background: var(--primary);
    border: none;
    border-radius: .625rem .625rem 0 0;
    margin-bottom: 0;
    color: #fff;
}

.ui-accordion .ui-accordion-content {
    background-color: #f8fafe;
    border: none;
    border-radius: 0 0 .625rem .625rem;
    margin-bottom: 1.875rem;
}

/* =============================================================================
 * Workshops
 * ========================================================================== */
.field--name-field-startdatum-tijd, .field--name-field-einddatum-tijd {
    display: flex;
    background-color: var(--secondary);
    width: fit-content;
    padding: .625rem;
    border-radius: .625rem;
    color: var(--primary);
    font-size: .9rem;
    font-weight: 600;
    margin-right: 1.875rem;
}
.field--name-field-startdatum-tijd .field__label, .field--name-field-einddatum-tijd .field__label {
    margin-right: .3125rem;
}
.field--name-field-startdatum-tijd {
    float: left;
}

/* =============================================================================
 * Login
 * ========================================================================== */
.user-login-form, .user-pass {
    background-color: #f8fafe;
    padding: 1.875rem;
    border-radius: .625rem;
}
.user-login-form .js-form-item, .user-pass .js-form-item {
    margin-bottom: 1.25rem;
}
.user-login-form .js-form-item input, .user-pass .js-form-item input {
    width: 100%;
    box-sizing: border-box;
    padding: .625rem;
    border-radius: .625rem;
    border: 1px solid #000;
}
.user-login-form .js-form-item label, .user-pass .js-form-item label {
    color: var(--primary);
}

input.button {
    color: var(--primary);
    border: 2px solid var(--primary) !important;
    border-radius: .625rem;
    padding: .625rem;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    background-color: #fff;
    font-size: .8rem;
}

/* =============================================================================
 * Footer
 * ========================================================================== */
.site-footer {
    padding: 0;
    background: var(--primary);
    color: #fff;
    text-align: center;
    border-radius: 1.25rem;
}