/* =========================================================
   islam-education.com — extra.css (cleaned)
   ========================================================= */

/* ---------- Cubism-inspired palette ---------- */
:root {
  --md-primary-fg-color: #1f232a;                 /* deep slate */
  --md-primary-fg-color--light: #2a2f38;
  --md-primary-fg-color--dark: #15181d;

  --md-accent-fg-color: #d2a24a;                  /* warm amber/gold */
  --md-accent-fg-color--transparent: rgba(210, 162, 74, 0.15);

  --cubism-warm: #d2a24a;                         /* amber */
  --cubism-earth: #7a5a3a;                        /* brown */
  --cubism-muted-blue: #2f5670;                   /* muted blue */
}

/* ---------- Global content styling ---------- */

/* Make all content images rounded */
.md-typeset img {
  border-radius: 14px;
}

/* Links */
.md-typeset a {
  color: var(--cubism-warm);
}
.md-typeset a:hover {
  color: #e1bb6a;
}

/* Sidebar active item + hover */
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--cubism-warm);
}
.md-nav__item .md-nav__link--active {
  font-weight: 600;
}

/* Search focus ring */
.md-search__form:focus-within {
  box-shadow: 0 0 0 2px rgba(210, 162, 74, 0.25);
}

/* Primary button */
.md-button--primary {
  background-color: var(--cubism-warm);
  border-color: var(--cubism-warm);
  color: #111;
}
.md-button--primary:hover {
  background-color: #e1bb6a;
  border-color: #e1bb6a;
}

/* Header background (prevents unwanted green tint) */
.md-header {
  background: linear-gradient(90deg, #1f232a, #232833);
}

/* ---------- Navigation / layout tweaks ---------- */

/* Hide site title in sidebar */
.md-nav__title {
  display: none;
}

/* Hide the “Made with Material for MkDocs” footer line */
.md-footer-meta {
  display: none !important;
}

/* ---------- Hero image component ---------- */

.ie-hero {
  margin: 1.2rem 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

[data-md-color-scheme="slate"] .ie-hero {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ie-hero img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}