/*
Theme Name: ポポガジェット・途中版
Description: 新ポポガジェットの構成へ既存記事を載せる、制作途中の Twenty Twenty-Five 子テーマ。
Author: Popogadget
Template: twentytwentyfive
Version: 0.2.1
Requires at least: 6.7
Requires PHP: 7.2
Text Domain: popogadget-intermediate-tt5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

body { overflow-wrap: anywhere; word-break: normal; }
*, *::before, *::after { box-sizing: border-box; }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid #4b4b4b; outline-offset: 4px;
}
:where(img, video) { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
.wp-site-blocks { padding-block: 0; }
.pg-header, .pg-footer {
  width: calc(100% - var(--wp--style--root--padding-left, 20px) - var(--wp--style--root--padding-right, 20px));
  max-width: var(--wp--style--global--wide-size, 1120px);
  margin-inline: auto;
}
.pg-header { padding-block: 1.75rem 1.5rem; border-bottom: 1px solid #ddd; }
.pg-header-row { gap: .75rem 2rem; }
.pg-brand { display: flex; align-items: center; gap: .8rem; }
.pg-brand > * { margin: 0; }
.pg-brand .wp-block-site-title {
  font: 600 clamp(1.35rem, 2.4vw, 1.65rem)/1.45 var(--wp--preset--font-family--sans);
  letter-spacing: .06em;
}
.pg-brand .wp-block-site-title a { text-decoration: none; }
.pg-header .wp-block-site-tagline { margin-top: .65rem; color: #666; font-size: .8125rem; line-height: 1.85; }
.pg-nav { font-size: .875rem; }
.pg-nav .wp-block-navigation__container { gap: .25rem 1.5rem; }
.pg-nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pg-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: .3em; }
.pg-laptop { position: relative; display: inline-block; flex: 0 0 34px; width: 34px; height: 24px; color: #4b4b4b; }
.pg-laptop::before { content: ''; position: absolute; inset: 0 4px 5px; border: 2px solid currentColor; border-radius: 3px 3px 1px 1px; }
.pg-laptop::after { content: ''; position: absolute; bottom: 0; left: 0; width: 34px; height: 4px; border: 2px solid currentColor; border-radius: 0 0 4px 4px; }
.pg-main { padding-block: clamp(1.5rem, 4vw, 2.5rem) 3rem; margin-block-start: 0; }
.pg-hero { padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid #ddd; border-radius: 4px; background: #f3f3f3; }
.pg-hero h1 { font-size: clamp(1.65rem, 3.7vw, 2.35rem); line-height: 1.65; }
.pg-hero-link a { display: inline-flex; align-items: center; min-height: 44px; gap: .5rem; text-underline-offset: .25em; }
.pg-eyebrow { font: 600 .75rem/1.8 var(--wp--preset--font-family--sans); letter-spacing: .09em; color: #4b4b4b; }
.pg-placeholder { color: #666; }
.pg-section-title { font-size: clamp(1.35rem, 2.5vw, 1.65rem); line-height: 1.65; }
.pg-topics-section, .pg-articles-section, .pg-about { margin-block-start: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 1.5rem; }
.wp-site-blocks .pg-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pg-topics > * { margin-block: 0; min-width: 0; }
.pg-topic { padding: clamp(1.125rem, 2.5vw, 1.75rem); border: 1px solid #ddd; border-radius: 4px; }
.pg-topic h3 { font: 500 1.125rem/1.65 var(--wp--preset--font-family--sans); }
.pg-topic p { font-size: .875rem; }
.pg-about { padding-block: 2rem; border-top: 1px solid #ddd; }
.pg-about p { max-width: 66ch; }
.pg-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.pg-list-heading > * { margin-block: 0; }
.pg-list-heading h1 { font-size: 1.4rem; letter-spacing: .04em; }
.pg-list-heading .wp-block-search { width: min(100%, 19rem); }
.wp-block-search__input { min-width: 0; border: 1px solid #ddd; border-radius: 3px; background: #fff; color: #2b2b2b; font: inherit; padding: .6rem .8rem; }
.wp-block-search__button { flex-shrink: 0; white-space: nowrap; margin-left: .5rem; padding: .6rem .8rem; min-width: 44px; min-height: 44px; }
.wp-site-blocks .pg-post-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding: 0; list-style: none; }
.pg-post-grid .wp-block-post, .pg-post-card { min-width: 0; }
.pg-post-card { height: 100%; overflow: hidden; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.pg-post-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 16 / 9; background: #f3f3f3; }
.pg-post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.pg-card-body { padding: 1.2rem 1.35rem 1.3rem; }
.pg-post-card .wp-block-post-title { margin: 0 0 .8rem; font-size: 1.15rem; line-height: 1.75; }
.pg-post-card .wp-block-post-title a { text-decoration: none; }
.pg-post-card .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: .25em; }
.pg-card-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: #666; font-size: .75rem; }
.pg-card-meta > * { margin: 0; }
.pg-card-meta a { color: #666; text-decoration: none; }
.pg-card-meta a:hover { text-decoration: underline; }
.pg-post-grid .wp-block-query-pagination { gap: .5rem; margin-top: 2rem; }
.wp-block-query-pagination :where(a, .current) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .35rem .65rem; text-decoration: none; }
.wp-block-query-pagination .current { background: #f3f3f3; border-radius: 3px; }
.pg-discovery { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 2rem; margin-top: 3rem; padding: 2rem; background: #f3f3f3; border: 1px solid #ddd; border-radius: 4px; }
.pg-discovery > * { min-width: 0; margin-top: 0; }
.pg-discovery h2 { font-family: var(--wp--preset--font-family--sans); font-size: .9rem; font-weight: 600; margin: 0 0 1rem; }
.pg-discovery ul { list-style: none; padding-left: 0; font-size: .8125rem; line-height: 1.8; }
.pg-discovery li { margin-bottom: .65rem; }
.pg-discovery a { text-decoration: none; }
.pg-discovery a:hover { text-decoration: underline; }
.pg-discovery .wp-block-categories a, .pg-discovery .wp-block-archives a { display: inline-flex; align-items: center; min-height: 32px; }
.pg-footer { padding-block: 1.75rem 2rem; border-top: 1px solid #ddd; font-size: .8125rem; }
.pg-footer-row { gap: 1rem 2rem; }
.pg-footer .wp-block-site-title { font-family: var(--wp--preset--font-family--sans); font-size: 1rem; font-weight: 600; }
.pg-footer .wp-block-site-title a { text-decoration: none; }
.pg-footer-tagline { color: #666; font-size: .8125rem; }
.pg-footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.pg-footer-links a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .2em; }
.pg-article { font-size: 1rem; line-height: 1.9; }
.pg-back { font-size: .8125rem; color: #666; margin-bottom: 1.75rem; }
.pg-article-header { margin-bottom: 2rem; }
.pg-article-header .wp-block-post-title { font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.65; margin-block: .65rem 1rem; }
.pg-article .wp-block-post-content :where(h2, h3, h4) { margin-top: 2.25em; line-height: 1.7; }
.pg-article .wp-block-post-content h2 { padding-bottom: .6rem; border-bottom: 1px solid #ddd; }
.pg-article :where(.wp-block-table, .wp-block-code, pre) { max-width: 100%; overflow-x: auto; }
.pg-article :where(th, td) { padding: .75rem; border-color: #ddd; text-align: start; vertical-align: top; }
.pg-post-navigation { border-top: 1px solid #ddd; padding-top: 1.5rem; margin-top: 2.5rem; font-size: .875rem; }
.pg-affiliate-note { padding: .8rem 1rem; border-left: 3px solid #ddd; background: #f3f3f3; color: #666; font-size: .8125rem; }
.pg-empty { padding: 2rem 0; color: #666; }
@media (max-width: 700px) {
  .pg-header { padding-block: 1.25rem; }
  .pg-header-row { flex-direction: column; align-items: flex-start; }
  .wp-site-blocks .pg-topics { grid-template-columns: minmax(0, 1fr); }
  .pg-list-heading { flex-direction: column; align-items: stretch; gap: 1rem; }
  .pg-list-heading .wp-block-search { width: 100%; }
  .wp-site-blocks .pg-post-grid .wp-block-post-template { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .pg-card-body { padding: 1rem; }
  .pg-discovery { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem; }
  .pg-discovery > * + * { border-top: 1px solid #ddd; padding-top: 1.5rem; }
  .pg-footer-row { flex-direction: column; align-items: flex-start; }
}