/*
Theme Name: taqwa Child
Template: taqwa
*/

header {
    position: relative !important;
    background: #fff;
}
nav > div > ul > li{
	margin: 0 16px !important;
}
@media (min-width: 1200px) {
	.container {
		max-width: 72vw !important;
	}
}
.accordion-button {
    cursor: pointer;
    background-color: #f1f1f1;
    border: none;
    outline: none;
    padding: 10px;
    text-align: left;
    width: 100%;
    transition: background-color 0.4s ease;
}

.accordion-button:hover {
    background-color: #ddd;
}

.accordion-body {
    padding: 10px;
    display: none;
    background-color: white;
    border-top: 1px solid #ccc;
}

.accordion-item {
    margin-bottom: 10px;
}

/* General Container Size for Large Screens */
@media (min-width: 1200px) {
    div.ZAKAH-CUSTOM .e-con-inner {
        max-width: 72vw !important;
    }
}

/* Accordion Header Styling */
div.ZAKAH-CUSTOM .mega-accordion .ui-accordion-header {
    cursor: pointer !important;
    background-color: #f1f1f1 !important;
    border: none !important;
    outline: none !important;
    padding: 10px !important;
    text-align: left !important;
    width: 100% !important;
    transition: background-color 0.4s ease !important;
    color: #000 !important; /* Matches the old accordion's text color */
    margin-top: 13px !important; /* Keep margin from your new HTML */
    border-style: solid !important;
    border-color: #000 !important;
}

/* Hover effect for the Accordion Header */
div.ZAKAH-CUSTOM .mega-accordion .ui-accordion-header:hover {
    background-color: #ddd !important;
}

/* Accordion Body Styling */
div.ZAKAH-CUSTOM .mega-accordion .ui-accordion-content {
    padding: 10px !important;
    display: none !important; /* Accordion body starts hidden */
    background-color: white !important;
    border-top: 1px solid #ccc !important;
    border-style: solid !important;
    border-color: #fff !important;
    margin-bottom: 13px !important; /* Keep margin from your new HTML */
}

/* Accordion Body Active (when expanded) */
div.ZAKAH-CUSTOM .mega-accordion .ui-accordion-content-active {
    display: block !important;
}

/* Individual Accordion Item Styling */
div.ZAKAH-CUSTOM .mega-accordion .ui-accordion-header-active {
    background-color: #f1f1f1 !important;
    color: #000 !important;
}

div.ZAKAH-CUSTOM .mega-accordion .ui-accordion-header-collapsed {
    color: #000 !important;
    background-color: #f1f1f1 !important;
}

/* Accordion Icons */
div.ZAKAH-CUSTOM .mega-accordion .ui-accordion-header .ui-icon {
    font-size: 15px !important; /* Keep the icon sizing from your new HTML */
}

/* DUA OF THE DAY */
.daily-dua {
  margin: 0px auto !important;
  padding: 30px 50px;
	text-align:center;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
  font-family: "Georgia", serif;
  line-height: 1.8;
  color: #222;
  text-align: center;      /* center all text */
}

/* Title */
.daily-dua b {
  display: block;
  font-size: 24px;
  margin-bottom: 15px;
  color: #fff;
}

/* Arabic */
.daily-dua .arabic {
  font-family: "Amiri", "Scheherazade", serif;
  font-size: 30px;
  line-height: 2;
  margin: 20px 0;
  color: #fff;
  direction: rtl;
  text-align: center;
}

/* Transliteration */
.daily-dua .transliteration {
  font-size: 17px;
  color: #fff;
  margin: 12px 0;
  font-style: italic;
  text-align: center !important;
}

/* Translation */
.daily-dua .translation {
  font-size: 17px;
  color: #fff;
  margin: 12px 0;
  text-align: center !important;
}

/* Reference (small, centered with dash, italic, teal) */
.daily-dua .reference {
  display: block;
  font-size: 14px;
  color: #fff;   /* teal color */
  margin-top: 15px;
  text-align: center !important;
  font-style: italic;
}
.daily-dua .reference::before {
  content: "— ";
}
.pst-mta {
  display: none !important;
}
/* =========================
   BLOG COLORS
   ========================= */

/* H1–H5 headings and links inside blog content → gold */
/* Force blog headings (h4 & h6 specifically) */
.blog-detail-desc h4,
.blog-detail-desc h4 strong,
.blog-detail-desc h6,
.blog-detail-desc h6 strong {
  color: #c29765 !important;
}



/* H6 in blog content (headings + links) → black */
.blog-detail-desc h6,
.blog-detail-desc h6 a,
.blog-detail-desc h6 strong {
  color: #000 !important;
}

/* Any other links inside blog content → gold */
.blog-detail-desc p a,
.blog-detail-desc li a,
.blog-detail-desc div a {
  color: #c29765 !important;
}
/* Fix reference links (including <em> inside <a>) */
.blog-detail-desc ol li a,
.blog-detail-desc ol li a em,
.blog-detail-desc ul li a,
.blog-detail-desc ul li a em {
  color: #c29765 !important;
  font-style: normal !important; /* remove forced italics if you want */
}