/*
Theme Name: پرتال شخصی UX
Theme URI: https://example.com
Author: طراح تجربه کاربری
Author URI: https://example.com
Description: قالب وردپرسی مینیمال، راست‌چین و فارسی برای نمایش نمونه‌کارهای طراحی تجربه‌ی کاربری (UX). با فونت وزیرمتن، هدر و فوتر کم‌حجم و مجموعه‌ای از قاب‌های شیشه‌ای شش‌ضلعی الهام‌گرفته از دنیای UX.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mehran-ux
Tags: rtl-language-support, one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root{
  --bg-void:      #0a0710;
  --bg-void-2:    #120a1a;
  --bg-red:       #3a0e1e;
  --bg-purple:    #3b1268;
  --accent-purple:#a855f7;
  --accent-violet:#7c3aed;
  --accent-rose:  #e0446f;
  --glass-fill:   rgba(255,255,255,0.045);
  --glass-fill-2: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.14);
  --glass-border-bright: rgba(200,160,255,0.45);
  --text-primary: #f6f3fa;
  --text-muted:   #b8adc9;
  --text-faint:   #7d7290;
  --radius-lg: 28px;
  --radius-md: 18px;
  --container: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --ease: cubic-bezier(.22,.9,.3,1);
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  direction: rtl;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg-void);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.85;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:800; line-height:1.3; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--accent-purple); outline-offset: 4px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.container{ max-width: var(--container); margin:0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size: .8rem; font-weight:600; letter-spacing:.02em;
  color: var(--accent-purple); text-transform: none;
  margin-bottom: 1rem;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:2px; transform:rotate(45deg);
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-rose));
  box-shadow: 0 0 12px var(--accent-purple);
}
.section-head{ max-width: 640px; margin-bottom: clamp(2rem,5vw,3.5rem); }
.section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.section-head p{ color: var(--text-muted); margin-top: .9rem; font-size:1.02rem; }
.section{ position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* ==========================================================================
   2. Body background — ambient glow field (shared across pages)
   ========================================================================== */
body{
  background:
    radial-gradient(60% 55% at 88% 6%, rgba(124,58,237,0.35), transparent 60%),
    radial-gradient(50% 45% at 6% 96%, rgba(224,68,111,0.28), transparent 60%),
    linear-gradient(160deg, var(--bg-void) 0%, var(--bg-void-2) 45%, #0a0510 100%);
  background-attachment: fixed;
}

/* ==========================================================================
   3. Glass hexagon utility — the signature motif
   ========================================================================== */
.hex-frame{
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: linear-gradient(155deg, var(--glass-fill-2), var(--glass-fill));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hex-badge{
  width: 3.4rem; height: 3.4rem;
  display:flex; align-items:center; justify-content:center;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: linear-gradient(155deg, rgba(168,85,247,0.28), rgba(224,68,111,0.14));
  border: 1px solid var(--glass-border-bright);
  color: var(--text-primary);
  font-weight: 800;
  flex-shrink:0;
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  padding: 1.1rem 0;
  background: rgba(10,7,16,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header-inner{
  max-width: var(--container); margin:0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.site-logo{ display:flex; align-items:center; gap:.7rem; font-weight:800; font-size:1.05rem; }
.logo-mark{
  width: 1.6rem; height: 1.6rem;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-rose));
  box-shadow: 0 0 16px rgba(168,85,247,0.6);
  flex-shrink:0;
}
.logo-mark.small{ width:1.2rem; height:1.2rem; }
.site-nav .nav-menu{ display:flex; align-items:center; gap: clamp(1.2rem, 3vw, 2.2rem); }
.site-nav .nav-menu a{
  font-size:.92rem; font-weight:500; color: var(--text-muted);
  transition: color .25s var(--ease);
  position:relative;
}
.site-nav .nav-menu a:hover,
.site-nav .nav-menu li.current-menu-item a{ color: var(--text-primary); }
.site-nav .nav-menu li.current-menu-item a::after{
  content:""; position:absolute; right:0; bottom:-6px; width:100%; height:2px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-rose));
  border-radius:2px;
}
.nav-toggle{ display:none; }

@media (max-width: 720px){
  .site-nav .nav-menu{ gap:1rem; }
  .site-nav .nav-menu a{ font-size:.85rem; }
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{
  position:relative;
  padding: clamp(4.5rem,10vw,7.5rem) 0 clamp(3.5rem,7vw,5.5rem);
  overflow:hidden;
}
.hero-deco{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.9;
}
.hero-deco svg{ width:100%; height:100%; }
.hero-inner{
  position:relative; z-index:2;
  max-width: 760px; margin: 0 auto; text-align:center;
}
.hero h1{
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  letter-spacing: -0.01em;
  background: linear-gradient(95deg, #ffffff 15%, #d9c8ff 55%, #f0a8c4 90%);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.hero-sub{
  margin: 1.4rem auto 0;
  max-width: 480px;
  color: var(--text-muted);
  font-size: 1.02rem;
}
.hero-actions{
  margin-top: 2.4rem;
  display:flex; align-items:center; justify-content:center; gap: 1rem; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  font-weight:600; font-size:.95rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border: 1px solid transparent;
}
.btn-primary{
  background: linear-gradient(120deg, var(--accent-violet), var(--accent-rose));
  color:#fff;
  box-shadow: 0 8px 30px -8px rgba(168,85,247,0.65);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px -6px rgba(168,85,247,0.8); }
.btn-ghost{
  background: var(--glass-fill);
  border-color: var(--glass-border);
  color: var(--text-primary);
}
.btn-ghost:hover{ border-color: var(--glass-border-bright); transform: translateY(-2px); }

.hero-float{ animation: floaty 7s ease-in-out infinite; }
.hero-float.delay1{ animation-delay: .6s; }
.hero-float.delay2{ animation-delay: 1.3s; }
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.pulse-line{ animation: pulseGlow 3.2s ease-in-out infinite; }
@keyframes pulseGlow{
  0%,100%{ opacity:.35; }
  50%{ opacity:.9; }
}

/* ==========================================================================
   6. About
   ========================================================================== */
.about{ }
.about-grid{
  display:grid; grid-template-columns: 300px 1fr; gap: clamp(2rem,5vw,4rem); align-items:center;
}
.about-portrait{
  aspect-ratio: 1/1.05;
  padding: 10px;
  position:relative;
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); }
.about-portrait .ph-fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: linear-gradient(155deg, rgba(168,85,247,0.25), rgba(224,68,111,0.16));
  color: var(--text-faint); font-size:.85rem;
}
.about-text h2{ font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom:1.1rem; }
.about-text p{ color: var(--text-muted); }
.about-text p + p{ margin-top:.9rem; }
.about-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.about-tags span{
  font-size:.8rem; padding:.4rem .95rem; border-radius:999px;
  background: var(--glass-fill); border:1px solid var(--glass-border); color: var(--text-muted);
}

@media (max-width: 760px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-portrait{ max-width: 260px; margin: 0 auto; }
}

/* ==========================================================================
   7. Process (numbered — a real sequence)
   ========================================================================== */
.process-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem;
}
.process-card{ padding: 1.9rem 1.6rem; border-radius: var(--radius-md); }
.process-card .step-no{ font-size:.78rem; color: var(--accent-purple); font-weight:700; margin-bottom:1rem; display:block; }
.process-card h3{ font-size:1.05rem; margin-bottom:.6rem; }
.process-card p{ color: var(--text-muted); font-size:.9rem; }

@media (max-width: 920px){ .process-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   8. Work cards (shared: homepage preview + آثار grid)
   ========================================================================== */
.works-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem,3vw,2.4rem);
}
.work-card{
  display:block; position:relative;
  padding: 1.6rem 1.6rem 2rem;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.work-card:hover{ transform: translateY(-6px); border-color: var(--glass-border-bright); }
.work-thumb{
  aspect-ratio: 4/3; overflow:hidden; border-radius: 12px; margin-bottom:1.2rem;
  background: linear-gradient(155deg, rgba(168,85,247,0.22), rgba(224,68,111,0.14));
}
.work-thumb img{ width:100%; height:100%; object-fit:cover; }
.work-cat{ font-size:.76rem; color: var(--accent-purple); font-weight:600; margin-bottom:.5rem; display:block; }
.work-card h3{ font-size:1.15rem; margin-bottom:.5rem; }
.work-card p{ color: var(--text-muted); font-size:.88rem; }
.works-more{ text-align:center; margin-top: clamp(2rem,4vw,3rem); }

@media (max-width: 920px){ .works-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .works-grid{ grid-template-columns: 1fr; } }

/* Works archive page header */
.works-page-head{
  padding: clamp(3.5rem,8vw,5.5rem) 0 clamp(2rem,5vw,3rem);
  text-align:center; position:relative;
}
.works-page-head h1{ font-size: clamp(2rem,5vw,3.2rem); }
.works-page-head p{ color: var(--text-muted); max-width:560px; margin: 1rem auto 0; }
.works-empty{ text-align:center; padding: 4rem 1rem; color: var(--text-muted); }

/* ==========================================================================
   9. Contact
   ========================================================================== */
.contact-panel{
  padding: clamp(2.6rem,6vw,4rem);
  text-align:center;
  position:relative;
}
.contact-panel h2{ font-size: clamp(1.6rem,3.4vw,2.3rem); margin-bottom:.9rem; }
.contact-panel p{ color: var(--text-muted); max-width:480px; margin:0 auto 1.8rem; }
.contact-socials{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:1.8rem; }
.contact-socials a{
  width:2.6rem; height:2.6rem; display:flex; align-items:center; justify-content:center;
  border-radius:999px; background: var(--glass-fill); border:1px solid var(--glass-border);
  font-size:.85rem; color: var(--text-muted);
  transition: color .25s, border-color .25s, transform .25s;
}
.contact-socials a:hover{ color:#fff; border-color: var(--glass-border-bright); transform: translateY(-2px); }

/* ==========================================================================
   10. Single work
   ========================================================================== */
.single-work-head{ padding: clamp(3rem,7vw,5rem) 0 2rem; text-align:center; }
.single-work-head .work-cat{ justify-content:center; }
.single-work-head h1{ font-size: clamp(1.8rem,4vw,2.8rem); margin-top:.6rem; }
.single-work-cover{ margin: 0 auto 2.5rem; max-width: 980px; border-radius: var(--radius-lg); overflow:hidden; }
.single-work-cover img{ width:100%; }
.single-work-body{ max-width: 720px; margin:0 auto; color: var(--text-muted); font-size:1.02rem; }
.single-work-body p{ margin-bottom:1.2rem; }
.back-to-works{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2.5rem; color: var(--accent-purple); font-weight:600; font-size:.92rem; }

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer{
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 2.4rem 0;
  margin-top: 3rem;
}
.footer-inner{
  max-width: var(--container); margin:0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem;
}
.footer-brand{ display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:.92rem; color: var(--text-muted); }
.footer-nav .nav-menu{ display:flex; gap:1.4rem; }
.footer-nav .nav-menu a{ font-size:.85rem; color: var(--text-faint); }
.footer-nav .nav-menu a:hover{ color: var(--text-primary); }
.footer-copy{ font-size:.8rem; color: var(--text-faint); width:100%; text-align:center; margin-top:.6rem; }

@media (max-width: 620px){
  .footer-inner{ flex-direction:column; text-align:center; }
}