/*
Theme Name: Spiekermann
Text Domain: spiekermann
Version: 1.0.17
Description: Spiekermann is a bold WordPress block theme for blogs and portfolios, featuring an asymmetrical grid layout on the front page. Inspired by brutalist design, it uses a quirky pixelated sans-serif font and emphasizes raw aesthetics, unconventional layouts, and typographic focus. It includes ten different color schemes and three different typographic styles to choose from. Activate the Jetpack plugin to add a row of related posts to the bottom of your blog posts. Demo: https://spiekermann.andersnoren.se
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, blog, portfolio, news
Author: Anders Norén
Author URI: https://andersnoren.se
Theme URI: https://andersnoren.se/teman/spiekermann-wordpress-theme/
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Requires at least: 6.7
Requires PHP: 7.4
Tested up to: 6.7
*/

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'salt' on, 'calt' off, 'liga' off;
	font-synthesis: small-caps style;
}

:root :where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a, .wp-element-button {
	transition: color .1s linear, background-color .1s linear, border-color .1s linear, opacity .1s linear;
}

@supports (min-height: 100dvh) {
	[style*="min-height:100vh"] {
		min-height: calc( 100dvh - var( --wp-admin--admin-bar--height, 0px ) ) !important;
	}
}

.wp-site-blocks > .wp-block-group[style*="min-height:100vh"] > main {
	flex: 1;
}

/*
 * Elements
 */

thead {
	background-color: var( --wp--preset--color--contrast );
	border: none;
	color: var( --wp--preset--color--base );
}

th {
	font-weight: 400;
}

/*
 * Typography
 */

:where( .has-x-large-font-size ),
:where( .has-large-font-size ) {
	line-height: 1.35;
}

.entry-content,
.comment-content {
	font-feature-settings: 'cv10' on, 'ss01' on, 'ss03' on, 'ss02' on, 'liga' off, 'calt' off;
}

/*
 * Helper classes
 */

.hide-empty:not(:has(*)) {
	display: none !important;
}

.ss00 { font-feature-settings: 'liga' off; }
.ss01 { font-feature-settings: 'salt' on; }
.ss02 { font-feature-settings: 'salt' on, 'ss02' on; }
.ss03 { font-feature-settings: 'salt' on, 'ss03' on; }
.ss04 { font-feature-settings: 'salt' on, 'ss04' on; }
.ss05 { font-feature-settings: 'salt' on, 'ss05' on; }

/*
 * Inputs
 */

::placeholder {
	color: var( --wp--preset--color--contrast-2 );
}

label {
	font-size: var(--wp--preset--font-size--small);
}

:where(input, textarea, select) {
	background-color: var(--wp--preset--color--base);
	border: 1px solid;
	border-radius: 5px;
	color: inherit;
	font-family: var(--wp--preset--font-family--body-alt);
	font-size: var( --wp--preset--font-size--normal );
	line-height: 1.5;
	margin: 0;
	padding: .666em 1em;
}

textarea {
	height: 5lh;
}

/*
 * Template Part: Footer
 */

footer.wp-block-template-part a[href="https://andersnoren.se"] {
	text-decoration: none;
}

footer.wp-block-template-part a[href="https://andersnoren.se"]:hover {
	text-decoration: underline;
}
/* Carolindaub minimal landing (Spiekermann) */
.cd-minimal-landing {
    min-height: 100vh;
    background: #ffffff;
    padding: 24px;
}

.cd-top-links {
    gap: 28px;
    margin-bottom: 20px;
}

.cd-top-links p {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

.cd-top-links a {
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid #000000;
    padding-bottom: 2px;
}

.cd-top-links a:hover,
.cd-top-links a:focus-visible {
    opacity: 0.7;
}

.cd-hero-image {
    margin: 0;
}

.cd-hero-image img {
    width: 100%;
    max-height: calc(100vh - 110px);
    object-fit: cover;
    display: block;
}

@media (max-width: 782px) {
    .cd-minimal-landing {
        padding: 16px;
    }

    .cd-top-links {
        gap: 18px;
        margin-bottom: 14px;
    }

    .cd-hero-image img {
        max-height: calc(100vh - 90px);
    }
}

/* Carolindaub: strengthen asymmetrical image rhythm on Projekte page */
.page-id-601 .is-style-spiekermann-post-template-asymmetrical-grid-animate > li:nth-child(4n+1) .wp-block-post-featured-image img,
.page-id-601 .is-style-spiekermann-post-template-asymmetrical-grid > li:nth-child(4n+1) .wp-block-post-featured-image img {
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

.page-id-601 .is-style-spiekermann-post-template-asymmetrical-grid-animate > li:nth-child(4n+2) .wp-block-post-featured-image img,
.page-id-601 .is-style-spiekermann-post-template-asymmetrical-grid > li:nth-child(4n+2) .wp-block-post-featured-image img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.page-id-601 .is-style-spiekermann-post-template-asymmetrical-grid-animate > li:nth-child(4n+3) .wp-block-post-featured-image img,
.page-id-601 .is-style-spiekermann-post-template-asymmetrical-grid > li:nth-child(4n+3) .wp-block-post-featured-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.page-id-601 .is-style-spiekermann-post-template-asymmetrical-grid-animate > li:nth-child(4n+4) .wp-block-post-featured-image img,
.page-id-601 .is-style-spiekermann-post-template-asymmetrical-grid > li:nth-child(4n+4) .wp-block-post-featured-image img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Carolindaub: global sans-serif typography */
body,
button,
input,
select,
textarea,
.wp-block-site-title,
.wp-block-navigation,
.wp-block-navigation-item,
.wp-block-post-title,
.wp-block-heading,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

/* Carolindaub: calm typography in posts */
.single-post,
.single-post * {
    font-feature-settings: normal !important;
    font-variation-settings: normal !important;
    font-variant: normal !important;
    font-synthesis: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content li,
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6,
.single-post .wp-block-post-title {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
    line-height: 1.35;
}

/* Carolindaub: About image 20% narrower */
.page-id-591 .wp-block-cover {
    width: 80%;
}

/* Carolindaub: homepage full-width hero image + text overlay */
.home .wp-block-image.alignwide,
.home .wp-block-image.size-full.alignwide {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0;
    margin-bottom: 0;
}

.home .wp-block-image.alignwide img,
.home .wp-block-image.size-full.alignwide img {
    display: block;
    width: 100vw;
    height: clamp(520px, 82vh, 980px);
    object-fit: cover;
}

.home .wp-block-image.alignwide::after,
.home .wp-block-image.size-full.alignwide::after {
    content: Musik ist fuer mich eine Form des Zuhoerens - der Welt, anderen Menschen und den Veraenderungen unserer Zeit. Mich interessiert, wie Musik Raeume schaffen kann, in denen unterschiedliche Perspektiven aufeinandertreffen und neue Moeglichkeiten der Wahrnehmung entstehen.;
    position: absolute;
    left: clamp(16px, 4vw, 56px);
    right: clamp(16px, 4vw, 56px);
    bottom: clamp(16px, 4vw, 56px);
    max-width: min(980px, 88vw);
    color: #ffffff;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: clamp(1.05rem, 2.1vw, 1.7rem);
    line-height: 1.35;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
    z-index: 2;
    pointer-events: none;
}

.home .wp-block-image.alignwide::before,
.home .wp-block-image.size-full.alignwide::before {
    content: ";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.06) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Carolindaub: target current homepage block structure */
.home .cd-minimal-landing {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.home .cd-minimal-landing > .cd-top-links {
    width: min(100%, var(--wp--style--global--wide-size, 2488px));
    max-width: 100%;
    margin: 0 auto;
    padding: var(--wp--preset--spacing--body-margin);
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

.home .cd-minimal-landing > .wp-block-cover {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: clamp(560px, 86vh, 980px) !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

.home .cd-minimal-landing > .wp-block-cover > img,
.home .cd-minimal-landing > .wp-block-cover .wp-block-cover__image-background {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.home .cd-minimal-landing > .wp-block-cover > .wp-block-cover__background {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.08) 100%) !important;
    opacity: 1 !important;
}

.home .cd-minimal-landing > .wp-block-cover > .wp-block-cover__inner-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home .cd-minimal-landing > .wp-block-cover > .wp-block-cover__inner-container::after {
    content: Musik ist fuer mich eine Form des Zuhoerens - der Welt, anderen Menschen und den Veraenderungen unserer Zeit. Mich interessiert, wie Musik Raeume schaffen kann, in denen unterschiedliche Perspektiven aufeinandertreffen und neue Moeglichkeiten der Wahrnehmung entstehen.;
    position: absolute;
    left: clamp(16px, 4vw, 56px);
    right: clamp(16px, 4vw, 56px);
    bottom: clamp(20px, 4vw, 56px);
    max-width: min(980px, 88vw);
    color: #ffffff;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: clamp(1.05rem, 2.1vw, 1.7rem);
    line-height: 1.35;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* Carolindaub: homepage quote overlay on hero cover */
.home .cd-minimal-landing > .wp-block-cover::after {
    content: Musik ist fuer mich eine Form des Zuhoerens - der Welt, anderen Menschen und den Veraenderungen unserer Zeit. Mich interessiert, wie Musik Raeume schaffen kann, in denen unterschiedliche Perspektiven aufeinandertreffen und neue Moeglichkeiten der Wahrnehmung entstehen.;
    position: absolute;
    left: clamp(16px, 4vw, 56px);
    right: clamp(16px, 4vw, 56px);
    bottom: clamp(20px, 4vw, 56px);
    max-width: min(980px, 88vw);
    color: #ffffff;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: clamp(1.05rem, 2.1vw, 1.7rem);
    line-height: 1.35;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
    z-index: 4;
    pointer-events: none;
}

/* Carolindaub: final reliable homepage quote overlay */
.home .cd-minimal-landing > .wp-block-cover::after {
    content: 'Musik ist für mich eine Form des Zuhörens – der Welt, anderen Menschen und den Veränderungen unserer Zeit. Mich interessiert, wie Musik Räume schaffen kann, in denen unterschiedliche Perspektiven aufeinandertreffen und neue Möglichkeiten der Wahrnehmung entstehen.' !important;
    position: absolute;
    left: clamp(16px, 4vw, 56px);
    right: clamp(16px, 4vw, 56px);
    bottom: clamp(20px, 4vw, 56px);
    max-width: min(980px, 88vw);
    color: #ffffff;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: clamp(1.05rem, 2.1vw, 1.7rem);
    line-height: 1.35;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
    z-index: 6;
    pointer-events: none;
    display: block;
    white-space: normal;
}

/* Carolindaub: homepage quote with quotation marks and smaller size */
.home .cd-minimal-landing > .wp-block-cover::after {
    content: 'Musik ist für mich eine Form des Zuhörens – der Welt, anderen Menschen und den Veränderungen unserer Zeit. Mich interessiert, wie Musik Räume schaffen kann, in denen unterschiedliche Perspektiven aufeinandertreffen und neue Möglichkeiten der Wahrnehmung entstehen.' !important;
    font-size: clamp(0.95rem, 1.7vw, 1.45rem) !important;
    line-height: 1.33 !important;
    max-width: min(900px, 84vw) !important;
}

/* Carolindaub: explicit visible quotation marks on homepage quote */
.home .cd-minimal-landing > .wp-block-cover::after {
    content: '„Musik ist für mich eine Form des Zuhörens – der Welt, anderen Menschen und den Veränderungen unserer Zeit. Mich interessiert, wie Musik Räume schaffen kann, in denen unterschiedliche Perspektiven aufeinandertreffen und neue Möglichkeiten der Wahrnehmung entstehen.“' !important;
}

/* Carolindaub: force visible quote marks via unicode escapes */
.home .cd-minimal-landing > .wp-block-cover::after {
    content: '\201EMusik ist für mich eine Form des Zuhörens – der Welt, anderen Menschen und den Veränderungen unserer Zeit. Mich interessiert, wie Musik Räume schaffen kann, in denen unterschiedliche Perspektiven aufeinandertreffen und neue Möglichkeiten der Wahrnehmung entstehen.\201C' !important;
}

/* Carolindaub: disable non-editable CSS-generated homepage quote */
.home .cd-minimal-landing > .wp-block-cover::after,
.home .cd-minimal-landing > .wp-block-cover > .wp-block-cover__inner-container::after,
.home .wp-block-image.alignwide::after,
.home .wp-block-image.size-full.alignwide::after {
    content: none !important;
    display: none !important;
}

/* Carolindaub: center hero intro line on homepage */
.home .cd-minimal-landing .wp-block-cover__inner-container,
.home .cd-minimal-landing .wp-block-cover__inner-container > p {
    text-align: center !important;
}

.home .cd-minimal-landing .wp-block-cover__inner-container > p {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Carolindaub: heading font Alpha Lyrae, body text Helvetica */
@font-face {
    font-family: Alpha Lyrae Normal;
    src: url(/wp-content/themes/spiekermann/assets/fonts/alpha-lyrae/AlphaLyrae-Medium.woff2) format(woff2);
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* Texts */
body,
p,
li,
blockquote,
figcaption,
label,
input,
textarea,
select,
button,
small,
a {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.wp-block-post-title,
.entry-title,
.wp-block-site-title {
    font-family: Alpha Lyrae Normal, Alpha Lyrae, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

/* Carolindaub: final heading override on single posts */
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6,
.single-post .wp-block-post-title,
.single-post .entry-title {
    font-family: Alpha Lyrae Normal, Alpha Lyrae, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

/* Carolindaub: final heading typography + capitalization cleanup */

/* Headings everywhere (including links inside titles) */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-post-title a,
.entry-title,
.entry-title a,
.wp-block-query-title,
.wp-block-query-title a,
.wp-block-site-title,
.wp-block-site-title a,
.page .wp-block-cover__inner-container > p,
.page .wp-block-post-content > p:first-child {
    font-family: Alpha Lyrae Normal, Alpha Lyrae, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    text-transform: none !important;
}

/* Body text stays Helvetica */
body,
p,
li,
blockquote,
figcaption,
label,
input,
textarea,
select,
button,
small,
a {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

/* Use natural title case appearance where content was entered lowercase */
.wp-block-site-title,
.wp-block-site-title a,
nav a,
.page .wp-block-post-title,
.page .wp-block-post-title a,
.page .wp-block-cover__inner-container > p {
    text-transform: capitalize !important;
}

/* Carolindaub: About title paragraph + homepage title line */
.page-id-591 main .wp-block-group p:first-child,
.page-id-591 main .wp-block-group p:first-child a,
.home header p,
.home header p a,
.home .wp-block-group p:first-child,
.home .wp-block-group p:first-child a {
    font-family: Alpha Lyrae Normal, Alpha Lyrae, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    text-transform: capitalize !important;
}