.elementor-14347 .elementor-element.elementor-element-512510bb{--display:flex;}/* Start custom CSS for text-editor, class: .elementor-element-afa473b *//* 🚀 Modern Article Styles - WP Scoped (Final Consolidated)
   Scope: .modern-article-wrapper
   Paste into: Appearance > Customize > Additional CSS
*/

/* =========================
   1) Core + Variables
========================= */
.modern-article-wrapper {
  /* Palette */
  --ma-primary: #3b82f6;
  --ma-primary-dark: #1e40af;
  --ma-secondary: #0f172a;
  --ma-accent: #f59e0b;

  --ma-bg-light: #f8fafc;
  --ma-bg-white: #ffffff;
  --ma-bg-bio: #eff6ff;

  --ma-text-main: #334155;
  --ma-text-muted: #64748b;
  --ma-border: #e2e8f0;

  /* Layout */
  --ma-radius: 16px;
  --ma-spacing-md: 1.5rem;
  --ma-spacing-lg: 2.5rem;
  --ma-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05);

  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  line-height: 1.8;
  color: var(--ma-text-main);
  direction: rtl;
  text-align: justify;
  font-size: 16px;

  width: 100%;
  max-width: 100%;
}

.modern-article-wrapper *,
.modern-article-wrapper *::before,
.modern-article-wrapper *::after {
  box-sizing: border-box;
}

/* Media responsiveness */
.modern-article-wrapper :where(img, video, iframe) {
  max-width: 100% !important;
  height: auto !important;
}

.modern-article-wrapper :where(figure) {
  margin: 1.25rem 0;
  max-width: 100%;
}

.modern-article-wrapper :where(.wp-caption, .wp-block-image) {
  max-width: 100%;
}

.modern-article-wrapper :where(.wp-block-image img) {
  border-radius: 12px;
}

/* Links */
.modern-article-wrapper a {
  color: var(--ma-primary-dark);
  text-decoration: none;
  border-bottom: 1px dashed rgba(59, 130, 246, .35);
}

.modern-article-wrapper a:hover {
  border-bottom-style: solid;
}

/* =========================
   2) Typography
========================= */
.modern-article-wrapper :where(h1, h2, h3, h4) {
  line-height: 1.4;
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 800;
}

.modern-article-wrapper h1 {
  font-size: 26px !important;
  color: var(--ma-primary-dark);
  padding-bottom: 15px;
  margin-bottom: 2rem;
  border-bottom: 3px solid var(--ma-accent);
  display: inline-block;
  max-width: 100%;
}

.modern-article-wrapper h2 {
  font-size: 22px !important;
  color: var(--ma-secondary);
  padding-right: 15px;
  border-right: 5px solid var(--ma-accent);
  background: linear-gradient(to left, rgba(245, 158, 11, .08), transparent);
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 4px;
}

.modern-article-wrapper :where(h3, h4) {
  font-size: 19px !important;
  color: var(--ma-primary-dark);
  padding-right: 12px;
  border-right: 4px solid var(--ma-primary);
}

.modern-article-wrapper p {
  margin: 0 0 1.5rem 0;
}

.modern-article-wrapper ul,
.modern-article-wrapper ol {
  padding-right: 25px;
  margin: 0 0 1.5rem 0;
}

.modern-article-wrapper li {
  margin-bottom: .5rem;
  padding-left: .5rem;
}

/* =========================
   3) Abstract Box
========================= */
.modern-article-wrapper .ma-abstract {
  background-color: var(--ma-bg-bio);
  border-right: 5px solid var(--ma-primary);
  padding: var(--ma-spacing-md);
  border-radius: var(--ma-radius);
  margin: 0 0 var(--ma-spacing-lg) 0;
  box-shadow: var(--ma-shadow);
}

.modern-article-wrapper .ma-abstract :where(h2, h3) {
  color: var(--ma-primary-dark);
  margin-top: 0 !important;
  border-right: none !important;
  padding-right: 0 !important;
  background: none !important;
  font-size: 20px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 111.svg icon */
.modern-article-wrapper .ma-abstract :where(h2, h3)::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url('https://sepehrbar.com/wp-content/uploads/2025/12/111.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =========================
   4) Branding Box (Fully Responsive + Compact)
========================= */
.modern-article-wrapper .ma-branding {
  width: 100%;
  max-width: 860px;
  margin: var(--ma-spacing-lg) auto;
  padding: clamp(14px, 2vw, 22px);

  border-radius: var(--ma-radius);
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  color: #fff;

  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 18px 35px -24px rgba(2, 6, 23, .65);

  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
}

.modern-article-wrapper .ma-brand-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);

  background-image: url("https://sepehrbar.com/wp-content/uploads/2025/12/tik.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px;
  flex-shrink: 0;
}

.modern-article-wrapper .ma-branding :where(h2, h3, h4) {
  margin: 0 0 .3rem 0 !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;

  font-size: clamp(15px, 1.7vw, 18px) !important;
  font-weight: 900 !important;
  color: var(--ma-accent) !important;
  line-height: 1.4;
}

.modern-article-wrapper .ma-branding p {
  margin: 0 !important;
  color: #cbd5e1;
  font-size: 13.5px;
  line-height: 1.85;
}

.modern-article-wrapper .ma-branding :where(a) {
  border-bottom: none !important;
  text-decoration: none !important;
}

.modern-article-wrapper .ma-branding .ma-brand-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.modern-article-wrapper .ma-branding .ma-brand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: .65rem 1.1rem;
  border-radius: 12px;

  background: rgba(245, 158, 11, .16);
  border: 1px solid rgba(245, 158, 11, .35);
  color: #fff !important;

  font-weight: 900;
  font-size: 13.5px;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.modern-article-wrapper .ma-branding .ma-brand-btn:hover {
  transform: translateY(-1px);
  background: rgba(245, 158, 11, .22);
  border-color: rgba(245, 158, 11, .55);
}

/* =========================
   5) Instagram Box (Compact + Fixed + Responsive)
   IMPORTANT: Put icon element in HTML:
   - <img class="ma-icon-insta" ...> OR <span class="ma-icon-insta"></span>
========================= */
.modern-article-wrapper .ma-instagram {
  padding: 2px !important;
  border-radius: 14px !important;
  margin: 1.25rem auto !important;
  width: 100%;
  max-width: 720px;

  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  box-shadow: 0 10px 22px -18px rgba(2, 6, 23, .45);
  overflow: hidden;
}

.modern-article-wrapper .ma-instagram-inner {
  background: var(--ma-bg-white) !important;
  border-radius: 12px !important;
  padding: clamp(12px, 1.6vw, 16px) !important;

  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon text btn";
  align-items: center;
  gap: 10px;
  text-align: right;
}

/* Icon background chip */
.modern-article-wrapper .ma-instagram .ma-icon-insta-bg {
  grid-area: icon;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
}

/* Support IMG icon */
.modern-article-wrapper .ma-instagram img.ma-icon-insta {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

/* Support SPAN/I icon via background-image */
.modern-article-wrapper .ma-instagram :where(span, i).ma-icon-insta {
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background-image: url("https://sepehrbar.com/wp-content/uploads/2025/12/instagram1.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.modern-article-wrapper .ma-instagram .ma-instagram-text {
  grid-area: text;
  min-width: 0;
}

.modern-article-wrapper .ma-instagram .ma-instagram-text h4 {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;

  font-weight: 900 !important;
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.4;

  background-image: linear-gradient(45deg, #f09433, #bc1888);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.modern-article-wrapper .ma-instagram .ma-instagram-text p {
  margin: .2rem 0 0 0 !important;
  color: var(--ma-text-muted);
  font-size: 13.5px;
  line-height: 1.7;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modern-article-wrapper .ma-instagram .ma-insta-btn {
  grid-area: btn;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: .55rem 1.05rem !important;
  border-radius: 999px !important;

  background: #fff !important;
  border: 2px solid #dc2743 !important;
  color: #dc2743 !important;

  font-size: 13.5px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  white-space: nowrap;

  box-shadow: 0 10px 18px -16px rgba(220, 39, 67, .50);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.modern-article-wrapper .ma-instagram .ma-insta-btn:hover {
  transform: translateY(-1px);
  background-color: #fff0f5 !important;
  box-shadow: 0 16px 24px -18px rgba(220, 39, 67, .55);
}

.modern-article-wrapper .ma-instagram .ma-insta-btn:focus-visible {
  outline: 3px solid rgba(220, 39, 67, .22);
  outline-offset: 3px;
}

/* =========================
   6) CTA Box
========================= */
.modern-article-wrapper .ma-cta {
  background: var(--ma-bg-white) !important;
  border: 2px solid var(--ma-primary) !important;
  border-radius: var(--ma-radius) !important;
  padding: clamp(18px, 3vw, 40px) !important;
  margin: 2rem 0 !important;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: var(--ma-shadow);
}

.modern-article-wrapper .ma-cta::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at 30% 30%, var(--ma-primary), transparent 60%);
  opacity: .12;
  border-radius: 50%;
}

.modern-article-wrapper .ma-cta::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 70% 70%, var(--ma-accent), transparent 62%);
  opacity: .10;
  border-radius: 50%;
}

.modern-article-wrapper .ma-cta > :where(h2, h3, h4) {
  margin-top: 0 !important;
  margin-bottom: .75rem !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;
  color: var(--ma-secondary) !important;
  font-size: 20px !important;
  position: relative;
  z-index: 1;
}

.modern-article-wrapper .ma-cta > p {
  margin: 0 auto 1.25rem auto !important;
  max-width: 70ch;
  color: var(--ma-text-muted);
  font-size: 15px;
  position: relative;
  z-index: 1;
}

.modern-article-wrapper .ma-cta-buttons {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: stretch;
  flex-wrap: wrap !important;
  margin-top: 1rem !important;
  position: relative;
  z-index: 1;
}

.modern-article-wrapper .ma-btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .85rem 2.2rem !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 14px !important;

  background: var(--ma-primary) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-bottom: none !important;

  box-shadow: 0 10px 20px -12px rgba(59, 130, 246, .65);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.modern-article-wrapper .ma-btn-primary:hover {
  background: var(--ma-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 26px -16px rgba(30, 64, 175, .65);
}

.modern-article-wrapper .ma-btn-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .85rem 2.2rem !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 14px !important;

  background: rgba(15, 23, 42, .03) !important;
  color: var(--ma-secondary) !important;
  border: 1px solid var(--ma-border) !important;
  border-bottom: none !important;

  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.modern-article-wrapper .ma-btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, .45) !important;
  background: rgba(59, 130, 246, .06) !important;
}

/* Gutenberg button fallback inside CTA */
.modern-article-wrapper .ma-cta .wp-block-button__link {
  border-bottom: none !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* =========================
   7) Note System
========================= */
.modern-article-wrapper .ma-note {
  --ma-note-color: var(--ma-primary);
  --ma-note-bg: rgba(59, 130, 246, .08);
  --ma-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z'/%3E%3C/svg%3E");

  background: var(--ma-note-bg) !important;
  border: 1px solid rgba(226, 232, 240, .9);
  border-right: 4px solid var(--ma-note-color) !important;
  border-radius: 12px;
  padding: 15px 18px 15px 18px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.85;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .03);
  position: relative;
  padding-right: 52px;
}

.modern-article-wrapper .ma-note::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 16px;
  width: 22px;
  height: 22px;
  background-image: var(--ma-note-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .95;
}

.modern-article-wrapper .ma-note > strong {
  display: block;
  margin: 0 0 .35rem 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--ma-note-color);
}

.modern-article-wrapper .ma-note a {
  border-bottom-color: rgba(15, 23, 42, .25);
}

/* Variants */
.modern-article-wrapper .ma-note.info {
  --ma-note-color: var(--ma-primary);
  --ma-note-bg: rgba(59, 130, 246, .08);
}

.modern-article-wrapper .ma-note.tip {
  --ma-note-color: #16a34a;
  --ma-note-bg: rgba(22, 163, 74, .10);
  --ma-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316a34a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18h.01M8 22h8m-7-4h6m-6.5-5.5a5 5 0 117 0c-.6.7-1.1 1.4-1.3 2.5H9.8c-.2-1.1-.7-1.8-1.3-2.5z'/%3E%3C/svg%3E");
}

.modern-article-wrapper .ma-note.warning {
  --ma-note-color: #d97706;
  --ma-note-bg: rgba(245, 158, 11, .14);
  --ma-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v4m0 4h.01M10.29 3.86l-8.02 14A2 2 0 004 21h16a2 2 0 001.73-3.14l-8.02-14a2 2 0 00-3.42 0z'/%3E%3C/svg%3E");
}

.modern-article-wrapper .ma-note.danger {
  --ma-note-color: #dc2626;
  --ma-note-bg: rgba(220, 38, 38, .10);
  --ma-note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23dc2626' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v4m0 4h.01M12 2a10 10 0 100 20 10 10 0 000-20z'/%3E%3C/svg%3E");
}

/* =========================
   8) Related Links
========================= */
.modern-article-wrapper .ma-related {
  background: var(--ma-bg-white);
  border: 1px solid var(--ma-border);
  border-right: 5px solid var(--ma-accent);
  border-radius: var(--ma-radius);
  padding: var(--ma-spacing-md);
  margin: var(--ma-spacing-lg) 0;
  box-shadow: var(--ma-shadow);
}

.modern-article-wrapper .ma-related > :where(h2, h3, h4) {
  margin-top: 0 !important;
  border-right: none !important;
  padding-right: 0 !important;
  background: none !important;
  color: var(--ma-secondary);
  font-size: 18px !important;
}

.modern-article-wrapper .ma-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.modern-article-wrapper .ma-related li {
  margin: 0;
  padding: 0;
}

.modern-article-wrapper .ma-related a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 12px;
  background: linear-gradient(to left, rgba(245, 158, 11, .08), transparent);
  text-decoration: none;
  color: var(--ma-primary-dark);
  border-bottom: none !important;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

.modern-article-wrapper .ma-related a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.828 10.172a4 4 0 010 5.656l-1.414 1.414a4 4 0 01-5.656-5.656l1.414-1.414m8.486 3.242l1.414-1.414a4 4 0 10-5.656-5.656l-1.414 1.414'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.modern-article-wrapper .ma-related a:hover {
  transform: translateY(-1px);
  border-color: rgba(245, 158, 11, .55);
  background: linear-gradient(to left, rgba(245, 158, 11, .14), transparent);
}

/* =========================
   9) Formula Box
========================= */
.modern-article-wrapper .ma-formula {
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 22px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .35);

  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.8;
}

.modern-article-wrapper .ma-formula :where(code, pre) {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}

/* =========================
   10) Tables (Mobile Friendly)
========================= */
.modern-article-wrapper .sepehr-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
  border: 1px solid var(--ma-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
}

.modern-article-wrapper .sepehr-table-wrapper table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

.modern-article-wrapper .sepehr-table-wrapper th {
  background-color: #eff6ff;
  color: var(--ma-secondary);
  padding: 12px 15px;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 2px solid var(--ma-primary);
}

.modern-article-wrapper .sepehr-table-wrapper td {
  padding: 10px 15px;
  border-bottom: 1px solid var(--ma-border);
  font-size: 13.5px;
  color: var(--ma-text-main);
  vertical-align: top;
  text-align: right !important;
  line-height: 1.6;
}

.modern-article-wrapper .sepehr-table-wrapper tr:nth-child(even) {
  background-color: #f8fafc;
}

.modern-article-wrapper .sepehr-table-wrapper tr:hover td {
  background-color: #f1f5f9;
}

/* =========================
   11) FAQ Section
========================= */
.modern-article-wrapper .sepehr-faq-item {
  background: #fff !important;
  border: 1px solid var(--ma-border) !important;
  border-radius: 14px !important;
  margin: 12px 0 !important;
  overflow: hidden;
  box-shadow: 0 2px 10px -8px rgba(0, 0, 0, .12);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.modern-article-wrapper .sepehr-faq-item:hover {
  border-color: rgba(59, 130, 246, .55) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -22px rgba(2, 6, 23, .35);
}

.modern-article-wrapper .sepehr-faq-item > summary {
  cursor: pointer;
  list-style: none !important;
  padding: 14px 16px 14px 46px !important;
  position: relative;
  font-weight: 900 !important;
  font-size: 15px !important;
  color: var(--ma-secondary) !important;
  background: linear-gradient(to left, rgba(59, 130, 246, .06), transparent);
  user-select: none;
}

.modern-article-wrapper .sepehr-faq-item > summary::-webkit-details-marker {
  display: none !important;
}

.modern-article-wrapper .sepehr-faq-item > summary::after {
  content: "+";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .45);
  color: var(--ma-text-muted);
  background: #fff;
  font-size: 18px;
  line-height: 1;
  transition: all .18s ease;
}

.modern-article-wrapper .sepehr-faq-item[open] > summary {
  background: linear-gradient(to left, rgba(245, 158, 11, .12), transparent) !important;
}

.modern-article-wrapper .sepehr-faq-item[open] > summary::after {
  content: "−";
  border-color: rgba(245, 158, 11, .55);
  color: var(--ma-accent);
}

.modern-article-wrapper .sepehr-faq-item[open] > :where(p, div, section) {
  border-top: 1px solid rgba(226, 232, 240, .85);
}

.modern-article-wrapper .sepehr-faq-item > p {
  margin: 0 !important;
  padding: 0 16px 16px 16px !important;
  color: var(--ma-text-main);
  font-size: 14px;
  line-height: 1.9;
}

.modern-article-wrapper .sepehr-faq-item > :where(div, section) {
  padding: 0 16px 16px 16px !important;
  color: var(--ma-text-main);
  font-size: 14px;
  line-height: 1.9;
}

.modern-article-wrapper .sepehr-faq-item > :where(div, section) > p {
  margin: 10px 0 0 0 !important;
}

/* Focus accessibility */
.modern-article-wrapper .sepehr-faq-item > summary:focus {
  outline: none;
}

.modern-article-wrapper .sepehr-faq-item > summary:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .25);
  outline-offset: 2px;
}

/* =========================
   12) Mobile Adjustments
========================= */
@media (max-width:768px) {
  .modern-article-wrapper {
    padding: 0 2px;
  }

  .modern-article-wrapper h1 {
    font-size: 22px !important;
  }

  .modern-article-wrapper h2 {
    font-size: 19px !important;
  }

  .modern-article-wrapper :where(h3, h4) {
    font-size: 17px !important;
  }

  .modern-article-wrapper .ma-note {
    padding-right: 50px;
  }

  .modern-article-wrapper .sepehr-table-wrapper th,
  .modern-article-wrapper .sepehr-table-wrapper td {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* CTA: stack buttons */
  .modern-article-wrapper .ma-cta {
    text-align: right;
  }

  .modern-article-wrapper .ma-cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .modern-article-wrapper .ma-btn-primary,
  .modern-article-wrapper .ma-btn-secondary {
    width: 100% !important;
  }

  /* FAQ spacing */
  .modern-article-wrapper .sepehr-faq-item > summary {
    padding: 12px 14px 12px 44px !important;
  }

  /* Branding: stack */
  .modern-article-wrapper .ma-branding {
    max-width: 100%;
    grid-template-columns: 56px 1fr;
    align-items: start;
  }

  .modern-article-wrapper .ma-brand-logo {
    width: 56px;
    height: 56px;
    background-size: 30px;
  }

  .modern-article-wrapper .ma-branding .ma-brand-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .modern-article-wrapper .ma-branding .ma-brand-btn {
    width: 100%;
  }

  /* Instagram: 2 rows, button full width */
  .modern-article-wrapper .ma-instagram {
    max-width: 100%;
  }

  .modern-article-wrapper .ma-instagram-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon text"
      "btn btn";
    align-items: start;
  }

  .modern-article-wrapper .ma-instagram .ma-insta-btn {
    width: 100% !important;
  }
}

/* ===== Instagram Icon: make it crisp & not "all red" ===== */

/* 1) Prefer MASK method (best). Works with <span class="ma-icon-insta"> */
.modern-article-wrapper .ma-instagram :where(span, i).ma-icon-insta {
  width: 22px !important;
  height: 22px !important;
  display: block !important;

  /* icon color */
  background-color: #ffffff !important;

  /* use SVG as mask so the source color doesn't matter */
  -webkit-mask-image: url("https://sepehrbar.com/wp-content/uploads/2025/12/instagram1.svg") !important;
  mask-image: url("https://sepehrbar.com/wp-content/uploads/2025/12/instagram1.svg") !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;

  -webkit-mask-position: center !important;
  mask-position: center !important;

  -webkit-mask-size: contain !important;
  mask-size: contain !important;

  /* ensure no old background-image remains */
  background-image: none !important;
}

/* 2) If you are using <img class="ma-icon-insta">, force it to white via filter (fallback) */
.modern-article-wrapper .ma-instagram img.ma-icon-insta {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  object-fit: contain !important;

  /* convert any color to white (works even if SVG is red) */
  filter: grayscale(1) brightness(0) invert(1) !important;
}

/* 3) Improve the icon chip so white icon is more readable */
.modern-article-wrapper .ma-instagram .ma-icon-insta-bg {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  box-shadow: 0 8px 18px -14px rgba(2, 6, 23, .45);

  /* subtle border for clarity on light backgrounds */
  border: 1px solid rgba(255, 255, 255, .35);
}/* End custom CSS */