/*
Theme Name: Calligraphy Archive Theme
Description: RTL dark/gold theme for CalligraphyArchive.com, built for the khattati_item CPT from calligraphy-archive-core.
Author: Ashnab Creations
Version: 1.0.0
Text Domain: khattati
*/

:root{
  --khattati-bg:#0f0f12;
  --khattati-bg-elevated:#191920;
  --khattati-gold:#c9a24b;
  --khattati-gold-soft:#e8cf8a;
  --khattati-text:#f2ede2;
  --khattati-text-muted:#a9a49a;
  --khattati-border:#2b2b33;
  --khattati-radius:10px;
  --khattati-font-ur:'Noto Nastaliq Urdu', serif;
  --khattati-font-ar:'Amiri', serif;
  --khattati-font-ui:'Plus Jakarta Sans', sans-serif;
}

html{ direction: rtl; }
body{
  background: var(--khattati-bg);
  color: var(--khattati-text);
  font-family: var(--khattati-font-ui);
  margin:0;
}
a{ color: var(--khattati-gold-soft); text-decoration:none; }
a:hover{ color: var(--khattati-gold); }

.khattati-container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* ---- header ---- */
.khattati-header{
  background: var(--khattati-bg-elevated);
  border-bottom:1px solid var(--khattati-border);
  padding:16px 0;
  position: sticky; top:0; z-index:50;
}
.khattati-header .khattati-container{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.khattati-logo{ font-family: var(--khattati-font-ar); font-size:26px; color: var(--khattati-gold); }
.khattati-nav a{ margin-inline-start:18px; color: var(--khattati-text); }
.khattati-nav a:hover{ color: var(--khattati-gold); }
.khattati-user-status{ font-size:14px; color: var(--khattati-text-muted); }

/* ---- occasion banner ---- */
.khattati-occasion-banner{
  background: linear-gradient(90deg, #2a1f0d, #1a1a20);
  border:1px solid var(--khattati-gold);
  border-radius: var(--khattati-radius);
  padding:18px 24px;
  margin:24px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.khattati-occasion-banner h2{ margin:0; color: var(--khattati-gold-soft); font-family: var(--khattati-font-ur); font-weight:normal; }

/* ---- search ---- */
.khattati-search-bar{ display:flex; gap:10px; margin:28px 0; }
.khattati-search-bar input{
  flex:1; padding:14px 18px; border-radius: var(--khattati-radius);
  border:1px solid var(--khattati-border); background: var(--khattati-bg-elevated); color:var(--khattati-text);
  font-size:16px;
}
.khattati-search-bar button{
  padding:14px 24px; border-radius: var(--khattati-radius); border:none;
  background: var(--khattati-gold); color:#1a1a1a; font-weight:bold; cursor:pointer;
}

/* ---- chips ---- */
.khattati-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.khattati-chip{
  padding:6px 14px; border-radius:999px; border:1px solid var(--khattati-border);
  color: var(--khattati-text-muted); font-size:13px;
}
.khattati-chip.active, .khattati-chip:hover{ border-color: var(--khattati-gold); color: var(--khattati-gold-soft); }

/* ---- grid / cards ---- */
.khattati-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:20px; margin:24px 0;
}
.khattati-card{
  background: var(--khattati-bg-elevated); border:1px solid var(--khattati-border);
  border-radius: var(--khattati-radius); overflow:hidden; transition: border-color .2s;
}
.khattati-card:hover{ border-color: var(--khattati-gold); }
.khattati-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#000; }
.khattati-card .khattati-card-body{ padding:12px 14px; }
.khattati-card h3{ font-size:14px; margin:0 0 6px; color: var(--khattati-text); }
.khattati-badge{
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--khattati-border); color: var(--khattati-text-muted);
}
.khattati-badge.premium{ border-color: var(--khattati-gold); color: var(--khattati-gold-soft); }
.khattati-badge.admin{ border-color:#a33; color:#e88; }

/* ---- single item ---- */
.khattati-single-wrap{ display:grid; grid-template-columns: 1fr 340px; gap:32px; margin:32px 0; }
@media (max-width: 800px){ .khattati-single-wrap{ grid-template-columns: 1fr; } }
.khattati-preview-box{
  background: var(--khattati-bg-elevated); border:1px solid var(--khattati-border);
  border-radius: var(--khattati-radius); padding:20px; text-align:center; position:relative;
}
.khattati-preview-box img{ max-width:100%; border-radius:6px; }
.khattati-original-text{
  font-family: var(--khattati-font-ar); font-size:22px; line-height:2; text-align:center;
  padding:16px; background: var(--khattati-bg-elevated); border-radius: var(--khattati-radius); margin:16px 0;
}
.khattati-sidebar-box{
  background: var(--khattati-bg-elevated); border:1px solid var(--khattati-border);
  border-radius: var(--khattati-radius); padding:20px; margin-bottom:16px;
}
.khattati-download-btn{
  display:block; width:100%; padding:14px; border-radius: var(--khattati-radius); border:none;
  background: var(--khattati-gold); color:#1a1a1a; font-weight:bold; cursor:pointer; font-size:15px;
}
.khattati-download-btn:disabled{ background:#555; color:#999; cursor:not-allowed; }
.khattati-upgrade-cta{
  display:block; text-align:center; padding:14px; border-radius: var(--khattati-radius);
  border:1px dashed var(--khattati-gold); color: var(--khattati-gold-soft);
}

/* ---- forms (commission page) ---- */
.khattati-form label{ display:block; margin:14px 0 6px; color: var(--khattati-text-muted); }
.khattati-form input, .khattati-form select, .khattati-form textarea{
  width:100%; padding:12px; border-radius: var(--khattati-radius); border:1px solid var(--khattati-border);
  background: var(--khattati-bg-elevated); color: var(--khattati-text); box-sizing:border-box; font-family:inherit;
}
.khattati-form button{
  margin-top:20px; padding:14px 28px; border-radius: var(--khattati-radius); border:none;
  background: var(--khattati-gold); color:#1a1a1a; font-weight:bold; cursor:pointer;
}

/* ---- ad slots ---- */
.khattati-ad-slot{
  border:1px dashed var(--khattati-border); color: var(--khattati-text-muted);
  text-align:center; padding:20px; margin:24px 0; font-size:12px; border-radius: var(--khattati-radius);
}

.khattati-footer{ border-top:1px solid var(--khattati-border); margin-top:60px; padding:30px 0; color: var(--khattati-text-muted); font-size:13px; }
.khattati-footer a{ margin-inline-start:14px; }