/* ============================================================
   HALAL SOJOURN — WordPress / FSE integration glue
   Bridges the design system CSS to block-theme markup and styles
   the Fluent Forms enquiry form to match the design tokens.
   ============================================================ */

/* FSE wrappers shouldn't impose width — our .container handles it */
.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > main { display: block; }

/* Generic pages (not hero-led) clear the fixed header */
.page-shell { padding-top: calc(var(--header-h) + 56px); padding-bottom: var(--s9); }
.page-shell h1 { margin-top: 0; }

/* Skip link */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 200; background: var(--emerald); color: var(--paper); padding: 10px 16px; border-radius: var(--r-sm); }

/* WP core image/caption inside editorial content */
.entry-content { max-width: 62ch; }
.entry-content > * { margin-block: 1.1em; }

/* ---------- Halal-difficulty badge ---------- */
.halal-badge { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-deep); background: rgba(184,146,79,0.12); border: 1px solid rgba(184,146,79,0.28); padding: 0.42em 0.85em; border-radius: var(--r-pill); }
.halal-badge svg { width: 14px; height: 14px; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 0; max-width: 760px; }
.faq-item { border-top: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-item__q { width: 100%; text-align: start; background: none; border: 0; padding: var(--s5) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.faq-item__q::after { content: "+"; font-family: var(--sans); font-size: 1.5rem; color: var(--gold); transition: transform 0.3s var(--ease); }
.faq-item.is-open .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.faq-item.is-open .faq-item__a { max-height: 400px; }
.faq-item__a p { margin: 0 0 var(--s5); color: var(--text-muted); line-height: 1.65; max-width: 60ch; }

/* ---------- Fluent Forms — styled to design tokens ---------- */
.fluentform .ff-el-group { margin-bottom: var(--s5); }
.fluentform .ff-el-input--label label,
.fluentform label.ff-el-form-control { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 0.5em; }
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="date"],
.fluentform select,
.fluentform textarea {
	font-family: var(--sans); font-size: 1rem; color: var(--text);
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
	padding: 0.85em 1em; width: 100%; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fluentform textarea { min-height: 120px; resize: vertical; }
.fluentform input:focus, .fluentform select:focus, .fluentform textarea:focus {
	outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(31,77,63,0.12);
}
[lang="ar"] .fluentform input, [lang="ar"] .fluentform select, [lang="ar"] .fluentform textarea { font-family: var(--ar-sans); }

/* FF buttons */
.fluentform .ff-btn-submit,
.fluentform .step_nav button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
	padding: 0.95em 1.9em; background: var(--emerald); color: var(--paper);
	border: 1px solid var(--emerald); border-radius: var(--r-sm); cursor: pointer;
	transition: transform 0.35s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.fluentform .ff-btn-submit:hover, .fluentform .step_nav button:hover { background: var(--emerald-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fluentform .step_nav .ff-btn-prev { background: transparent; color: var(--emerald); }

/* FF radio/checkbox option cards */
.fluentform .ff-el-form-check { border: 1px solid var(--line); border-radius: var(--r); padding: 0.85em 1.05em; background: var(--card); transition: border-color 0.25s var(--ease), background 0.25s var(--ease); margin-bottom: 8px; }
.fluentform .ff-el-form-check:hover { border-color: var(--gold-soft); }
.fluentform .ff-el-form-check input:checked + label,
.fluentform .ff-el-form-check.ff_item_selected { border-color: var(--emerald); }

/* FF multi-step progress bar -> emerald/gold */
.fluentform .ff-step-titles .ff-el-progress-bar,
.fluentform .ff_step_header .ff_progress_bar { background: linear-gradient(to right, var(--emerald), var(--gold)) !important; }
.fluentform .ff-el-progress { background: var(--line-soft); }

/* FF success message */
.fluentform .ff-message-success, .ff-message-success {
	background: var(--emerald-wash); border: 1px solid rgba(31,77,63,0.2);
	border-radius: var(--r); padding: var(--s6); color: var(--ink); font-size: 1.05rem;
}

/* Consent text smaller */
.fluentform .ff-el-group.ff-consent label { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }

/* Newsletter / generic inputs already covered by app.css .input */

/* ---------- Language switch (Polylang) in header ---------- */
.lang-switch a { text-decoration: none; }
.lang-switch a.lang-opt { display: inline-flex; }

/* Reveal safety: never hide if JS absent (handled by reveal-ready gate) */