/*
Theme Name: piyopiyo-theme
Theme URI: https://github.com/tbshiki/piyopiyo-theme
Author: tbshiki
Author URI: https://tbshiki.com
Description: A lightweight, media-focused block theme optimized for Japanese typography. Built with Lism CSS for flexible, extensible design.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.4
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piyopiyo-theme
Tags: block-patterns, blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, one-column, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks
*/

/*
 * Additional theme styles can be added below.
 * Most styling should be handled through theme.json and Lism CSS classes.
 */

@layer lism-reset, lism.base, lism.modules, lism.utility, lism.custom, theme;

@layer theme {
	body {
		font-feature-settings: "palt" 1;
		font-kerning: normal;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	:where(p, li, dd, blockquote) {
		text-wrap: pretty;
	}

	:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
		outline: max(2px, 0.12em) solid var(--focus-ring, var(--wp--preset--color--accent));
		outline-offset: var(--focus-offset, 2px);
	}

	/* Skip link accessibility */
	.skip-link {
		background-color: var(--wp--preset--color--brand);
		border-radius: var(--bdrs--10, 0.25rem);
		color: var(--wp--preset--color--base);
		font-weight: 700;
		inset-inline-start: 50%;
		padding: var(--s10, 0.5rem) var(--s20, 1rem);
		position: absolute;
		text-decoration: none;
		top: calc(var(--s60, 6.5rem) * -1);
		transform: translateX(-50%);
		z-index: 999999;
	}

	.skip-link:focus {
		top: var(--s10, 0.5rem);
	}

	/* Screen reader text */
	.screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		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--base);
		border-radius: var(--bdrs--10, 0.25rem);
		clip: auto !important;
		clip-path: none;
		color: var(--wp--preset--color--text);
		display: block;
		font-size: 0.875rem;
		font-weight: 700;
		height: auto;
		inset-inline-start: var(--s5, 0.25rem);
		padding: var(--s15, 0.75rem) var(--s20, 1rem);
		text-decoration: none;
		top: var(--s5, 0.25rem);
		width: auto;
		z-index: 100000;
	}
}

/*
 * Prefer Lism utilities only where they are explicitly used on core blocks.
 * Keep core block styles enabled globally and resolve overlap points locally.
 */
:where(.wp-block-columns, .wp-block-buttons, .wp-block-group, .wp-block-navigation, .wp-block-query-pagination):is([class^="-g:"], [class*=" -g:"]) {
	gap: var(--g) !important;
}

:where(.wp-block-columns, .wp-block-buttons, .wp-block-group, .wp-block-navigation, .wp-block-query-pagination):is([class^="-g-x:"], [class*=" -g-x:"]) {
	column-gap: var(--g-x) !important;
}

:where(.wp-block-columns, .wp-block-buttons, .wp-block-group, .wp-block-navigation, .wp-block-query-pagination):is([class^="-g-y:"], [class*=" -g-y:"]) {
	row-gap: var(--g-y) !important;
}

.wp-block-columns:is(.l--grid, .l--columns, .l--fluidCols) {
	display: grid !important;
}

:is(.wp-block-button, .wp-block-button__link):is([class^="-p:"], [class*=" -p:"]) .wp-block-button__link,
.wp-block-button__link:is([class^="-p:"], [class*=" -p:"]) {
	padding: var(--p) !important;
}

:is(.wp-block-button, .wp-block-button__link):is([class^="-px:"], [class*=" -px:"]) .wp-block-button__link,
.wp-block-button__link:is([class^="-px:"], [class*=" -px:"]) {
	padding-inline: var(--px) !important;
}

:is(.wp-block-button, .wp-block-button__link):is([class^="-py:"], [class*=" -py:"]) .wp-block-button__link,
.wp-block-button__link:is([class^="-py:"], [class*=" -py:"]) {
	padding-block: var(--py) !important;
}

:is(.wp-block-button, .wp-block-button__link):is([class^="-bgc:"], [class*=" -bgc:"]) .wp-block-button__link,
.wp-block-button__link:is([class^="-bgc:"], [class*=" -bgc:"]) {
	background-color: var(--bgc) !important;
}

:is(.wp-block-button, .wp-block-button__link):is([class^="-c:"], [class*=" -c:"]) .wp-block-button__link,
.wp-block-button__link:is([class^="-c:"], [class*=" -c:"]) {
	color: var(--c) !important;
}

:is(.wp-block-button, .wp-block-button__link):is([class^="-bgc:"], [class*=" -bgc:"]) .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-button__link:is([class^="-bgc:"], [class*=" -bgc:"]):is(:hover, :focus-visible) {
	background-color: var(--bgc) !important;
}

:is(.wp-block-button, .wp-block-button__link):is([class^="-c:"], [class*=" -c:"]) .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-button__link:is([class^="-c:"], [class*=" -c:"]):is(:hover, :focus-visible) {
	color: var(--c) !important;
}