/* ==========================================================================
   03 — LAYOUT
   سایدبار (پروفایل، تماس، شبکه‌های اجتماعی) و نوار ناوبری
   ========================================================================== */

/*---------*\
  #SIDEBAR
\*---------*/
.sidebar {
  margin-bottom: 16px;
  overflow: hidden;
}

.sidebar-info {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.sidebar-info > .sidebar-actions { order: 3; }

/* ردیف دکمه‌ها: نمایش اطلاعات تماس + زبان + تم */
.sidebar-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}
.sidebar-actions .info_more-btn { flex: 1; margin-top: 0; width: auto; min-width: 0; }
.tool-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--ink-1);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm), var(--glass-edge);
  font-size: var(--fs-caption);
  font-weight: var(--fw-600);
  line-height: 1;
  transition: transform var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.tool-btn:hover, .tool-btn:focus-visible { transform: translateY(-2px); color: var(--cyan-blue); box-shadow: var(--glow-blue), var(--glass-edge); }
.tool-btn:active { transform: scale(0.94); }
.tool-btn .icon-svg { width: 20px; height: 20px; }
/* آیکون خورشید/ماه: فقط یکی نمایش داده می‌شود */
.tool-btn[data-theme-toggle] .icon-sun { display: none; }
html[data-theme="light"] .tool-btn[data-theme-toggle] .icon-sun { display: inline-block; }
html[data-theme="light"] .tool-btn[data-theme-toggle] .icon-moon { display: none; }

/* آواتار: حلقه‌ی گرادیانی چرخان (فقط transform — سبک و روی GPU) */
.avatar-box {
  position: relative;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  padding: 3px;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px hsla(250, 100%, 60%, 0.22);
}
.avatar-box::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -2;
  background: conic-gradient(var(--cyan-blue), var(--purple-blue), var(--rose), var(--gold), var(--cyan-blue));
  animation: ring-spin 12s linear infinite;
  will-change: transform;
}
.avatar-box::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 27px;
  background: var(--bg-1);
}
.avatar-box img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 27px;
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

.info-content { min-width: 0; }
.info-content .name {
  color: var(--ink-0);
  font-size: var(--fs-h3);
  font-weight: var(--fw-700);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.info-content .title {
  display: inline-block;
  color: var(--ink-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-400);
  line-height: 1.6;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  background: var(--glass-fill-soft);
  border: 1px solid var(--glass-border);
}

/* دکمه نمایش اطلاعات تماس (موبایل) — کپسول شیشه‌ای هم‌شکل */
.info_more-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  color: var(--cyan-blue);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm), var(--glass-edge);
  font-size: var(--fs-micro);
  transition: transform var(--t-fast), color var(--t-fast);
  z-index: 2;
}
.info_more-btn:hover,
.info_more-btn:focus-visible { transform: translateY(-1px); color: var(--ink-0); }
.info_more-btn span { display: inline; font-size: var(--fs-micro); white-space: nowrap; }
.info_more-btn .icon-svg { width: 14px; height: 14px; transition: transform var(--t-med); }
.sidebar.active .info_more-btn .icon-svg { transform: rotate(180deg); }

.sidebar-info_more {
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
.sidebar.active .sidebar-info_more {
  height: auto;
  opacity: 1;
  visibility: visible;
}


.contacts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--r-sm);
  background: var(--glass-fill-soft);
  border: 1px solid var(--line-soft);
  transition: transform var(--t-fast), background var(--t-fast);
}
.contact-item:hover { transform: translateY(-2px); background: var(--glass-fill); }
.contact-item .icon-box { width: 42px; height: 42px; }
.contact-info {
  min-width: 0;
  flex: 1;
  text-align: start;
}
.contact-title {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.contact-info :is(.contact-link, time, address) {
  color: var(--ink-0);
  font-size: var(--fs-small);
  font-style: normal;
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-info address { direction: inherit; text-align: start; }
html[dir="ltr"] .contact-info :is(.contact-link, time) { text-align: left; }
.contact-info .contact-link:hover { color: var(--cyan-blue); }

/* دکمه دانلود رزومه — طلایی با برق متحرک */
.cv-download-container {
  margin: 24px 0 4px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.btn-cv {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--btn-grad);
  color: var(--on-accent);
  padding: 14px 22px;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 28px hsla(230, 100%, 62%, 0.3), inset 0 1px 0 hsla(0, 0%, 100%, 0.35);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
  max-width: 300px;
}
.btn-cv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, hsla(0, 0%, 100%, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-out);
}
.btn-cv:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px hsla(230, 100%, 62%, 0.42), inset 0 1px 0 hsla(0, 0%, 100%, 0.35);
}
.btn-cv:hover::after { transform: translateX(120%); }
.btn-cv .icon-svg { width: 20px; height: 20px; }

.social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.social-item .social-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-bg, var(--accent-grad));
  border: 1px solid hsla(0, 0%, 100%, 0.22);
  box-shadow: 0 6px 16px var(--brand-glow, hsla(230, 100%, 60%, 0.3)), inset 0 1px 0 hsla(0, 0%, 100%, 0.3);
  font-size: 18px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.social-item .social-link:hover,
.social-item .social-link:focus-visible {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.1);
  box-shadow: 0 10px 22px var(--brand-glow, hsla(230, 100%, 60%, 0.4)), inset 0 1px 0 hsla(0, 0%, 100%, 0.35);
}
/* رنگ هر شبکه‌ی اجتماعی مطابق برند خودش */
.social-link[data-brand="telegram"]  { --brand-bg: linear-gradient(135deg, #37aee2, #1e96c8); --brand-glow: hsla(200, 75%, 50%, 0.45); }
.social-link[data-brand="instagram"] { --brand-bg: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); --brand-glow: hsla(330, 80%, 55%, 0.45); }
.social-link[data-brand="whatsapp"]  { --brand-bg: linear-gradient(135deg, #3fe07d, #128c7e); --brand-glow: hsla(150, 70%, 40%, 0.45); }
.social-link[data-brand="github"]    { --brand-bg: linear-gradient(135deg, #3b4048, #14171a); --brand-glow: hsla(0, 0%, 0%, 0.4); }
.social-link[data-brand="linkedin"]  { --brand-bg: linear-gradient(135deg, #1a82d9, #0a58a6); --brand-glow: hsla(210, 85%, 45%, 0.45); }
.social-link[data-brand="twitter"]   { --brand-bg: linear-gradient(135deg, #2b2f33, #000000); --brand-glow: hsla(0, 0%, 0%, 0.4); }

/*--------*\
   NAVBAR
\*--------*/
.navbar {
  position: fixed;
  right: 16px;
  left: 16px;
  bottom: 14px;
  margin: 0 auto;
  max-width: 350px;
  padding: 4px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--glass-shadow), var(--glass-edge);
  z-index: 50;
}
.navbar-list {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}
.navbar-item { flex: 1 1 0; min-width: 0; }

.navbar-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  padding: 7px 2px;
  border-radius: 999px;
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-500);
  text-align: center;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.navbar-link:hover,
.navbar-link:focus-visible { color: var(--ink-1); }
.navbar-link.active {
  color: var(--ink-0);
  background: linear-gradient(150deg, hsla(210, 100%, 70%, 0.32), hsla(250, 100%, 70%, 0.18));
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.25), 0 6px 18px hsla(230, 100%, 60%, 0.25);
}
.navbar-link.active .navbar-icon { transform: translateY(-1px) scale(1.08); color: var(--cyan-blue); }
.navbar-link:active { transform: scale(0.96); }

.navbar-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  font-size: 1.2rem;
  transition: transform var(--t-fast), color var(--t-fast);
}
.navbar-label {
  display: inline-block;
  font-size: var(--fs-micro);
  line-height: 1;
  font-weight: var(--fw-500);
}