/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

:where(.wp-site-blocks *:focus) {
    outline: none; /* Remove default focus */
}

:where(.wp-site-blocks *:focus-visible) {
    outline: 2px solid #000; /* Or use your preferred color/style */
}


/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}


:root p, p, .is-layout-constrained > p {
    margin-top: 0;
    margin-bottom: 1rem;
}


:root h1, 
:root .wp-block-heading h1,
.is-layout-constrained > h1 {
    margin-top: 2em;
    margin-bottom: 0.75em;
    margin-left: 0;
    margin-right: 0;
}

:root h2, 
:root .wp-block-heading h2,
.is-layout-constrained > h2 {
    margin-top: 1.75em;
    margin-bottom: 0.65em;
    margin-left: 0;
    margin-right: 0;
}

:root h3, 
:root .wp-block-heading h3,
.is-layout-constrained > h3 {
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    margin-left: 0;
    margin-right: 0;
}

:root h4, 
:root .wp-block-heading h4,
.is-layout-constrained > h4 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
}

:root h5, 
:root .wp-block-heading h5,
.is-layout-constrained > h5 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
}

:root h6, 
:root .wp-block-heading h6,
.is-layout-constrained > h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
	text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* First heading in any container shouldn't have top margin */
div > :is(h1, h2, h3, h4, h5, h6):first-child,
.entry-content > :is(h1, h2, h3, h4, h5, h6):first-child,
.wp-block-post-content > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* Headings that come after lower-level headings should have no top margin */
h6 + h1,
h6 + h2,
h6 + h3,
h6 + h4,
h6 + h5,
h5 + h1,
h5 + h2,
h5 + h3,
h5 + h4,
h4 + h1,
h4 + h2,
h4 + h3,
h3 + h1,
h3 + h2,
h2 + h1 {
    margin-top: 0.65em !important;
}

p.has-large-font-size {
    font-family: var(--wp--preset--font-family--georgia) !important;
}
/* p.has-medium-font-size {
    font-family: var(--wp--preset--font-family--georgia)  !important;
} */


/* -----------------------------------
   BETTER BLOCK RHYTHM
----------------------------------- */

:root {
  --flow-space-xs: var(--wp--preset--spacing--20);
  --flow-space-sm: var(--wp--preset--spacing--30);
  --flow-space-md: var(--wp--preset--spacing--40);
  --flow-space-lg: var(--wp--preset--spacing--50);
  --flow-space-xl: var(--wp--preset--spacing--60);
}

/* reset the generic Gutenberg spacing a bit */
:where(.is-layout-flow) > * {
  margin-block-start: 0;
}

/* standard flow rhythm */
:where(.is-layout-flow) > * + * {
  margin-block-start: var(--flow-space-sm);
}

/* headings need more space before, less after */
:where(.is-layout-flow) > :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--flow-space-lg);
  margin-block-end: 0;
}

:where(.is-layout-flow) > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-block-start: var(--flow-space-xs);
}

/* first heading in a section should not jump down too much */
:where(.is-layout-flow) > :first-child:is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* paragraphs and lists */
:where(.is-layout-flow) > :is(p, ul, ol) + :is(p, ul, ol) {
  margin-block-start: var(--flow-space-sm);
}

/* media needs more breathing room */
:where(.is-layout-flow) > :is(.wp-block-image, .wp-block-gallery, .wp-block-cover, .wp-block-video, .wp-block-embed) {
  margin-block-start: var(--flow-space-lg);
}

:where(.is-layout-flow) > :is(.wp-block-image, .wp-block-gallery, .wp-block-cover, .wp-block-video, .wp-block-embed) + * {
  margin-block-start: var(--flow-space-md);
}

/* quotes / pullquotes */
:where(.is-layout-flow) > :is(.wp-block-quote, .wp-block-pullquote) {
  margin-block-start: var(--flow-space-lg);
}

:where(.is-layout-flow) > :is(.wp-block-quote, .wp-block-pullquote) + * {
  margin-block-start: var(--flow-space-md);
}

/* separators */
:where(.is-layout-flow) > .wp-block-separator {
  margin-block-start: var(--flow-space-xl);
}

:where(.is-layout-flow) > .wp-block-separator + * {
  margin-block-start: var(--flow-space-lg);
}

/* groups often act like sections */
:where(.is-layout-flow) > .wp-block-group {
  margin-block-start: var(--flow-space-lg);
}

/* columns usually need section spacing */
:where(.is-layout-flow) > .wp-block-columns {
  margin-block-start: var(--flow-space-lg);
}

/* button shouldn't get giant random spacing */
:where(.is-layout-flow) > .wp-block-buttons {
  margin-block-start: var(--flow-space-md);
}



/* Scoped to the site: style.css also loads in the admin for the block editor,
   and a bare input[type="submit"] repainted WordPress's own buttons there. */
.wp-site-blocks input[type="submit"] {
   border-radius: 0;
    font-weight: normal;
    letter-spacing: normal;
    background: transparent !important;
    border: 1px solid currentColor !important;
    color: var(--wp--preset--color--base) !important;
    padding: 1rem 1.5rem;
}

p.gform_required_legend {
    display: none !important;
}

span.gfield_required {
    display: none;
}


/* Align wide */
.alignwide {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
}

main {
    margin-top: 0 !important;
}


/* Typography */
.has-uppercase {
    text-transform: uppercase !important;
}

.has-lowercase {
    text-transform: none;
}

.has-georgia-font-family {
    line-height: 1.2 !important;
}


/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}



html {
    scroll-behavior: smooth;
}


/* translate widget */
.gt_languages a {
    color: var(--wp--preset--color--contrast) !important;
}
.gt_switcher-popup span:last-of-type {
    display: none;
}
a.glink span {
    font-size: inherit !important;
}


/* Buttons */
.wp-block-buttons {
    gap: 1rem;
}

:root :where(.wp-element-button, .wp-block-button__link) {
    border-radius: 0;
    font-weight: normal;
    letter-spacing: normal;
    background: transparent !important;
    border: 1px solid currentColor !important;
    color: var(--wp--preset--color--accent-1) !important;
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1rem 1rem 1.5rem;
    transition: .3s;
}

:root :where(.wp-element-button, .wp-block-button__link):after {
    content: "";
    background-image: url("data:image/svg+xml,%0A%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500004 13.5L6.5 7L0.500004 0.5' stroke='%233F0632' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    width: 10px;
    height: 15px;
    display: block;
}

:root :where(.wp-element-button.has-base-color, .wp-block-button__link.has-base-color):after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500004 13.5L6.5 7L0.500004 0.5' stroke='%23f9f8e8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
:root :where(.wp-element-button.has-base-color, .wp-block-button__link.has-base-color) {
     color: var(--wp--preset--color--base) !important;
}

:root :where(.wp-element-button, .wp-block-button__link):hover {
    background: var(--wp--preset--color--accent-2) !important;
    border-color: var(--wp--preset--color--contrast) !important;
    color: var(--wp--preset--color--contrast) !important;
}

:root :where(.wp-element-button, .wp-block-button__link):hover:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500004 13.5L6.5 7L0.500004 0.5' stroke='%233F0632' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}


.is-content-justification-center {
    justify-content: center;
}


/* Header */
header {
    transition: .3s ease-in-out;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
body.admin-bar header {
    top: 32px
}

div#indicator {
    position: absolute;
    background: var(--wp--preset--color--accent-1);
    height: 2px;
    z-index: 10;
    bottom: 0;
}

/* Page template default */
.page-template-default {
}

.page-template-default .entry-content > div.alignfull:first-child, .page-template-pages-light-menu .entry-content > div.alignfull:first-child {
    margin-top: calc(var(--wp--preset--spacing--60) * -1);
}
.page-template-default .entry-content > div.alignfull:last-child, .page-template-pages-light-menu .entry-content > div.alignfull:last-child  {
    margin-bottom: calc(var(--wp--preset--spacing--60) * -1);
}



.no-post-thumbnail .page-header {
    padding-bottom: var(--wp--preset--spacing--70) !important;
    padding-top: var(--wp--preset--spacing--80) !important;
}

/* The spacer only makes room for the featured image to overlap the header, so
   without one it would just leave an empty band under the title. */
.no-post-thumbnail .page-header > .wp-block-spacer {
    display: none;
}

.no-post-thumbnail .single-header {
    padding-bottom: var(--wp--preset--spacing--70) !important;
    padding-top: var(--wp--preset--spacing--80) !important;
}

/* Search  */
svg.search-icon path {
    fill: currentColor;
}
.search .page-header {
    padding-bottom: var(--wp--preset--spacing--70) !important;

}
.wp-block-search__button.has-icon:after {
    display: none;
}

.wp-block-search__button.has-icon {
    padding: 1.25rem;
    border-radius: 100%;
    margin-left: 0.5rem;
        background: var(--wp--preset--color--accent-2) !important;
    color: var(--wp--preset--color--accent-1) !important;
}

/* 404 */
body.error404 {
    background: var(--wp--preset--color--base);
}

#studio-companion-notice {
    display: none !important;
}

/* Page template pages light header */

.page-template-pages-light-header .menu-logo path, .page-template-pages-light-menu .menu-logo path {
    fill: var(--wp--preset--color--base);
}
.page-template-pages-light-header nav.main-navigation ul li a, .page-template-pages-light-menu nav.main-navigation ul li a {
      color: var(--wp--preset--color--base);
}
.page-template-pages-light-header .bold-nav-full__hamburger .bold-nav-full__hamburger-bar {
      color: var(--wp--preset--color--base);
}
.page-template-pages-light-header svg.search-icon path {
      color: var(--wp--preset--color--base);
}
.page-template-pages-light-header .block-menu-inner, .page-template-pages-light-menu .block-menu-inner {
      border-color: rgb(249 248 232 / 50%);
}
.page-template-pages-light-header .headerscrolled, .page-template-pages-light-menu .headerscrolled {
    background: var(--wp--preset--color--contrast);
}
.page-template-pages-light-header  div#indicator, .page-template-pages-light-menu  div#indicator {
    background: var(--wp--preset--color--base);
}



/* Page template no title */

.page-template-page-no-title {
}


/* Page template no title light menu */
.page-template-page-no-title-light-menu .menu-logo path {
    fill: var(--wp--preset--color--base);
}
.page-template-page-no-title-light-menu nav.main-navigation ul li a {
      color: var(--wp--preset--color--base);
}
.page-template-page-no-title-light-menu .bold-nav-full__hamburger .bold-nav-full__hamburger-bar {
      color: var(--wp--preset--color--base);
}
.page-template-page-no-title-light-menu svg.search-icon path {
      color: var(--wp--preset--color--base);
}
.page-template-page-no-title-light-menu .block-menu-inner {
      border-color: rgb(249 248 232 / 50%);
}
.page-template-page-no-title-light-menu .headerscrolled {
    background: var(--wp--preset--color--contrast);
}
.page-template-page-no-title-light-menu div#indicator {
    background: var(--wp--preset--color--base);
}

/* Archive */

.post-type-archive .menu-logo path {
    fill: var(--wp--preset--color--base);
}
.post-type-archive nav.main-navigation ul li a {
      color: var(--wp--preset--color--base);
}
.post-type-archive .bold-nav-full__hamburger .bold-nav-full__hamburger-bar {
      color: var(--wp--preset--color--base);
}
.post-type-archive svg.search-icon path {
      color: var(--wp--preset--color--base);
}
.post-type-archive .block-menu-inner {
      border-color: rgb(249 248 232 / 50%);
}
.post-type-archive .headerscrolled {
    background: var(--wp--preset--color--contrast);
}
.post-type-archive div#indicator {
    background: var(--wp--preset--color--base);
}

/* Blog */

.blog .menu-logo path {
    fill: var(--wp--preset--color--base);
}
.blog nav.main-navigation ul li a {
      color: var(--wp--preset--color--base);
}
.blog .bold-nav-full__hamburger .bold-nav-full__hamburger-bar {
      color: var(--wp--preset--color--base);
}
.blog svg.search-icon path {
      color: var(--wp--preset--color--base);
}
.blog .block-menu-inner {
      border-color: rgb(249 248 232 / 50%);
}
.blog .headerscrolled {
    background: var(--wp--preset--color--contrast);
}
.blog div#indicator {
    background: var(--wp--preset--color--base);
}


/* Archive updates */
.archive-updates-header h1 {
    margin: 3rem 0 0 0 !important;
}

.archive-updates-header {
    padding-bottom: var(--wp--preset--spacing--70);
    margin-bottom: var(--wp--preset--spacing--70);
}


/* header.nav-up {
    transform: translateY(-100%);
} */


.headerscrolled {
    background: var(--wp--preset--color--base);
}



.has-small-rounded-border {
	border-radius: 5px;
	overflow: hidden;
}

.has-large-rounded-border {
	border-radius: 40px;
	overflow: hidden;
}


.wp-block-site-logo img {
    width: 175px;
}




/* Hero Detail */
.header-sticky-content {
    position: sticky;
    top: 225px;
    gap: 2rem;
}
.header-sticky-content h1 {
    margin: 0;
}

.taxonomy-post_tag {
    display: flex;
    gap: 0.5rem;
}

.taxonomy-post_tag span {
    display: none;
}

.taxonomy-post_tag a, .taxonomy-rechtszaak {
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--white);
    text-decoration: none;
    line-height: 1.2;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
    margin: 0 !important;
}
.taxonomy-rechtszaak a {
    text-decoration: none;
}

/* Hero Rechtszaken Thema's */
.rechtszaken-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
}
.category-nav a {
    font-family: var(--wp--preset--font-family--georgia) !important;
    font-size: var(--wp--preset--font-size--large);
    padding: 0;
    border: none;
    display: inline-block;
    gap: 0.25rem;
    text-decoration: none;
    text-align: center;
}
a.category-link.active .cat-name {
    text-decoration: underline;
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}
a.category-link:hover .cat-name {
    text-decoration: underline;
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

span.cat-count {
    font-size: 60%;
    color: var(--wp--preset--color--accent-5);
}

.category-nav {
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    max-width: 80rem;
    margin: auto;
    width: 100%;
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
    gap: 1rem;
    box-sizing: border-box;
}


.filter-group .filter-btn {
    border: 1px solid;
    background: transparent;
    border-radius: 0;
    font-family: var(--wp--preset--font-family--geist);
    font-size: var(--wp--preset--font-size--small);
    text-transform: uppercase;
    padding: 3px 6px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Updates archive filters

   Read as a sentence rather than a row of buttons: "Alles, Vacatures, ...".
   The commas are pseudo-elements so the markup stays a list of real buttons
   and the filter JS keeps working untouched.
   -------------------------------------------------------------------------- */

.archive-updates .filter-group {
    display: block;
}

.archive-updates .filter-group .filter-btn {
    border: none;
    padding: 0;
    background: transparent;
    font-family: var(--wp--preset--font-family--geist);
    font-size: var(--wp--preset--font-size--medium);
    text-transform: none;
    /* Dimmed through the colour rather than opacity: the comma below sits
       inside the button, and opacity on a parent caps whatever the child can
       reach, so the separators would fade along with the inactive labels. */
    color: color-mix(in srgb, currentColor 50%, transparent);
    cursor: pointer;
    transition: color .3s;
}

.archive-updates .filter-group .filter-btn:not(:last-of-type):after {
    content: ",";
    /* Inside the button so the comma cannot wrap onto a line of its own */
    margin-right: 0.35em;
    /* Declared rather than inherited, so the comma after the active item is
       dimmed like the rest instead of following that button's full colour. */
    color: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
    /* inline-block keeps the underline below off the comma — text-decoration
       propagates into inline children but stops at an inline-block. */
    display: inline-block;
    text-decoration: none;
}

.archive-updates .filter-group .filter-btn.active,
.archive-updates .filter-group .filter-btn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--wp--preset--color--contrast);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.filter-btn.active, .filter-btn:hover {
    background: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--contrast);
    color: #fff;
}

a.archive-link {
    display: flex;
    gap: 0.5rem;
    text-decoration: none;
    margin-left: 1rem;
}

a.archive-link:hover {
    text-decoration: underline;
}

a.archive-link svg {
    width: 20px;
}

.archive-rechtszaken-hero-inner {
    display: flex;
    margin: auto;
}
.archive-rechtszaken-hero-wraper .yoast-breadcrumbs {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

.archive-rechtszaken-hero-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.archive-rechtszaken-hero-left .wp-element-button {
    margin-top: 3rem;
}

.archive-rechtszaken-hero-left-inner {
    margin: 0 3rem;
}
.archive-rechtszaken-hero-left-inner h1:not(.has-xxx-large-font-size) {
    margin-bottom: var(--wp--preset--spacing--70) !important;
}

.archive-rechtszaken-hero-right {
    flex: 1;
}

.archive-rechtszaken-hero-right figure {
    position: relative;
    width: 100%;
    padding-bottom: 130%;
    overflow: hidden;
    margin: 0;
}

.archive-rechtszaken-hero-right figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

span.rechtszaak-meta {
    margin: 2rem;
     gap: 1rem;
    display: flex;
    align-items: center;
}

.rechtszaak-card h2 {
    margin: 2rem;
}

.load-more-wrapper {
    margin-bottom: var(--wp--preset--spacing--80);
    text-align: center;
}



/* Updates */
li.update-item {
    list-style: none;
    border-bottom: 1px solid;
    padding: 1.5rem 0;
    margin: 0;
}

li.update-item a {
    text-decoration: none;
}

li.update-item h4 {
    margin: 1rem 0 0 0;
}
li.update-item a:hover h4 {
    text-decoration: underline;
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}
span.update-meta {
    gap: 1rem;
    display: flex;
    align-items: center;
}

span.update-type {
    font-size: var(--wp--preset--font-size--small);
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--white);
    text-transform: uppercase;
    padding: 3px 6px;
}

.taxonomy-category a {
	font-size: var(--wp--preset--font-size--medium);
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--white);
    text-transform: uppercase;
    padding: 3px 6px;
	text-decoration: none;
	pointer-events: none;
}


li.update-item a {
    display: flex;
    gap: 2rem;
}

.update-item-image {
    min-width: 25%;
}

.update-item-image  figure {
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    overflow: hidden;
    margin: 0;
}


.update-item-image   figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ul.updates-list {
    padding: 0;
    padding-bottom: var(--wp--preset--spacing--70);
}



/* Each item draws the line under itself; the list draws the one above the
   first item. Unqualified so the featured block gets it as well. */
ul.updates-list {
    border-top: 1px solid;
}

/* Matches the width of the lists it replaces when a filter returns nothing */
p.no-filter-results.alignwide {
    max-width: 70rem;
    margin-bottom: 4rem;
}



/* Rechtszaak Card */

.rechtszaak-card a {
    text-decoration: none;
}

.rechtszaak-card {
    position: relative;
}

.rechtszaak-card a:after  {
    content: "";
    width: 45px;
    height: 45px;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 17.5L18.5 9L10.5 0.5' stroke='%23F9F8E8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.5 9.14062H17.5' stroke='%23F9F8E8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   background-color: var(--wp--preset--color--contrast);
    border-radius: 100%;
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    transition: .3s;
}

.rechtszaak-card:hover a:after {
    background-color: var(--wp--preset--color--accent-2);
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 17.5L18.5 9L10.5 0.5' stroke='%233f0632' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.5 9.14062H17.5' stroke='%233f0632' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}


.rechtszaak-type {
    font-size: var(--wp--preset--font-size--medium);
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--white);
    text-transform: uppercase;
    padding: 3px 6px;
	margin: 0 !important;
}
.agenda-date {
	font-size: var(--wp--preset--font-size--medium);
    background: var(--wp--preset--color--accent-2);
    color: var(--wp--preset--color--contrast);
    text-transform: uppercase;
    padding: 3px 6px;
	margin: 0 !important;
}

/* Card fills its grid cell: meta at the top, image pinned to the bottom, so a
   row of cards lines up whatever the title length. Sits after the
   span.rechtszaak-meta rule above, which it overrides on margin-bottom. */
.rechtszaak-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}

.rechtszaak-card-image {
    margin-top: auto;
}

span.rechtszaak-meta {
    margin-bottom: 0;
}

.rechtszaak-card-image figure {
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    overflow: hidden;
    margin: 0;
}

.rechtszaak-card-image figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blocks */

/* Yoast FAQ Block */
.schema-faq.wp-block-yoast-faq-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid;
}
.schema-faq-section {
    border-bottom: 1px solid;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
}
.schema-faq-section:after {
    content: "";
    background-size: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.3525 0.5V34.208' stroke='%233F0632' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M0.5 17.3535H34.2065' stroke='%233F0632' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 1rem;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    border: 1px solid;
    color: currentColor;
    cursor: pointer;
    z-index: 2;
    transition: .6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.schema-faq-section.faq-opened .schema-faq-question {
    margin-bottom: 1rem;
}
.schema-faq-question {
	cursor: pointer;
    font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--georgia);
    font-weight: normal;
    color: var(--wp--preset--color--contrast);
    padding-right: 4rem;
}
strong.schema-faq-question strong {
    font-weight: normal;
}
.schema-faq-section {
    position: relative;
    z-index: 1;
    padding: 1.5rem 0;
    margin: 0;
    /* The listener sits on the section so the circle toggle is clickable too */
    cursor: pointer;
}
.schema-faq-section:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--wp--preset--color--accent-6) !important;
}

.schema-faq-answer {
    opacity: 0;
    transition: opacity .3s;
    display: none;
}

.schema-faq-section:last-of-type {
    border: none;
}
.faq-opened .schema-faq-answer {
    opacity: 1;
    display: block;
    margin-top: 0;
    cursor: auto;
}

.schema-faq-section.faq-opened:after {
    transform: rotate(180deg);
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-0.000976562 15.5166H30' stroke='black'/%3E%3C/svg%3E%0A");
    background-color: var(--wp--preset--color--accent-2);
    border-color: var(--wp--preset--color--accent-2);
}


/* Yoast Breadcrumbs  */
.yoast-breadcrumbs {
    padding-top: 100px;
    padding-bottom: 1rem;
    font-size: var(--wp--preset--font-size--small);
}
/* The updates header is alignfull, so its breadcrumbs need the root gutters
   that the constrained layout would otherwise have given them. */
.archive-updates-header-inner .yoast-breadcrumbs {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

.yoast-breadcrumbs a {
    text-decoration: none;
}
.yoast-breadcrumbs a:hover {
    text-decoration: underline;
}
span.breadcrumb_last {
    display: inline-block;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}



/* Yoast How To Block */
.schema-how-to-description {
    font-size: var(--wp--preset--font-size--x-large);
    font-family: var(--wp--preset--font-family--skynetworks);
    color: var(--wp--preset--color--contrast);

}

.schema-how-to {
    max-width: var(--wp--style--global--wide-size);
}

.schema-how-to-step-name {
    font-family: var(--wp--preset--font-family--skynetworks);
	color: var(--wp--preset--color--contrast);
	font-weight: normal;
}


ol.schema-how-to-steps {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    list-style: none;
    gap: 2rem;
}

ol.schema-how-to-steps:before {
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    background: var(--wp--preset--color--accent-5);
    color: var(--wp--preset--color--contrast);
    top: 15px;
}

ol.schema-how-to-steps {
    position: relative;
}

.schema-how-to-step {
    flex: 1;
    position: relative;
}

.schema-how-to-step:before {
    content: "01";
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--accent-1);
    border: 1px solid rgb(15 17 49 / 10%);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.schema-how-to-step:nth-of-type(2):before {
    content: "02";
}

.schema-how-to-step:nth-of-type(3):before {
    content: "03";
}

.schema-how-to-step:nth-of-type(4):before {
    content: "04";
}

.schema-how-to-step:nth-of-type(5):before {
    content: "05";
}

.schema-how-to-step:nth-of-type(6):before {
    content: "06";
}

.schema-how-to-step:last-of-type {
    background: #fff;
}


.schema-how-to-step::marker {
    display: none;
}

p.schema-how-to-step-text {
    color: var(--wp--preset--color--accent-2) !important;
    font-size: var(--wp--preset--font-size--small);
}



/* Blocks */

/* Quote */
:root :where(.wp-block-quote) {
    margin-block-start: var(--wp--preset--spacing--60);
    margin-block-end: var(--wp--preset--spacing--60);
}

/* Pull quote */
:root :where(.wp-block-pullquote) {
    margin-block-start: var(--wp--preset--spacing--60);
    margin-block-end: var(--wp--preset--spacing--60);
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--50);
    border-top: 2px solid;
    border-bottom: 2px solid;
}



/* Group */
/* .wp-block-group.has-background {
    padding-top: var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--30);
}
.wp-block-group.alignfull.has-background {
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: var(--wp--preset--spacing--70);
} */



/* Columns */
:root :where(.wp-block-columns-is-layout-flex) {
    gap: var(--wp--preset--spacing--40);
}
.wp-block-column.has-background {
    padding: var(--wp--preset--spacing--40);
}


/* Media & Text  */
.wp-block-media-text__content {
    padding: var(--wp--preset--spacing--40) !important;
}





@media (max-width: 1100px) {

.rechtszaken-grid {
    grid-template-columns: 1fr 1fr;
}


.category-nav {
    padding-left: 0;
    padding-right: 0;
    gap: 0.5rem;
}

.category-nav a {
    font-size: var(--wp--preset--font-size--medium);
}
}




@media (max-width: 700px) {
.archive-rechtszaken-hero-inner {
    flex-direction: column;
    gap: 4rem;
}
.rechtszaken-grid {
    grid-template-columns: 1fr;
}


}

/* --------------------------------------------------------------------------
   Menu background token

   .headerscrolled paints the header once the page scrolls, and each light-menu
   template swaps that colour. The submenu overlay has to match it, but it sits
   several levels down from the header, where `inherit` only ever resolves to a
   transparent parent. A custom property does inherit that far, so both read the
   same value.
   -------------------------------------------------------------------------- */

body {
    --menu-bg: var(--wp--preset--color--base);
    --menu-border: rgb(15 84 82 / 50%);

    /* The submenu panel runs opposite the bar it drops out of */
    --menu-bg-invert: var(--wp--preset--color--contrast);
    --menu-fg-invert: var(--wp--preset--color--base);
}

.page-template-pages-light-header,
.page-template-pages-light-menu,
.page-template-page-no-title-light-menu,
.post-type-archive,
.blog {
    --menu-bg: var(--wp--preset--color--contrast);
    --menu-border: rgb(249 248 232 / 50%);

    --menu-bg-invert: var(--wp--preset--color--base);
    --menu-fg-invert: var(--wp--preset--color--contrast);
}