/*
Theme Name: Antara
Theme URI: https://example.org/antara
Author: Antara Music Awareness Foundation
Description: A block theme for Antara Music Awareness Foundation — Indian classical music, shared with all. Evening-concert palette, classical typography, and recolorable Hindustani motifs (tanpura, tabla, harmonium, vocalist, lotus, jaali).
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: antara
Tags: block-patterns, full-site-editing, one-column, custom-colors, editor-style
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--background); }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

.antara-section { padding-block: var(--wp--preset--spacing--70); }
.antara-section-tight { padding-block: var(--wp--preset--spacing--60); }

.antara-eyebrow {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-block-end: 0;
}
.antara-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--heading); }
.antara-lead-italic { font-size: var(--wp--preset--font-size--large); font-style: italic; color: var(--wp--preset--color--heading); max-width: 34ch; }
.antara-soft { color: var(--wp--preset--color--muted); }
.antara-measure { max-width: 52ch; }
.antara-center { text-align: center; }
.antara-center > * { margin-inline: auto; }

/* Outline buttons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--link);
	border: 1px solid currentColor;
	padding: calc(0.95rem - 1px) calc(2rem - 1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--link);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--link);
}
.has-band-background-color .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--band-ink); }

/* ---------- Header & footer ---------- */
.antara-header { padding-block: 1.75rem; }
.antara-header .wp-block-navigation a { padding-block: 0.6rem; text-decoration: none; }
.antara-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.antara-header .wp-block-navigation .current-menu-item > a,
.antara-header .wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--accent); }

/* Logos are recolored with masks so they follow the palette */
.antara-logo-wordmark,
.antara-logo-monogram { margin: 0; }
.antara-logo-wordmark { width: 176px; aspect-ratio: 859 / 295; }
.antara-logo-monogram { width: 60px; aspect-ratio: 180 / 185; flex: none; }
.antara-logo-wordmark,
.antara-logo-monogram {
	background-color: var(--wp--preset--color--heading);
	-webkit-mask: var(--antara-mask) center / contain no-repeat;
	mask: var(--antara-mask) center / contain no-repeat;
}
.antara-logo-wordmark { --antara-mask: url(assets/images/antara-wordmark.png); }
.antara-logo-monogram { --antara-mask: url(assets/images/antara-monogram.png); background-color: var(--wp--preset--color--accent); }
.antara-logo-wordmark img,
.antara-logo-monogram img { opacity: 0; width: 100%; height: 100%; display: block; }
.antara-logo-wordmark a { display: block; height: 100%; }

.antara-footer { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 25%, transparent); padding-block: 3rem; font-size: 1.05rem; color: var(--wp--preset--color--muted); }
.antara-footer p { margin: 0; }
.antara-footer .antara-footer-name { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; color: var(--wp--preset--color--heading); }
.antara-footer .wp-block-navigation { font-size: 0.875rem; letter-spacing: 0.1em; }
.antara-footer .wp-block-navigation a { padding-block: 0.6rem; }

/* ---------- Motifs (recolorable: set the block's background colour) ---------- */
[class*="is-style-motif-"] {
	width: var(--motif-w, 160px);
	max-width: 100%;
	aspect-ratio: var(--motif-ratio, 1);
	min-height: 0 !important;
	padding: 0 !important;
	margin-inline: var(--motif-margin, 0);
	-webkit-mask: var(--motif) center / contain no-repeat;
	mask: var(--motif) center / contain no-repeat;
}
[class*="is-style-motif-"]:not(.has-background) { background-color: var(--wp--preset--color--accent); }
[class*="is-style-motif-"] > * { display: none; }
.is-style-motif-tanpura   { --motif: url(assets/images/tanpura.svg);   --motif-ratio: 160 / 510; --motif-w: 60px; }
.is-style-motif-tabla     { --motif: url(assets/images/tabla.svg);     --motif-ratio: 360 / 260; }
.is-style-motif-harmonium { --motif: url(assets/images/harmonium.svg); --motif-ratio: 400 / 220; }
.is-style-motif-vocalist  { --motif: url(assets/images/vocalist.png);  --motif-ratio: 1044 / 984; }
.is-style-motif-lotus     { --motif: url(assets/images/lotus.svg);     --motif-ratio: 120 / 64; --motif-w: 84px; }
.is-style-motif-monogram  { --motif: url(assets/images/antara-monogram.png); --motif-ratio: 180 / 185; --motif-w: 60px; }

/* Jaali lattice texture behind any group with the class */
.antara-jaali { position: relative; isolation: isolate; }
.antara-jaali::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--wp--preset--color--accent);
	opacity: 0.12;
	-webkit-mask: url(assets/images/jaali.svg) 0 0 / 44px 44px repeat;
	mask: url(assets/images/jaali.svg) 0 0 / 44px 44px repeat;
}
.has-band-background-color.antara-jaali::before { background-color: var(--wp--preset--color--band-ink); opacity: 0.05; }

/* Lotus divider */
.antara-lotus-divider {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	--motif-w: 72px;
}
.antara-lotus-divider::before,
.antara-lotus-divider::after { content: ""; flex: 1; height: 1px; background: var(--wp--preset--color--accent); opacity: 0.5; }

/* ---------- Hero ---------- */
.antara-hero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70); }
.antara-hero-art {
	position: relative;
	aspect-ratio: 4 / 5;
	max-height: 620px;
	width: 100%;
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 300px 300px 18px 18px;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
}
.antara-hero-art::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 290px 290px 10px 10px;
	opacity: 0.45;
	pointer-events: none;
}
.antara-hero-art > .is-style-motif-tanpura { position: absolute; left: 5%; bottom: 7%; height: 64%; width: auto; }
.antara-hero-art > .is-style-motif-vocalist { position: absolute; right: 3%; bottom: 7%; width: 54%; }
.antara-hero-art > .antara-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 7%; background: var(--wp--preset--color--accent); opacity: 0.18; margin: 0; }

/* About hero art: harmonium, tanpura and tabla */
.antara-about-art {
	position: relative;
	height: 460px;
	width: 100%;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 240px 240px 16px 16px;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
}
.antara-about-art > .is-style-motif-tanpura { position: absolute; left: 9%; bottom: 7%; height: 80%; width: auto; }
.antara-about-art > .is-style-motif-harmonium { position: absolute; left: 44%; right: 7%; bottom: 7%; height: 24%; width: auto; }
.antara-about-art > .is-style-motif-tabla { position: absolute; left: 50%; right: 13%; bottom: 36%; height: 20%; width: auto; }

/* Board page decoration */
.antara-board-intro { position: relative; isolation: isolate; overflow: hidden; }
.antara-board-intro > .is-style-motif-tanpura { position: absolute; right: 8%; top: 24px; height: 420px; width: auto; opacity: 0.2; z-index: -1; margin: 0; }

/* Text on the contrasting band follows the band text colour */
.has-band-background-color :is(h1, h2, h3, h4, p) { color: inherit; }
.has-band-background-color a:where(:not(.wp-element-button)) { color: inherit; }
.antara-band-soft { opacity: 0.8; }
.antara-mission { font-family: var(--wp--preset--font-family--heading); font-style: italic; font-size: 1.75rem; line-height: 1.35; }

/* ---------- Cards ---------- */
.antara-card-arch {
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 200px 200px 14px 14px;
	padding: 2.5rem 1.75rem !important;
	text-align: center;
	--motif-w: 150px;
	--motif-margin: auto;
}
.antara-card-arch h3 { color: inherit; }
.antara-card-arch > :is(h3, p) { align-self: stretch; max-width: 100%; }
.antara-card-arch { min-width: 0; }
.antara-card-arch p { opacity: 0.85; }
.antara-card-arch [class*="is-style-motif-"] { height: 108px; width: 160px; }

.antara-card {
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	padding: 2.25rem !important;
	--motif-w: 120px;
}
.antara-card [class*="is-style-motif-"] { height: 80px; width: 120px; -webkit-mask-position: left center; mask-position: left center; }

/* ---------- Images ---------- */
.wp-block-image.is-style-arch img,
.wp-block-image.is-style-arch-soft img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 14px 14px; }
.wp-block-image.is-style-arch-soft img { border-radius: 14px; }
.wp-block-image.is-style-circle img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; outline: 1px solid var(--wp--preset--color--accent); outline-offset: 12px; }
.wp-block-image.is-style-circle { padding: 13px; max-width: 480px; margin-inline: auto; }

/* ---------- Stay connected ---------- */
.antara-stay { position: relative; overflow: hidden; isolation: isolate; }
.antara-stay > .antara-stay-deco { position: absolute; opacity: 0.18; z-index: -1; margin: 0; }
.antara-stay > .is-style-motif-tanpura.antara-stay-deco { left: 4%; bottom: -40px; height: 420px; width: auto; }
.antara-stay > .is-style-motif-tabla.antara-stay-deco { right: 4%; bottom: 24px; width: 240px; }
.antara-stay > .is-style-motif-vocalist.antara-stay-deco { right: 4%; bottom: 0; width: 300px; }
@media (max-width: 781px) { .antara-stay > .antara-stay-deco { opacity: 0.08; } }

.antara-signup { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; width: 100%; max-width: 580px; margin: 0.75rem auto 0; }
.antara-signup input[type="email"] {
	flex: 1 1 260px;
	min-height: 54px;
	padding: 0 1.5rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: 1.125rem;
}
.antara-signup input::placeholder { color: var(--wp--preset--color--muted); }
.antara-signup button { min-height: 54px; cursor: pointer; border: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- Board ---------- */
.antara-member { padding-top: var(--wp--preset--spacing--60); border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 25%, transparent); }
.antara-member:first-child { border-top: 0; padding-top: 0; }
.antara-member h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.antara-role { font-family: var(--wp--preset--font-family--label); color: var(--wp--preset--color--accent); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.25rem !important; }

/* Values */
.antara-values h3 { font-size: 1.7rem; }