/*
Theme Name: TCFA Theme
Theme URI: https://github.com/YOUR_ORG/tcfa-site
Author: TCFA Global
Author URI: https://tcfaglobal.com
Description: TCFA custom theme, child of Kentwood. Professional design for The Chinese Finance Association.
Template: kentwood
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.9
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: tcfa-theme
*/

/* ── CSS Custom Properties ───────────────────────── */

:root {
	/* Ease-out-expo — used for all transitions */
	--tcfa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	/* Outline button hover tint on light backgrounds */
	--tcfa-outline-hover-bg: rgba(107, 63, 160, 0.07);
}

/* ── Base Typography ─────────────────────────────── */

body {
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Optical sizing for display-scale serif headings */
.wp-block-heading,
h1, h2, h3, h4, h5, h6 {
	font-optical-sizing: auto;
	text-wrap: balance;
}

/* CJK: prevent awkward mid-word breaks in Chinese text */
.wp-block-post-content p,
.wp-block-paragraph {
	line-break: strict;
}

/* Tabular lining numerals for stats bar numbers */
.has-secondary-background-color .wp-block-column p {
	font-variant-numeric: tabular-nums lining-nums;
}

/* ── Headings on dark backgrounds ────────────────── */

.has-primary-background-color h1,
.has-primary-background-color h2,
.has-primary-background-color h3,
.has-primary-background-color h4,
.has-primary-background-color h5,
.has-primary-background-color h6,
.has-secondary-background-color h1,
.has-secondary-background-color h2,
.has-secondary-background-color h3 {
	color: var(--wp--preset--color--base);
}

/* ── TCFA logo on dark backgrounds ───────────────── */

.has-primary-background-color .wp-image-511 {
	filter: brightness(0) invert(1);
}

/* ── Separator refinement ────────────────────────── */

.wp-block-separator {
	opacity: 0.2;
}

/* Hero separator: stronger presence on dark background */
.has-primary-background-color .wp-block-separator {
	opacity: 0.45;
	max-width: 80px;
	margin-inline: auto;
}

/* Footer separator: slightly more visible on dark background */
#footer .wp-block-separator {
	opacity: 0.35;
}

/* ── Button refinements ──────────────────────────── */

.wp-block-button__link {
	transition: opacity 0.18s var(--tcfa-ease-out),
	            background-color 0.18s var(--tcfa-ease-out);
}

.wp-block-button__link:hover {
	opacity: 0.85;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.08);
	opacity: 1;
}

/* ── Navigation polish ───────────────────────────── */

.wp-block-navigation a {
	transition: opacity 0.15s var(--tcfa-ease-out);
}

.wp-block-navigation a:hover {
	opacity: 0.7;
}

/* ── Outline button: context-aware hover ─────────── */

/* On light backgrounds — lavender tint instead of invisible white */
.has-tertiary-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-base-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-surface-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--tcfa-outline-hover-bg);
	opacity: 1;
}

/* ── Home page section accent colors ─────────────── */

/* Partners / Media Partners / Past Conferences section headings → secondary */
#partners h3,
#news h2 {
	color: var(--wp--preset--color--secondary);
}

/* ── Scroll rhythm: anchor offset for sticky nav ─── */

/* Prevent sticky header from obscuring anchor-linked sections */
#about,
#agenda,
#news,
#partners,
#main-content {
	scroll-margin-top: 5rem;
}

/* ── Gallery: uniform logo sizing ────────────────── */

.wp-block-gallery.columns-4 .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5rem;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 6px;
}

.wp-block-gallery.columns-4 .wp-block-image img {
	max-height: 3.75rem;
	width: auto;
	object-fit: contain;
}

/* ── Headings: prevent bold-on-bold ──────────────── */

.wp-block-heading strong {
	font-weight: inherit;
}

/* ── Home page About section heading ─────────────── */

#about h2 {
	color: var(--wp--preset--color--primary);
}

/* ── Post title: stronger banner presence ────────── */

/* Post titles in page banners inherit text-wrap: balance from headings rule */
/* On dark backgrounds, post titles should be fully visible */
.has-primary-background-color .wp-block-post-title,
.has-secondary-background-color .wp-block-post-title {
	color: var(--wp--preset--color--base);
}

/* ── Post template cards ─────────────────────────── */

.wp-block-post-template .wp-block-post-featured-image img {
	border-radius: 6px;
}

/* ── Post content readability ────────────────────── */

/* Comfortable line length for body text */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	max-width: 72ch;
}

/* ── Text overflow hardening ─────────────────────── */

/* Break long URLs and strings (e.g. pasted links in posts) */
.wp-block-post-content {
	overflow-wrap: break-word;
}

/* Flex children: allow shrinking below content width */
.wp-block-columns > .wp-block-column {
	min-width: 0;
}

/* ── Inner page content: purple accents ──────────── */

/* h2 left accent bar */
.wp-block-post-content h2 {
	border-left: 2px solid var(--wp--preset--color--secondary);
	padding-left: 0.75rem;
}

/* Post date / meta in secondary color */
.wp-block-post-date,
.wp-block-post-date a {
	color: var(--wp--preset--color--secondary);
}

/* Blockquotes: purple left border */
.wp-block-post-content blockquote,
.wp-block-quote {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: 1.25rem;
	margin-left: 0;
	color: var(--wp--preset--color--contrast);
}

/* Archive post title hover */
.wp-block-post-title a:hover {
	color: var(--wp--preset--color--secondary);
}

/* ── Bylaws page ─────────────────────────────────── */

/* Bold-only paragraphs = section headings */
.tcfa-bylaws .wp-block-post-content p:has(> strong:only-child) {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Horizontal rule: styled as purple section divider */
.tcfa-bylaws .wp-block-post-content .wp-block-separator,
.tcfa-bylaws .wp-block-post-content hr {
	border-color: var(--wp--preset--color--secondary);
	opacity: 0.25;
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
}

/* ── Footer link styles ──────────────────────────── */

.wp-block-group.has-primary-background-color a {
	text-decoration: none;
}

.wp-block-group.has-primary-background-color a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ── Focus-visible: keyboard accessibility ─────────── */

*:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #784ca8);
	outline-offset: 2px;
	border-radius: 2px;
}

.has-primary-background-color *:focus-visible,
.has-secondary-background-color *:focus-visible,
.has-contrast-background-color *:focus-visible {
	outline-color: var(--wp--preset--color--base, #faf9fc);
}

.wp-block-button__link:focus-visible {
	outline-offset: 3px;
}

.wp-block-navigation a:focus-visible {
	outline-offset: 4px;
}

/* ── Skip link ─────────────────────────────────────── */

.skip-link {
	position: absolute;
	top: 0;
	left: 1rem;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--base, #faf9fc);
	color: var(--wp--preset--color--primary, #1a0f3c);
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 4px;
	text-decoration: none;
	transform: translateY(-120%);
	transition: transform 0.2s var(--tcfa-ease-out);
}

.skip-link:focus {
	transform: translateY(0.5rem);
}

/* ── Responsive ────────────────────────────────────── */

/* Medium tablet: 900px — stats bar and conference column adjustments */
@media (max-width: 900px) {
	/* Stats bar: stack the 45/55 columns at mid-tablet */
	.has-secondary-background-color .wp-block-columns {
		flex-direction: column;
	}

	/* Partners section: let logo rows wrap on mid-tablet */
	#partners .wp-block-group.alignwide {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* Tablet: 1024px */
@media (max-width: 1024px) {
	/* Reduce hero padding */
	.wp-block-cover .wp-block-cover__inner-container {
		padding-top: var(--wp--preset--spacing--60, 3rem);
		padding-bottom: var(--wp--preset--spacing--60, 3rem);
	}

	/* Sponsor gallery: 3 columns */
	.wp-block-gallery.columns-4 {
		columns: 3;
	}

	.wp-block-gallery.columns-4 .wp-block-image {
		min-height: 70px;
	}
}

/* Tablet-portrait: 768px */
@media (max-width: 768px) {
	/* Stack all multi-column layouts */
	.wp-block-columns {
		flex-direction: column !important;
	}

	.wp-block-column {
		flex-basis: 100% !important;
	}

	/* Reduce section padding */
	.wp-block-group.alignfull {
		padding-left: var(--wp--preset--spacing--40, 1rem) !important;
		padding-right: var(--wp--preset--spacing--40, 1rem) !important;
	}

	/* Hero: reduce vertical padding */
	.wp-block-cover {
		min-height: 70vh !important;
	}

	/* Sponsor gallery: 2 columns */
	.wp-block-gallery.columns-4 {
		columns: 2;
	}

	/* Footer: stack columns and center text */
	#footer .wp-block-columns {
		gap: var(--wp--preset--spacing--50, 2rem);
	}

	/* Speaker grid: 2 columns (targets explicitly 25%-width columns) */
	.wp-block-columns .wp-block-column[style*="flex-basis:25%"],
	.wp-block-columns .wp-block-column[style*="flex-basis: 25%"] {
		flex-basis: 48% !important;
	}

	/* Navigation: adjust for touch */
	.wp-block-navigation a {
		padding: 0.5rem 0;
	}
}

/* Mobile: 480px */
@media (max-width: 480px) {
	/* Hero: further reduce */
	.wp-block-cover {
		min-height: 60vh !important;
	}

	/* Heading sizes: clamp down on mobile */
	h1, .has-xx-large-font-size {
		font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem) !important;
	}

	h2, .has-x-large-font-size {
		font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem) !important;
	}

	/* Sponsor gallery: single column */
	.wp-block-gallery.columns-4 {
		columns: 1;
	}

	/* Stats bar: single column */
	.has-secondary-background-color .wp-block-column {
		flex-basis: 100% !important;
		margin-bottom: var(--wp--preset--spacing--40, 1rem);
	}

	/* Buttons: full width on mobile (main content only — not header/nav) */
	main .wp-block-buttons {
		width: 100%;
	}

	main .wp-block-button {
		width: 100%;
	}

	main .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	/* Increase touch targets */
	.wp-block-navigation a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Reduce gallery item padding */
	.wp-block-gallery.columns-4 .wp-block-image {
		min-height: 60px;
		padding: 0.5rem;
	}
}

/* ── Reduced motion ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wp-block-navigation a {
		transition: none;
	}
}