/* Brand fonts: prefer /site/fonts (deployed), fallback /font. */
@font-face {
  font-family: 'theyearofhandicrafts';
  src: url('../fonts/TheYearofHandicrafts-Regular.otf') format('opentype'),
       url('../../font/TheYearofHandicrafts-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'theyearofhandicrafts';
  src: url('../fonts/TheYearofHandicrafts-Medium.otf') format('opentype'),
       url('../../font/TheYearofHandicrafts-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'theyearofhandicrafts';
  src: url('../fonts/TheYearofHandicrafts-SemiBold.otf') format('opentype'),
       url('../../font/TheYearofHandicrafts-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'theyearofhandicrafts';
  src: url('../fonts/TheYearofHandicrafts-Bold.otf') format('opentype'),
       url('../../font/TheYearofHandicrafts-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'theyearofhandicrafts';
  src: url('../fonts/TheYearofHandicrafts-Black.otf') format('opentype'),
       url('../../font/TheYearofHandicrafts-Black.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'itfmaharif-Regular';
  src: url('../fonts/itfmaharif-Regular.ttf') format('truetype'),
       url('../../font/itfmaharif-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'itfmaharif-Medium';
  src: url('../fonts/itfmaharif-Medium.ttf') format('truetype'),
       url('../../font/itfmaharif-Medium.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'itfmaharif-Bold';
  src: url('../fonts/itfmaharif-Bold.ttf') format('truetype'),
       url('../../font/itfmaharif-Bold.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'itfmaharif';
  src: url('../fonts/itfmaharif-Regular.ttf') format('truetype'),
       url('../../font/itfmaharif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'itfmaharif';
  src: url('../fonts/itfmaharif-Medium.ttf') format('truetype'),
       url('../../font/itfmaharif-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'itfmaharif';
  src: url('../fonts/itfmaharif-Bold.ttf') format('truetype'),
       url('../../font/itfmaharif-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'itfmaharif';
  src: url('../fonts/itfmaharif-Bold.ttf') format('truetype'),
       url('../../font/itfmaharif-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
  --bg-primary: #FAFAFA;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #EAEAEA;
  --bg-light: #FAFAFA;
  --bg-card: #FFFFFF;
  --border-subtle: #E5E5E5;
  --border-strong: #D4D4D4;
  --text-primary: #0A0A0A;
  --text-secondary: #3F3F46;
  --text-muted: #71717A;
  --accent: #895AE0;
  --accent-dark: #5530A0;
  --accent-hover: #7546D1;
  --accent-pressed: #5E36B3;
  --accent-soft: rgba(137,90,224,0.15);
  --accent-soft-border: rgba(137,90,224,0.30);
  --accent-glow: rgba(137,90,224,0.20);
  --accent-light: rgba(137,90,224,0.08);
  --on-accent: #FFFFFF;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --nav-bg: rgba(250,250,250,0.85);
  
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-accent: 0 4px 20px rgba(137,90,224,0.25);
  --shadow-accent-lg: 0 8px 32px rgba(137,90,224,0.30);
  
  --gradient-hero: linear-gradient(135deg, #895AE0 0%, #6B3FC4 50%, #5530A0 100%);
  --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #FAF8FF 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(137,90,224,0.12) 0%, rgba(107,63,196,0.08) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
}

[data-theme="dark"] {
  --bg-primary: #0A0A0A;
  --bg-secondary: #141414;
  --bg-tertiary: #1F1F1F;
  --bg-card: #1A1A1A;
  --bg-light: #FAFAFA;
  --border-subtle: #262626;
  --border-strong: #3A3A3A;
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;
  --accent: #895AE0;
  --accent-dark: #5530A0;
  --accent-hover: #7546D1;
  --accent-pressed: #5E36B3;
  --accent-soft: rgba(137,90,224,0.15);
  --accent-soft-border: rgba(137,90,224,0.30);
  --accent-glow: rgba(137,90,224,0.20);
  --accent-light: rgba(137,90,224,0.08);
  --on-accent: #FFFFFF;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --nav-bg: rgba(10,10,10,0.85);
  
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.40);
  --shadow-accent: 0 4px 20px rgba(137,90,224,0.30);
  --shadow-accent-lg: 0 8px 32px rgba(137,90,224,0.35);
  
  --gradient-hero: linear-gradient(135deg, #895AE0 0%, #6B3FC4 50%, #5530A0 100%);
  --gradient-card: linear-gradient(135deg, #1A1A1A 0%, #141414 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(137,90,224,0.15) 0%, rgba(107,63,196,0.10) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(26,26,26,0.90) 0%, rgba(20,20,20,0.70) 100%);
}

html, body,
div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video,
button, input, textarea, select, option, optgroup,
dialog, meter, progress {
  /* Unified family so font-weight maps to Medium/Bold faces (not locked to thin Regular). */
  font-family: 'itfmaharif', 'itfmaharif-Medium', 'itfmaharif-Regular', sans-serif !important;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 300ms ease, color 300ms ease;
}

h1, h2, h3, h4, h5, h6,
.font-serif {
  font-family: 'theyearofhandicrafts', serif !important;
  font-weight: 700;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-family: 'itfmaharif', 'itfmaharif-Medium', sans-serif !important;
  font-weight: 500;
}

.font-semibold,
.font-bold,
.font-extrabold,
.font-black {
  font-family: 'itfmaharif', 'itfmaharif-Bold', sans-serif !important;
  font-weight: 700;
}

/* Portal nav: Bold so Arabic labels match design density */
[data-portal-sidebar] nav a,
[data-portal-drawer] nav a,
[data-portal-sidebar] nav a span,
[data-portal-drawer] nav a span,
[data-portal-sidebar] button span {
  font-family: 'itfmaharif', 'itfmaharif-Bold', sans-serif !important;
  font-weight: 700;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  opacity: 0;
  animation: fadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-scale {
  opacity: 0;
  animation: fadeInScale 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  opacity: 0;
  animation: slideUp 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@keyframes pulse-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

.animate-pulse-breathe {
  animation: pulse-breathe 2s ease-in-out infinite;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.animate-slide-in-right {
  animation: slideInRight 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(137,90,224,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(137,90,224,0); }
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes shimmer-light {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.animate-shimmer-light {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-size: 1000px 100%;
  animation: shimmer-light 2s infinite linear;
}

.honeypot-field {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

::selection {
  background-color: var(--accent);
  color: var(--on-accent);
}

.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.card-lift {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-press {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-press:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-xs);
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, #6B3FC4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
}

[data-theme="dark"] .glass-card {
  border: 1px solid rgba(255,255,255,0.08);
}

[data-site-header] {
  height: 72px;
  background: transparent;
  border-color: transparent;
}
[data-site-header].is-scrolled {
  height: 60px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  border-color: var(--border-subtle);
}