/*
Theme Name: BTC
Theme URI: https://brisbanetamilchurch.org/
Description: Block theme for Citipointe Tamil Church (Tamil Service of Citipointe Church Brisbane West). Warm heritage design, bilingual English/Tamil. Pairs with the BTC Core plugin.
Author: Citipointe Tamil Church
Version: 0.2.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: btc
*/

/* Tamil script runs taller and longer than Latin: give it more line-height and step headings down. */
:lang(ta) body, body:lang(ta) { line-height: 1.85; }
:lang(ta) :is(h1, h2, h3, .wp-block-post-title) { line-height: 1.4; letter-spacing: 0; }
:lang(ta) :is(h1, .wp-block-post-title) { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); }
:lang(ta) h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.75rem); }
:lang(ta) .has-display-font-size { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem) !important; }

/* Header */
.btc-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .btc-header { top: var(--wp-admin--admin-bar--height, 32px); }
.btc-header .wp-block-site-title { white-space: nowrap; }
.btc-logo { line-height: 0; }
.btc-logo img { height: auto; }
.btc-logo--tint a { display: block; background: var(--wp--preset--color--primary); -webkit-mask: var(--btc-logo) center / contain no-repeat; mask: var(--btc-logo) center / contain no-repeat; }
.btc-logo--tint img { opacity: 0; }
@media (max-width: 599px) {
	.btc-header .wp-block-site-title { font-size: .95rem; }
	.btc-header .btc-logo img { width: 115px !important; }
	.btc-header .wp-block-group.is-layout-flex { gap: .6rem; }
	.btc-header .btc-lang { font-size: .8rem; }
	.btc-header .btc-lang__item { padding: .4em .55em; min-width: 0; }
}
@media (max-width: 359px) { .btc-header .wp-block-site-title { font-size: .82rem; } .btc-header .wp-block-group.is-layout-flex { gap: .4rem; } }

@media (max-width: 599px) {
	.btc-strip__where { display: none; }
}

/* Tamil menu labels are long: use the hamburger menu up to 1100px instead of core's 600px. */
@media (min-width: 600px) and (max-width: 1099px) {
	.btc-nav-primary .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.btc-nav-primary .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.btc-nav-primary .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); }
.btc-nav-primary .is-menu-open .wp-block-navigation__responsive-container-content { font-size: 1.1rem; align-items: flex-start; padding: 1rem 1.5rem; }
.btc-nav-primary .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation__submenu-container) { align-items: flex-start !important; justify-content: flex-start !important; }
.btc-nav-primary .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { font-weight: 700; color: var(--wp--preset--color--primary); }
@media (min-width: 1100px) { :lang(ta) .btc-nav-primary { font-size: .82rem; } }

/* "Give" menu item rendered as a rust pill */
.wp-block-navigation .btc-give > a {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white) !important;
	border-radius: var(--wp--custom--radius--pill);
	padding: .5em 1.1em !important;
}
.wp-block-navigation .btc-give > a:hover { background: var(--wp--preset--color--accent-dark); color: var(--wp--preset--color--white) !important; }

/* Kolam-dot motif: block style "Kolam border" on groups/covers */
.is-style-kolam { position: relative; }
.is-style-kolam::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 14px; pointer-events: none;
	background-image: radial-gradient(circle, var(--wp--preset--color--gold) 1.6px, transparent 2px);
	background-size: 18px 14px; background-position: center; opacity: .55;
}
.is-style-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--40);
}
.is-style-eyebrow { font-size: .8rem !important; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--primary); margin-bottom: .25rem !important; }

/* Gentle reveal on scroll; disabled for reduced motion and when JS hasn't run */
@media (prefers-reduced-motion: no-preference) {
	.btc-js .btc-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
	.btc-js .btc-reveal.is-visible { opacity: 1; transform: none; }
}

:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.skip-link:focus { background: var(--wp--preset--color--base); }

/* Fluent Forms: match the theme's buttons, fields and Tamil-friendly sizing */
.fluentform .ff-el-form-control { border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent); border-radius: var(--wp--custom--radius--small); background: #fff; color: var(--wp--preset--color--contrast); font: inherit; }
.fluentform .ff-el-input--label label { font-weight: 600; }
.fluentform .ff-btn.ff-btn-submit { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); border: 0; border-radius: var(--wp--custom--radius--pill); font: inherit; font-weight: 700; padding: .8em 1.6em; }
.fluentform .ff-btn.ff-btn-submit:hover { background: var(--wp--preset--color--primary-dark); opacity: 1; }
.fluentform .btc-form-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.ff-message-success { border: 0; border-left: 4px solid var(--wp--preset--color--gold); background: var(--wp--preset--color--base); box-shadow: none; }

/* Dark sections (deep wine / maroon): light eyebrows and headings */
.btc-dark .is-style-eyebrow { color: var(--wp--preset--color--accent-soft); }
.btc-dark :is(h2, h3) { color: var(--wp--preset--color--white); }
.btc-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--accent-dark); }
/* Rust band (CTA): cream eyebrow, cream button that turns white on hover */
:is(.btc-band-accent, .btc-dark.btc-band-accent) .is-style-eyebrow { color: var(--wp--preset--color--base); }
:is(.btc-band-accent, .btc-dark.btc-band-accent) .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--accent-dark); }


/* Hero social icons sit just under the buttons */
.wp-block-cover .btc-social-wrap { margin-top: 1.25rem; color: var(--wp--preset--color--white); }
.btc-dark .btc-yt > p { text-align: center; }