/* ============================================================
   Quran Learning Online — Global Design System
   Shared stylesheet for the entire website
   ============================================================ */

:root {
  --blue: #2A5CFF;
  --blue-dark: #1E44C7;
  --navy: #0B1730;
  --navy-soft: #111F3D;
  --bg-light: #F5F6FA;
  --white: #FFFFFF;
  --text-dark: #111827;
  --text-gray: #5B6472;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(11, 23, 48, 0.08);
  --shadow-sm: 0 4px 14px rgba(11, 23, 48, 0.06);
  --container: 1180px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 88px 0; }
.section.gray { background: var(--bg-light); }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head p { color: var(--text-gray); margin-top: 14px; font-size: 16px; }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
h1, h2, h3 { font-weight: 800; line-height: 1.15; color: var(--text-dark); }
.accent { color: var(--blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--radius-pill);
  padding: 15px 28px;
  transition: transform .15s ease, box-shadow .15s ease;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(42, 92, 255, .3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(42, 92, 255, .38);
}
.btn-text {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--text-dark);
}
.btn-text:hover { color: var(--blue); }

/* ============================================================
   HEADER
   Single authoritative implementation — every header/.nav rule
   for every breakpoint lives in this block only. No other part
   of this stylesheet (and no page-level <style>) touches .nav.
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  padding: 14px 16px 0;
}

/* HEADER DESKTOP
   3-column grid: left | center | right. The side tracks use
   minmax(0, 1fr) — NOT plain 1fr — so they are always exactly
   equal width and the center (auto) column sits at the true
   mathematical center of the .nav container, regardless of
   whether the logo or the CTA is wider. Plain "1fr" would let
   whichever side has more content (min-content) claim extra
   track width and drag the center off-true-center — that was
   the root cause of the previous "centered but not really"
   header. */
.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px 12px 18px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 24px rgba(11, 23, 48, 0.08), 0 1px 3px rgba(11, 23, 48, 0.04);
  border: 1px solid rgba(11, 23, 48, 0.06);
  box-sizing: border-box;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  min-width: 0;
  justify-self: start;
}
.nav-logo img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 28px;
  font-weight: 600;
  font-size: 14.5px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-self: center;
}
.nav-links > li > a {
  color: var(--text-dark);
  padding: 6px 4px;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.nav-links > li > a:hover,
.nav-links > li > a.active {
  color: var(--blue);
}

.nav-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  justify-self: end;
}
.nav-cta .btn-primary {
  padding: 11px 20px !important;
  font-size: 13.5px !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-dark);
  padding: 4px;
}

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  min-width: 200px;
  padding: 12px 0;
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11, 23, 48, .06);
  z-index: 60;
  list-style: none;
  margin: 0;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu li a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}
.nav-dropdown-menu li a:hover {
  background: var(--bg-light);
  color: var(--blue);
}

/* HEADER MOBILE
   One breakpoint (960px) owns every mobile/tablet header rule.
   Nothing below 960px touches .nav a second time anywhere else
   in this file — that duplication (a second .nav margin/max-width
   override inside the old "mobile container padding" section,
   plus a near-identical repeat at 560px) was producing double
   margins and made the two breakpoints fight each other. */
@media (max-width: 960px) {
  header { padding: 10px 12px 0; }

  .nav {
    display: flex;
    justify-content: space-between;
    grid-template-columns: none;
    border-radius: 16px;
    padding: 10px 14px;
    position: relative;
    max-width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
  }

  .nav-logo {
    font-size: 15px;
    /* Desktop gives .nav-logo min-width:0 so the CSS Grid side
       tracks can shrink evenly (see HEADER DESKTOP above). In this
       flex layout that same min-width:0 would let flex-shrink
       squeeze the logo narrower than its text, so the text would
       silently overflow underneath the CTA button. Restore the
       normal content-based floor here. */
    min-width: auto;
    flex-shrink: 1;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    /* Desktop sets justify-self: center for the grid layout above.
       CSS Box Alignment applies justify-self to absolutely
       positioned boxes too, so without resetting it here the
       dropdown would center itself into a narrow box instead of
       stretching to fill left:0/right:0. */
    justify-self: stretch;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px !important;
    gap: 4px !important;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(11, 23, 48, 0.12);
    border: 1px solid rgba(11, 23, 48, 0.06);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 60;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links > li > a {
    display: block;
    padding: 12px 10px;
    width: 100%;
  }

  .nav-cta { min-width: auto; }
  .nav-toggle { display: block !important; }
  .nav-cta .btn-primary span.long { display: none; }

  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 0 0 12px !important;
    display: none;
    background: transparent !important;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block !important; }
}

@media (max-width: 560px) {
  .nav {
    margin-left: 10px;
    margin-right: 10px;
    max-width: calc(100% - 20px);
  }
}

/* ---------- Page Hero ---------- */
.page-hero {
  background: var(--navy);
  color: #fff;
  padding: 70px 0 60px;
  text-align: center;
}
.page-hero h1 {
  color: #fff;
  font-size: 38px;
  margin-bottom: 16px;
  font-weight: 800;
  line-height: 1.2;
}
.page-hero p,
.page-hero .sub {
  color: rgba(255, 255, 255, .75);
  font-size: 16.5px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 18px;
}
.breadcrumb a {
  color: rgba(255, 255, 255, .75);
  font-weight: 500;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb .separator { opacity: .5; font-size: 10px; }
.breadcrumb .current { color: rgba(255, 255, 255, .9); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(11, 23, 48, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 18px;
}
.card h3 { font-size: 16.5px; margin-bottom: 9px; }
.card p { color: var(--text-gray); font-size: 14px; margin-bottom: 14px; }
.card a.learn {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 960px) {
  .card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin-left: auto; margin-right: auto; }
.faq-item { border-bottom: 1px solid #E4E7EF; }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 20px 0;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-dark);
  font-family: inherit;
}
.faq-a {
  display: none;
  padding: 0 0 20px;
  color: var(--text-gray);
  font-size: 15px;
  line-height: 1.7;
}
.faq-item.open .faq-a { display: block; }

/* ---------- Prose (legal / content pages) ---------- */
.prose {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-gray);
  font-size: 16px;
  text-align: left;
}
.prose p { margin-bottom: 16px; }
.prose h2 {
  color: var(--text-dark);
  font-size: 24px;
  margin: 36px 0 14px;
}
.prose ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 16px;
}
.prose li { margin-bottom: 8px; }

/* ---------- Article pages ---------- */
.article-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 14px;
  color: var(--text-gray);
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid #E5E7EB;
}
.article-meta i { margin-right: 6px; color: var(--blue); }
.tag {
  display: inline-block;
  background: rgba(42, 92, 255, .08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.article-body h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 40px 0 16px;
  color: var(--text-dark);
  padding-left: 16px;
  border-left: 4px solid var(--blue);
}
.article-body h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 28px 0 12px;
  color: var(--text-dark);
}
.article-body h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 20px 0 8px;
  color: var(--text-dark);
}
.article-body p {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.75;
  color: #374151;
}
.article-body ul,
.article-body ol {
  margin: 0 0 20px 24px;
  list-style: disc;
}
.article-body ol { list-style: decimal; }
.article-body li {
  margin-bottom: 8px;
  line-height: 1.7;
  color: #374151;
}
.article-body strong {
  font-weight: 700;
  color: var(--text-dark);
}
.article-body a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a:hover { color: var(--blue-dark); }
.article-body blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--bg-light);
  border-left: 4px solid var(--blue);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #374151;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.article-body th,
.article-body td {
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  text-align: left;
}
.article-body th {
  background: var(--bg-light);
  font-weight: 700;
  color: var(--text-dark);
}
.article-body .arabic-example,
.article-body .arabic {
  font-size: 22px;
  direction: rtl;
  text-align: right;
  font-family: serif;
  color: var(--navy);
  margin: 16px 0;
  padding: 16px;
  background: var(--bg-light);
  border-radius: 12px;
}
.cta-section {
  margin: 40px 0;
  padding: 32px;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
}
.cta-section h3 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 12px;
}
.cta-section p {
  color: rgba(255, 255, 255, .8);
  margin-bottom: 20px;
}
.cta-section .btn-primary { margin-top: 8px; }
.faq-mini {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--bg-light);
  border-radius: 12px;
  border: 1px solid #E5E7EB;
}
.faq-mini strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dark);
}
.internal-links {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #E5E7EB;
}
.internal-links h3 {
  font-size: 18px;
  margin-bottom: 14px;
}
.internal-links a {
  color: var(--blue);
  font-weight: 500;
  display: inline;
  margin-right: 4px;
}
.internal-links a:hover { text-decoration: underline; }

/* ============================================================
   FOOTER
   Single authoritative implementation — every footer rule for
   every breakpoint lives in this block (desktop here, mobile in
   the one @media (max-width: 768px) block below it).
   ============================================================ */
.site-footer {
  padding: 0 24px 32px;
  margin-top: 24px;
  text-align: center;
}
.footer-bar {
  max-width: var(--container);
  margin: 0 auto;
  background: var(--bg-light);
  border-radius: 20px;
  padding: 28px 32px 20px;
  border: 1px solid #E5E7EB;
}
.footer-connect {
  text-align: center;
  margin-bottom: 20px;
}
.footer-connect-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-gray);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.footer-social {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  border: 1px solid #E5E7EB;
  transition: transform .2s ease, box-shadow .2s ease;
}
.footer-social a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  color: var(--blue);
}

/* FOOTER BOTTOM ROW — true 3-column centering, same minmax(0,1fr)
   technique as the header nav so the copyright stays at the exact
   center regardless of how long the credit or legal-links text is. */
.footer-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-gray);
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
}
.footer-credit {
  justify-self: start;
  text-align: left;
}
.footer-credit a {
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-credit a:hover,
.footer-legal a:hover { color: var(--blue); }
.footer-copy {
  justify-self: center;
  text-align: center;
}
.footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-self: end;
  justify-content: flex-end;
  text-align: right;
}

.footer-grid { display: none !important; } /* legacy multi-column footer markup, unused by current footer.html */

/* FOOTER MOBILE
   One breakpoint (768px) owns every mobile footer rule, including
   the single-column stack for the bottom row. */
@media (max-width: 768px) {
  .footer-bar {
    padding: 24px 18px 18px;
    border-radius: 18px;
  }
  .footer-bottom-row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
  }
  .footer-credit,
  .footer-copy,
  .footer-legal {
    justify-self: center;
    text-align: center;
    justify-content: center;
  }

  .page-hero h1 { font-size: 28px; }
  .article-wrap { padding: 32px 18px 48px; }
  .article-body h2 { font-size: 22px; }
  .article-body h3 { font-size: 18px; }
}

/* ---------- Mobile container padding ---------- */
@media (max-width: 920px) {
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }
  .btn { width: auto !important; max-width: 100%; }
  .page-hero .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 560px) {
  .wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .page-hero h1 { font-size: 24px; }
}

/* ---------- Center-aligned headings site-wide ---------- */
.page-hero { text-align: center; }


/* ---------- Blog listing clusters ---------- */
.cluster-block {
  margin-bottom: 48px;
  padding: 28px;
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(11, 23, 48, 0.05);
}
.cluster-block.dim { opacity: 0.85; }
.cluster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cluster-head-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cluster-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.cluster-icon.dim { background: var(--text-gray); }
.cluster-head h2 {
  font-size: 20px;
  margin-bottom: 4px;
}
.cluster-head p {
  font-size: 14px;
  color: var(--text-gray);
  margin: 0;
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mini-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(11, 23, 48, 0.06);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(42, 92, 255, 0.2);
  color: var(--blue);
}
.mini-card i {
  font-size: 12px;
  color: var(--blue);
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .mini-grid { grid-template-columns: 1fr; }
  .cluster-block { padding: 20px; }
}

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  z-index: 100;
  transition: transform 0.2s ease;
}
.whatsapp-fab:hover {
  transform: scale(1.08);
  color: #fff;
}

/* ---------- Related grid (from page-specific) ---------- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.related-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(11, 23, 48, 0.05);
  transition: transform 0.15s ease;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-dark);
}
.related-card:hover { color: var(--blue); }
.related-card h3 { font-size: 15px; margin-bottom: 6px; }
.related-card i { color: var(--blue); font-size: 12px; flex-shrink: 0; }
.related-card p { font-size: 13px; color: var(--text-gray); }
@media (max-width: 560px) {
  .related-grid { grid-template-columns: 1fr; }
}
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-q i {
  transition: transform 0.2s ease;
  color: var(--blue);
  flex-shrink: 0;
}


/* ---------- Page hero: force center alignment for all children ---------- */
.page-hero {
  text-align: center;
}
.page-hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-hero h1,
.page-hero p,
.page-hero .sub,
.page-hero .eyebrow {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.page-hero .btn,
.page-hero .btn-primary {
  margin-left: auto;
  margin-right: auto;
}
.page-hero [style*="display:flex"] {
  justify-content: center !important;
  width: 100%;
}

/* Body content sections - consistent left-aligned readable prose, centered containers */
.section .wrap > h2,
.section .wrap > .section-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* (Footer already made consistent and centered above — see FOOTER section.) */