/*
Theme Name: BCA-USA
Theme URI: https://bca-usa.org
Author: Bali Cultural Association USA
Author URI: https://bca-usa.org
Description: Standalone BCA-USA theme (no Bricks). Renders the shared header and footer blocks on every page and wraps plain pages in the design, so a new page looks like the site with nothing pasted in. The design system itself lives in the editable "BCA header (new design)" block.
Version: 2.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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bca-usa
Tags: one-column, block-styles, wide-blocks, accessibility-ready
*/

/* Intentionally almost empty. The design system is served from the synced
   header block so that editors can change it without touching theme files.
   Only a bare reset lives here. */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }

/* Title of a plain page (one written in the ordinary block editor, with no hand-built hero).
   Ported from the bca-usa-child theme. Font, weight and ink still come from `.bca h1`. */
.bca-plain .bca-plain-title {
	font-size: clamp(30px, 3.6vw, 44px);
	margin: 0 0 28px;
}

/* =====================================================================================
   LEGACY PARITY — keeps every page pixel-identical to how it looked under Bricks.

   The design system (reusable block 2149) was tuned while Bricks' own stylesheets were
   loaded, and it silently relied on a few of their rules. The one that mattered most:
   Bricks gives every image block `margin-block: 1em`, at a specificity (0,6,0) that beats
   the design's `.bca figure{margin:0}` — so card images had 16px above and below. Without
   it, every card row on Home, Projects and Leadership came out 32px shorter.

   Below are ONLY the Bricks rules that target bare HTML elements or core WordPress block
   classes (wp-*, has-*, is-*, align*); nothing Bricks-component-specific. Layer structure is
   preserved exactly, so cascade order is the same as it was. Verified on 2026-09-11: with
   this CSS, 492 content elements across Home, About, Join, Chapters, Projects, Contact and
   Leadership measured identical to production (Bricks) — heights, margins, line-heights,
   font sizes and paddings. The --bricks-* variable names are kept because rules use them.
   ===================================================================================== */

.aligncenter { display: block; margin: 0.5em auto; }
.alignright { float: right; margin: 0.5em 0 0.5em 1em; }
.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }
a img.alignright { float: right; margin: 0.5em 0 0.5em 1em; }
a img.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignleft, .wp-caption.alignnone { margin: 0.5em 1em 0.5em 0; }
.wp-caption.alignright { margin: 0.5em 0 0.5em 1em; }
.wp-caption img { border: 0; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
.wp-block-embed, .wp-block-image:not(.alignleft):not(.aligncenter):not(.alignright):not(.alignwide):not(.alignfull), .wp-block-table, .wp-block-video { margin-block: 1em; }
.wp-block-calendar { width: 100%; }
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.wp-block-image figure { width: auto; }
.alignfull, .wp-block-categories-list.alignfull, .wp-block-image.alignfull { left: 50%; margin-left: -50vw; margin-right: -50vw; max-width: calc(-0.5em + 100vw); position: relative; right: 50%; width: 100vw; }
.alignwide, .wp-block-image.alignwide { margin-left: -10%; max-width: 120%; position: relative; width: 120%; }
@media (max-width: 1320px) { .alignwide, .wp-block-image.alignwide { margin-left: auto; width: 100%; } }
.aligncenter img { margin-left: auto; margin-right: auto; }
.aligncenter a, .aligncenter img { display: block; }

@layer bricks {
	:root { --bricks-vh: 1vh; --bricks-transition: all 0.2s; --bricks-color-primary: #ffd64f; --bricks-color-secondary: #fc5778; --bricks-text-dark: #212121; --bricks-text-medium: #616161; --bricks-text-light: #9e9e9e; --bricks-text-info: #00b0f4; --bricks-text-success: #11b76b; --bricks-text-warning: #ffa100; --bricks-text-danger: #fa4362; --bricks-bg-info: #e5f3ff; --bricks-bg-success: #e6f6ed; --bricks-bg-warning: #fff2d7; --bricks-bg-danger: #ffe6ec; --bricks-bg-dark: #263238; --bricks-bg-light: #f5f6f7; --bricks-border-color: #dddedf; --bricks-border-radius: 4px; --bricks-tooltip-bg: #23282d; --bricks-tooltip-text: #eaecef; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: auto; line-height: 1.15; }
	body { margin: 0; }
	article, aside, figcaption, figure, footer, header, main, nav, section { display: block; }
	figure { margin: 1em 40px; }
	hr { box-sizing: content-box; height: 0; overflow: visible; }
	abbr[title] { border-bottom: none; text-decoration: underline dotted; }
	code, kbd, samp { font-family: monospace; font-size: 1em; }
	dfn { font-style: italic; }
	mark { background-color: #ff0; color: #000; }
	small { font-size: 80%; }
	sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
	sub { bottom: -0.25em; }
	sup { top: -0.5em; }
	audio, video { display: inline-block; }
	audio:not([controls]) { display: none; height: 0; }
	img { border-style: none; }
	button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
	button, input { overflow: visible; }
	button, select { text-transform: none; }
	[type="reset"], [type="submit"], button, html [type="button"] { appearance: button; }
	fieldset { padding: 0.35em 0.75em 0.625em; }
	legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
	progress { display: inline-block; vertical-align: baseline; }
	textarea { overflow: auto; }
	[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
	[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
	[type="search"] { appearance: textfield; outline-offset: -2px; }
	[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { appearance: none; }
	::-webkit-file-upload-button { appearance: button; font: inherit; }
	details, menu { display: block; }
	summary { display: list-item; }
	canvas { display: inline-block; }
	[hidden], template { display: none; }
	svg:not([width]) { min-width: 1em; }
	svg:not([height]) { min-height: 1em; }
	html { font-size: 62.5%; }
	*, ::after, ::before, html { box-sizing: border-box; }
	::after, ::before { outline: none; }
	* { border-color: var(--bricks-border-color); }
	body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #fff; background-position: 50%; color: #363636; font-family: -apple-system, "system-ui", "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 15px; line-height: 1.7; }
	:where(a) { border-color: currentcolor; color: currentcolor; cursor: pointer; text-decoration: none; }
	h1, h2, h3, h4, h5, h6 { margin: 0; text-rendering: optimizelegibility; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: currentcolor; }
	h1 { font-size: 2.4em; }
	h1, h2 { line-height: 1.4; }
	h2 { font-size: 2.1em; }
	h3 { font-size: 1.8em; }
	h3, h4 { line-height: 1.4; }
	h4 { font-size: 1.6em; }
	h5 { font-size: 1.3em; }
	h5, h6 { line-height: 1.4; }
	h6 { font-size: 1.1em; }
	:where(p) { margin-block: 0 1.2em; }
	:where(p:last-of-type) { margin-block-end: 0; }
	:where(p:last-of-type) + h1, :where(p:last-of-type) + h2, :where(p:last-of-type) + h3, :where(p:last-of-type) + h4, :where(p:last-of-type) + h5, :where(p:last-of-type) + h6 { margin-block: 1.2em 0; }
	figcaption { color: var(--bricks-text-light); font-size: 0.9em; margin: 1em 0; text-align: center; }
	img { height: auto; max-width: 100%; outline: none; vertical-align: middle; }
	audio, iframe { max-width: 100%; }
	button { border: none; cursor: pointer; outline: none; padding: 0; }
	blockquote { border-left-style: solid; border-left-width: 4px; font-family: georgia, "Times New Roman", times, serif; font-size: 1.3em; margin: 15px 0; padding: 0 0 0 30px; position: relative; }
	blockquote cite { display: block; font-size: 0.8em; font-style: normal; margin-top: 0.5em; opacity: 0.5; text-transform: uppercase; }
	hr { border: none; border-top: 1px solid var(--bricks-border-color); margin: 1em 0; }
	pre { background-color: var(--bricks-bg-light); color: #fc1f49; font-family: monospace; font-size: 13px; margin: 0; padding: 10px 15px; white-space: pre-wrap; }
	table { width: 100%; }
	label { color: var(--bricks-text-light); display: block; font-weight: 400; margin-bottom: 5px; }
	button, input, optgroup, select, textarea { font-family: inherit; text-align: inherit; }
	input[type="range"] { border: none; height: auto; line-height: 1; padding: 0; }
	input[type="button"], input[type="checkbox"], input[type="radio"] { width: auto; }
	input[type="checkbox"], input[type="radio"], input[type="submit"], select { cursor: pointer; }
	select { appearance: none; background-color: transparent; background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; border-radius: 0; }
	textarea { height: auto; min-height: 90px; padding: 10px 12px; line-height: inherit !important; }
	::placeholder { color: var(--bricks-text-light); }
}

/* Bricks "Theme Styles" heading scale (unlayered, as it was). rem values converted to px
   at Bricks' 10px root so they no longer depend on the root size. Fonts and colours from
   that block are deliberately NOT carried over — the design system sets its own. */
body { font-size: 16px; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 400; }
h1 { font-size: clamp(35px, 32.14px + 1.273vw, 42px); }
h2 { font-size: clamp(30px, 27.95px + 0.909vw, 35px); }
h3 { font-size: 25px; }
h4 { font-size: clamp(22px, 19.95px + 0.909vw, 27px); }
h5 { font-size: clamp(19px, 17.77px + 0.545vw, 22px); }
h6 { font-size: clamp(16px, 14.77px + 0.545vw, 19px); }