/*
Theme Name: Twenty Twenty-Three SEO Pro
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: the WordPress team
Author URI: https://wordpress.org
Description: A lightweight block theme based on Twenty Twenty-Three, with accessible navigation, Yoast-compatible article metadata, useful archive links and responsive layouts.
Requires at least: 6.1
Requires PHP: 7.4
Version: 2.1.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentythree
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


/* SEO Pro: usability and accessibility refinements. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.wp-block-post-featured-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Centred breadcrumb beneath the featured image on posts and pages.
   Works with the Yoast breadcrumb HTML and the theme's HTML-only fallback. */
.tt3-seo-breadcrumbs {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	margin-block: 0;
	padding: .55rem clamp(.85rem, 2.5vw, 1.35rem);
	border: 1px solid rgba(127, 127, 127, .22);
	border-radius: 1rem;
	background: rgba(127, 127, 127, .055);
	font-size: var(--wp--preset--font-size--small, .875rem);
	line-height: 1.8;
	text-align: center;
	overflow-wrap: anywhere;
}

.tt3-seo-breadcrumbs :where(p, #breadcrumbs) {
	margin: 0;
}

.tt3-seo-breadcrumbs a {
	text-decoration: none;
	text-underline-offset: .2em;
}
.tt3-seo-breadcrumbs a:hover,
.tt3-seo-breadcrumbs a:focus-visible {
	text-decoration: underline;
}

.tt3-seo-updated {
	font-size: var(--wp--preset--font-size--small);
	opacity: .78;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Editorial images: stable dimensions without distorting the original article image. */
.wp-block-query .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Keyboard and navigation enhancements. */
.tt3-seo-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .2rem .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tt3-seo-breadcrumbs li:not(:last-child)::after {
    content: "/";
    opacity: .5;
    margin-inline-start: .55rem;
}
.tt3-seo-breadcrumbs [aria-current="page"] { font-weight: 600; }
.tt3-seo-updated { margin-block: .5rem 1.5rem; }

/* Related content is optional and appears only when a relevant category exists. */
.tt3-seo-related { margin-block: 3rem; }
.tt3-seo-related h2 { margin-bottom: 1rem; }
.tt3-seo-related-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.75rem);
    list-style: none;
    padding: 0;
    margin: 0;
}
.tt3-seo-related-list li { min-width: 0; }
.tt3-seo-related-list a { display: block; overflow-wrap: anywhere; }
.tt3-seo-related-list img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-block-end: .65rem;
}

/* Protect mobile titles and layouts from extremely long words/URLs. */
.wp-block-post-title, .wp-block-query-title, .wp-block-site-title,
.wp-block-post-content { overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .tt3-seo-related-list { grid-template-columns: minmax(0, 1fr); }
    .wp-block-navigation { max-width: 100%; }
}

/* SEO Pro 2.1.3 - article hero is no wider than the actual article text.
   Works even if the source image is portrait; never crop words inside pictures. */
.tt3-seo-article-header .wp-block-post-featured-image.tt3-seo-hero {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--wp--style--global--content-size, 650px);
    margin-inline: auto !important;
    margin-block: 0 !important;
    text-align: center;
}
.tt3-seo-article-header .wp-block-post-featured-image.tt3-seo-hero img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 380px;
    margin-inline: auto;
    object-fit: contain;
    border-radius: 12px;
}
/* Explicit spacing prevents theme blockGap/inline spacing from joining hero + trail. */
.tt3-seo-article-header .tt3-seo-breadcrumb-row {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--wp--style--global--content-size, 650px);
    margin-block-start: 28px !important;
    margin-block-end: 24px !important;
    margin-inline: auto !important;
    text-align: center;
}
.tt3-seo-article-header .tt3-seo-breadcrumb-row > .wp-block-shortcode {
    margin: 0 !important;
    text-align: center;
}
.tt3-seo-article-header .tt3-seo-breadcrumbs {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: .25rem .65rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: clamp(.78rem, 1.5vw, .875rem);
}
.tt3-seo-article-header .wp-block-post-title {
    margin-block-start: 0 !important;
}
@media (max-width: 720px) {
    .tt3-seo-article-header .wp-block-post-featured-image.tt3-seo-hero img {
        max-height: 260px;
        border-radius: 9px;
    }
    .tt3-seo-article-header .tt3-seo-breadcrumb-row {
        margin-block-start: 24px !important;
        margin-block-end: 20px !important;
    }
}