/*
Theme Name: If-Thema My Base
Author: Project-if
Author URI: https://project-if.jp/
Description: A simple and flexible block theme for personal blogs and creative spaces.
Version: 1.0.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: if-thema-my-base
Domain Path: /languages
Tags: block-patterns, blog, featured-images, full-site-editing, one-column, photography, portfolio, style-variations, threaded-comments, wide-blocks
*/

/* Keep keyboard focus visible across the theme without replacing Core block behavior. */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Prevent long user-generated strings from causing horizontal overflow. */
:where(main, header, footer) {
	overflow-wrap: break-word;
}

/*
 * Content safety.
 *
 * Keep user content (media, preformatted text, legacy tables, classic
 * captions) from forcing the page wider than the viewport. This is layout
 * only: no visual redesign. Rules use :where() (zero specificity) wherever
 * that is enough; the classic-caption rule below is deliberately specific so
 * it can override the Core constrained-layout max-width.
 */

/* Media never draws wider than its container. */
:where(main) :where(img, video, iframe, object, embed) {
	max-width: 100%;
}

:where(main) :where(img, video) {
	height: auto;
}

/*
 * Classic [caption] and [gallery] shortcode output carries an inline pixel
 * width on its wrapper. This selector is intentionally specific enough to
 * override the Core constrained-layout max-width so the wrapper can shrink
 * on narrow screens.
 */
.wp-block-post-content .wp-caption,
.wp-block-post-content .gallery {
	max-width: 100%;
}

/*
 * Preformatted text scrolls inside its own box instead of widening the page.
 * white-space is left untouched so poetry and ASCII art keep their layout.
 */
:where(main) pre {
	max-width: 100%;
	overflow-x: auto;
}

/*
 * Classic tables with no block wrapper get their own horizontal scroll.
 * The Table block renders as figure > table and already handles this itself,
 * so this only targets raw tables that are direct children of the content.
 */
:where(.wp-block-post-content) > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/*
 * The post navigation is a flex row showing the neighbouring posts' titles.
 * Let its items shrink and let a long unbroken title wrap, so a very long
 * post title cannot push the row wider than the viewport.
 */
:where(main) .wp-block-post-navigation-link {
	min-width: 0;
	overflow-wrap: anywhere;
}