/******************************************************************************
/* BOHO FRONT END STYLING (requires boho-shared-styles for custom properties)
*******************************************************************************

/**
* ROOT
**/

/* Make sure tabbing to anchor links leaves some space */
:root {
    scroll-padding: var(--wp--preset--spacing--60, 2.25rem);
}

/* Smooth scrolling unless user preferes smooth motion */
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

/**
* BODY
**/

/* Focus Outline; set custom outline on links, buttons and more */
body a:focus-visible,
body :where(summary, button):focus-visible,
body .wp-block-image a:focus-within img,
body .skip-link:focus,
body pre[tabindex="0"]:focus {
    outline-width: var(--boho--outline-width);
    outline-style: var(--boho--outline-style);
    outline-color: var(--theme-link-hover-color, initial);
    outline-offset: var(--boho--outline-offset);
}

/* Heavier underlines when hovering over links */
body button.ct-toggle:hover .ct-label,
body :is(p, td, cite, address, figcaption, h3)>a:hover,
body :is(li:not([data-type="pill"]), .site-title, .entry-title, .ct-breadcrumbs, .related-entry-title, .contact-text) a:hover {
    --theme-text-decoration: underline;
    --has-link-decoration: var(--true);
    text-decoration-thickness: var(--boho--text-decoration-thickness);
}

/* Add missing underlines to cite and address */
body :where(cite, address, figcaption)>a {
    --theme-text-decoration: underline;
}


/**
* EXTERNAL LINK STYLING ⭐⭐⭐⭐⭐
**/

/* External Links; target all but images; append non-breaking figure space character and mask it. */
/* FIGURE SPACE unicode character has 100:213 aspect ratio in FF and Chrome, 100:193 in Safari */
/* Our mask image has a aspect ratio of 1:2 with a bit of spacing on all sides, suitable for cover */

body a:is([rel*="external"], [target="_blank"], [data-type="link"]):not( :has(svg, img))::after {
    --mask-image-arrow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHN0eWxlPSdmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS41JyB2aWV3Qm94PScwIDAgNTAgMTAwJz48cGF0aCBkPSdNNDUgMzYgNiA3NW0xOS0zOWgyMG0wIDB2MjAnIHN0eWxlPSdzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6NnB4Jy8+PC9zdmc+");
    --mask-image-box: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHN0eWxlPSdmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS41JyB2aWV3Qm94PScwIDAgNTAgMTAwJz48cGF0aCBkPSdNNDUgNjZ2MTBtMCAwSDVtMCAwVjM2bTAgMGgxMG0zMCAwTDI1IDU2bTUtMjBoMTVtMCAwdjE1JyBzdHlsZT0nZmlsbDojZTNlM2UzO3N0cm9rZTojZmZmO3N0cm9rZS13aWR0aDo2cHgnLz48L3N2Zz4=");
    margin-inline: .2em;
    content: "\2007";
    font-family: monospace;
    background: currentColor;
    mask-size: cover;
    mask-position: center;
    mask-image: var(--mask-image-box);
}


/**
* ARTICLE CARDS
**/

/* Article Card Featured Image; underline card title when hover  */
article .boho-clickable-figure:hover~[class$="title"] a,
article .boho-clickable-figure:hover~.card-content [class$="title"] a {
    --theme-text-decoration: underline;
    --has-link-decoration: var(--true);
    text-decoration-thickness: var(--boho--text-decoration-thickness);
    color: var(--theme-link-hover-color);
}

/* Article Card Featured Image; show a pointer cursor when hover */
article .boho-clickable-figure:hover {
    cursor: pointer;
}

/* Article Card Title link; fix focus outline wrapping in Firefox */
@supports (-moz-appearance: none) {
    article [class$="title"] a:focus-visible {
        display: inline-block;
    }
}

/* Article Card Excerpt; limit (clamp) number of lines default 4 */
article .entry-card .entry-excerpt {
    display: -webkit-box;
    line-clamp: var(--boho--excerpt--line-clamp);
    -webkit-line-clamp: var(--boho--excerpt--line-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/**
* AUTHOR BOX
**/

/* Author Box; balance text in author bio */
.author-box .author-box-bio {
    text-wrap: balance;
}

/** 
* NEWSLETTER SUBSCRIPTION FORM
**/

/* Newsletter Subscribe Button; make it same height as name and email fields */
.ct-newsletter-subscribe-form button {
    --theme-button-border-radius: 4em;
    height: var(--theme-form-field-height, 40px);
    max-height: var(--theme-form-field-height, 40px);
    font-size: var(--theme-button-font-size);
}


/******************************************************************************
* PLUGIN STYLING -- Make PolyLang, Lightbox and TOC align with boho styling
*******************************************************************************

/* Blocksy Language Switcher and Polylang flags; scale to --theme-icon-size */
.ct-language-switcher .ct-language img,
.ct-language-switcher li img,
.pll-parent-menu-item a img {
    width: calc(var(--theme-icon-size, .8em) * 1.2);
    max-width: calc(var(--theme-icon-size, .8em) * 1.2);
}

/* Lightbox for Gallery & Image Block; make room at bottom for caption */
#baguetteBox-overlay .full-image img {
    max-height: calc(100vh - 48px);
}

/* Lightbox for Gallery & Image Block; increase brightness of close button */
.baguetteBox-button svg {
    filter: brightness(150%);
}

/* SimpleTOC; smaller lineheight in exchange of margin below each link */
.simpletoc-list li {
    color: var(--theme-palette-color-3);
    line-height: 1.3;
    text-wrap: balance;
    margin-bottom: .5ex;
}

/* SimpleTOC; same spacing in netsted lists */
.simpletoc-list li>ul {
    margin-top: 0.5ex;
}

/* SimpleTOC; remove underline in the TOC links when not hovering */
.simpletoc-list li a:not(:hover) {
    text-decoration: none;
}



/* experiments */



/* Embed Privacy; increase screen reader text contrast to pass WCAG */
.wp-block-embed .embed-privacy-container .screen-reader-text {
    color: black;
    background: white;
}

/* Embed Privacy; Blur the overlay background thumbnail */
.wp-block-embed .embed-privacy-container .embed-privacy-overlay {
    backdrop-filter: blur(3px);
}

/* Embed Privacy; The "always load" checkbox has the smallest font size */
.wp-block-embed .embed-privacy-input-wrapper label {
    font-size: var(--wp--preset--font-size--small, small);
}


/**
* RELATED POSTS
**/

[data-prefix="single_blog_post"] .ct-related-posts .related-entry-title {
  --boho--font-size: var(--wp--preset--font-size--small);
}