/* ============================================================
   name.css – Single Name detail page
   ============================================================ */

:root {
    --pad-x: 12.5%;
    --primary: #775347;
    --secondery: #fdeedb;
    --thirdly: #c79c78;
    --thirdlyHover: #b38c6c;
    --transformBG: #fffaf6;
    --white: #fff;
    --border: rgba(0,0,0,.12);
    --lightGrey: #f8f8f8;
    --radius: 10px;
    --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
   ============================================================ */
.name-hero {
    position:relative;
    background:linear-gradient(135deg, #1a0f0a 0%, #3d2218 50%, var(--primary) 100%);
    padding:60px var(--pad-x) 50px;
    overflow:hidden;
    text-align:center;
}
.name-hero::before { content:''; position:absolute; inset:0; background:url('../images/banners/names.jpg') center/cover no-repeat; opacity:.1; }
.name-hero::after  { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%, rgba(199,156,120,.2) 0%, transparent 60%); }

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

.nh-breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.nh-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; }
.nh-breadcrumb a:hover { color:var(--thirdly); }
.nh-breadcrumb .sep { color:rgba(255,255,255,.35); font-size:11px; }
.nh-breadcrumb .cur { color:rgba(255,255,255,.9); font-size:13px; }

.nh-num {
    width:52px; height:52px; border-radius:50%;
    background:rgba(199,156,120,.2); border:2px solid rgba(199,156,120,.4);
    display:flex; align-items:center; justify-content:center;
    font-family:'Yuzarsif',serif; font-size:20px; color:var(--thirdly);
}

.nh-arabic {
    font-family:'Amiri',serif;
    font-size:clamp(52px, 8vw, 80px);
    color:#fff;
    direction:rtl;
    text-shadow:0 3px 20px rgba(0,0,0,.35);
    line-height:1.2;
}

.nh-phonetic {
    font-family:'Yuzarsif',serif;
    font-size:clamp(22px, 3vw, 32px);
    color:var(--thirdly);
}

.nh-meaning {
    font-size:20px;
    color:rgba(255,255,255,.8);
    padding:6px 20px;
    background:rgba(255,255,255,.1);
    border-radius:50px;
    border:1px solid rgba(255,255,255,.15);
}

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

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

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

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

/* Actions */
.name-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);
}

/* Card */
.name-card {
    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);
}

.nc-header {
    padding:14px 20px;
    display:flex; align-items:center; gap:8px;
    font-weight:600; font-size:14px; color:var(--primary);
    background:linear-gradient(to right,rgba(253,238,219,.8),rgba(253,238,219,.3));
    border-bottom:1px solid rgba(199,156,120,.18);
}
.nc-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);
}
.nc-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); }

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

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

/* ============================================================
   OPT-BTN
   ============================================================ */
.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); }

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

@media (max-width:768px) {
    :root { --pad-x:var(--margin); }
    .name-hero { padding:36px var(--pad-x) 28px; }
    .nh-arabic { font-size:52px; }
    .opt-btn span { display:none; }
    .opt-btn { padding:7px 10px; }
    .nc-body { padding:16px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
body footer { grid-area:footer; background:var(--primary); color:#fff; 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:#fff; }
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:#fff; 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; } }