/*
Theme Name: Mental Health Singapore
Theme URI: https://mentalhealthsingapore.com
Author: Mental Health Singapore
Description: A block theme for a Singapore mental health information portal. Built for fast, legible pages that hold up on a poor connection, with a crisis layer that is always one action away. Pairs with the MHSG Core plugin, which owns the data model.
Version: 1.5.0
Requires at least: 6.1
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mhsg
Tags: blog, news, one-column, block-patterns, full-site-editing, accessibility-ready
*/

/*
 * Type is set in system stacks on purpose. Crisis pages have to render on a
 * weak connection and a cheap handset, and a webfont is a render-blocking
 * dependency on the one page where that is unacceptable. To move to a hosted
 * face later, self-host the files and add a fontFace block to theme.json.
 */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks > * { margin-block-start: 0; }

/* Links inside running text stay obviously clickable. */
.wp-block-post-content a:not(.wp-element-button):not(.mhsg-btn),
.wp-block-post-excerpt a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* Headings ---------------------------------------------------------- */

h1, h2, h3, h4 { text-wrap: balance; }

.wp-block-post-title { letter-spacing: -0.015em; }

/* Site header ------------------------------------------------------- */

.mhsg-site-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mhsg-site-header .wp-block-site-title a {
	text-decoration: none;
	letter-spacing: -0.01em;
}

.mhsg-nav a { text-decoration: none; }
.mhsg-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Eyebrow used above page titles ------------------------------------- */

.mhsg-eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Archive listing ---------------------------------------------------- */

.mhsg-list .wp-block-post-title { font-size: 1.25rem; line-height: 1.3; }
.mhsg-list .wp-block-post-title a { text-decoration: none; }
.mhsg-list .wp-block-post-title a:hover { text-decoration: underline; }

.mhsg-list li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: var(--wp--preset--spacing--40);
}

/* Footer ------------------------------------------------------------- */

.mhsg-site-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.9rem;
}

.mhsg-site-footer a { color: inherit; }

.mhsg-fineprint {
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	max-width: 70ch;
}

/* Focus -------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Tables in article content scroll rather than break the page ---------- */

.wp-block-post-content table { display: block; overflow-x: auto; max-width: 100%; }

/* Print: strip everything except the words and the helpline numbers ---- */

@media print {
	.mhsg-site-header, .mhsg-site-footer, .mhsg-nav { display: none; }
	.mhsg-crisis-bar { background: none; color: #000; border: 1px solid #000; }
	.mhsg-crisis-bar a { color: #000; }
}

/* Photography -----------------------------------------------------------
   Images on this site are context, not decoration competing with the text.
   Bands are height-capped so a 1600x900 file never pushes the first
   paragraph below the fold on a laptop, and thumbnails stay small enough
   that a list of nine conditions still reads as a list. */

.mhsg-band img {
	width: 100%;
	height: auto;
	max-height: 24rem;
	object-fit: cover;
	border-radius: 3px;
}

.wp-block-image.alignfull.mhsg-band img {
	max-height: 20rem;
	border-radius: 0;
}

.mhsg-band { margin-block: var(--wp--preset--spacing--30); }

.mhsg-thumb img {
	width: 100%;
	height: auto;
	max-height: 13rem;
	object-fit: cover;
	border-radius: 3px;
}

.mhsg-thumb { margin-bottom: 0.75rem; }

@media (max-width: 600px) {
	.wp-block-image.alignfull.mhsg-band img { max-height: 12rem; }
	.mhsg-thumb img { max-height: 9rem; }
}

/* A reader who has turned motion and contrast down is often a reader in a
   bad state. Nothing here animates, and photographs stay muted. */

.mhsg-band img, .mhsg-thumb img { filter: saturate(0.92); }