/*
Theme Name: 澳門公教中心 (CCMacau)
Theme URI: https://centro-catolico.org.mo
Description: 澳門公教中心官方網站佈景主題。以 Twenty Twenty-Five 為基礎的區塊主題，所有頁面均可用 WordPress 內建區塊直接編輯。Block theme for the Catholic Centre of Macao, built as a child of Twenty Twenty-Five so every page stays editable with native WordPress blocks.
Author: Catholic Centre of Macao
Template: twentytwentyfive
Version: 1.0.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccmacau
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu, editor-style, featured-images, translation-ready
*/

/* -------------------------------------------------------------------------
   Only small refinements live here. Colours, fonts and spacing are all in
   theme.json so the client can change them from Appearance > Editor > Styles.
   ---------------------------------------------------------------------- */

/* Latin serif for headings, system CJK serif picks up the Chinese glyphs. */
:root {
	--ccm-rule: 2px;
}

/* A thin gold rule used as a section eyebrow. */
.ccm-eyebrow {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin-bottom: var(--wp--preset--spacing--20);
}

.ccm-eyebrow::after {
	content: "";
	display: block;
	width: 3rem;
	height: var(--ccm-rule);
	background: var(--wp--preset--color--accent);
	margin-top: 0.6em;
}

/* Centred variant for section headers that sit in the middle of the page. */
.has-text-align-center .ccm-eyebrow::after,
.ccm-eyebrow.is-centred::after {
	margin-left: auto;
	margin-right: auto;
}

/* Cards: a soft lift on hover, used by the quick-link and venue patterns. */
.ccm-card {
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ccm-card:hover,
.ccm-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(30, 28, 25, 0.13);
}

/* Make an entire card clickable via its heading link without losing focus
   outlines for keyboard users. */
.ccm-card a {
	text-decoration: none;
}

.ccm-card a:hover,
.ccm-card a:focus {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Timeline used on the About page. */
.ccm-timeline-item {
	position: relative;
	padding-left: 2.25rem;
}

.ccm-timeline-item::before {
	content: "";
	position: absolute;
	left: 0.55rem;
	top: 0.7rem;
	bottom: -2.5rem;
	width: var(--ccm-rule);
	background: var(--wp--preset--color--base-3);
}

.ccm-timeline-item:last-child::before {
	display: none;
}

.ccm-timeline-item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--base);
}

/* Numbered step markers on the Facilities page. */
.ccm-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	line-height: 1;
	flex: 0 0 auto;
}

/* Give cover blocks a gentle zoom so hero images feel alive but calm. */
.ccm-hero .wp-block-cover__image-background {
	transition: transform 12s ease-out;
}

.ccm-hero:hover .wp-block-cover__image-background {
	transform: scale(1.03);
}

/* Any image given a fixed aspect ratio is meant to fill its column, even when
   the source file is smaller than the slot (some archive photos are tiny). */
.wp-block-image img[style*="aspect-ratio"] {
	width: 100%;
	height: 100%;
}

/* Chinese text benefits from slightly looser lines than the Latin default. */
body {
	line-height: 1.85;
	text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.3;
	text-wrap: balance;
}

/* ---------------------------------------------------------------- Header */

.ccm-site-header {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid var(--wp--preset--color--base-3);
}

.ccm-header-bar {
	gap: var(--wp--preset--spacing--30);
}

.ccm-brand {
	gap: 0.9rem;
}

.ccm-brand .wp-block-site-logo img {
	display: block;
}

.ccm-brand-text {
	gap: 0.1rem;
}

.ccm-brand-sub {
	margin: 0;
	letter-spacing: 0.04em;
}

.ccm-header-nav {
	gap: var(--wp--preset--spacing--30);
}

/* TranslatePress renders its switcher as a small inline list. */
.ccm-lang-switch {
	font-size: var(--wp--preset--font-size--x-small);
}

.ccm-lang-switch .trp-language-switcher {
	margin: 0;
}

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

.ccm-site-footer a {
	color: var(--wp--preset--color--base-3);
	text-decoration: none;
}

.ccm-site-footer a:hover,
.ccm-site-footer a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ccm-footer-heading {
	margin-bottom: var(--wp--preset--spacing--20);
	letter-spacing: 0.02em;
}

.ccm-footer-logo img {
	/* the logo artwork is dark; lift it onto the dark footer */
	background: var(--wp--preset--color--base);
	padding: 0.6rem 0.9rem;
	border-radius: 4px;
}

.ccm-footer-rule {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
	border-color: rgba(227, 218, 203, 0.22);
}

.ccm-footer-base {
	gap: var(--wp--preset--spacing--20);
	opacity: 0.8;
}

.ccm-footer-base p {
	margin: 0;
}

.ccm-social .wp-social-link a {
	color: var(--wp--preset--color--base-3);
}

.ccm-social .wp-social-link:hover a {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------ Page heads */

.ccm-page-head > * {
	margin-top: 0;
}

.ccm-page-head .wp-block-post-title,
.ccm-page-head h1 {
	margin-bottom: 0.4em;
}

.ccm-page-head .wp-block-post-date {
	margin-top: 0.6em;
}

/* --------------------------------------------------------------- Sections */

/* Full-bleed image bands sit flush with the sections above and below. */
.ccm-band {
	margin-top: 0;
	margin-bottom: 0;
}

/* News grid cards keep their images flush to the card edge. */
.ccm-news-grid .ccm-card {
	overflow: hidden;
	border-radius: 6px;
}

.ccm-news-grid .wp-block-post-featured-image {
	margin-bottom: 0;
}

.ccm-news-grid .wp-block-post-featured-image img {
	border-radius: 0;
}

.ccm-news-grid .wp-block-post-title {
	margin: 0.2em 0;
}

.ccm-news-grid .wp-block-post-excerpt__excerpt {
	margin-bottom: 0.6em;
}

/* Quick-link and venue cards. */
.ccm-card {
	overflow: hidden;
	border-radius: 6px;
}

.ccm-card .wp-block-image {
	margin-bottom: 0;
}

.ccm-card .wp-block-image img {
	border-radius: 0;
	width: 100%;
	object-fit: cover;
}

/* A large decorative number used by the history section. */
.ccm-bignum {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 1;
	color: var(--wp--preset--color--base-3);
	margin: 0 0 0.2em;
}

/* Statement band: light text on a deep stone background. */
.ccm-statement p,
.ccm-statement h2,
.ccm-statement h3 {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

/* Contact detail tiles. */
.ccm-contact-tile {
	height: 100%;
	border-radius: 6px;
}

.ccm-contact-tile p {
	margin: 0.25em 0;
	overflow-wrap: anywhere;
}

/* Booking steps. */
.ccm-step {
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

.ccm-step p {
	margin: 0;
}

/* Lyrics and credit blocks in news posts read better tightened up. */
.ccm-lyrics p {
	margin: 0.35em 0;
}

/* -------------------------------------------------------------- Bilingual

   The Chinese pages carry a small English line under many headings, which is
   how bilingual signage reads in Macau. On the English site TranslatePress
   already renders that heading in English, so the extra line would repeat
   itself - hide it there. TranslatePress puts translatepress-<locale> on
   <body>. */

.translatepress-en_US .ccm-en-sub {
	display: none;
}

/* On dark bands the deep-gold eyebrow is too dim - use the brighter gold. */
.wp-block-cover .ccm-eyebrow,
.ccm-statement .ccm-eyebrow,
.ccm-site-footer .ccm-eyebrow {
	color: var(--wp--preset--color--accent);
}

/* ----------------------------------------------------------- Small screens */

@media (max-width: 781px) {
	/* Keep the brand and the menu button on one row instead of wrapping. */
	.ccm-header-bar {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
	}

	.ccm-brand {
		min-width: 0;
		flex: 1 1 auto;
		gap: 0.6rem;
	}

	.ccm-brand .wp-block-site-title {
		font-size: 1.0625rem;
	}

	.ccm-brand-sub {
		font-size: 0.6875rem;
	}

	.ccm-header-nav {
		flex: 0 0 auto;
		gap: 0.5rem;
	}

	/* TranslatePress renders a fairly wide pill - shrink it on phones. */
	.ccm-lang-switch .trp-language-switcher {
		font-size: 0.75rem;
	}

	.ccm-lang-switch .trp-language-item-name {
		display: none;
	}

	/* Two-up card rows read better stacked with a little more breathing room. */
	.ccm-step {
		gap: var(--wp--preset--spacing--20);
	}

	.ccm-timeline-item {
		padding-left: 1.75rem;
	}

	.ccm-timeline-item::before {
		bottom: -1.5rem;
	}
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
	.ccm-card,
	.ccm-hero .wp-block-cover__image-background {
		transition: none;
	}

	.ccm-card:hover,
	.ccm-card:focus-within,
	.ccm-hero:hover .wp-block-cover__image-background {
		transform: none;
	}
}