/*
 * waganeko theme v2 — additions to the delivered CSS (tokens.css / components.css are kept as delivered).
 * Things the design sample did not cover, and classes for markup that was inline style in the sample.
 */

/* Home: the first card and the "写真を探す" card */
.wt-home-feature { padding-top: var(--wgk-sp-7); }
.wt-home-feature + .wt-section { padding-top: var(--wgk-sp-7); }
.wt-card--more__title { font-size: 18px; font-weight: var(--wgk-fw-medium); }

/* いまごろの写真: 4 photos */
.wt-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 959px) { .wt-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Text posts: list of the same category */
.wt-list { margin: 0; padding: 0; list-style: none; max-width: var(--wgk-w-text); }
.wt-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 44px; padding-block: 8px; border-bottom: 1px solid var(--wgk-line); font-size: 15px; }
.wt-list time { flex: none; }

/* 写真を探す: all lenses (no JavaScript: <details>) */
.wt-more summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: var(--wgk-fs-small); color: var(--wgk-sub); }
.wt-more summary:hover { color: var(--wgk-text); }
.wt-search__label { font-size: var(--wgk-fs-chip); color: var(--wgk-sub); }
.wt-chips__label { margin-right: 6px; align-self: center; }
.wt-chip[aria-current] { background: var(--wgk-chip-hover); color: var(--wgk-chip-hover-text); }
.wt-chip[aria-current] .wt-count { color: inherit; opacity: .75; }

/* Archives and search */
.wt-nearby__title { margin: 0; font-weight: var(--wgk-fw-medium); }
.wt-empty { padding-block: 24px; color: var(--wgk-sub); }
.wt-empty a { color: var(--wgk-accent); text-decoration: underline; text-underline-offset: 4px; }
.wt-archive-head .wt-search { max-width: 480px; }
.wt-notfound .wt-search { width: 100%; max-width: 480px; text-align: left; }
.wt-button--link { display: inline-flex; align-items: center; text-decoration: none !important; }

/* Footer */
.wt-footer__text { margin: 0; font-size: var(--wgk-fs-chip); line-height: 1.8; color: var(--wgk-sub); }
.wt-footer__nav .wt-count { margin-left: 2px; }

/* Embeds in old posts (YouTube, Vimeo, Google Maps iframes with fixed width/height) */
.wt-entry iframe { max-width: 100%; }
.wt-entry iframe[src*="youtube.com"], .wt-entry iframe[src*="youtube-nocookie.com"], .wt-entry iframe[src*="vimeo.com"], .wt-entry iframe[src*="google.com/maps"], .wt-entry iframe[src*="google.co.jp/maps"] {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-inline: auto;
}
.wt-entry > p:has(> iframe), .wt-entry > .wp-block-embed { max-width: var(--wgk-w-photo); }

/* Comment form (local / when Jetpack does not replace it) */
#respond input[type="text"], #respond input[type="email"], #respond input[type="url"], #respond textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--wgk-line); border-radius: var(--wgk-radius); background: var(--wgk-bg); color: var(--wgk-text); font: var(--wgk-fs-small) var(--wgk-font);
}
#respond .form-submit input[type="submit"] { height: 44px; padding: 0 18px; border: 0; border-radius: var(--wgk-radius); background: var(--wgk-text); color: var(--wgk-bg); font: var(--wgk-fw-medium) var(--wgk-fs-small) var(--wgk-font); cursor: pointer; }
#respond p { margin: 0 0 14px; font-size: var(--wgk-fs-small); }
#respond label { display: block; margin-bottom: 4px; color: var(--wgk-sub); font-size: var(--wgk-fs-chip); }
.comment-navigation { display: flex; justify-content: space-between; margin-top: 24px; font-size: var(--wgk-fs-small); }

/* Gallery blocks without a column setting ("columns-default"): as many columns as images, up to 3 (as core
   does). Several posts put a single photo in a gallery block; it should look like a normal photo. */
.wt-entry .wp-block-gallery.columns-default { --wt-cols: 1; }
.wt-entry .wp-block-gallery.columns-default:has(> .wp-block-image:nth-of-type(2)) { --wt-cols: 2; }
.wt-entry .wp-block-gallery.columns-default:has(> .wp-block-image:nth-of-type(3)) { --wt-cols: 3; }
.wt-entry .wp-block-gallery:has(> .wp-block-image:only-of-type) img { height: auto; object-fit: contain; }

/* Old [gallery] shortcodes use 150px square thumbnails (14 posts): keep them at their size in a compact,
   centred grid instead of stretching them (they would blur). */
.wt-entry .gallery-item { text-align: center; }
.wt-entry .gallery-item img { display: block; margin-inline: auto; }
.wt-entry > .gallery.gallery-size-thumbnail { max-width: calc(150px * var(--wt-cols, 2) + 12px * (var(--wt-cols, 2) - 1)); }
.wt-entry .gallery br { display: none; }

/* Photo mats: components.css sizes the photo with percentages inside a grid, which resolve against the
   photo's own size, so a photo whose shape differs from the mat overflows and is cut off (e.g. a 3:2 photo
   in the 21:9 feature mat lost its bottom). Position the photo inside the mat box instead. */
.wt-mat { position: relative; }
.wt-mat img { position: absolute; inset: 0; margin: auto; max-width: none; }

/* Jetpack Related Posts: Jetpack's script gives both the photo link and the title link the class
   jp-relatedposts-post-a, so components.css turned the title into a second (empty) mat. Only the link with
   the photo is a mat; the title link is plain text. Dates and categories follow the card meta style. */
#jp-relatedposts .jp-relatedposts-post-a { position: relative; }
#jp-relatedposts .jp-relatedposts-post-a:not(:has(img)) { display: inline; aspect-ratio: auto; background: none; overflow: visible; }
#jp-relatedposts .jp-relatedposts-post-title { text-align: left; }
#jp-relatedposts .jp-relatedposts-post-a img { position: absolute; inset: 0; margin: auto; }
#jp-relatedposts .jp-relatedposts-post-date, #jp-relatedposts .jp-relatedposts-post-context { display: inline; margin: 0 10px 0 0 !important; }

/* Previous / next: the "next" side mirrors the "previous" side (text, then photo on the right). */
.wt-adjacent .wt-adjacent__next { flex-direction: row-reverse; justify-content: flex-start; }

/* Jetpack iframes (likes, comment form) in dark mode: when the page is dark (color-scheme: light dark) and the
   iframe's document is light, browsers paint an opaque white backdrop behind the iframe. Declaring the iframe
   light keeps its background transparent, so it sits on the dark page. */
.jetpack-likes-widget-wrapper iframe, iframe.post-likes-widget, #jetpack_remote_comment { color-scheme: light; background: transparent; }

/* Sharing buttons: Jetpack sets the text to #2c3338 !important with a more specific selector
   (.sd-social-icon-text .sd-content ul li a.sd-button), which beat components.css, so in dark mode the buttons
   looked disabled. body + .sharedaddy outweighs every Jetpack button style (icon + text, text only). */
body .sharedaddy .sd-content ul li a.sd-button,
body .sharedaddy .sd-content ul li a.sd-button > span { color: var(--wgk-text) !important; }
body .sharedaddy .sd-content ul li a.sd-button:hover { background: var(--wgk-chip) !important; }

/* Gallery blocks on phones: core's flex layout sets each image to 50% (or 33%) width, with a high-specificity
   selector (…:not(#individual-image)). The theme lays galleries out as a grid, so each image fills its cell.
   Without this, single-photo gallery blocks showed at half width on phones (found after the switch). */
.wt-entry .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: auto; max-width: none; margin: 0; }

/* An iframe placed directly in the content gets .wt-entry > *'s side padding (content-box); with width: 100%
   it overflowed the screen on phones by the padding. Size it as a border box without padding instead. */
.wt-entry > iframe { box-sizing: border-box; padding-inline: 0; width: 100%; max-width: var(--wgk-w-photo); }

/* Phone-width overflow (found after the switch; audited on all 320 posts at 390px):
   - Jetpack's likes block and other full-width (width: 100%) blocks directly in the content got .wt-entry > *'s
     side padding on top (content-box), 40px wider than the screen -> sideways scrolling.
   - Long unbreakable words (URLs, "Hawaii Day1 ~Fukuoka~Incheon~Honolulu") widened the text and the
     previous / next links.
   - Old Flash <object> / <embed> (no longer play) had fixed widths.
   overflow-x: clip on the content is a safety net: nothing inside can make the page scroll sideways
   (clip, unlike hidden, does not create a scroll container). */
.wt-entry > .sharedaddy, .wt-entry > #jp-post-flair, .wt-entry > .jetpack-likes-widget-wrapper { box-sizing: border-box; max-width: calc(var(--wgk-w-text) + var(--wgk-gutter) * 2); }
.wt-entry { overflow-wrap: anywhere; overflow-x: clip; }
.wt-entry object, .wt-entry embed { max-width: 100%; }
.wt-adjacent a, .wt-adjacent a > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) { .wt-adjacent { grid-template-columns: minmax(0, 1fr); } }
/* Same for comments: a long URL in a comment (紫陽花, 2014) widened the page on phones. */
.wt-comments { overflow-wrap: anywhere; overflow-x: clip; }