/* =============================================================================
   BOWestAfrica Form Design System
   -----------------------------------------------------------------------------
   Loaded only on pages that can contain a real submission form: Contact,
   Business Verification, Project Supervision, Project Management, Membership,
   and the shared Service Request page (see functions.php enqueue condition).

   As of v1.6.3, the six enquiry forms (Contact, Partnership, Business
   Verification, Project Supervision, Project Management, Membership Enquiry)
   are rendered natively by the theme itself (see inc/forms-engine.php) — there
   is no more third-party form plugin in the loop for them, so this file only
   needs to style plain HTML elements the theme controls directly. The one
   remaining shortcode-based slot on this page list is the pre-existing,
   unrelated Service Request page (`bowa_service_request_form_shortcode`,
   predates the v1.6.1/v1.6.3 forms work and is out of scope for this round —
   see INTEGRATION-REFERENCE.md §9) — its "form coming soon" fallback still
   uses the same generic .form-placeholder styling below.

   The compact footer newsletter form is styled separately in main.css, since
   the footer renders on every page and this stylesheet is intentionally not
   loaded site-wide.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Panel container
   ------------------------------------------------------------------------- */
.form-placeholder {
	border: 1px solid var(--bowa-border);
	border-radius: var(--bowa-radius-md);
	padding: 2rem;
	background: var(--bowa-white);
	box-shadow: var(--bowa-shadow-sm, 0 1px 3px rgba(10,47,99,0.06));
}

/* Empty/fallback ("form coming soon") state — used only by the legacy,
   out-of-scope Service Request page slot described above; every native
   BOWestAfrica form always has a real form, never this state. */
.form-placeholder--empty {
	border-style: dashed;
	box-shadow: none;
	background: var(--bowa-surface);
	text-align: center;
}
.form-placeholder__notice { padding: 1.5rem 1rem; color: var(--bowa-muted); }
.form-placeholder__notice .icon { width: 32px; height: 32px; margin: 0 auto 1rem; color: var(--bowa-light-blue); }
.form-placeholder__hint { font-size: 0.8rem; }
.form-placeholder--empty .btn { margin-top: 0.5rem; }

.bowa-form-intro { margin-bottom: 1.5rem; color: var(--bowa-muted); }
.bowa-form-intro:empty { display: none; }

/* -------------------------------------------------------------------------
   2. Native form fields
   ------------------------------------------------------------------------- */
.form-placeholder label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--bowa-navy);
	margin-bottom: 0.4rem;
}

.form-placeholder input[type="text"],
.form-placeholder input[type="email"],
.form-placeholder input[type="tel"],
.form-placeholder input[type="date"],
.form-placeholder select,
.form-placeholder textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--bowa-border);
	border-radius: var(--bowa-radius-sm);
	background: var(--bowa-white);
	color: var(--bowa-dark);
	font-size: 0.95rem;
	font-family: inherit;
	margin-bottom: 1.25rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-placeholder textarea { min-height: 140px; resize: vertical; }

.form-placeholder input::placeholder,
.form-placeholder textarea::placeholder { color: var(--bowa-muted); opacity: 1; }

.form-placeholder input:focus,
.form-placeholder select:focus,
.form-placeholder textarea:focus {
	outline: none;
	border-color: var(--bowa-light-blue);
	box-shadow: 0 0 0 3px var(--bowa-light-blue-50);
}

.bowa-field__required { color: var(--bowa-gold-dark, var(--bowa-gold)); margin-left: 0.15rem; }

/* Honeypot field — kept in the tab order's reach for real assistive tech
   users to skip cleanly (tabindex="-1" in markup) but placed off-screen
   rather than display:none, since some bots skip display:none fields but
   still fill visually-offscreen ones. */
.bowa-field--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

/* Submit button — matches .btn.btn--gold.btn--lg */
.form-placeholder button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	border: none;
	border-radius: var(--bowa-radius-pill, 999px);
	background: var(--bowa-gold);
	color: var(--bowa-dark);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	margin-top: 0.5rem;
}
.form-placeholder button[type="submit"]:hover {
	background: var(--bowa-gold-dark);
	transform: translateY(-1px);
	box-shadow: var(--bowa-shadow-md);
}
.form-placeholder button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* -------------------------------------------------------------------------
   3. Validation, success & error messaging
   ------------------------------------------------------------------------- */
.form-placeholder .bowa-field--error input,
.form-placeholder .bowa-field--error select,
.form-placeholder .bowa-field--error textarea {
	border-color: var(--bowa-expired);
	margin-bottom: 0.4rem;
}

.form-placeholder .bowa-field__error {
	color: var(--bowa-expired);
	font-size: 0.82rem;
	margin: 0 0 1.25rem;
	display: block;
}

/* General, non-field-specific error banner — used by Turnstile verification
   failures (added v1.6.7), which aren't tied to any single input the way
   bowa-field__error messages are. */
.form-placeholder .bowa-form-error {
	padding: 1rem 1.25rem;
	margin: 0 0 1.25rem;
	border-radius: var(--bowa-radius-sm);
	background: rgba(214,69,69,0.08);
	border: 1px solid var(--bowa-expired);
	color: var(--bowa-expired);
	font-size: 0.9rem;
	font-weight: 600;
}

/* Cloudflare Turnstile widget wrapper (added v1.6.7) — data-size="flexible"
   on the widget itself already prevents the fixed ~300px overflow risk;
   this just gives it the same field spacing as every other .bowa-field. */
.form-placeholder .bowa-field--turnstile {
	margin-bottom: 1.25rem;
}
.form-placeholder .bowa-field--turnstile .cf-turnstile {
	width: 100%;
}

.form-placeholder .bowa-form-success {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--bowa-radius-sm);
	background: rgba(28,138,92,0.08);
	border: 1px solid rgba(28,138,92,0.25);
	color: var(--bowa-success);
	font-weight: 600;
}
.form-placeholder .bowa-form-success .icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 0.1rem; }
.form-placeholder .bowa-form-success p { margin: 0; }

/* -------------------------------------------------------------------------
   4. Sticky-header anchor offset
   ------------------------------------------------------------------------- */
.bowa-form-section { scroll-margin-top: 96px; }

/* -------------------------------------------------------------------------
   5. Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.form-placeholder { padding: 1.5rem; }
	.form-placeholder button[type="submit"] { width: 100%; }
}

/* -------------------------------------------------------------------------
   6. Click-to-expand accordion (added v1.6.9)
   -----------------------------------------------------------------------------
   Pure presentation layer around bowa_render_form_block()'s output (see
   inc/forms-engine.php) — a compact branded trigger panel that expands the
   already-rendered form below it. Collapsed state is applied entirely via
   inline styles set by assets/js/forms-accordion.js, never in this
   stylesheet, so a visitor without JavaScript always sees every form fully
   open. Collapsing uses max-height/overflow rather than display:none, so a
   Cloudflare Turnstile widget already rendered inside a collapsed panel
   keeps a correct size and still works once expanded.
   ------------------------------------------------------------------------- */
.bowa-accordion {
	border: 1px solid var(--bowa-border);
	border-radius: var(--bowa-radius-md);
	background: var(--bowa-white);
	box-shadow: var(--bowa-shadow-sm, 0 1px 3px rgba(10,47,99,0.06));
	overflow: hidden;
}

.bowa-accordion__trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1.25rem 1.5rem;
	background: transparent;
	border: none;
	margin: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.bowa-accordion__trigger-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bowa-surface);
	color: var(--bowa-light-blue);
}
.bowa-accordion__trigger-icon svg { width: 20px; height: 20px; }

.bowa-accordion__trigger-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.bowa-accordion__trigger-title {
	font-weight: 700;
	color: var(--bowa-navy);
	font-size: 1.05rem;
}
.bowa-accordion__trigger-text {
	color: var(--bowa-muted);
	font-size: 0.88rem;
	overflow-wrap: anywhere;
}

.bowa-accordion__trigger-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.1rem;
	border-radius: var(--bowa-radius-pill, 999px);
	background: var(--bowa-gold);
	color: var(--bowa-dark);
	font-weight: 700;
	font-size: 0.85rem;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.bowa-accordion__trigger-cta svg {
	width: 15px;
	height: 15px;
	transition: transform 0.25s ease;
}
.bowa-accordion.is-open .bowa-accordion__trigger-cta svg { transform: rotate(180deg); }
.bowa-accordion__trigger:hover .bowa-accordion__trigger-cta { background: var(--bowa-gold-dark); }
.bowa-accordion__trigger:focus-visible {
	outline: 2px solid var(--bowa-light-blue);
	outline-offset: -2px;
	border-radius: var(--bowa-radius-md);
}

.bowa-accordion__panel {
	overflow: hidden;
	transition: max-height 0.32s ease;
}
.bowa-accordion__panel .form-placeholder {
	border: none;
	box-shadow: none;
	border-radius: 0;
	border-top: 1px solid var(--bowa-border);
	padding: 1.75rem 1.5rem 2rem;
}
.bowa-accordion__panel .bowa-form-intro {
	margin: 1rem 1.5rem 0;
}

@media (max-width: 640px) {
	.bowa-accordion__trigger { flex-wrap: wrap; padding: 1rem 1.25rem; }
	.bowa-accordion__trigger-cta { width: 100%; justify-content: center; order: 3; margin-top: 0.5rem; }
	.bowa-accordion__panel .form-placeholder { padding: 1.25rem 1rem 1.5rem; }
	.bowa-accordion__panel .bowa-form-intro { margin: 1rem 1rem 0; }
}

/* -------------------------------------------------------------------------
   7. Contact page grid wrapper (page-contact.php)
   -----------------------------------------------------------------------------
   page-contact.php wraps each of its two accordions (Contact, Partnership)
   in its own .form-placeholder for the pre-existing equal-height grid rule
   (`.contact-forms .contact-page__form .form-placeholder { height: 100%; }`
   above) — that selector, and the equal-height behavior, are unchanged. The
   new .bowa-form-slot class only neutralizes THIS wrapper's own visual box
   styling (border/shadow/padding), since the box is now drawn by
   .bowa-accordion itself; it never applies to the inner .form-placeholder
   used by every other form on the site.
   ------------------------------------------------------------------------- */
.bowa-form-slot {
	border: none;
	box-shadow: none;
	background: transparent;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.bowa-form-slot .bowa-accordion { display: flex; flex-direction: column; flex: 1 1 auto; }
.bowa-form-slot .bowa-accordion__panel { flex: 1 1 auto; }