/*
Theme Name: Taikinapoika
Theme URI: https://taikinapoika.com/
Author: Antti Plathan
Author URI: https://taikinapoika.com/
Description: A warm, hand-made block theme for a food and travel blog: cream paper, butter yellow and tomato red, photographs as tilted prints with handwritten captions, countries as passport stamps and recipes as ruled index cards.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taikinapoika
Domain Path: /languages
Tags: blog, food-and-drink, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, block-styles, sticky-post, threaded-comments, translation-ready, wide-blocks, accessibility-ready
*/

/*
 * Global rules only. Everything that belongs to one block or one block style
 * lives in assets/blocks/ and is loaded when that block is on the page.
 * Colours, fonts and sizes come from theme.json as custom properties.
 */

/* ---------------------------------------------------------------------------
 * 1. Shared values
 * ------------------------------------------------------------------------ */

:root {

	/*
	 * Every tilted element multiplies its own angle by this, so one media
	 * query can calm all of them down on a narrow screen. The largest angle in
	 * the design is 3deg; a third of it is the 1deg the design allows there.
	 */
	--tpt-tilt-scale: 1;
	--tpt-focus-color: var(--wp--preset--color--contrast);
}

@media (max-width: 37.5rem) {

	:root {
		--tpt-tilt-scale: 0.33;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Base
 * ------------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/*
 * No hyphenation in running text: it is set ragged right and words are never
 * broken. Soft-hyphen hints were built for the Finnish texts and withdrawn by
 * the owner on 2026-11-13 (redesign/research/2026-11-13-finnish-hyphenation-lessons.md).
 * A word that is still too long for its line (a pasted address) is broken
 * where it must be, as the last resort, so nothing can widen the page.
 */
body {
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
}

/*
 * Titles are the exception. A Finnish title can hold a 22-letter word
 * ("sitruunatuorejuustolla") that no phone fits on one line at title size,
 * and without help it is cut mid-word with no hyphen. `auto` lets a browser
 * that has a dictionary for the page's language break it with a visible
 * hyphen; one that has none does what it did before. Nothing is added to
 * the text, so copied titles stay clean.
 */
.wp-block-post-title,
.wp-block-query-title,
h1 {
	-webkit-hyphens: auto;
	hyphens: auto;
}

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

p,
li,
figcaption,
blockquote {
	text-wrap: pretty;
}

/* A page title set in the largest size gives way a little on very narrow screens. */
@media (max-width: 22.5rem) {

	:root h1 {
		font-size: min(var(--wp--preset--font-size--gigantic), 9vw);
	}

	:root .tpt-hero__text h1,
	:root .tpt-page-title {
		font-size: min(var(--wp--preset--font-size--huge), 9vw);
	}
}

img,
video {
	height: auto;
	max-width: 100%;
}

:where(pre) {
	overflow-x: auto;
}

:where(table) {
	border-collapse: collapse;
}

::selection {
	background: var(--wp--preset--color--butter);
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * 3. Links and focus
 * ------------------------------------------------------------------------ */

a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

a:hover,
a:focus {
	text-decoration-thickness: 0.14em;
}

/*
 * One focus ring everywhere: 3px of ink (15:1 on cream, 10:1 on butter),
 * with a gap so it never touches the thing it surrounds.
 */
:where(.wp-site-blocks) :focus {
	outline: none;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 3px solid var(--tpt-focus-color);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Text fields show focus with the same ring, even for a mouse click. */
:where(.wp-site-blocks) :is(input, textarea, select):focus {
	outline: 3px solid var(--tpt-focus-color);
	outline-offset: 2px;
}

/* WordPress's own class for text that only a screen reader should meet. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--paper);
	border-radius: 999px;
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: 1rem;
	font-weight: 800;
	height: auto;
	left: 0.5rem;
	line-height: normal;
	padding: 0.875rem 1.5rem;
	text-decoration: none;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

/* ---------------------------------------------------------------------------
 * 4. Page frame
 * ------------------------------------------------------------------------ */

/* The footer sits at the bottom of the window on a short page. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	padding-block: 0.75rem var(--wp--preset--spacing--60);
}

.wp-site-blocks > footer {
	margin-block-start: auto;
}

/*
 * The text column. WordPress centres a constrained column; this design sets
 * it flush left against the edge of the wide measure, so the text starts
 * under the site title. Wide and full blocks keep WordPress's own behaviour.
 *
 * --tpt-column-start is how far the wide measure, and so the column, starts
 * from the container's edge: nothing until the window is wider than the wide
 * measure, then half of what is left over. Its percentage is resolved where
 * it is used, against the container's width.
 */
.tpt-left {
	--tpt-column-start: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2));
}

.tpt-left > :not(.alignleft):not(.alignright):not(.aligncenter):not(.alignfull):not(.alignwide) {
	margin-inline-start: var(--tpt-column-start) !important;
	margin-inline-end: auto !important;
}

/*
 * Aligned blocks stay with the column instead of with the full-bleed
 * container around it: a left float starts where the text starts, a right
 * float ends where the text column ends, and a centred block is centred on
 * the column (WordPress centres it on the container; the offset moves it by
 * the difference between the two centres).
 */
.tpt-left > .alignleft {
	margin-inline-start: var(--tpt-column-start) !important;
}

.tpt-left > .alignright {
	margin-inline-end: max(0px, calc(100% - var(--tpt-column-start) - var(--wp--style--global--content-size))) !important;
}

.tpt-left > .aligncenter {
	inset-inline-start: calc(var(--tpt-column-start) + min(100% - 2 * var(--tpt-column-start), var(--wp--style--global--content-size)) / 2 - 50%);
	position: relative;
}

/*
 * On a phone a floated picture leaves a strip a few letters wide beside it.
 * There the block keeps its side but stops floating, and the text carries on
 * under it.
 */
@media (max-width: 37.5rem) {

	.tpt-left > .alignleft,
	.tpt-left > .alignright {
		float: none;
	}

	.tpt-left > .alignleft {
		margin-inline-end: auto !important;
	}

	.tpt-left > .alignright {
		margin-inline-start: auto !important;
	}
}

.tpt-left > .alignwide,
.tpt-left > .alignfull {
	clear: both;
}

/* ---------------------------------------------------------------------------
 * 5. Header
 * ------------------------------------------------------------------------ */

.tpt-header {
	align-items: center;
	gap: 0.5rem 2rem;
	padding-block: 1.125rem;
}

.tpt-brand {
	align-items: center;
	gap: 0.75rem;
	min-height: 3rem;
	position: relative;
}

.tpt-brand svg {
	display: block;
	flex: none;
	height: 2.75rem;
	width: 2.75rem;
}

/* The mark is decoration; the title's link is stretched over it so both lead home. */
.tpt-brand .wp-block-site-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* The focus ring goes on that stretched area, so it surrounds mark and title together. */
.tpt-brand .wp-block-site-title a:focus-visible {
	outline: none;
}

.tpt-brand .wp-block-site-title a:focus-visible::after {
	border-radius: 4px;
	outline: 3px solid var(--tpt-focus-color);
	outline-offset: 3px;
}

/* The way to search from every page: a round button like the language pills, leading to the search page. */
.tpt-header > .tpt-header__search {
	align-items: center;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	display: flex;
	flex: none;
	height: 2.75rem;
	justify-content: center;
	margin-inline-start: auto;
	width: 2.75rem;
}

.tpt-header > .tpt-header__search:hover,
.tpt-header > .tpt-header__search:focus {
	background: var(--wp--preset--color--butter);
}

.tpt-header > .tpt-header__search + .tpt-header__tools {
	margin-inline-start: 0;
}

.tpt-header > .tpt-header__tools {
	margin-inline-start: auto;
}

/* A phone: title, menu button and language pill on one line. */
@media (max-width: 599px) {

	.tpt-header {
		gap: 0.5rem;
	}

	.tpt-brand {
		gap: 0.5rem;
	}

	.tpt-brand svg {
		height: 2.5rem;
		width: 2.5rem;
	}

	.tpt-brand .wp-block-site-title {
		font-size: 1.375rem;
	}

	/* Title, menu button, search and one language pill share the line. */
	.tpt-header {
		flex-wrap: nowrap;
		gap: 0.375rem;
	}

	.tpt-brand {
		margin-inline-end: auto;
	}

	.tpt-header > .tpt-header__search {
		margin-inline-start: 0;
	}
}

/* Narrower still: the mark gives its place to the buttons. */
@media (max-width: 23.5rem) {

	.tpt-brand svg {
		display: none;
	}
}

@media (max-width: 22.5rem) {

	.tpt-brand svg {
		height: 2rem;
		width: 2rem;
	}

	.tpt-brand .wp-block-site-title {
		font-size: 1.3125rem;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Footer
 * ------------------------------------------------------------------------ */

.tpt-footer {
	border-top: 2px solid var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	gap: 0.5rem 2rem;
	justify-content: space-between;
	padding-block: 1.625rem;
}

.tpt-footer p {
	margin: 0;
}

.tpt-footer a {
	display: inline-block;
	font-weight: 700;
	min-width: 2.75rem;
	padding-block: 0.625rem;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * 7. Sections with a heading and a handwritten aside
 * ------------------------------------------------------------------------ */

.tpt-section {
	margin-block-start: var(--wp--preset--spacing--70);
}

.tpt-section-head {
	align-items: baseline;
	gap: 0.375rem 1.25rem;
	margin-block-end: 2rem;
}

.tpt-section-head > * {
	margin: 0;
}

/* A section whose list came back empty has nothing to announce. */
.tpt-section.tpt-needs-list:not(:has(ul > li)) {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 8. Front page hero
 * ------------------------------------------------------------------------ */

.tpt-hero {
	align-items: center;
	gap: 2.5rem 3.5rem;
}

/* No `min-width: 0`: the column is never narrower than its longest word, see the post header below. */
.tpt-hero__text {
	flex: 1.2 1 23.75rem;
	max-width: 100%;
}

.tpt-hero__text > * {
	margin-block: 0;
}

.tpt-hero__text .wp-block-site-tagline {
	margin-block-end: 0.625rem;
}

.tpt-hero__text h1 {
	font-size: var(--wp--preset--font-size--huge);
	letter-spacing: -0.02em;
	line-height: 1.02;
}

.tpt-hero__intro {
	font-size: 1.25rem;
	line-height: 1.55;
	margin-block-start: 1.375rem;
	max-width: 30em;
}

.tpt-hero__text .wp-block-buttons {
	gap: 0.75rem;
	margin-block-start: 1.75rem;
}

.tpt-hero__print {
	flex: 0 1 25rem;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * 9. Single post
 * ------------------------------------------------------------------------ */

.tpt-post-header {
	align-items: center;
	gap: 2.5rem 3.5rem;
	margin-block-start: clamp(0.5rem, 3vw, 2.25rem);
}

/*
 * The title's column is never narrower than the longest unbroken piece of the
 * title. Where the browser can hyphenate the title (`hyphens: auto` above)
 * the pieces are short and the column keeps its share; where it cannot, the
 * word stays whole and the picture gives way, or moves under the title when
 * both no longer fit. `max-width` is what lets a word wider than the whole
 * screen be broken after all.
 */
.tpt-post-header__text {
	flex: 1.1 1 22.5rem;
	max-width: 100%;
}

/* WordPress sets `word-break: break-word` on post titles, which lets any word be cut anywhere. */
.tpt-post-header__text .wp-block-post-title {
	overflow-wrap: break-word;
	word-break: normal;
}

/*
 * The picture asks for 20rem and takes the larger share of what is left, which
 * comes to half the row beside an ordinary title. It may be squeezed below
 * 20rem by a long title, and is at most as wide alone as it is beside a title.
 */
.tpt-post-header > .wp-block-post-featured-image {
	flex: 1.4 1 20rem;
	margin: 0;
	max-width: 34rem;
	min-width: 0;
}

.tpt-post-meta {
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 0.875rem;
}

.tpt-post-meta__line {
	align-items: center;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 0 0.5em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tpt-post-meta__line > * {
	margin: 0;
}

/*
 * The dot between the items ends the item before it, joined to it by a
 * no-break space, so that a wrapped line ends with a dot and never begins with
 * one. The categories' own separators are written the same way in the pattern.
 */
.tpt-post-meta__line > :not(:last-child)::after {
	content: "\00A0\00B7";
}

.tpt-post-meta__line a {
	color: inherit;
	display: inline-block;
	padding-block: 0.625rem;
	text-decoration: none;
}

.tpt-post-meta__line a:hover,
.tpt-post-meta__line a:focus {
	color: var(--wp--preset--color--tomato-dark);
	text-decoration: underline;
}

.tpt-post-header__text .wp-block-post-excerpt {
	margin-block-start: 1rem;
}

.tpt-post-body {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* The opening paragraph of a post is its lead. */
.single-post .tpt-post-body > p:first-child {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.45;
}

/* A page title does not need the room a post title gets. */
.tpt-page-title {
	font-size: var(--wp--preset--font-size--huge);
	letter-spacing: -0.02em;
	line-height: 1.02;
	margin-block-start: clamp(0.5rem, 3vw, 2.25rem);
}

/* Room between the search form and what it found. */
.wp-site-blocks .tpt-search-results {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tpt-term-description {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.45;
}

/* Previous and next post. */
.tpt-post-nav {
	border-top: 2px solid var(--wp--preset--color--contrast);
	gap: 0.5rem 2rem;
	justify-content: space-between;
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: 1.25rem;
}

.tpt-post-nav .wp-block-post-navigation-link {
	flex: 1 1 14rem;
	font-weight: 700;
	min-width: 0;
}

.tpt-post-nav .post-navigation-link-next {
	text-align: end;
}

.tpt-post-nav a {
	display: inline-block;
	padding-block: 0.625rem;
	text-decoration: none;
}

.tpt-post-nav .post-navigation-link__label {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tpt-post-nav .post-navigation-link__title {
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

/* Nothing before and nothing after: no rule across the page either. */
.tpt-post-nav:not(:has(a)) {
	display: none;
}

/* The site's name and the post's address: the last line on paper, nothing on screen (see assets/css/print.css). */
.wp-site-blocks .tpt-print-footer {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 10. Buttons and form fields
 * ------------------------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: 3.5rem;
	text-align: center;
	text-decoration: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background: transparent;
	border: 2px solid currentcolor;
	color: var(--wp--preset--color--contrast);
	padding: 0.375rem 1.625rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.is-style-outline:hover,
.wp-block-button .wp-block-button__link.is-style-outline:focus {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:where(.wp-site-blocks) :is(input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"]), textarea, select) {
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0.75rem;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	min-height: 3rem;
	padding: 0.5rem 0.875rem;
}

/* ---------------------------------------------------------------------------
 * 11. Motion
 * ------------------------------------------------------------------------ */

/*
 * The theme itself animates nothing. This is for whatever a block or a plugin
 * brings along: a visitor who asked for less motion gets none here either.
 */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}