/*
 * Only what theme.json can't express. Tokens come from theme.json custom properties.
 */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
	border-radius: 4px;
}
:where(.is-style-section-navy, .is-style-section-deep) :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--gold-light);
}

.screen-reader-text:not(:focus) {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	width: 1px; word-wrap: normal !important;
}

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: background-color .15s ease, color .15s ease; }
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(:hover) {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
	padding: calc(0.85em - 2px) calc(1.6em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold-light);
	border-color: var(--wp--preset--color--gold-light);
	color: var(--wp--preset--color--navy);
}
/* Make buttons comfortably tappable on phones. */
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Eyebrow / labels ---------- */
.is-style-eyebrow, .sma-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gold-text);
}
:where(.is-style-section-navy, .is-style-section-deep) .sma-eyebrow { color: var(--wp--preset--color--gold-light); }

/* ---------- Bismillah ---------- */
.sma-bismillah {
	font-family: var(--wp--preset--font-family--amiri);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.6;
	color: var(--wp--preset--color--gold-light);
}

/* ---------- Header ---------- */
.sma-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .sma-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sma-header { top: 0; } }
.sma-header .wp-block-site-logo img { width: 88px; height: auto; mix-blend-mode: multiply; } /* hides the JPG's off-white box until the SVG arrives */
@media (max-width: 599px) { .sma-header .wp-block-site-logo img { width: 68px; } }
.sma-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}
.sma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--x-large);
}
/* Keep the Donate button visible next to the hamburger on small screens. */
@media (max-width: 599px) {
	.sma-header .sma-header__donate .wp-block-button__link { padding: 0.6em 1.1em; font-size: 0.95rem; }
}

/* ---------- Cards & tiles ---------- */
.is-style-card { height: 100%; }
.wp-block-column > .is-style-card { height: 100%; }
.sma-tile-link a { text-decoration: none; font-weight: 700; }
.sma-tile-link a::after { content: " →"; }

.wp-block-columns.sma-equal > .wp-block-column { display: flex; flex-direction: column; }
.wp-block-columns.sma-equal > .wp-block-column > * { flex: 1; }
.sma-push-bottom { margin-top: auto !important; }

/* ---------- Footer ---------- */
.sma-footer a { text-decoration: none; }
.sma-footer a:hover { text-decoration: underline; }
.sma-footer .wp-block-social-links .wp-social-link { background: transparent; color: var(--wp--preset--color--gold-light); border: 1px solid rgba(242, 195, 91, .5); }

/* ---------- FAQ (core/details) ---------- */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	list-style-position: outside;
	padding-inline-start: 0.25rem;
}
.wp-block-details[open] summary { margin-bottom: 0.5rem; }

/* ---------- Brand kit ---------- */
.sma-swatch-chip { border-radius: var(--wp--custom--radius--small); min-height: 96px; border: 1px solid var(--wp--preset--color--border); }
.sma-logo-tile { border-radius: var(--wp--custom--radius--card); border: 1px solid var(--wp--preset--color--border); }
.sma-logo-tile img { max-height: 180px; width: auto; margin-inline: auto; display: block; }
.sma-copy-btn {
	margin-inline-start: 0.5rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	border: 1px solid var(--wp--preset--color--input-border);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.2em 0.8em;
	cursor: pointer;
	min-height: 32px;
}
.sma-copy-btn:hover { background: var(--wp--preset--color--soft); }
.sma-type-sample { overflow-wrap: anywhere; }

@media (max-width: 599px) {
	.sma-hide-mobile { display: none !important; }
}
.sma-footer .wp-block-list { list-style: none; }
.sma-footer .wp-block-list li + li { margin-top: 0.35rem; }

/* Sections butt up against each other; spacing comes from section padding. */
.wp-site-blocks > * { margin-block-start: 0; }
.page-template-page-landing .wp-block-post-content > .alignfull { margin-block-start: 0; }

.wp-block-group.is-style-card { display: flex; flex-direction: column; }
.sma-logo-tile { display: grid; place-items: center; min-height: 220px; }
.sma-monthly .wp-block-heading { color: var(--wp--preset--color--navy); }
.sma-bismillah { text-align: left; }

/* ---------- Emphasized button: metallic gold like the logo, slow soft sheen ----------
   Pick it in the editor: select a Button → Styles → "Emphasized".
   Also used by the hero quick-donate button (.sma-emphasized).
   Every gradient stop keeps navy text ≥ 4.75:1. Use sparingly: one per screen. */
.wp-block-button.is-style-emphasized > .wp-block-button__link,
.sma-emphasized {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--wp--preset--color--navy);
	background: linear-gradient(110deg, #B8862A 0%, #D9AA45 22%, #F6D98A 45%, #E2B54E 60%, #BE8D2C 82%, #B8862A 100%);
	background-size: 220% 100%;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(120, 82, 18, .35), 0 6px 18px rgba(201, 150, 43, .35);
	animation: sma-gold-drift 7s ease-in-out infinite;
}
.wp-block-button.is-style-emphasized > .wp-block-button__link::after,
.sma-emphasized::after {
	content: "";
	position: absolute;
	inset: -20% auto -20% -40%;
	width: 35%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg) translateX(-150%);
	animation: sma-gold-sheen 4.5s ease-in-out 1s infinite;
	pointer-events: none;
	z-index: -1;
}
.wp-block-button.is-style-emphasized > .wp-block-button__link:hover,
.sma-emphasized:hover {
	color: var(--wp--preset--color--navy);
	background: linear-gradient(110deg, #B8862A 0%, #D9AA45 22%, #F6D98A 45%, #E2B54E 60%, #BE8D2C 82%, #B8862A 100%);
	background-size: 220% 100%;
	filter: brightness(1.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(120, 82, 18, .35), 0 8px 24px rgba(201, 150, 43, .5);
}
@keyframes sma-gold-drift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
@keyframes sma-gold-sheen {
	0% { transform: skewX(-20deg) translateX(-150%); }
	45%, 100% { transform: skewX(-20deg) translateX(520%); }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-emphasized > .wp-block-button__link,
	.wp-block-button.is-style-emphasized > .wp-block-button__link::after,
	.sma-emphasized, .sma-emphasized::after { animation: none !important; }
}
.sma-events + .wp-block-heading { margin-top: var(--wp--preset--spacing--60); }
/* Long email addresses wrap instead of overflowing narrow columns. */
.sma-footer a[href^="mailto:"], .sma-break a[href^="mailto:"] { overflow-wrap: anywhere; }