/* ============================================================
   Talib e Ilm — "Noor al-Ilm" design
   Classic Islamic manuscript look: deep emerald, gold, ivory.
   Loaded by mu-plugins/tei-design.php after the Kadence styles.
   ============================================================ */

/* ---------- 1. Palette (overrides Kadence global palette) ---------- */
:root {
  --tei-emerald: #0c5941;
  --tei-emerald-dark: #083d2d;
  --tei-emerald-deep: #06301f;
  --tei-gold: #c9a227;
  --tei-gold-soft: #e3cf8f;
  --tei-gold-pale: #f0e6c8;
  --tei-ivory: #f7f1e3;
  --tei-paper: #fffdf7;
  --tei-ink: #2a2418;
  --tei-maroon: #7c2d3e;

  --global-palette1: #0c5941; /* links / primary   */
  --global-palette2: #083d2d; /* link hover        */
  --global-palette3: #21311f; /* strong headings   */
  --global-palette4: #2a2418; /* headings          */
  --global-palette5: #4a4231; /* body text         */
  --global-palette6: #6f6550; /* muted             */
  --global-palette7: #efe6cf; /* subtle bg         */
  --global-palette8: #f7f1e3; /* content-area bg   */
  --global-palette9: #fffdf7; /* content card bg   */
}

/* ---------- 2. Base ---------- */
body {
  background-color: var(--tei-ivory);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M36 6l8 22 22 8-22 8-8 22-8-22-22-8 22-8z'/%3E%3C/g%3E%3C/svg%3E");
  font-family: 'TEI Arabic', 'Lora', Georgia, serif;
  color: var(--tei-ink);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: 'TEI Arabic', 'Marcellus', 'Times New Roman', serif;
  letter-spacing: 0.01em;
  color: var(--tei-emerald-dark);
}

.entry-content a { color: var(--tei-emerald); text-decoration-color: var(--tei-gold); }
.entry-content a:hover { color: var(--tei-maroon); }

::selection { background: var(--tei-gold-pale); color: var(--tei-ink); }

/* ---------- 3. Header ---------- */
#masthead {
  background: var(--tei-paper);
  border-top: 4px solid var(--tei-emerald);
  border-bottom: 1px solid var(--tei-gold-soft);
  box-shadow: 0 1px 0 var(--tei-gold-pale), 0 4px 18px rgba(42, 36, 24, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}
body.admin-bar #masthead { top: 32px; }
#masthead .site-branding .site-title {
  font-family: 'Marcellus', serif;
  color: var(--tei-emerald-dark);
}
#masthead .main-navigation .menu > li > a,
#masthead .main-navigation a {
  font-family: 'Marcellus', serif;
  color: var(--tei-emerald-dark);
  font-size: 1.02em;
}
#masthead .main-navigation a:hover { color: var(--tei-maroon); }
#masthead .main-navigation .menu > li.current-menu-item > a { color: var(--tei-maroon); box-shadow: inset 0 -2px 0 var(--tei-gold); }

/* ---------- 4. Page-title hero band ---------- */
.entry-hero-container-inner,
header.entry-header.page-title,
.kadence-breadcrumb-container {
  background-color: var(--tei-emerald-dark) !important;
  background-image:
    linear-gradient(160deg, rgba(12, 89, 65, 0.88) 0%, rgba(8, 61, 45, 0.92) 60%, rgba(6, 48, 31, 0.95) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e3cf8f' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M32 4l7 21 21 7-21 7-7 21-7-21-21-7 21-7z'/%3E%3Ccircle cx='32' cy='32' r='3.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("img/hero-mosque.jpg") !important;
  background-size: auto, 64px 64px, cover !important;
  background-position: center, center, center 62% !important;
}
.entry-hero .entry-title,
.entry-hero .page-title,
header.entry-header.page-title .entry-title {
  color: #fdf9ec !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  position: relative;
  padding-bottom: 22px;
}
.entry-hero .entry-title::after,
.entry-hero .page-title::after,
header.entry-header.page-title .entry-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 190px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='12' viewBox='0 0 190 12'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1.4'%3E%3Cline x1='0' y1='6' x2='72' y2='6'/%3E%3Cline x1='118' y1='6' x2='190' y2='6'/%3E%3Cpath d='M95 1l5 5-5 5-5-5z' fill='%23c9a227'/%3E%3Cpath d='M82 6l4-3 0 6zM108 6l-4-3 0 6z' fill='%23e3cf8f'/%3E%3C/g%3E%3C/svg%3E");
}
.title-align-inherit { text-align: center; }

/* ---------- 5. Content "manuscript page" card ---------- */
article.content-bg, .content-bg.loop-entry, .single-content {
  background: var(--tei-paper);
}
article.content-bg {
  border: 1px solid var(--tei-gold-pale);
  box-shadow: 0 2px 6px rgba(42, 36, 24, 0.05), 0 14px 34px rgba(42, 36, 24, 0.07);
  border-radius: 6px;
  position: relative;
}
article.content-bg::before {
  /* inner gold hairline, like an illuminated page frame */
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 3px;
  pointer-events: none;
}
.entry-content {
  font-size: 1.06rem;
  line-height: 1.85;
}
.entry-content > * { position: relative; }

/* headings inside content get a small gold leaf marker */
.entry-content h2, .entry-content h3 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tei-gold-pale);
}

/* image treatment (Bismillah headers, scholar portraits) */
.entry-content img {
  border-radius: 4px;
  height: auto;
  max-width: 100%;
}
.entry-content div > a > img[alt="Picture"] { display: block; margin: 0 auto 10px; }

/* hide leftover Weebly file-type icons (external dependency) */
.entry-content img[src*="weebly.com"] { display: none !important; }
.entry-content a:has(> img[src*="weebly.com"]) { display: none !important; }

/* ---------- 6. Q&A structure (classes added by tei-design.js) ---------- */
.tei-label {
  display: inline-block;
  font-family: 'Marcellus', serif;
  font-size: 0.82em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 16px;
  border-radius: 999px;
  margin: 18px 0 6px;
}
.tei-label-q { background: var(--tei-maroon); color: #fdf3ea; }
.tei-label-a { background: var(--tei-emerald); color: #eefaf1; }

.tei-arabic {
  display: block;
  direction: rtl;
  text-align: right;
  font-family: 'TEI Arabic', 'Amiri', 'Scheherazade New', serif;
  font-size: 1.5em;
  line-height: 2.35;
  color: var(--tei-emerald-deep);
  background: linear-gradient(180deg, #fbf6e7 0%, #f6eed6 100%);
  border-inline-end: 3px solid var(--tei-gold);
  border-radius: 6px 2px 2px 6px;
  padding: 18px 24px;
  margin: 18px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.tei-sig {
  display: block;
  background: #f6f1e2;
  border-inline-start: 3px solid var(--tei-emerald);
  border-radius: 2px 6px 6px 2px;
  padding: 14px 20px;
  margin: 22px 0 6px;
  font-weight: 600;
  color: var(--tei-emerald-deep);
  line-height: 1.7;
}

/* ---------- 7. Audio lectures ---------- */
.entry-content audio {
  width: 100%;
  max-width: 560px;
  display: block;
  margin: 8px 0 4px;
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(42, 36, 24, 0.16);
}
div[title^="Audio:"] {
  background: #f8f3e6;
  border: 1px solid var(--tei-gold-pale);
  border-radius: 8px;
  padding: 14px 16px 12px;
  margin: 14px 0 6px;
}
div[title^="Audio:"]::before {
  content: "\266B  " attr(title);
  display: block;
  font-family: 'Marcellus', serif;
  font-size: 0.86em;
  color: var(--tei-emerald);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* file info tables (Weebly download blocks) */
.entry-content table { border-collapse: collapse; margin: 4px 0; }
.entry-content table td {
  border: none;
  padding: 2px 10px 2px 0;
  font-size: 0.92em;
  color: #6f6550;
}
.entry-content a[title^="Download file"], .entry-content a[title^="Download File"] {
  display: inline-block;
  font-family: 'Marcellus', serif;
  font-size: 0.9em;
  color: var(--tei-emerald-dark);
  background: var(--tei-gold-pale);
  border: 1px solid var(--tei-gold-soft);
  border-radius: 999px;
  padding: 4px 18px;
  margin: 4px 0 14px;
  text-decoration: none;
  transition: background 0.2s;
}
.entry-content a[title^="Download file"]:hover, .entry-content a[title^="Download File"]:hover {
  background: var(--tei-gold-soft);
  color: var(--tei-emerald-deep);
}

/* ---------- 8. Separators ---------- */
.entry-content hr {
  border: none;
  height: 12px;
  margin: 26px auto;
  max-width: 260px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='12' viewBox='0 0 260 12'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='0.75' stroke-width='1.2'%3E%3Cline x1='10' y1='6' x2='104' y2='6'/%3E%3Cline x1='156' y1='6' x2='250' y2='6'/%3E%3Cpath d='M130 1.5l4.5 4.5-4.5 4.5-4.5-4.5z' fill='%23c9a227'/%3E%3Ccircle cx='115' cy='6' r='1.6' fill='%23c9a227'/%3E%3Ccircle cx='145' cy='6' r='1.6' fill='%23c9a227'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 9. Buttons & forms ---------- */
button, .button, input[type="submit"], .wp-block-button__link,
.wpforms-container button[type="submit"] {
  background-color: var(--tei-emerald) !important;
  color: #f5f1e2 !important;
  border: 1px solid var(--tei-emerald-dark) !important;
  border-radius: 4px !important;
  font-family: 'Marcellus', serif !important;
  letter-spacing: 0.06em;
  transition: background 0.2s !important;
}
button:hover, .button:hover, input[type="submit"]:hover, .wp-block-button__link:hover,
.wpforms-container button[type="submit"]:hover {
  background-color: var(--tei-gold) !important;
  color: var(--tei-emerald-deep) !important;
  border-color: var(--tei-gold) !important;
}
.wpforms-container input[type="text"], .wpforms-container input[type="email"],
.wpforms-container textarea {
  background: var(--tei-paper);
  border: 1px solid var(--tei-gold-soft) !important;
  border-radius: 4px;
}
.wpforms-container input:focus, .wpforms-container textarea:focus {
  border-color: var(--tei-emerald) !important;
  box-shadow: 0 0 0 2px rgba(12, 89, 65, 0.15) !important;
}

/* ---------- 10. Blog cards / archives ---------- */
.loop-entry.content-bg {
  border: 1px solid var(--tei-gold-pale);
  border-radius: 6px;
  overflow: hidden;
}
.loop-entry .entry-title a { color: var(--tei-emerald-dark); }
.loop-entry .entry-title a:hover { color: var(--tei-maroon); }

/* ---------- 11. Footer ---------- */
#colophon {
  background-color: var(--tei-emerald-deep) !important;
  background-image:
    linear-gradient(0deg, rgba(6, 48, 31, 0.96), rgba(8, 61, 45, 0.93)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e3cf8f' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M32 4l7 21 21 7-21 7-7 21-7-21-21-7 21-7z'/%3E%3C/g%3E%3C/svg%3E");
  border-top: 3px solid var(--tei-gold);
}
#colophon, #colophon .footer-html-inner, #colophon p { color: #e9e0c6 !important; }
#colophon a { color: var(--tei-gold-soft) !important; }
#colophon a:hover { color: #fff !important; }

/* ---------- 12. Misc / responsive ---------- */
.search-form .search-submit { background: var(--tei-emerald); }

@media (max-width: 767px) {
  .tei-arabic { font-size: 1.3em; padding: 14px 16px; }
  article.content-bg::before { inset: 6px; }
  .entry-content { font-size: 1.02rem; }
  /* stack Weebly layout tables into a single column */
  .entry-content table, .entry-content tbody, .entry-content tr, .entry-content td {
    display: block;
    width: 100% !important;
  }
  .entry-content audio { max-width: 100%; }
}

/* ---------- 13. Interior pages: tile grids, question indexes, headings ---------- */
/* in-content H1s carried over from Weebly page headers */
.entry-content h1:not(.tei-h-title) {
  font-family: 'TEI Arabic', 'Marcellus', 'Times New Roman', serif;
  text-align: center;
  color: var(--tei-emerald-dark);
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  letter-spacing: 0.02em;
  margin: 0.3em 0 1em;
}
.entry-content h1:not(.tei-h-title)::after {
  content: "";
  display: block;
  width: 110px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tei-gold), transparent);
}

/* link-directory tables become tile grids (built by tei-design.js) */

/* The logo image already carries the wordmark — hide Kadence's duplicate
   site-title text next to it (desktop + mobile headers) */
.site-branding .site-title,
.site-branding .site-title-wrap {
  display: none;
}

.tei-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 20px 0 28px;
}
a.tei-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tei-paper);
  border: 1px solid var(--tei-gold-pale);
  border-left: 3px solid var(--tei-gold);
  border-radius: 6px;
  padding: 13px 16px;
  font-family: 'Marcellus', serif;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--tei-emerald-dark);
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(42, 36, 24, 0.06);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
}
a.tei-tile::before {
  content: "\25c8"; /* ◈ */
  color: var(--tei-gold);
  font-size: 0.85em;
  flex: 0 0 auto;
}
a.tei-tile:hover {
  transform: translateY(-2px);
  border-color: var(--tei-gold);
  color: var(--tei-maroon);
  box-shadow: 0 6px 16px rgba(42, 36, 24, 0.12);
}

/* numbered question indexes on topic pages */
.tei-qlist {
  background: var(--tei-paper);
  border: 1px solid var(--tei-gold-pale);
  border-radius: 6px;
  margin: 18px 0 26px;
  overflow: hidden;
}
.tei-qlist > .tei-qrow {
  position: relative;
  padding: 12px 44px 12px 18px;
  border-bottom: 1px solid var(--tei-gold-pale);
  transition: background 0.15s;
}
.tei-qlist > .tei-qrow:last-child { border-bottom: 0; }
.tei-qlist > .tei-qrow:hover { background: #fbf7ea; }
.tei-qrow a {
  color: var(--tei-emerald-dark);
  text-decoration: none;
  font-family: 'Marcellus', serif;
}
.tei-qrow a:hover { color: var(--tei-maroon); }
.tei-qrow::after {
  content: "\2192"; /* → */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tei-gold);
  opacity: 0;
  transition: opacity 0.15s;
}
.tei-qrow:hover::after { opacity: 1; }

/* residual heading links (e.g., article columns not converted to tiles) */
.entry-content h2 a { color: var(--tei-emerald-dark); text-decoration: none; }
.entry-content h2 a:hover { color: var(--tei-maroon); }

/* small Weebly topic icons: center them */
.entry-content a > img[alt="Picture"] { display: block; margin: 4px auto; }

/* in-content H1 duplicating the hero band title (hidden by tei-design.js) */
.entry-content h1.tei-dup-title { display: none; }

/* ---------- 14. Back pill + site footer ---------- */
.tei-back-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--tei-paper) !important;
  color: var(--tei-emerald-dark) !important;
  border: 1px solid var(--tei-gold-soft) !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  margin: 0 0 18px;
  font-family: 'Marcellus', serif !important;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(42, 36, 24, 0.08);
}
.tei-back-btn:hover {
  background: var(--tei-gold) !important;
  color: var(--tei-emerald-deep) !important;
  border-color: var(--tei-gold) !important;
}

.tei-footer {
  background-color: var(--tei-emerald-dark);
  background-image:
    linear-gradient(180deg, rgba(8, 61, 45, 0.97), rgba(6, 48, 31, 0.94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e3cf8f' stroke-opacity='0.1' stroke-width='1'%3E%3Cpath d='M32 4l7 21 21 7-21 7-7 21-7-21-21-7 21-7z'/%3E%3C/g%3E%3C/svg%3E");
  border-top: 3px solid var(--tei-gold);
  padding: 52px 24px 44px;
}
.tei-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
.tei-footer-title {
  font-family: 'Marcellus', serif;
  font-size: 1.5rem;
  color: var(--tei-gold-soft);
  margin-bottom: 8px;
}
.tei-footer-bismillah {
  font-family: 'TEI Arabic', 'Amiri', serif;
  font-size: 1.35rem;
  color: var(--tei-gold-pale);
  margin-bottom: 10px;
}
.tei-footer-brand p {
  color: #cfe0d3;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}
.tei-footer-head {
  font-family: 'Marcellus', serif;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tei-gold);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
}
.tei-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tei-footer li { margin: 0 0 9px; }
.tei-footer li a {
  color: #e9e0c6;
  text-decoration: none;
  font-size: 0.97rem;
  transition: color 0.15s, padding-left 0.15s;
}
.tei-footer li a::before {
  content: "\25c8\00a0"; /* ◈ */
  color: var(--tei-gold);
  font-size: 0.75em;
}
.tei-footer li a:hover { color: #fff; padding-left: 3px; }

/* the copyright bar now sits under the big footer — drop its heavy border */
#colophon { border-top: 1px solid rgba(201, 162, 39, 0.4) !important; }

@media (max-width: 900px) {
  .tei-footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .tei-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .tei-footer-inner { grid-template-columns: 1fr; }
}