/* ============================================================
   evocation.css  -  Single evocation (dhikr) detail page
   Mirrors invocation.css; both pages share the same stylesheet
   but are kept separate so each can diverge if needed.
   ============================================================ */

:root {
    --pad-x: 12.5%;
    --primary: #775347;
    --primaryHover: rgba(119,83,71,.08);
    --secondery: #fdeedb;
    --seconderyHover: #e4d6c5;
    --thirdly: #c79c78;
    --thirdlyHover: #b38c6c;
    --transformBG: #fffaf6;
    --white: #fff;
    --black: #000;
    --border: rgba(0,0,0,.12);
    --lightGrey: #f8f8f8;
    --radius: 10px;
    --transition: .36s;
    --margin: 15px;
}

@font-face { font-family:'ITCHandelGothicArabic'; src:url('../font/Tajawal-Regular.ttf') format('truetype'); }
@font-face { font-family:'Yuzarsif'; src:url('../font/Yuzarsif-Regular.ttf') format('truetype'); }
@font-face { font-family:'Amiri'; src:url('../font/Amiri-Regular.ttf') format('truetype'); }

*, *::before, *::after { font-family:'ITCHandelGothicArabic',serif; margin:0; padding:0; box-sizing:border-box; }

body {
    background:var(--transformBG);
    display:grid;
    grid-template-areas:"header" "main" "footer";
    gap:var(--margin);
}

/* ============================================================
   HERO
   ============================================================ */
.inv-hero {
    position:relative;
    background:linear-gradient(135deg, #2c1a15 0%, #4a2f27 55%, var(--primary) 100%);
    padding:52px var(--pad-x) 44px;
    overflow:hidden;
}
.inv-hero::before {
    content:''; position:absolute; inset:0;
    background:url('../images/banners/invocations.jpg') center/cover no-repeat;
    opacity:.1;
}
.inv-hero::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 70% 40%, rgba(199,156,120,.15) 0%, transparent 60%);
}

.ih-inner {
    position:relative; z-index:1;
    max-width:820px; margin:0 auto;
    display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center;
}

.ih-breadcrumb {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center;
}
.ih-breadcrumb a { color:rgba(255,255,255,.7); text-decoration:none; font-size:13px; display:inline-flex; align-items:center; gap:4px; transition:color .2s; }
.ih-breadcrumb a:hover { color:var(--thirdly); }
.ih-breadcrumb .sep { color:rgba(255,255,255,.35); font-size:11px; }

.ih-type-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 14px;
    border-radius:50px;
    background:rgba(199,156,120,.2);
    color:var(--thirdly);
    border:1px solid rgba(199,156,120,.35);
    font-size:11px; font-weight:700; letter-spacing:.5px;
    text-transform:uppercase;
}

.ih-arabic {
    font-family:'Amiri',serif;
    font-size:clamp(22px, 3.5vw, 36px);
    color:var(--white);
    line-height:1.8;
    direction:rtl;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
}

.ih-sep { width:50px; height:2px; background:linear-gradient(to right,transparent,var(--thirdly),transparent); border-radius:2px; }

/* ============================================================
   CONTENT
   ============================================================ */
body main {
    grid-area:main;
    margin:0;
    padding:0;
}

.inv-inner {
    padding: 0 var(--pad-x) 64px;
}

.inv-content {
    max-width:900px; margin:0 auto;
    display:grid; gap:20px;
    padding-top:28px;
}

.inv-actions {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding:14px 20px;
    background:var(--white);
    border-radius:14px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 1px 6px rgba(0,0,0,.04);
}

.opt-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 14px;
    border-radius:50px;
    border:1px solid var(--border);
    background:var(--white);
    color:var(--primary);
    font-family:'ITCHandelGothicArabic',serif;
    font-size:12.5px;
    cursor:pointer;
    transition:all .2s;
    white-space:nowrap;
}
.opt-btn:hover { background:var(--secondery); border-color:var(--thirdly); transform:translateY(-1px); }
.opt-btn i { font-size:13px; }
.opt-btn.report { color:#c0392b; border-color:rgba(192,57,43,.25); }
.opt-btn.report:hover { background:rgba(192,57,43,.07); }

.inv-card-detail {
    background:var(--white);
    border-radius:14px;
    border:1px solid rgba(0,0,0,.06);
    overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.icd-header {
    padding:14px 20px;
    display:flex; align-items:center; gap:8px;
    font-weight:600; font-size:14px;
    color:var(--primary);
}

.icd-header.arabic-header {
    background:linear-gradient(to right,rgba(199,156,120,.15),rgba(199,156,120,.05));
    border-bottom:1px solid rgba(199,156,120,.2);
}

.icd-header.french-header {
    background:linear-gradient(to right,rgba(253,238,219,.8),rgba(253,238,219,.3));
    border-bottom:1px solid rgba(199,156,120,.18);
}

.icd-header.explain-header {
    background:linear-gradient(to right,rgba(119,83,71,.08),rgba(119,83,71,.02));
    border-bottom:1px solid rgba(119,83,71,.12);
}

.icd-icon {
    width:30px; height:30px; border-radius:50%;
    background:var(--secondery);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:var(--thirdly);
}

.icd-body { padding:22px 24px; }

.inv-arabic-text {
    font-family:'Amiri',serif;
    font-size:24px;
    line-height:1.85;
    color:#1a0f0a;
    direction:rtl;
    text-align:right;
}

.inv-french-text {
    font-size:16px;
    color:#333;
    line-height:1.85;
}

.inv-phonetic-text {
    font-size:15px;
    color:#555;
    line-height:1.75;
    font-style:italic;
}

.inv-refs {
    padding:16px 24px;
    background:var(--lightGrey);
    border-top:1px solid rgba(0,0,0,.06);
    display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

.inv-ref-label {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#999;
    font-weight:600;
    margin-right:4px;
}

.inv-ref-value {
    font-size:14px;
    color:var(--primary);
    font-weight:600;
}

.inv-explain-text {
    font-size:16px;
    color:#333;
    line-height:1.9;
}
.inv-explain-text p + p { margin-top:12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px) { :root { --pad-x:5%; } }

@media (max-width:768px) {
    :root { --pad-x:var(--margin); }
    .inv-hero { padding:32px var(--pad-x) 28px; }
    .ih-arabic { font-size:20px; }
    .inv-arabic-text { font-size:20px; }
    .icd-body { padding:16px; }
    .opt-btn span { display:none; }
    .opt-btn { padding:7px 10px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
body footer {
    grid-area:footer; background:var(--primary); color:var(--white);
    padding:var(--margin); font-size:16px;
}
body footer .guide { margin:0 var(--pad-x) 20px; display:flex; flex-wrap:wrap; gap:var(--margin); }
body footer .guide div { flex-grow:1; }
body footer .guide div p { font-size:16px; }
body footer .guide div h4 { font-size:17px; margin:6px 0; }
body footer .guide .links { margin-left:6px; display:grid; gap:3.5px; }
body footer .guide .links a { text-decoration:none; font-size:15px; color:var(--white); }
body footer hr { margin:30px var(--pad-x) 10px; height:.001rem; color:grey; }
body footer .copyright { margin:0 var(--pad-x); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--margin); }
body footer .copyright .social { display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--margin); font-size:22px; }
body footer .copyright .social a { text-decoration:none; color:var(--white); transition:color .3s; }
body footer .copyright .social a:hover { color:var(--thirdly); }

@media (max-width:768px) {
    body footer .guide, body footer hr, body footer .copyright { margin:var(--margin) var(--margin) 0; }
}