/*
Theme Name: Crafto Child
Theme URI: https://www.urbanailabs.com/
Author: Urban AI Labs
Author URI: https://www.urbanailabs.com/
Description: BIPOC Mountain Collective child theme for Crafto (built by Urban AI Labs)
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.0
Text Domain: crafto-child
Template: crafto
*/

/* ---------------------------------------------------------------- page ground */
body { background-color: #1f1f1f; }

/* ---------------------------------------------------------------- header */
header .navbar-toggler .navbar-toggler-line { background-color: #fff; }
header .navbar-toggler { width: 28px; padding: 6px 0; }
@media (max-width: 991px) {
	/* Crafto paints the collapsed mobile menu white; keep it on the dark brand ground. */
	header .navbar-collapse { background-color: #0d0d0d; border-top: 1px solid rgba(255, 255, 255, .08); }
	header .navbar-collapse .navbar-nav > li > a.nav-link,
	header .navbar-collapse .navbar-nav > li > span.nav-link { color: #fff; }
	header .navbar-collapse .navbar-nav > li > a.nav-link.active,
	header .navbar-collapse .navbar-nav > li:hover > a.nav-link { color: #e0ae2a; }
}

/* ---------------------------------------------------------------- forms (Contact Form 7 on dark sections) */
.wpcf7 fieldset.hidden-fields-container { border: 0; margin: 0; padding: 0; min-width: 0; }
.bmc-form p { margin: 0; }
.bmc-form .bmc-field { margin-bottom: 16px; }
.bmc-form label { display: block; margin-bottom: 8px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .5px; }
.bmc-form input[type="email"],
.bmc-form input[type="text"] {
	width: 100%; height: 56px; padding: 0 24px;
	border: 1px solid rgba(255, 255, 255, .28); border-radius: 50px;
	background: rgba(255, 255, 255, .06); color: #fff; font-size: 16px;
}
.bmc-form input[type="email"]:focus,
.bmc-form input[type="text"]:focus { border-color: #e0ae2a; outline: 2px solid #e0ae2a; outline-offset: 2px; }
.bmc-form .bmc-consent label { display: flex; gap: 10px; align-items: flex-start; color: #dadada; font-weight: 500; line-height: 1.5; }
.bmc-form .bmc-consent input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #e0ae2a; flex: 0 0 auto; }
.bmc-form .wpcf7-list-item { margin: 0; }
.bmc-form .wpcf7-submit {
	height: 56px; padding: 0 40px; border: 0; border-radius: 50px;
	background: #e0ae2a; color: #191919; font-size: 14px; font-weight: 700;
	letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: background .2s;
}
.bmc-form .wpcf7-submit:hover,
.bmc-form .wpcf7-submit:focus-visible { background: #fff; color: #191919; }
.bmc-form .bmc-row { display: flex; gap: 16px; }
.bmc-form .bmc-row > .bmc-field { flex: 1 1 0; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; color: #fff; }
.wpcf7-not-valid-tip { margin-top: 6px; color: #ffb4a8; font-size: 13px; }
.bmc-center .wpcf7 { max-width: 560px; margin: 0 auto; }
.bmc-center .bmc-form .bmc-consent label { justify-content: center; }
.bmc-center .bmc-form .bmc-submit { text-align: center; }

@media (max-width: 575px) {
	.bmc-form .bmc-row { flex-direction: column; gap: 0; }
	.bmc-form .wpcf7-submit { width: 100%; }
}

/* ---------------------------------------------------------------- cards: buttons sit on the bottom edge */
.bmc-card-body > .elementor-widget-crafto-button:last-child,
.bmc-card-body > .e-con-inner > .elementor-widget-crafto-button:last-child { margin-top: auto; }

/* ---------------------------------------------------------------- media */
.bmc-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- FAQ accordion (/faq) */
/*
 * Native <details>/<summary>, generated by bmc/sitegen/build.py. It is focusable, toggles
 * on Enter and Space and is announced with its expanded state, with no JavaScript — and,
 * deliberately, without Bootstrap Collapse, which is the component the Crafto demo's
 * "optimize Bootstrap" setting drops and which already cost this build its phone menu.
 * The question is an <h3> inside the <summary> so the 17 questions are navigable by
 * heading, under the five <h2> section labels.
 */
.bmc-faq { display: flex; flex-direction: column; gap: 12px; }
.bmc-faq-item { background: #262626; border: 1px solid rgba(255, 255, 255, .10); }
.bmc-faq-item[open] { border-color: rgba(224, 174, 42, .55); }

.bmc-faq-q {
	display: flex; align-items: flex-start; gap: 20px;
	padding: 20px 24px; cursor: pointer; color: #fff;
	list-style: none; /* Firefox/Chrome disclosure triangle */
}
.bmc-faq-q::-webkit-details-marker { display: none; } /* Safari disclosure triangle */
.bmc-faq-q:hover { color: #e0ae2a; }
.bmc-faq-q:focus-visible { outline: 2px solid #e0ae2a; outline-offset: -2px; }
.bmc-faq-q h3 {
	margin: 0; flex: 1 1 auto; color: inherit;
	font-family: "Antonio", sans-serif; font-size: 21px; font-weight: 600;
	line-height: 1.3; letter-spacing: 0; text-transform: none;
}

/* The +/- is drawn from two gradients, so it needs no icon font and cannot go missing. */
.bmc-faq-q::after {
	content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 6px;
	background:
		linear-gradient(#e0ae2a, #e0ae2a) center / 16px 2px no-repeat,
		linear-gradient(#e0ae2a, #e0ae2a) center / 2px 16px no-repeat;
}
.bmc-faq-item[open] > .bmc-faq-q::after {
	background: linear-gradient(#e0ae2a, #e0ae2a) center / 16px 2px no-repeat;
}

.bmc-faq-a {
	padding: 0 24px 22px; color: #dadada;
	font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; line-height: 1.75;
}
.bmc-faq-a > :first-child { margin-top: 0; }
.bmc-faq-a > :last-child { margin-bottom: 0; }
.bmc-faq-a p { margin: 0 0 14px; }
.bmc-faq-a strong { color: #fff; font-weight: 700; }
.bmc-faq-a ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.bmc-faq-a li { margin: 0 0 6px; }
.bmc-faq-a a { color: #e0ae2a; text-decoration: underline; }

@media (max-width: 575px) {
	.bmc-faq-q { padding: 16px 18px; gap: 14px; }
	.bmc-faq-q h3 { font-size: 19px; }
	.bmc-faq-q::after { margin-top: 4px; }
	.bmc-faq-a { padding: 0 18px 18px; font-size: 16px; }
}

/* ---------------------------------------------------------------- accessibility */
a:focus-visible, button:focus-visible { outline: 2px solid #e0ae2a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.elementor-background-video-container { display: none; }
	/*
	 * Crafto hides every open .navbar-collapse 100ms after any tap outside .navbar-nav,
	 * and the toggle button is outside it. Bootstrap ignores that hide while its open
	 * transition runs, but reduced motion removes the transition, so for those visitors
	 * the phone menu opened and shut on the same tap. A short height transition keeps
	 * the menu usable and stays far below anything that reads as animation.
	 */
	header .navbar-collapse.collapsing { transition: height .2s ease !important; }
}