/* =========================================================
   alifadlallah.net — manuscript restyle
   Paste into: Appearance → Customize → Additional CSS
   REPLACE everything currently there — don't append.

   If the editor shows red X errors on the --variable lines,
   ignore them. WordPress uses an old linter that doesn't know
   custom properties. Save anyway, or turn off Syntax
   Highlighting under Users → Profile.

   The !important flags are scaffolding. Eduma's real class
   names aren't known yet, so several blocks cast a wide net
   with attribute-substring selectors. Once you Inspect an
   element and find its actual class, swap in the specific
   selector and delete the !important.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --ink:    #141B2D;
  --gold:   #B08D3F;
  --paper:  #F2F1EC;
  --muted:  #5A5F6B;
  --rule:   #D6D2C6;

  --display: 'Amiri', 'Noto Naskh Arabic', serif;
  --ui:      'IBM Plex Sans Arabic', system-ui, sans-serif;
}


/* ---------- 1. Foundation ---------- */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.95;   /* Arabic needs more leading than Latin */
}

.main-menu, .menu, .top-bar, .toolbar,
.btn, .button, .entry-meta, .post-date, time,
.widget_nav_menu, .breadcrumbs {
  font-family: var(--ui);
}


/* ---------- 2. Container width ---------- */

.container {
  max-width: 1240px;
  width: 92%;
}


/* ---------- 3. Base type scale ---------- */
/* Large Naskh reads BETTER at regular weight than bold — bold
   Amiri above 3rem turns heavy and the letterforms clog. Size
   carries the emphasis, not weight. */

h1 { font-size: 4rem;    line-height: 1.35; font-weight: 400; }
h3 { font-size: 1.5rem;  line-height: 1.6;  font-weight: 700; }
h4 { font-size: 1.15rem; line-height: 1.65; font-weight: 700; }

/* Article body — where Amiri earns its place */
.entry-content, .post-content, .single-post .content {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 2.05;
  text-align: right;
}


/* ---------- 4. Section headings ---------- */
/* BROAD NET. The universal selector is deliberate — if the text
   sits in a nested span or h3, styling only the parent misses it. */

.thim-heading, .thim-heading *,
.section-heading, .section-heading *,
[class*="thim"][class*="head"],
[class*="thim"][class*="head"] * {
  font-family: var(--display) !important;
  font-size: 2.8rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  color: var(--ink) !important;
}

.thim-heading,
.section-heading,
[class*="thim"][class*="head"] {
  display: block !important;
  width: 100% !important;
  position: relative;
  padding-bottom: 2.2rem !important;
  margin: 0 auto 2.5rem !important;
}


/* ---------- 5. Signature: verse-rosette dividers ---------- */
/* A gold hairline broken in the centre by a diamond, echoing the
   rosettes that separate verses in illuminated manuscripts. */

.thim-heading::after,
.section-heading::after,
[class*="thim"][class*="head"]::after {
  content: "";
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--rule) 18%,
    var(--rule) 42%,
    transparent 42%,
    transparent 58%,
    var(--rule) 58%,
    var(--rule) 82%,
    transparent
  );
}

.thim-heading::before,
.section-heading::before,
[class*="thim"][class*="head"]::before {
  content: "";
  position: absolute;
  bottom: 0.55rem;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
  z-index: 2;
}


/* ---------- 6. Card titles and excerpts ---------- */
/* Card titles use the SANS deliberately — it stops the page
   reading as one homogenous block of Naskh. Display face for
   ceremony, UI face for navigation.
   Note: sans runs visually smaller than Naskh at the same
   nominal size, so 1.5rem here matches ~1.3rem in Amiri. */

.vc_row article h3, .vc_row article h3 a,
.vc_row article h2, .vc_row article h2 a,
[class*="post"] h3, [class*="post"] h3 a,
[class*="item"] h3,  [class*="item"] h3 a,
[class*="blog"] h3,  [class*="blog"] h3 a {
  font-family: var(--ui) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  text-align: right !important;
  margin-bottom: 0.9rem !important;
}

[class*="post"] .entry-excerpt,
[class*="item"] p,
[class*="excerpt"] {
  font-family: var(--ui) !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  color: var(--muted) !important;
  text-align: right !important;
}

.entry-meta, .post-date, time {
  font-family: var(--ui) !important;
  font-size: 0.76rem !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted) !important;
}


/* ---------- 7. Buttons ---------- */
/* The filled brown rectangle is the last obviously-2019 element.
   Gold hairline that fills on hover. */

.btn, .button, .read-more,
a.vc_general.vc_btn3,
[class*="readmore"], [class*="read-more"],
[class*="more-link"], [class*="btn"] {
  font-family: var(--ui) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: 0.7em 1.9em !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn:hover, .button:hover, .read-more:hover,
a.vc_general.vc_btn3:hover,
[class*="readmore"]:hover, [class*="read-more"]:hover,
[class*="more-link"]:hover, [class*="btn"]:hover {
  background-color: var(--gold) !important;
  color: var(--paper) !important;
}


/* ---------- 8. Card containers ---------- */
/* Flat and paper-like. Shadows read as "web app", not
   "printed volume". */

.post-item, .item, article.post {
  background: transparent;
  box-shadow: none;
  border: none;
}

.post-item .entry-thumb img,
.item img,
article.post img {
  border-radius: 0;
  filter: saturate(0.92);
}

/* Symmetrical padding — text was sitting flush to one edge */
.post-item .item-content,
.item .item-content,
[class*="item"] [class*="content"] {
  padding: 1.6rem 1.4rem 0 !important;
}

/* Pushes buttons to the bottom when equal-height cards
   top-align their content */
[class*="post-grid"] [class*="item"] {
  display: flex;
  flex-direction: column;
}

[class*="post-grid"] [class*="item"] [class*="content"] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

[class*="post-grid"] [class*="item"] [class*="read"] {
  margin-top: auto;
}


/* ---------- 9. Vertical rhythm ---------- */

.vc_row {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.vc_row.vc_row-has-fill {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}


/* ---------- 10. Quote banner ---------- */

.quote-band .vc_custom_heading,
.vc_row.vc_row-has-fill .vc_custom_heading {
  font-family: var(--display) !important;
  font-size: 2rem !important;
  line-height: 1.85 !important;
  font-style: italic;
  max-width: 30ch;
  margin: 0 auto;
  color: #FFFFFF !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}


/* ---------- 11. Header ---------- */

.site-header, #masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}

.site-header .logo img,
#masthead .logo img {
  max-height: 62px;
  width: auto;
}

.main-menu a, .menu a {
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
}

/* Gold underline grows from the right — correct for RTL */
.main-menu a::after, .menu a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.25s ease;
}

.main-menu a:hover::after, .menu a:hover::after {
  width: 100%;
}


/* ---------- 12. Quality floor ---------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 1024px) {
  h1 { font-size: 3rem; }
  .thim-heading, .thim-heading *,
  [class*="thim"][class*="head"],
  [class*="thim"][class*="head"] * { font-size: 2.2rem !important; }
}

@media (max-width: 768px) {
  body { font-size: 17px; }
  h1 { font-size: 2.2rem; }
  .thim-heading, .thim-heading *,
  [class*="thim"][class*="head"],
  [class*="thim"][class*="head"] * { font-size: 1.75rem !important; }
  [class*="post"] h3, [class*="item"] h3 { font-size: 1.25rem !important; }
  .entry-content, .post-content { font-size: 1.12rem; }
  .vc_row { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}


/* ---------- 13. Section heading override ---------- */
/* Duplicates section 4 deliberately. Placed last so it wins on
   cascade order against anything above it at equal specificity. */

.thim-heading, .thim-heading * ,
[class*="thim"][class*="head"],
[class*="thim"][class*="head"] * {
  font-size: 2.8rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  color: var(--ink) !important;
}

[class*="thim"][class*="head"] {
  display: block !important;
  width: 100% !important;
  margin: 0 auto 2.5rem !important;
}


/* ---------- 14. Right-aligned headings + dark sections ---------- */

/* Headings align right, not centre. In RTL the reading edge is
   the right, so a right-aligned heading sits directly above the
   start of the text beneath it. */

.thim-heading, .thim-heading *,
.section-heading, .section-heading *,
[class*="thim"][class*="head"],
[class*="thim"][class*="head"] * {
  text-align: right !important;
}

/* Move the rosette divider to the right edge to match */
.thim-heading::after,
.section-heading::after,
[class*="thim"][class*="head"]::after {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

.thim-heading::before,
.section-heading::before,
[class*="thim"][class*="head"]::before {
  left: auto !important;
  right: 86px !important;   /* centres the diamond in the 180px rule */
  transform: rotate(45deg) !important;
}

/* Kill Eduma's own leftover underline — the stray short line
   floating to the right of the heading */
[class*="thim"][class*="head"] span::after,
[class*="thim"][class*="head"] h2::after,
[class*="thim"][class*="head"] h3::after,
.thim-heading .separator,
[class*="thim"][class*="head"] [class*="line"] {
  display: none !important;
}


/* --- Dark sections ---

   For any row with a dark background image, add  dark-section
   to the row's "Extra class name" field in WPBakery (row settings
   → General → Extra class name). That's more reliable than
   guessing which rows are dark from CSS alone.               */

.dark-section [class*="thim"][class*="head"],
.dark-section [class*="thim"][class*="head"] *,
.dark-section h2, .dark-section h3, .dark-section h4,
.dark-section p, .dark-section a,
.dark-section [class*="item"] h3,
.dark-section [class*="item"] h3 a {
  color: var(--paper) !important;
}

.dark-section [class*="excerpt"],
.dark-section [class*="item"] p {
  color: rgba(242, 241, 236, 0.78) !important;
}

/* Rule and diamond need to lift off a dark ground */
.dark-section [class*="thim"][class*="head"]::after {
  background: linear-gradient(
    to right,
    transparent,
    rgba(242, 241, 236, 0.45) 18%,
    rgba(242, 241, 236, 0.45) 42%,
    transparent 42%,
    transparent 58%,
    rgba(242, 241, 236, 0.45) 58%,
    rgba(242, 241, 236, 0.45) 82%,
    transparent
  ) !important;
}

.dark-section [class*="thim"][class*="head"]::before {
  background: var(--gold) !important;
}

/* Date chips on dark rows — the filled brown box reads as 2019.
   Hairline instead. */
.dark-section .entry-meta,
.dark-section .post-date,
.dark-section time,
.dark-section [class*="date"] {
  background: transparent !important;
  color: var(--paper) !important;
  border: 1px solid rgba(242, 241, 236, 0.35) !important;
  padding: 0.35em 0.9em !important;
  border-radius: 0 !important;
}

/* Buttons on dark rows */
.dark-section .btn,
.dark-section [class*="read-more"],
.dark-section [class*="readmore"] {
  color: var(--paper) !important;
  border-color: rgba(242, 241, 236, 0.5) !important;
}

.dark-section .btn:hover,
.dark-section [class*="read-more"]:hover,
.dark-section [class*="readmore"]:hover {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
}

.vc_row[style*="background-image"] [class*="thim"][class*="head"],
.vc_row[style*="background-image"] [class*="thim"][class*="head"] *,
.vc_row[style*="background-image"] h2,
.vc_row[style*="background-image"] h3,
.vc_row[style*="background-image"] h3 a {
  color: #FFFFFF !important;
}

.vc_row[style*="background-image"] [class*="thim"][class*="head"]::after {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* Strip the border from button wrappers — only the link itself
   should carry it */
[class*="btn"]:not(a):not(button),
[class*="button"]:not(a):not(button),
[class*="read"]:not(a):not(button) {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Wrappers shouldn't react to hover — only the link itself */
[class*="btn"]:not(a):not(button):hover,
[class*="button"]:not(a):not(button):hover,
[class*="read"]:not(a):not(button):hover {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
}

/* Copyright bar — smallest thing on the page, separated by a
   hairline rather than a block of different colour */
[class*="footer"] [class*="copyright"],
[class*="footer"] [class*="bottom"] {
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(242, 241, 236, 0.12);
  font-size: 0.78rem;
  color: rgba(242, 241, 236, 0.5) !important;
  background: transparent !important;
  text-align: center;
}
 
@media (max-width: 768px) {
  .site-footer, #footer, .footer, footer[class*="footer"] {
    padding: 3rem 0 1.5rem !important;
    text-align: center;
  }
 
  [class*="footer"] .widget-title {
    text-align: center !important;
  }
}

/* Global size increase */
html {
  font-size: 112.5%;   /* 18px base instead of 16px */
}

body {
  font-size: 1.15rem !important;
}