/*
Theme Name: NGO network Japan
Template: twentytwentyfive
Description: NGO network Japan (www.ngo.ne.jp) child theme of Twenty Twenty-Five.
Version: 1.0.0
Text Domain: ngo-japan
*/

/* Header */
.ngo-header { border-bottom: 3px solid var(--wp--preset--color--brand); }
.ngo-header .wp-block-site-logo img { height: auto; max-height: 40px; width: auto; }
.ngo-header .wp-block-navigation a { font-weight: 600; }
.ngo-header .wp-block-navigation a:hover { color: var(--wp--preset--color--brand); }

/* Lists of posts (date + title) */
.ngo-list { list-style: none; margin: 0; padding: 0; }
.ngo-list li,
.ngo-list .wp-block-post {
	display: flex; flex-wrap: wrap; gap: .2em .6em; align-items: center;
	padding: .6em 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
/* Post lists: date + category on the first line, title below */
.ngo-list .wp-block-post-title { flex-basis: 100%; }
.ngo-list .wp-block-post-date,
.ngo-list .ngo-date { flex: 0 0 auto; color: var(--wp--preset--color--muted); font-size: .85em; font-variant-numeric: tabular-nums; }
.ngo-list .wp-block-post-title { margin: 0; font-size: 1em; font-weight: 500; line-height: 1.5; }
.ngo-list a { text-decoration: none; }
.ngo-list a:hover { text-decoration: underline; }
.ngo-list .ngo-cat { flex: 0 0 auto; font-size: .75em; }
.ngo-list .ngo-cat a {
	display: inline-block; padding: .1em .6em; border-radius: 99px;
	background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand-dark);
}

/* Section headings with a brand bar */
.ngo-section-title { border-left: 5px solid var(--wp--preset--color--brand); padding-left: .6em; }

/* Cards */
.ngo-card {
	border: 1px solid var(--wp--preset--color--line); border-radius: 10px;
	background: var(--wp--preset--color--base);
}
.ngo-card:hover { border-color: var(--wp--preset--color--brand); }
.ngo-tile a { text-decoration: none; }

/* Emergency notice */
.ngo-alert { border-left: 6px solid var(--wp--preset--color--brand); }

/* Link directory / clipping source line */
.ngo-link-url, .ngo-clipping-source { font-size: .9em; word-break: break-all; }

/* Imported XOOPS content often has fixed-width tables/images */
.wp-block-post-content img { max-width: 100%; height: auto; }
.wp-block-post-content table { display: block; max-width: 100%; overflow-x: auto; }


/* Mobile header: keep logo and menu button on one row */
@media (max-width: 599px) {
	.ngo-header .wp-block-site-logo img { max-width: 58vw; }
}

/* Long ruled lines / URLs in imported posts must not overflow on phones */
.wp-block-post-content { overflow-wrap: anywhere; }

/* Contact Form 7 */
.wpcf7 label { display: block; font-weight: 600; margin-bottom: 1.1em; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 select, .wpcf7 textarea {
	display: block; width: 100%; box-sizing: border-box; margin-top: .35em;
	padding: .65em .8em; font: inherit; font-weight: 400;
	border: 1px solid #B9B0AB; border-radius: 6px; background: var(--wp--preset--color--base);
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--brand); outline-offset: 1px; border-color: var(--wp--preset--color--brand);
}
.wpcf7 textarea { min-height: 12em; }
.wpcf7 input[type=submit] {
	padding: .8em 2.4em; border: 0; border-radius: 6px; cursor: pointer;
	background: var(--wp--preset--color--brand); color: #fff; font: inherit; font-weight: 700;
}
.wpcf7 input[type=submit]:hover { background: var(--wp--preset--color--brand-dark); }
.wpcf7-not-valid-tip { font-weight: 400; font-size: .85em; }

/* Post lists with thumbnails */
.ngo-list.ngo-list--thumb .wp-block-post {
	display: grid; grid-template-columns: 120px 1fr; gap: .4em 1em; align-items: start; padding: .9em 0;
}
.ngo-list--thumb .ngo-item-body { min-width: 0; }
.ngo-list--thumb .ngo-item-meta { gap: .2em .6em; align-items: center; }
.ngo-list--thumb .wp-block-post-title { margin-top: .25em; }
.ngo-thumb { margin: 0; border-radius: 6px; overflow: hidden; }
.ngo-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 599px) {
	.ngo-list.ngo-list--thumb .wp-block-post { grid-template-columns: 88px 1fr; }
	.ngo-list--thumb .ngo-thumb { width: 88px !important; }
}

/* Fallback thumbnail tiles (category colour + icon) */
.ngo-thumb--fallback a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em;
	aspect-ratio: 4 / 3; text-decoration: none; background: var(--thumb-bg); color: var(--thumb-fg);
}
.ngo-thumb--fallback svg { width: 38%; height: auto; }
.ngo-thumb--fallback span { font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-align: center; padding: 0 .3em; }
.ngo-thumb--event { --thumb-bg: #FBE9E9; --thumb-fg: #9E0000; }
.ngo-thumb--jobs  { --thumb-bg: #E7EFF9; --thumb-fg: #24528F; }
.ngo-thumb--tour  { --thumb-bg: #E4F3EA; --thumb-fg: #1D6B44; }
.ngo-thumb--grant { --thumb-bg: #FCF1DC; --thumb-fg: #8A5600; }
.ngo-thumb--press { --thumb-bg: #EEEAE7; --thumb-fg: #4E4642; }
.ngo-thumb--other { --thumb-bg: #F1EEEC; --thumb-fg: #4E4642; }

/* Scrollbar: wide and clearly visible (Chrome/Edge/Safari) */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #EFEAE7; }
::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--brand); border-radius: 8px;
	border: 3px solid #EFEAE7; min-height: 48px;
}
::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--brand-dark); }
/* Firefox has no width control beyond "auto"; colour it at least */
@supports not selector(::-webkit-scrollbar) {
	html { scrollbar-color: var(--wp--preset--color--brand) #EFEAE7; }
}

/* Feed headline lists: date + source on the first line, headline below */
.ngo-feed li a { flex-basis: 100%; }
.ngo-feed-source { font-size: .72em; color: var(--wp--preset--color--muted); }
.ngo-feed-source::before { content: "｜"; margin-right: .2em; }
.ngo-feed-empty { color: var(--wp--preset--color--muted); font-size: .9em; }
.ngo-digest-list .wp-block-post-title { font-size: .95em; }

/* Weekly digest posts */
.ngo-digest-title { margin-top: 2em; font-size: 1.05rem; }
.ngo-digest-meta { margin-top: .3em; font-size: .85em; color: var(--wp--preset--color--muted); }
.ngo-digest-comment {
	background: var(--wp--preset--color--base-2); border-left: 4px solid var(--wp--preset--color--brand);
	padding: .8em 1em; border-radius: 0 6px 6px 0;
}
.ngo-thumb--news { --thumb-bg: #E3F1F3; --thumb-fg: #1B5E6B; }

/* Official site screenshots on the 公式発表 cards */
.ngo-official-shot { margin: 0 0 1rem; }
.ngo-official-shot img {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
	border: 1px solid var(--wp--preset--color--line); border-radius: 6px;
}
.ngo-official-shot a:hover img { border-color: var(--wp--preset--color--brand); }

/* Section heading with an icon (e.g. 公式発表) */
.ngo-section-title.ngo-has-icon { display: flex; align-items: center; gap: .5em; border-left: 0; padding-left: 0; }
.ngo-section-icon { width: 1.9em; height: 1.9em; flex: 0 0 auto; }

/* Hero with the illustration on the right */
.ngo-hero-image { margin: 0; }
.ngo-hero-image img { display: block; width: 100%; height: auto; }
@media (max-width: 781px) {
	.ngo-hero .ngo-hero-image { max-width: 420px; margin: 0 auto; }
}

/* Header login/logout link */
.ngo-loginout { margin: 0; white-space: nowrap; }
.ngo-loginout a {
	display: inline-block; padding: .3em .9em; border: 1px solid var(--wp--preset--color--brand);
	border-radius: 99px; text-decoration: none; font-weight: 600; color: var(--wp--preset--color--brand-dark);
}
.ngo-loginout a:hover { background: var(--wp--preset--color--brand); color: #fff; }
@media (max-width: 781px) { .ngo-loginout { display: none; } }

/* Editorial articles (NGO紹介 / 編集長ピックアップ): screenshot card, points, why, editor's comment */
.ngo-pick-card {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25em; align-items: center;
	padding: 1em; border: 1px solid var(--wp--preset--color--line); border-radius: 12px;
	background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.ngo-pick-shot img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); }
.ngo-pick-meta p { margin: 0; }
.ngo-pick-label { font-size: .75em; color: var(--wp--preset--color--muted); }
.ngo-pick-source { font-weight: 700; margin-bottom: .6em !important; }
.ngo-pick-facts { display: grid; grid-template-columns: auto 1fr; gap: .2em .8em; margin: 0 0 .9em; font-size: .85em; }
.ngo-pick-facts dt { color: var(--wp--preset--color--muted); white-space: nowrap; }
.ngo-pick-facts dd { margin: 0; }
.ngo-pick-btn {
	display: inline-block; padding: .65em 1.4em; border-radius: 99px; text-decoration: none; font-weight: 700;
	background: var(--wp--preset--color--brand); color: #fff !important;
}
.ngo-pick-btn:hover { background: var(--wp--preset--color--brand-dark); }
.ngo-pick-captured { margin-top: .6em !important; font-size: .72em; color: var(--wp--preset--color--muted); }
.ngo-pick-points { list-style: none; padding: 0; }
.ngo-pick-points li {
	position: relative; margin: .5em 0; padding: .7em 1em .7em 2.6em;
	border: 1px solid var(--wp--preset--color--line); border-radius: 8px; background: #fff; font-weight: 600;
}
.ngo-pick-points li::before {
	content: "✓"; position: absolute; left: .9em; top: .7em; width: 1.2em; height: 1.2em; line-height: 1.2em;
	border-radius: 50%; background: var(--wp--preset--color--brand); color: #fff; font-size: .8em; text-align: center;
}
.ngo-pick-why, .ngo-pick-comment { margin-top: 1.5em; padding: 1.2em 1.4em; border-radius: 10px; }
.ngo-pick-why { background: var(--wp--preset--color--brand-soft); }
.ngo-pick-comment { background: #fff; border: 2px solid var(--wp--preset--color--brand); }
.ngo-pick-why h3, .ngo-pick-comment h3 { margin-top: 0; font-size: 1.1em; }
.ngo-pick-note { color: var(--wp--preset--color--muted); border-top: 1px solid var(--wp--preset--color--line); padding-top: .8em; }
@media (max-width: 700px) { .ngo-pick-card { grid-template-columns: 1fr; } }

/* Readability: darker, slightly heavier text (the parent theme's 300 weight looks faint, esp. Yu Gothic on Windows) */
body { -webkit-font-smoothing: antialiased; }
.entry-content p, .entry-content li, .wp-block-post-content p, .wp-block-post-content li { font-weight: 500; color: var(--wp--preset--color--contrast); }
.ngo-pick-captured, .ngo-pick-label { font-size: .8em; }
.entry-content .ngo-pick-points li, .wp-block-post-content .ngo-pick-points li { font-weight: 700; }

/* Donation page */
.ngo-donate { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2em; margin: 1.5em 0; }
.ngo-donate-card {
	padding: 1.4em; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.ngo-donate-card--monthly { border: 2px solid var(--wp--preset--color--brand); }
.ngo-donate-card h3 { margin-top: 0; font-size: 1.15em; }
.ngo-donate-amounts { display: flex; flex-wrap: wrap; gap: .6em; }
.ngo-donate-btn {
	display: inline-block; padding: .7em 1.5em; border-radius: 99px; font-weight: 700; text-decoration: none;
	background: var(--wp--preset--color--brand); color: #fff !important; border: 2px solid var(--wp--preset--color--brand);
}
.ngo-donate-btn:hover { background: var(--wp--preset--color--brand-dark); border-color: var(--wp--preset--color--brand-dark); }
.ngo-donate-btn.is-outline { background: #fff; color: var(--wp--preset--color--brand) !important; }
.ngo-donate-btn.is-outline:hover { background: var(--wp--preset--color--brand-soft); }
/* "寄付する" in the header menu */
.ngo-header .wp-block-navigation .ngo-nav-donate a {
	padding: .3em 1em; border-radius: 99px; background: var(--wp--preset--color--brand); color: #fff;
}
.ngo-header .wp-block-navigation .ngo-nav-donate a:hover { background: var(--wp--preset--color--brand-dark); color: #fff; }

/* Editorial article lists per source (公式発表 / 国際協力ニュース cards) */
.ngo-picks { list-style: none; margin: 0; padding: 0; }
.ngo-picks a { display: flex; gap: .7em; align-items: flex-start; text-decoration: none; color: inherit; }
.ngo-picks a:hover .ngo-picks-title { text-decoration: underline; color: var(--wp--preset--color--brand-dark); }
.ngo-picks li { padding: .55em 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.ngo-picks li:last-child { border-bottom: 0; }
.ngo-picks-thumb { flex: 0 0 72px; }
.ngo-picks-thumb img { display: block; width: 72px; height: 54px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--wp--preset--color--line); }
.ngo-picks-body { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.ngo-picks time { font-size: .78em; color: var(--wp--preset--color--muted); }
.ngo-picks-title { font-size: .92em; line-height: 1.5; font-weight: 600; }
.ngo-picks-lead a { flex-direction: column; gap: .5em; }
.ngo-picks-lead .ngo-picks-thumb { flex-basis: auto; width: 100%; }
.ngo-picks-lead .ngo-picks-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.ngo-picks-lead .ngo-picks-title { font-size: 1em; }

/* Footer: sister sites (関連サイト) */
.ngo-sister-sites { margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--wp--preset--color--line); }
.ngo-sister-list { list-style: none; margin: .4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em 1.4em; font-size: .85em; }
.ngo-sister-list a { text-decoration: none; }
.ngo-sister-list a:hover { text-decoration: underline; color: var(--wp--preset--color--brand-dark); }

/* Editorial articles: small illustrated icons beside the three section headings */
.entry-content h2.wp-block-heading:has(+ .ngo-pick-points),
.ngo-pick-why h3, .ngo-pick-comment h3 {
	display: flex; align-items: center; gap: .7em;
}
.entry-content h2.wp-block-heading:has(+ .ngo-pick-points)::before,
.ngo-pick-why h3::before, .ngo-pick-comment h3::before {
	content: ""; flex: 0 0 auto; width: 72px; height: 72px;
	background: #fff center / 92% no-repeat; border-radius: 10px;
	border: 2px solid var(--wp--preset--color--line); box-sizing: border-box;
}
.entry-content h2.wp-block-heading:has(+ .ngo-pick-points)::before { background-image: url(assets/pick/points-v2.svg); }
.ngo-pick-why h3::before { background-image: url(assets/pick/why-v2.svg); }
.ngo-pick-comment h3::before { background-image: url(assets/pick/comment-v4.svg); }
.ngo-pick-why h3, .ngo-pick-comment h3 { margin-bottom: .6em; font-size: 1.15em; }
@media (max-width: 600px) {
	.entry-content h2.wp-block-heading:has(+ .ngo-pick-points)::before,
	.ngo-pick-why h3::before, .ngo-pick-comment h3::before { width: 56px; height: 56px; }
}