/* ============================================================
   mohdshehri.com — live style overrides
   Loaded AFTER the theme's built-in CSS, so rules here win.
   The blog is fully styled even if this file never loads.
   ============================================================ */
:root { --live-css: active; }

/* Posts: true Helvetica look — Arabic falls back to Arial (Helvetica's
   metric twin with real Arabic), NOT Tajawal. Headings stay Amiri. */
.post-body, .post-body * {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.post-body h2, .post-body h3, .post-body h4,
.post-body h2 *, .post-body h3 *, .post-body h4 * {
  font-family: 'Amiri', 'Noto Naskh Arabic', Georgia, serif !important;
}

/* Kit (ConvertKit) subscribe form — match the theme's subscribe card */
.subscribe .formkit-form,
.subscribe .formkit-form[data-uid] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 460px !important;
  margin: 0 auto !important;
}
.subscribe .formkit-fields {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.subscribe .formkit-field { flex: 1 1 220px !important; margin: 0 !important; }
.subscribe .formkit-input {
  width: 100% !important;
  font-family: Tajawal, system-ui, sans-serif !important;
  font-size: 1rem !important;
  padding: 12px 16px !important;
  border: 1px solid #E7DBC8 !important;
  border-radius: 8px !important;
  background: #FBF6EE !important;
  color: #2C2622 !important;
}
.subscribe .formkit-input:focus { outline: none !important; border-color: #B25B3B !important; }
.subscribe .formkit-submit,
.subscribe .formkit-submit > span {
  font-family: Tajawal, system-ui, sans-serif !important;
  font-weight: 500 !important;
  background: #B25B3B !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.subscribe .formkit-submit > span { padding: 12px 30px !important; display: inline-block; }
.subscribe .formkit-submit:hover, .subscribe .formkit-submit:hover > span { background: #8C4227 !important; }
.subscribe .formkit-guarantee, .subscribe .formkit-powered-by-convertkit-container { opacity: .55; }
.subscribe .formkit-alert { font-family: Tajawal, sans-serif; }

/* Kit form: alerts + bits we handle ourselves (Kit's own <style> is stripped) */
.subscribe .formkit-alert { list-style: none; margin: 0 auto 14px; padding: 0; width: 100%; }
.subscribe .formkit-alert:empty { display: none; }
.subscribe .formkit-alert li { font-family: Tajawal, sans-serif; font-size: .92rem;
  padding: 10px 16px; border-radius: 8px; margin: 0 0 8px; }
.subscribe .formkit-alert-error li { background: #FDEDE7; border: 1px solid #B25B3B; color: #8C4227; }
.subscribe .formkit-alert-success li, .subscribe .formkit-alert.formkit-alert-success {
  background: #EFF5EC; border: 1px solid #7A9B6D; color: #4A6B3F;
  font-family: Tajawal, sans-serif; padding: 10px 16px; border-radius: 8px; }
.subscribe .formkit-spinner { display: none; }
.subscribe .formkit-submit[data-active] .formkit-spinner { display: inline-block; }
.subscribe form { margin: 0; }

/* subscribe card: enforce full width & centering regardless of context */
.subscribe-band { display: block; width: 100%; clear: both; }
.subscribe-band .subscribe { display: block; width: calc(100% - 44px); max-width: 42rem;
  margin: 0 auto; float: none; }
.subscribe .formkit-fields { width: 100%; }