/*
Theme Name: Eszter Kaffehus
Theme URI: https://eszter.se
Description: Barntema till Twenty Twenty-Five för eszter.se. Ett konditoris receptarkiv i varma färger: menykort med punktlinjer, guldramade fotografier och ett broderat blomstermotiv i ungersk anda.
Author: Inoue Stålbert Handelsbolag
Template: twentytwentyfive
Version: 2.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: eszter-kaffehus
*/

/* ---------- Grund ---------- */

:root {
	--ek-ink: var(--wp--preset--color--contrast);
	--ek-cream: var(--wp--preset--color--base);
	--ek-raspberry: var(--wp--preset--color--accent-1);
	--ek-gold: var(--wp--preset--color--accent-2);
	--ek-green: var(--wp--preset--color--accent-3);
	--ek-plum: var(--wp--preset--color--accent-4);
	--ek-parchment: var(--wp--preset--color--accent-5);
	--ek-line: var(--wp--preset--color--accent-6);
	--ek-rose: var(--wp--preset--color--ros);
	--ek-display: var(--wp--preset--font-family--display);
	--ek-script: var(--wp--preset--font-family--script);
}

body {
	font-variant-numeric: oldstyle-nums;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* Laid paper: very faint horizontal chain lines. */
	background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ek-gold) 7%, transparent) 0 1px, transparent 1px 6px);
}

h1, h2, h3 { text-wrap: balance; }

::selection { background: var(--ek-rose); color: var(--ek-ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ek-raspberry);
	outline-offset: 3px;
	border-radius: 1px;
}
.skip-link.screen-reader-text:focus { background: var(--ek-green) !important; color: var(--ek-cream) !important; }

/* Small caps: labels, kickers, navigation. */
.ek-caps, .kicker, .section-label, .wp-block-post-terms.kicker {
	font-variant-caps: all-small-caps;
	letter-spacing: .14em;
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--ek-green);
	text-decoration: none;
}
.wp-block-post-terms.kicker a { color: inherit; text-decoration: none; }

/* Ballet, used sparingly and only large. */
.ek-script {
	font-family: var(--ek-script) !important;
	font-weight: 400 !important;
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem) !important;
	line-height: 1.1 !important;
	color: var(--ek-raspberry) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin: 0 0 .2rem !important;
}

/* ---------- Sidhuvud ---------- */

.masthead {
	padding-top: clamp(1.4rem, 3vw, 2.2rem) !important;
	padding-bottom: 0 !important;
	text-align: center;
}
.masthead > * { margin-block: 0 !important; }
.masthead .ek-orn--rosett { width: 46px; height: 46px; display: block; margin: 0 auto .5rem; }
.masthead .wp-block-site-title {
	font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5rem) !important;
	font-style: italic;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1;
}
.masthead .wp-block-site-title a { color: var(--ek-ink); }
.masthead .ek-tagline { margin-top: .4rem !important; color: var(--ek-plum); }

nav.main-nav {
	font-variant-caps: all-small-caps;
	letter-spacing: .16em;
	font-size: 1.2rem;
	font-weight: 600;
	margin-top: .9rem !important;
	padding: .55rem 0;
	border-top: 1px solid var(--ek-gold);
	border-bottom: 1px solid var(--ek-gold);
	box-shadow: 0 3px 0 -2px var(--ek-gold), 0 -3px 0 -2px var(--ek-gold);
}
.main-nav .wp-block-navigation__container { gap: 1.2rem; }
.main-nav a { text-decoration: none; color: var(--ek-ink); }
.main-nav a:hover { color: var(--ek-raspberry); }
.main-nav .wp-block-navigation-item + .wp-block-navigation-item::before { content: "·"; color: var(--ek-gold); margin-right: 1.2rem; font-weight: 700; }
@media (max-width: 599px) {
	nav.main-nav { font-size: 1.05rem; letter-spacing: .08em; }
	.main-nav .wp-block-navigation__container { flex-wrap: wrap !important; justify-content: center !important; gap: .2rem .9rem !important; }
	.main-nav .wp-block-navigation-item + .wp-block-navigation-item::before { display: none; }
}

/* ---------- Fotografier: guldram i stället för valv ---------- */

.ek-frame img, .wp-block-gallery .wp-block-image img, .ek-photo img {
	background: #fffaf2;
	padding: 7px;
	border: 1px solid var(--ek-gold);
	outline: 1px solid var(--ek-gold);
	outline-offset: 4px;
	box-sizing: border-box;
	height: auto;
}
.ek-frame figcaption, .ek-photo figcaption, .wp-block-gallery figcaption {
	font-style: italic;
	color: var(--ek-plum);
	font-size: 1rem !important;
	text-align: left !important;
	margin-top: .9rem !important;
	background: none !important;
	position: static !important;
	padding: 0 !important;
	text-shadow: none !important;
}

/* ---------- Startsidan ---------- */

.front { padding-top: clamp(2rem, 5vw, 3.5rem) !important; }
.front > * + * { margin-block-start: clamp(3.5rem, 8vw, 6rem) !important; }

/* Opening: a café menu card beside the cake. */
.ek-open { gap: clamp(1.5rem, 4vw, 3.5rem) !important; align-items: center !important; }
.ek-card {
	background: var(--ek-parchment);
	padding: clamp(1.5rem, 4vw, 2.8rem) !important;
	text-align: center;
	position: relative;
	border: 1px solid var(--ek-gold);
	outline: 1px solid var(--ek-gold);
	outline-offset: -8px;
}
.ek-card .ek-orn--rosett { width: 40px; height: 40px; margin: 0 auto .6rem; display: block; }
.ek-card h1 {
	font-size: clamp(2.2rem, 1.3rem + 3vw, 3.6rem) !important;
	font-style: italic;
	font-weight: 500;
	margin: .3rem 0 .6rem !important;
	line-height: 1.04;
}
.ek-card .ek-lead { font-size: 1.25rem; color: var(--ek-plum); font-style: italic; margin: 0 auto 1.4rem; max-width: 26em; }
.ek-menu { list-style: none; margin: 0; padding: 0; text-align: left; }
.ek-menu li { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--ek-line); }
.ek-menu li:last-child { border-bottom: 1px solid var(--ek-line); }
.ek-menu a { font-family: var(--ek-display); font-size: 1.3rem; font-weight: 500; text-decoration: none; color: var(--ek-ink); }
.ek-menu a:hover { color: var(--ek-raspberry); }
.ek-menu .ek-dots { flex: 1; border-bottom: 2px dotted var(--ek-gold); transform: translateY(-.3em); min-width: 1rem; }
.ek-menu .ek-what { font-style: italic; color: var(--ek-plum); font-size: 1rem; text-align: right; }

/* Section heads. */
.ek-head { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.2rem) !important; }
.ek-head h2 { margin: 0 !important; }

/* From the atelier: uneven mosaic, captions from the photos' own descriptions. */
.ek-mosaic { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: clamp(.9rem, 2.4vw, 1.8rem) !important; align-items: start; }
.ek-mosaic > figure { margin: 0 !important; }
.ek-mosaic > figure:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 2; }
.ek-mosaic > figure:nth-child(2) { grid-column: 4 / span 2; }
.ek-mosaic > figure:nth-child(3) { grid-column: 6 / span 1; margin-top: 3rem !important; }
.ek-mosaic > figure:nth-child(4) { grid-column: 4 / span 1; }
.ek-mosaic > figure:nth-child(5) { grid-column: 5 / span 2; }
.ek-mosaic img { width: 100%; }
@media (max-width: 700px) {
	.ek-mosaic { grid-template-columns: 1fr 1fr; }
	.ek-mosaic > figure:nth-child(n) { grid-column: auto; grid-row: auto; margin-top: 0 !important; }
	.ek-mosaic > figure:nth-child(1) { grid-column: 1 / span 2; }
}
.ek-links { text-align: center; font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 600; font-size: 1.15rem; }
.ek-links a { margin: 0 .6rem; }
.ek-links--left { text-align: left; }
.ek-links--left a { margin-left: 0; }

/* The recipe book: a menu list with dot leaders. */
.ek-book { background: var(--ek-parchment); padding: clamp(1.4rem, 4vw, 2.6rem) !important; border-top: 3px double var(--ek-gold); border-bottom: 3px double var(--ek-gold); }
.ek-book .wp-block-post-template { columns: 2 18rem; column-gap: 3rem; margin: 0; padding: 0; }
.ek-book .wp-block-post-template > li { break-inside: avoid; display: flex; align-items: baseline; gap: .5rem; padding: .4rem 0; }
.ek-book .wp-block-post-title { font-size: 1.3rem !important; font-weight: 500; margin: 0; display: flex; flex: 1; gap: .5rem; align-items: baseline; }
.ek-book .wp-block-post-title::after { content: ""; flex: 1; border-bottom: 2px dotted var(--ek-gold); transform: translateY(-.3em); }
.ek-book .wp-block-post-terms { font-style: italic; color: var(--ek-plum); font-size: 1rem; }
.ek-book .wp-block-post-terms a { color: inherit; text-decoration: none; }

/* Placeholder: a bouquet and a promise, not an error. */
.ek-placeholder { text-align: center; padding: clamp(1rem, 3vw, 1.8rem) !important; }
.ek-placeholder .ek-orn--bukett { width: min(220px, 60vw); height: auto; display: block; margin: 0 auto .6rem; }
.ek-placeholder .ek-big { font-family: var(--ek-display); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); color: var(--ek-ink); margin: 0 0 .3rem; }
.ek-placeholder p { max-width: 32em; margin-inline: auto; color: var(--ek-plum); }

/* About Eszter. */
.ek-about { gap: clamp(1.5rem, 4vw, 3.5rem) !important; align-items: center !important; }
.ek-about p { font-size: 1.3rem; }

/* ---------- Sidor ---------- */

.page-head { text-align: center; }
.page-head h1 { font-style: italic; font-weight: 500; margin-bottom: 0; }
.page-head .ek-orn--rosett { width: 34px; height: 34px; margin: .6rem auto 0; display: block; }

/* Galleri: no crop, masonry columns, frames. */
.wp-block-post-content .wp-block-gallery.has-nested-images {
	display: block !important;
	columns: 3 220px;
	column-gap: clamp(1rem, 2.5vw, 2rem);
	margin-bottom: 2.5rem;
}
.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: 100% !important;
	margin: 0 0 clamp(1rem, 2.5vw, 2rem) !important;
	break-inside: avoid;
	display: block;
}
.wp-block-post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img { height: auto !important; object-fit: contain !important; aspect-ratio: auto !important; }
.wp-block-post-content .section-label, .wp-block-post-content h2.wp-block-heading {
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-variant-caps: all-small-caps;
	letter-spacing: .16em;
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--ek-green);
	display: flex; align-items: center; gap: 1rem;
}
.wp-block-post-content h2.wp-block-heading::before, .wp-block-post-content h2.wp-block-heading::after { content: ""; flex: 1; border-top: 1px solid var(--ek-gold); }
.wp-block-post-content hr.wp-block-separator { border: 0; height: 40px; background: url("assets/img/bard.svg") center / auto 40px no-repeat; opacity: 1; }

/* Om Eszter: portrait beside the words. */
.ek-about-page .wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem) !important; }
.ek-about-page .wp-block-post-content p { font-size: 1.3rem; }

/* Kontakt. */
.contact-cols { gap: clamp(1.5rem, 4vw, 3.5rem) !important; align-items: start !important; }
.contact-card h1 { font-style: italic; font-weight: 500; }
.wpcf7 label { display: block; font-variant-caps: all-small-caps; letter-spacing: .14em; font-weight: 600; color: var(--ek-green); font-size: 1.1rem; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1.1rem;
	padding: .6rem .7rem; margin-top: .25rem;
	background: #fffaf2; color: var(--ek-ink);
	border: 1px solid var(--ek-gold); border-radius: 2px;
}
.wpcf7 textarea { min-height: 10rem; }
.wpcf7 input[type=submit] {
	font: inherit; font-weight: 600; letter-spacing: .14em; font-variant-caps: all-small-caps; font-size: 1.2rem;
	background: var(--ek-green); color: var(--ek-cream); border: 0; border-radius: 2px; padding: .6rem 1.6rem; cursor: pointer;
}
.wpcf7 input[type=submit]:hover { background: var(--ek-raspberry); }

/* ---------- Recept ---------- */

.archive-head h1 { font-style: italic; font-weight: 500; margin-bottom: .2rem; }
.archive-intro { font-style: italic; color: var(--ek-plum); max-width: 40ch; margin-top: 0 !important; font-size: 1.2rem; }
main:has(.ek-recipes-empty) .ishb-recept-index { display: none; }
.ek-recipes-probe .wp-block-post-template { display: none; }

.ishb-recept-index__form input, .ishb-recept-index__form select { border: 1px solid var(--ek-gold) !important; border-radius: 2px !important; background: #fffaf2 !important; }
.ishb-recept-index__form button { background: var(--ek-green) !important; border-radius: 2px !important; font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 600; }
.ishb-recept-grid__frame { border-radius: 0 !important; background: #fffaf2 !important; padding: 6px; border: 1px solid var(--ek-gold); }
.ishb-recept-grid__frame img { inset: 6px !important; width: calc(100% - 12px) !important; height: calc(100% - 12px) !important; }
.ishb-recept-grid a:hover .ishb-recept-grid__frame img { transform: none; }
.ishb-recept-grid__kicker { font-variant-caps: all-small-caps; text-transform: none !important; font-size: 1.05rem !important; color: var(--ek-green) !important; font-weight: 600; }
.ishb-recept-grid__title { font-family: var(--ek-display) !important; font-style: italic; font-size: 1.35rem !important; }

.ishb-recept { border-radius: 0 !important; border: 1px solid var(--ek-gold); outline: 1px solid var(--ek-gold); outline-offset: -8px; background: var(--ek-parchment) !important; }
.ishb-recept::before { display: none; }
.ishb-recept__label { text-align: center; font-variant-caps: all-small-caps; text-transform: none !important; font-size: 1.1rem !important; font-weight: 600; color: var(--ek-raspberry) !important; letter-spacing: .2em !important; }
.ishb-recept__title { text-align: center; font-style: italic; font-weight: 500; }
@media screen { .single-recept .ishb-recept__title { display: none; } }
.ishb-recept__meta, .ishb-recept__facts { justify-content: center; }
.ishb-recept__facts dt, .ishb-recept h4 { font-variant-caps: all-small-caps; text-transform: none !important; font-size: 1.05rem !important; font-weight: 600; }
.ishb-recept h3 { font-style: italic; font-weight: 500; border-bottom: 1px solid var(--ek-gold) !important; }
.ishb-recept__btn { border-radius: 2px !important; font-variant-caps: all-small-caps; letter-spacing: .12em; font-weight: 600; font-size: 1.05rem !important; }
.ishb-recept__allergens li { border-radius: 2px !important; }

.article-head { text-align: center; }
.article-head .wp-block-post-terms { justify-content: center; }
.article-head h1 { font-style: italic; font-weight: 500; }
.dek { font-size: 1.35rem; color: var(--ek-plum); font-style: italic; }
.ek-photo { max-width: 560px; margin-inline: auto !important; }
.ek-photo img { width: 100%; max-height: 80vh; object-fit: contain; }

.has-drop-cap:not(:focus)::first-letter { font-family: var(--ek-display); font-style: italic; font-size: 4.4em; line-height: .8; margin: .05em .1em 0 0; color: var(--ek-raspberry); }

/* ---------- 404 ---------- */

.ek-404 { text-align: center; }
.ek-404 .ek-orn--bukett { width: min(240px, 64vw); height: auto; display: block; margin: 0 auto 1rem; }
.ek-404 h1 { font-style: italic; font-weight: 500; max-width: 18ch; margin-inline: auto !important; }
.ek-404 .wp-block-search { max-width: 30rem; margin-inline: auto; }
.wp-block-search__input { border: 1px solid var(--ek-gold) !important; border-radius: 2px !important; background: #fffaf2; font: inherit; padding: .55rem .7rem !important; }
.wp-block-search__button { border-radius: 2px !important; }

/* ---------- Sidfot ---------- */

footer.wp-block-template-part { margin-block-start: 0; }
.site-footer {
	background: var(--ek-green);
	color: var(--ek-parchment);
	margin-top: clamp(3.5rem, 8vw, 6rem) !important;
	position: relative;
	font-size: 1.1rem;
}
.site-footer::before {
	content: ""; display: block; height: 40px;
	background: var(--ek-cream) url("assets/img/bard.svg") 0 0 / auto 40px repeat-x;
	margin: 0 calc(-1 * var(--wp--style--root--padding-left, 2rem)) clamp(2rem, 5vw, 3rem) calc(-1 * var(--wp--style--root--padding-right, 2rem));
	border-bottom: 3px double var(--ek-gold);
}
.site-footer a { color: var(--ek-cream); text-decoration-color: color-mix(in srgb, var(--ek-cream) 45%, transparent); text-underline-offset: .2em; }
.site-footer a:hover { color: var(--ek-rose); }
.site-footer :focus-visible { outline-color: var(--ek-rose); }
.site-footer .wp-block-site-title { font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem) !important; line-height: 1; }
.site-footer .wp-block-site-title a { color: var(--ek-cream); text-decoration: none; }
.footer-label { font-family: var(--wp--preset--font-family--body) !important; font-variant-caps: all-small-caps; letter-spacing: .16em; font-weight: 600 !important; font-size: 1.15rem !important; color: var(--ek-rose) !important; margin: 0 0 .4rem !important; }
.footer-links { font-variant-caps: all-small-caps; letter-spacing: .14em; font-weight: 600; font-size: 1.2rem; }
.colophon { font-style: italic; }

@media print {
	.main-nav, .site-footer, .ek-orn { display: none !important; }
	body { background: #fff; }
}