/* Editorial article refresh — scoped to the single news article only.
   Uses the shared palette, so the brown Light/Dark modes stay in sync. */

.madar-article {
  --article-radius: 22px;
  --article-hairline: var(--color-border);
  --article-panel: var(--color-surface);
  --article-ink: var(--color-text-main);
  --article-muted: var(--color-text-muted);
  color: var(--article-ink);
}
.madar-article .article-hero {
  max-width: 1220px;
  padding-block: clamp(28px, 4vw, 58px) 20px;
}
.madar-article .article-breadcrumb {
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(23px, 3vw, 36px);
  font-size: .82rem;
  line-height: 1.8;
  color: var(--article-muted);
}
.madar-article .article-breadcrumb a {
  color: var(--article-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.madar-article .article-breadcrumb a:hover { color: var(--color-accent); }
.madar-article .article-breadcrumb .madar-breadcrumb-current {
  max-width: min(65ch, 100%);
  color: var(--article-ink);
  font-weight: 700;
}
.madar-article .madar-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  font-size: .81rem;
  color: var(--article-muted);
}
.madar-article .madar-article-meta .kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  border-radius: 100px;
  font-weight: 800;
}
.madar-article .article-headline {
  max-width: 1010px;
  margin: 0 0 20px;
  font-size: clamp(2.05rem, 4.2vw, 3.65rem);
  font-weight: 900;
  line-height: 1.52;
  letter-spacing: -.025em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  color: var(--article-ink);
}
.madar-article .article-lead {
  max-width: 940px;
  margin-bottom: 27px;
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: 18px;
  color: var(--article-muted);
  font-size: clamp(1.05rem, 1.55vw, 1.29rem);
  font-weight: 500;
  line-height: 2.05;
}
.madar-article .article-author-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px 26px;
  align-items: center;
  margin-bottom: 25px;
  padding: 17px 21px;
  background: var(--article-panel);
  border: 1px solid var(--article-hairline);
  border-radius: 17px;
  box-shadow: var(--shadow-sm);
}
.madar-article .author-profile-box { min-width: 0; gap: 13px; }
.madar-article .author-avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border: 2px solid var(--article-hairline);
  background: var(--color-surface-subtle);
}
.madar-article .author-name-text { font-size: .96rem; line-height: 1.65; }
.madar-article .article-date-meta { font-size: .76rem; line-height: 1.8; }
.madar-article .article-controls-box { gap: 11px; }
.madar-article .article-controls-box > .meta-text {
  padding-inline: 6px;
  color: var(--article-muted);
  line-height: 1.8;
  font-size: .79rem;
}
.madar-article .article-audio-quick-btn,
.madar-article .font-size-adjust { min-height: 42px; border-radius: 11px; }
.madar-article .article-audio-quick-btn { padding: 9px 14px; }
.madar-article .font-size-adjust { gap: 4px; padding: 4px; }
.madar-article .font-size-btn { min-width: 38px; min-height: 32px; }
.madar-article .article-featured-image {
  margin-bottom: 7px;
  border: 1px solid var(--article-hairline);
  border-radius: 25px;
  background: var(--color-surface-subtle);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(44, 27, 18, .08);
}
.madar-article .article-featured-image > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  object-position: center;
}
.madar-article .image-caption {
  padding: 11px 19px;
  font-size: .78rem;
  line-height: 1.8;
  color: var(--article-muted);
  background: var(--article-panel);
}

/* The reading column is the visual focus; sharing and sidebar stay secondary. */
.madar-article .article-body-layout {
  max-width: 1220px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 260px;
  gap: clamp(17px, 2.4vw, 32px);
  align-items: start;
  padding-block: clamp(20px, 3vw, 36px) 65px;
}
.madar-article .sticky-share-rail {
  position: sticky;
  top: 100px;
  height: auto;
  gap: 11px;
  align-items: center;
  padding-block: 12px;
}
.madar-article .madar-share-heading {
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--article-muted);
  margin-bottom: 5px;
}
.madar-article .share-rail-btn {
  width: 44px;
  height: 44px;
  color: var(--article-ink);
  border-color: var(--article-hairline);
  box-shadow: var(--shadow-sm);
}
.madar-article .article-content-prose {
  min-width: 0;
  max-width: none;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--article-hairline);
  border-radius: var(--article-radius);
  background: var(--article-panel);
  box-shadow: var(--shadow-md);
  line-height: 2;
  color: var(--article-ink);
}
.madar-article .madar-reading-content {
  min-width: 0;
  color: var(--article-ink);
  overflow-wrap: break-word;
}
.madar-article .madar-reading-content > :first-child { margin-top: 0; }
.madar-article .madar-reading-content p,
.madar-article .madar-reading-content li {
  font-size: var(--reader-font-size, 1.125rem);
  line-height: 2.06;
  font-weight: 400;
}
.madar-article .madar-reading-content p { margin: 0 0 1.55em; }
/* The legacy global drop-cap affects paragraphs inside comments and audio;
   disabling it also avoids awkward Arabic first-letter wrapping. */
.madar-article .article-content-prose p:first-of-type::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
}
.madar-article .madar-reading-content h2,
.madar-article .madar-reading-content h3,
.madar-article .madar-reading-content h4 {
  color: var(--article-ink);
  font-weight: 850;
  line-height: 1.65;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.madar-article .madar-reading-content h2 {
  font-size: clamp(1.43rem, 2.1vw, 1.83rem);
  margin: 2.1em 0 .8em;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--color-accent);
}
.madar-article .madar-reading-content h3 {
  font-size: clamp(1.18rem, 1.8vw, 1.43rem);
  margin: 1.9em 0 .75em;
}
.madar-article .madar-reading-content h4 { font-size: 1.1rem; margin: 1.5em 0 .6em; }
.madar-article .madar-reading-content :is(ul, ol) { margin: 0 0 1.7rem; padding-inline-start: 1.5rem; }
.madar-article .madar-reading-content li { margin-bottom: .6em; padding-inline-start: 4px; }
.madar-article .madar-reading-content li::marker { color: var(--color-accent); }
.madar-article .madar-reading-content a { color: var(--color-accent); text-underline-offset: 4px; }
.madar-article .madar-reading-content :is(img, video, iframe) { max-width: 100%; }
.madar-article .madar-reading-content :is(img, .wp-block-image img) {
  height: auto;
  border-radius: 14px;
}
.madar-article .madar-reading-content :is(figure, .wp-block-embed, .wp-block-image, .wp-block-gallery) {
  max-width: 100%;
  margin-block: 24px 28px;
}
.madar-article .madar-reading-content figcaption { color: var(--article-muted); line-height: 1.8; }
.madar-article .madar-reading-content :is(blockquote, .wp-block-quote) {
  background: var(--color-surface-subtle);
  border: 0;
  border-inline-start: 4px solid var(--color-accent);
  border-radius: 13px;
  color: var(--article-ink);
  margin: 28px 0;
  padding: 24px clamp(18px, 3vw, 30px);
  font-size: 1.18rem;
}
.madar-article .madar-reading-content :is(blockquote, .wp-block-quote) p { margin-bottom: .65em; }
.madar-article .madar-reading-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.8;
}
.madar-article .madar-reading-content :is(th, td) { border: 1px solid var(--article-hairline); padding: 11px 13px; }
.madar-article .madar-reading-content th { background: var(--color-surface-subtle); }
.madar-article .madar-reading-content .wp-block-table { overflow-x: auto; }
.madar-article .madar-reading-content .wp-block-separator { border-color: var(--article-hairline); margin-block: 32px; }

.madar-article .madar-audio-summary {
  border-radius: 16px;
  padding: clamp(17px, 2vw, 23px);
  gap: 16px;
  background: var(--color-surface-subtle);
  margin: 0 0 32px;
}
.madar-article .madar-audio-summary__icon { width: 48px; height: 48px; }
.madar-article .madar-audio-summary__copy h2 { font-size: 1.12rem; line-height: 1.65; }
.madar-article .madar-audio-summary__actions :is(.btn-primary, .btn-secondary) { border-radius: 9px; min-height: 39px; }
.madar-article .madar-audio-progress { height: 6px; }
.madar-article .madar-article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
}
.madar-article .madar-article-tags .topics-title { margin-inline-end: 6px; font-weight: 700; }
.madar-article .madar-article-tags .topic-tag { border-radius: 100px; padding: 6px 13px; }
.madar-article .madar-author-bio {
  margin-top: 35px;
  border-radius: 17px;
  background: var(--color-surface-subtle);
  padding: 23px;
}
.madar-article .madar-author-bio h4 { line-height: 1.6; }
.madar-article .madar-author-bio p { font-size: .86rem; line-height: 1.85; }
.madar-article .madar-comments { margin-top: 40px; }
.madar-article .madar-comment__body { border-radius: 13px; padding: 18px; }
.madar-article .madar-comment-form { border-radius: 15px; padding: 22px; gap: 16px; }
.madar-article .madar-comment-form :is(input:not([type="checkbox"]), textarea) { border-radius: 10px; }

.madar-article .article-sidebar-rail {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}
.madar-article .article-sidebar-rail .widget-card {
  margin: 0;
  border: 1px solid var(--article-hairline);
  border-radius: 17px;
  padding: 23px 21px;
  background: var(--article-panel);
  box-shadow: var(--shadow-sm);
}
.madar-article .article-sidebar-rail .widget-title {
  margin-bottom: 17px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--article-hairline);
  font-size: 1.07rem;
  line-height: 1.65;
}
.madar-article .madar-related-author-list a { line-height: 1.8; }
.madar-article .madar-sidebar-newsletter p { font-size: .85rem; line-height: 1.9; margin-bottom: 18px; }
.madar-article .madar-related-section {
  padding-block: 58px 75px;
  border-top: 1px solid var(--article-hairline);
  background: var(--color-surface-subtle);
}
.madar-article .madar-related-section .section-header { margin-bottom: 24px; }
.madar-article .related-articles-grid { gap: 22px; }
.madar-article .related-articles-grid .economy-card {
  overflow: hidden;
  border: 1px solid var(--article-hairline);
  border-radius: 19px;
  background: var(--article-panel);
  transition: transform .23s ease, box-shadow .23s ease;
}
.madar-article .related-articles-grid .economy-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.madar-article .madar-related-image { height: auto !important; aspect-ratio: 16 / 10; }
.madar-article .madar-related-image img { width: 100%; height: 100%; object-fit: cover; }
.madar-article .related-articles-grid .card-body { padding: 19px 20px 23px; }
.madar-article .related-articles-grid .card-title { line-height: 1.75; }

@media (max-width: 1199px) {
  .madar-article .article-body-layout { grid-template-columns: 48px minmax(0, 1fr); max-width: 1000px; }
  .madar-article .article-sidebar-rail { display: none; }
  .madar-article .article-content-prose { max-width: none; }
}
@media (max-width: 767px) {
  .madar-article .article-hero { padding-block: 24px 8px; }
  .madar-article .article-breadcrumb { margin-bottom: 22px; }
  .madar-article .article-headline { font-size: clamp(1.78rem, 6.2vw, 2.55rem); line-height: 1.55; margin-bottom: 12px; }
  .madar-article .article-lead { font-size: 1rem; line-height: 1.95; padding-inline-start: 12px; margin-bottom: 20px; }
  .madar-article .article-author-strip { padding: 16px; border-radius: 15px; gap: 16px; }
  .madar-article .article-controls-box { gap: 10px; width: 100%; justify-content: flex-start; }
  .madar-article .article-audio-quick-btn { flex: 0 1 auto; }
  .madar-article .article-featured-image { border-radius: 17px; }
  .madar-article .article-featured-image > img { aspect-ratio: 4 / 3; }
  .madar-article .article-body-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 13px; padding-bottom: 38px; }
  .madar-article .sticky-share-rail {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 4px 5px;
    margin: 0;
  }
  .madar-article .madar-share-heading { margin: 0 0 0 8px; }
  .madar-article .share-rail-btn { width: 39px; height: 39px; }
  .madar-article .article-content-prose { padding: 23px 19px; border-radius: 16px; }
  .madar-article .madar-reading-content p,
  .madar-article .madar-reading-content li { line-height: 2; }
  .madar-article .madar-audio-summary { margin-bottom: 25px; }
  .madar-article .madar-related-section { padding-block: 40px 50px; }
}
@media (max-width: 420px) {
  .madar-article .article-headline { font-size: 1.7rem; }
  .madar-article .article-author-strip { flex-direction: column; align-items: stretch; }
  .madar-article .article-controls-box > .meta-text { flex: 1 1 100%; }
  .madar-article .article-content-prose { padding: 19px 15px; }
  .madar-article .madar-audio-summary { padding: 15px; }
  .madar-article .madar-author-bio { padding: 18px; }
  .madar-article .madar-comment-form { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .madar-article :is(.related-articles-grid .economy-card, .share-rail-btn) { transition: none; }
}