/* ================================================================
   custom.css  —  sadiqnishat.com personalisation file
   Updated: 2026-03-21 — Improved contrast, design refinements
   ================================================================ */

/* =============================================
   SELF-HOSTED FONTS
   ============================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/inter/inter-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter/inter-latin-700-normal.woff2') format('woff2');
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
}

/* ── NAVBAR ─────────────────────────────────── */
.nav-link   { font-size: 0.95rem; }
.logo       { font-size: 1.25rem; }
.logo-text  { letter-spacing: -0.3px; font-size: 1.5rem; }

@media (max-width: 768px) {
    .logo-text { font-size: 1.0rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ── ACCENT COLOURS — refined for better contrast ────────── */
:root {
    --accent-primary:   #2563eb;
    --accent-secondary: #0891b2;
    --accent-warm:      #d97706;
    --accent-gradient:  linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
    --accent-glow:      rgba(37, 99, 235, 0.25);

    /* Higher contrast text colors — fixes WCAG AA issues */
    --text-secondary: #334155;
    --text-tertiary:  #475569;
    --text-muted:     #64748b;
}

[data-theme="dark"] {
    --accent-primary:   #60a5fa;
    --accent-secondary: #22d3ee;
    --accent-warm:      #fbbf24;
    --accent-gradient:  linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
    --accent-glow:      rgba(96, 165, 250, 0.30);

    /* Dark mode text — must override the :root values above */
    --text-primary:   #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary:  #94a3b8;
    --text-muted:     #64748b;
}

/* ── ANIMATED PASTEL BACKGROUND ──────────────── */
.liquid-glass-layer {
    will-change: transform;
    border-radius: 50%;
    filter: blur(60px);
}

.layer-1 {
    width: 600px; height: 600px;
    background: rgba(147, 197, 253, 0.45);
    top: -10%; left: -5%;
    animation: pulse-orb 8s ease-in-out infinite;
}
.layer-2 {
    width: 500px; height: 500px;
    background: rgba(251, 182, 206, 0.40);
    top: 15%; right: -5%;
    animation: pulse-orb 10s ease-in-out infinite reverse;
}
.layer-3 {
    width: 400px; height: 400px;
    background: rgba(196, 181, 253, 0.30);
    bottom: 10%; left: 20%;
    animation: pulse-orb 12s ease-in-out infinite 2s;
}

@keyframes pulse-orb {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.25); opacity: 1; }
}

:root  { --bg-primary: #f8faff; }
[data-theme="dark"] { --bg-primary: #0a0a0f; }

/* ── MOVING ARCS ───────────────────────────── */
.arc {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.arc-1 { width:800px;height:800px;top:-300px;right:-200px;border:2px solid rgba(147,197,253,.30);clip-path:inset(50% 0 0 0);animation:rotate-arc 22s linear infinite; }
.arc-2 { width:550px;height:550px;bottom:-150px;left:-100px;border:2px solid rgba(251,182,206,.25);clip-path:inset(0 0 50% 0);animation:rotate-arc 30s linear infinite reverse; }
.arc-3 { width:400px;height:400px;top:40%;right:5%;border:1.5px solid rgba(196,181,253,.20);clip-path:inset(0 50% 0 0);animation:rotate-arc 18s linear infinite 3s; }
.arc-4 { width:300px;height:300px;top:5%;left:10%;border:1.5px solid rgba(147,197,253,.18);clip-path:inset(0 0 0 50%);animation:rotate-arc 25s linear infinite reverse 1s; }
.arc-5 { width:650px;height:650px;bottom:20%;left:30%;border:1.5px solid rgba(251,182,206,.15);clip-path:inset(60% 0 0 0);animation:rotate-arc 35s linear infinite 5s; }

@keyframes rotate-arc {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

[data-theme="dark"] .layer-1 { background: rgba(96, 165, 250, 0.35); }
[data-theme="dark"] .layer-2 { background: rgba(244, 114, 182, 0.25); }
[data-theme="dark"] .layer-3 { background: rgba(129, 140, 248, 0.20); }

/* ── CARD GLASS ────────────────────────────── */
.research-card, .timeline-content, .education-card, .award-card,
.skill-category, .pub-card, .metric-card, .contact-method,
.contact-cta, .hero-education, .scholar-mini, .news-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#contact-map .leaflet-tile { filter: none; }
[data-theme="dark"] #contact-map { filter: invert(1) hue-rotate(180deg); }
[data-theme="dark"] #contact-map .leaflet-marker-icon,
[data-theme="dark"] #contact-map .leaflet-popup { filter: invert(1) hue-rotate(180deg); }

[data-theme="dark"] .research-card,
[data-theme="dark"] .timeline-content,
[data-theme="dark"] .education-card,
[data-theme="dark"] .award-card,
[data-theme="dark"] .skill-category,
[data-theme="dark"] .pub-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .contact-method,
[data-theme="dark"] .contact-cta,
[data-theme="dark"] .hero-education,
[data-theme="dark"] .scholar-mini,
[data-theme="dark"] .news-card {
    background: rgba(19, 19, 26, 0.65);
}

/* ── SECTION STRIPE ─────────────────────────── */
.section-alt {
    background: rgba(248, 250, 252, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .section-alt {
    background: rgba(10, 10, 15, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── CLS FIXES ──────────────────────────────── */
.research-media     { min-height: 180px; }
.research-media-slot{ min-height: 200px; }
#publications-container { min-height: 420px; }
.scholar-mini-value { min-width: 2ch; display: inline-block; }

/* ── TYPOGRAPHY REFINEMENTS ─────────────────── */
.profile-name {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    white-space: nowrap;
    line-height: 1.2;
}
.profile-title { font-size: 0.95rem; line-height: 1.6; }
.hero-greeting { font-size: 3rem; font-weight: 800; letter-spacing: -1px; }
.hero-bio      { font-size: 1.15rem; line-height: 1.9; }
.section-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.5px;
}