/*
Theme Name:   Shahid Imam Islamic Child
Theme URI:    https://shahidimamofficial.com
Description:  Islamic Education & Blog Child Theme for Shahid Imam Official — Built for Kadence
Author:       Shahid Imam
Author URI:   https://shahidimamofficial.com
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  shahid-imam-islamic
*/

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Cinzel:wght@400;600&display=swap');

:root {
  --gold: #C9A84C;
  --gold-light: #E8C97A;
  --gold-dim: #8B6914;
  --green: #1A4A2E;
  --green-mid: #2D6B47;
  --green-light: #3E8A5E;
  --cream: #FAF6EE;
  --cream-dark: #F0E8D5;
  --text-dark: #1C1C1C;
  --text-mid: #3A3A3A;
  --text-light: #7A7A7A;
  --white: #FFFFFF;
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', sans-serif !important;
  background-color: var(--cream) !important;
  color: var(--text-dark) !important;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.kadence-heading,
.entry-title {
  font-family: 'Amiri', serif !important;
  color: var(--green) !important;
  line-height: 1.3 !important;
}

p, li, span, label, input, textarea, button, a {
  font-family: 'Lato', sans-serif !important;
}

a { color: var(--green-mid); transition: color 0.2s ease; }
a:hover { color: var(--gold-dim); }

/* ===== KADENCE HEADER ===== */
#masthead,
.site-header,
.kadence-sticky-header,
header.site-header {
  background-color: #1A4A2E !important;
  border-bottom: 1px solid rgba(201,168,76,0.35) !important;
}

/* Header nav links */
#masthead .main-navigation a,
.kadence-navigation a,
header .site-branding + nav a,
#site-navigation a {
  color: rgba(255,255,255,0.88) !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease !important;
}

#masthead .main-navigation a:hover,
.kadence-navigation a:hover {
  color: var(--gold-light) !important;
}

/* Site title */
.site-title, .site-title a {
  font-family: 'Cinzel', serif !important;
  color: var(--white) !important;
  font-size: 1.2rem !important;
}

.site-description {
  color: var(--gold-light) !important;
  font-size: 0.7rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* Mobile menu toggle */
.kadence-menu-toggle,
button.menu-toggle {
  color: var(--white) !important;
}

/* ===== BUTTONS ===== */
.wp-element-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.kadence-button,
.kb-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim)) !important;
  color: var(--green) !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(201,168,76,0.3) !important;
  transition: all 0.3s ease !important;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.kadence-button:hover,
.kb-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(201,168,76,0.5) !important;
  background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
  color: var(--green) !important;
}

/* ===== PAGE / CONTENT BACKGROUND ===== */
.site-main,
#primary,
.content-area {
  background-color: var(--cream) !important;
}

/* ===== BLOG CARDS (Kadence Blog Grid) ===== */
.kadence-post-grid article,
.kadence-blog-layout article,
.wp-block-kadence-posts article,
.kadence-posts article,
article.type-post {
  background: var(--white) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(201,168,76,0.1) !important;
  transition: all 0.3s ease !important;
}

.kadence-post-grid article:hover,
.kadence-blog-layout article:hover,
article.type-post:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 40px rgba(26,74,46,0.12) !important;
}

/* Post titles in grid */
.kadence-post-grid .entry-title a,
.kadence-blog-layout .entry-title a,
.wp-block-kadence-posts .entry-title a {
  font-family: 'Amiri', serif !important;
  color: var(--text-dark) !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

.kadence-post-grid .entry-title a:hover,
.kadence-blog-layout .entry-title a:hover {
  color: var(--green) !important;
}

/* Category badge */
.kadence-post-grid .cat-links a,
.kadence-blog-layout .cat-links a,
.entry-meta .cat-links a,
.post-categories a {
  background: var(--gold) !important;
  color: var(--green) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
}

/* Read More */
.kadence-post-grid .more-link,
.kadence-blog-layout .more-link,
.entry-content .more-link {
  color: var(--green) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ===== SINGLE POST ===== */
.single .entry-content,
.page .entry-content {
  font-size: 1.05rem !important;
  line-height: 1.9 !important;
  color: var(--text-mid) !important;
  font-weight: 300 !important;
  max-width: 760px !important;
}

.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
  color: var(--green) !important;
  margin-top: 2em !important;
}

/* Bismillah header auto-injected */
.bismillah-header {
  text-align: center;
  font-family: 'Amiri', serif !important;
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 30px;
  padding: 20px;
  border-bottom: 1px solid rgba(201,168,76,0.25);
}

/* Blockquote — Quran/Hadith styling */
blockquote,
.wp-block-quote,
.wp-block-pullquote {
  border-left: 4px solid var(--gold) !important;
  background: linear-gradient(135deg, rgba(26,74,46,0.04), rgba(201,168,76,0.07)) !important;
  padding: 24px 30px !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 2em 0 !important;
  font-family: 'Amiri', serif !important;
  font-size: 1.2rem !important;
  font-style: italic !important;
  color: var(--green) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

blockquote p, .wp-block-quote p {
  font-family: 'Amiri', serif !important;
  font-size: 1.2rem !important;
  color: var(--green) !important;
}

blockquote cite,
.wp-block-quote cite,
.wp-block-quote footer {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.78rem !important;
  color: var(--gold-dim) !important;
  font-style: normal !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Arabic text */
.arabic-text, [lang="ar"] {
  direction: rtl !important;
  font-family: 'Amiri', serif !important;
  font-size: 1.7rem !important;
  color: var(--gold) !important;
  line-height: 2 !important;
}

/* Islamic reference box */
.islamic-reference-box {
  margin: 40px 0;
  padding: 32px 36px;
  background: linear-gradient(135deg, rgba(26,74,46,0.05), rgba(201,168,76,0.08));
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
}

/* ===== DIVIDERS ===== */
hr, .wp-block-separator,
.kadence-divider {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
  opacity: 0.4 !important;
  margin: 36px auto !important;
}

/* ===== KADENCE ROW / SECTION BACKGROUNDS ===== */
.wp-block-kadence-rowlayout.dark-green,
.kadence-inner-column-inner.dark-section {
  background: linear-gradient(135deg, #0D2E1A, #1A4A2E) !important;
}

/* ===== WIDGET AREA / SIDEBAR ===== */
.widget-title, .widgettitle {
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  border-bottom: 2px solid var(--gold) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* ===== FORMS ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  border: 1px solid rgba(201,168,76,0.3) !important;
  border-radius: 4px !important;
  background: var(--white) !important;
  color: var(--text-dark) !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.9rem !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}

/* ===== FOOTER ===== */
#colophon,
.site-footer,
footer.site-footer {
  background-color: #0A1F12 !important;
  color: rgba(255,255,255,0.65) !important;
  border-top: 1px solid rgba(201,168,76,0.15) !important;
}

#colophon h1, #colophon h2,
#colophon h3, #colophon h4,
.site-footer .widget-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.8rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  border-bottom-color: rgba(201,168,76,0.2) !important;
}

.site-footer a, #colophon a {
  color: rgba(255,255,255,0.5) !important;
  transition: color 0.2s ease !important;
}

.site-footer a:hover, #colophon a:hover {
  color: var(--gold-light) !important;
}

.site-footer p, #colophon p {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.88rem !important;
  line-height: 1.75 !important;
}

/* Footer bottom bar */
.site-info, .footer-wrap {
  border-top: 1px solid rgba(201,168,76,0.1) !important;
  color: rgba(255,255,255,0.3) !important;
  font-size: 0.78rem !important;
}

/* ===== KADENCE ICON BOX / INFO BOX ===== */
.wp-block-kadence-infobox,
.kadence-info-box-wrap {
  background: var(--white) !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.wp-block-kadence-infobox:hover,
.kadence-info-box-wrap:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 40px rgba(26,74,46,0.1) !important;
}

.kt-blocks-info-box-title,
.kadence-info-box-title {
  font-family: 'Amiri', serif !important;
  color: var(--green) !important;
}

/* ===== KADENCE TABS ===== */
.kt-tabs-wrap .kt-tab-title {
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
}

.kt-tabs-wrap .kt-tab-title.kt-tab-title-active,
.kt-tabs-wrap .kt-tab-title:hover {
  color: var(--gold) !important;
  border-bottom-color: var(--gold) !important;
}

/* ===== PAGINATION ===== */
.page-numbers, .nav-links a {
  color: var(--green) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  transition: all 0.2s ease !important;
}

.page-numbers.current,
.page-numbers:hover,
.nav-links a:hover {
  background: var(--gold) !important;
  color: var(--green) !important;
  border-color: var(--gold) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--green-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }
  blockquote { padding: 16px 18px !important; font-size: 1rem !important; }
  .site-footer { padding: 40px 5% 20px !important; }
  .single .entry-content { font-size: 0.98rem !important; }
}