/*
Theme Name: HELP Gambian Children
Theme URI: https://helpgambianchildren.nl/
Author: Stichting H.E.L.P. Gambian Children
Description: Block theme for Stichting H.E.L.P. Gambian Children. Calm, transparent and personal: direction B ("Vertrouwen & transparantie").
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hgc
*/

/* Logo colour stripe (red, blue, green), used above the footer. */
.hgc-chain {
	height: 6px;
	background: linear-gradient(90deg, var(--wp--preset--color--red) 0 33.33%, var(--wp--preset--color--blue) 33.33% 66.66%, var(--wp--preset--color--green) 66.66%);
}

/* Header */
.hgc-header .wp-block-site-title a { text-decoration: none; }
.hgc-header .hgc-logo img { display: block; height: 44px; width: auto; }
@media (max-width: 600px) {
	.hgc-header .hgc-logo img { height: 34px; }
	.hgc-header .wp-block-site-title { font-size: 1.05rem !important; }
}

/* Hero image with the rounded top-left corner from the sketch */
.hgc-hero-image img { border-radius: 140px 10px 10px 10px; aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
@media (max-width: 781px) { .hgc-hero-image img { border-radius: 80px 8px 8px 8px; aspect-ratio: 4 / 3; } }

/* Fact cards with a coloured top border */
.hgc-fact { border-top-width: 4px !important; }
.wp-block-columns.hgc-facts { align-items: stretch; }
.hgc-fact a { text-decoration: none; color: inherit; }
.hgc-fact a:hover { text-decoration: underline; }

/* Verantwoording list */
.hgc-docs { list-style: none; padding: 0; margin: 0; }
.hgc-docs li { padding: .55rem 0; border-bottom: 1px dashed var(--wp--preset--color--line); color: var(--wp--preset--color--muted); font-size: .9rem; }
.hgc-docs li a { font-size: var(--wp--preset--font-size--medium); }
.hgc-docs li:last-child { border-bottom: 0; }

/* Board: initials in logo-coloured circles (no stock photos) */
.hgc-board { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; text-align: center; margin-top: var(--wp--preset--spacing--40); }
.hgc-person { flex: 0 0 140px; }
@media (max-width: 600px) { .hgc-board { gap: 1.5rem 1rem; } .hgc-person { flex-basis: 40%; } }
.hgc-person .hgc-initials { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto .5rem; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; font-weight: 700; }
.hgc-person:nth-child(3n+1) .hgc-initials { background: var(--wp--preset--color--red); }
.hgc-person:nth-child(3n+2) .hgc-initials { background: var(--wp--preset--color--blue); }
.hgc-person:nth-child(3n+3) .hgc-initials { background: var(--wp--preset--color--green); }
.hgc-person strong { display: block; font-size: .95rem; }
.hgc-person span { color: var(--wp--preset--color--muted); font-size: .85rem; }

/* News list (homepage) and news cards (archive) */
.hgc-news-row .wp-block-post-featured-image img,
.hgc-card .wp-block-post-featured-image img { object-fit: cover; }
.hgc-news-row .wp-block-post-title a,
.hgc-card .wp-block-post-title a { text-decoration: none; }
.hgc-news-row .wp-block-post-title a:hover,
.hgc-card .wp-block-post-title a:hover { text-decoration: underline; }
.hgc-news-row { border-bottom: 1px solid var(--wp--preset--color--line); }
.hgc-card { height: 100%; }
.hgc-noimage { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--sand); border-radius: 6px 6px 0 0; }
.hgc-noimage img { width: 45%; height: auto; opacity: .85; }

/* Category chips */
.hgc-chips .wp-block-categories-list,
ul.hgc-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.hgc-chips li a,
.wp-block-post-terms.hgc-chip a { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); font-size: .8rem; font-weight: 700; text-decoration: none; }
.hgc-chips li a:hover,
.wp-block-post-terms.hgc-chip a:hover { background: var(--wp--preset--color--ink); color: #fff; }
.hgc-chips li.current-cat a { background: var(--wp--preset--color--ink); color: #fff; }
.wp-block-post-terms.hgc-chip .wp-block-post-terms__separator { display: none; }

/* IBAN block */
.hgc-iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }

/* Legacy content migrated from Drupal: fixed-size inline images side by side */
.entry-content img { max-width: 100%; height: auto; }
.entry-content p > img { display: inline-block; margin: 0 .5rem .5rem 0; vertical-align: top; border-radius: 4px; }
.entry-content p > img[style*="float: left"], .entry-content img[align="left"] { float: left; margin: 0 1rem .5rem 0; }
.entry-content p > img[style*="float: right"], .entry-content img[align="right"] { float: right; margin: 0 0 .5rem 1rem; }
.entry-content::after { content: ""; display: table; clear: both; }
.entry-content table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.entry-content td, .entry-content th { border: 1px solid var(--wp--preset--color--line); padding: .35rem .6rem; }
.entry-content iframe { max-width: 100%; }

/* Skip link & focus */
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--blue); outline-offset: 2px; }

/* Fact cards: 2×2 on phones instead of four squeezed columns */
@media (max-width: 781px) {
	.wp-block-columns.hgc-facts { display: grid !important; grid-template-columns: 1fr 1fr; gap: .75rem !important; }
	.wp-block-columns.hgc-facts > .wp-block-column { min-width: 0; height: auto; margin: 0 !important; }
}

/* Post titles in lists read as headings, not as links */
.hgc-news-row .wp-block-post-title a,
.hgc-card .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.hgc-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 420px) { .hgc-header .wp-block-site-title { display: none; } }
.wp-block-query-pagination-numbers .page-numbers { padding: 0 .4rem; }

/* Use the overlay (hamburger) menu up to 960px instead of core's 600px, so tablets don't wrap. */
@media (min-width: 600px) and (max-width: 959px) {
	.hgc-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.hgc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Contact form (Contact Form 7) */
.wpcf7 form { display: grid; gap: 1rem; max-width: 560px; margin-top: var(--wp--preset--spacing--40); }
.wpcf7 label { display: grid; gap: .35rem; font-weight: 700; font-size: .95rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%; font: inherit; font-weight: 400; padding: .65rem .8rem; border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink);
}
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--wp--preset--color--blue); }
.wpcf7 p { margin: 0; }
.wpcf7 .hgc-form-note { color: var(--wp--preset--color--muted); font-size: .85rem; }
.wpcf7 input[type="submit"] {
	justify-self: start; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; border: 0; border-radius: 6px;
	padding: .7rem 1.25rem; background: var(--wp--preset--color--green); color: var(--wp--preset--color--white);
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--green-dark); }
.wpcf7-not-valid-tip { color: #a3321f; font-size: .85rem; font-weight: 600; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: .75rem 1rem; border-radius: 6px; }

/* Financial tables (jaarverslag): amounts right-aligned, totals separated */
.wp-block-table.hgc-fin { margin: 1rem 0 1.75rem; }
.wp-block-table.hgc-fin table { display: table; width: 100%; font-size: .92rem; font-variant-numeric: tabular-nums; background: var(--wp--preset--color--white); }
.wp-block-table.hgc-fin th { background: var(--wp--preset--color--sand); text-align: left; }
.wp-block-table.hgc-fin td:not(:first-child), .wp-block-table.hgc-fin th:not(:first-child) { text-align: right; white-space: nowrap; }
.wp-block-table.hgc-fin tr:last-child td { border-top: 2px solid var(--wp--preset--color--ink); }
.wp-block-table.hgc-fin td[colspan] { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--muted); }
@media (max-width: 600px) { .wp-block-table.hgc-fin { overflow-x: auto; } .wp-block-table.hgc-fin table { font-size: .82rem; } }