/* ============================================================
   NATALI DZNELADZE — PORTFOLIO THEME
   Minimal academic design · Light/Dark mode · Smooth styling
   ============================================================ */

/* ------------------ 1. Base Theme Tokens ------------------- */

:root {
  /* ORIGINAL PALETTE (unchanged) */
  --roman-coffee: #795d4c;   /* warm brown */
  --flint: #6f6a61;          /* muted grey */
  --cab-sav: #4d0a18;        /* burgundy */
  --tamarind: #341515;       /* deep brown */
  --napa: #e9e5df;           /* beige */

  /* CLEAN, IMPROVED ROLE ASSIGNMENTS */
  --accent: var(--cab-sav);           /* primary accent (burgundy) */
  --accent-soft: var(--roman-coffee); /* secondary warm accent */

  --bg: #ffffff;
  --bg-alt: var(--napa);              /* section divider wash */
  --panel: #ffffff;

  --text: #1f1b1b;
  --text-muted: var(--flint);
  --border: #e4ded6;

  --radius: 14px;
  --shadow: 0 8px 24px rgba(121, 93, 76, 0.08);

  --transition: 0.25s ease;
}

/* ------------------ 2. Dark Mode Tokens -------------------- */

:root.dark {
  --bg: #1a1414;
  --panel: #241818;
  --bg-alt: #2b1d1d;

  --text: #f5efeb;
  --text-muted: #d0c7bb;

  /* Accents invert subtly in dark mode */
  --accent: var(--roman-coffee);
  --accent-soft: var(--cab-sav);

  --border: #3a2a2a;
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* Ensures your name becomes visible in dark mode */
:root.dark .brand {
  color: #ffffff !important;
}


/* smooth scrolling*/

html {
  scroll-behavior: smooth;
}

/* ------------------ 3. Global Layout ------------------------ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Skip Link */
.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: .5rem .75rem;
  background: var(--accent);
  color: #fff;
  border-radius: .5rem;
}

/* Smooth fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.7s ease forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* ------------------ 4. Header / Hero ------------------------- */

.site-header {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, #ffffff, var(--bg-alt));
}

.site-header .container {
  padding: 2rem 1.25rem 1.5rem;
  text-align: center;
}

.brand {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: var(--tamarind);
  font-size: clamp(2.3rem, 5vw, 3.3rem);
  margin: 0;
}

.tagline {
  color: var(--text-muted);
  margin: .3rem 0 1.4rem;
  font-size: 1.05rem;
}

/* NAVIGATION */
.nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

.nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  padding: .45rem .75rem;
  border-radius: .6rem;
  transition: var(--transition);
}

.nav a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* THEME TOGGLE */
.theme-toggle {
  padding: .45rem .75rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
}
.theme-toggle:hover {
  box-shadow: var(--shadow);
}

/* HERO BACKGROUND ART */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 360px at 30% -10%, rgba(121,93,76,.12), transparent 60%),
    radial-gradient(800px 300px at 90% 0%, rgba(77,10,24,.10), transparent 60%),
    linear-gradient(to bottom, #ffffff, var(--bg-alt));
}

:root.dark .hero-bg {
  background:
    radial-gradient(900px 360px at 30% -10%, rgba(77,10,24,.25), transparent 60%),
    radial-gradient(900px 360px at 110% 10%, rgba(121,93,76,.25), transparent 60%),
    linear-gradient(to bottom, #2b1d1d, #1a1414);
}

/* ------------------ 5. FIXED HERO LAYOUT ---------------------- */

/* FIX 1: Better alignment + spacing */
.hero-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;     /* NEW — vertically aligns the title with photo */
  gap: 2.5rem;
  padding-top: 1rem;
  text-align: left;
}

/* Left column text */
.hero-text {
  flex: 1;
}

/* FIX 2 & 3: Clean square image + centered crop + no margin hack */
.profile-photo {
  width: 200px;
  height: 200px;
  border-radius: 0;         /* NEW — perfect square */
  object-fit: cover;
  object-position: center;  /* NEW — better portrait centering */
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover effect */
.profile-photo:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* MOBILE: centered, slightly smaller */
@media (max-width: 850px) {
  .hero-layout {
    flex-direction: column;
    text-align: center;
    gap: 1.8rem;
  }

  .profile-photo {
    width: 180px;
    height: 180px;
  }
}

/* ------------------ 6. Sections / Cards ---------------------- */

main.container {
  padding: 2.2rem 1.25rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

h2 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  margin-bottom: .9rem;
  font-size: 1.7rem;
}

.bullets {
  padding-left: 1.2rem;
}
.bullets li {
  margin: .35rem 0;
}

/* ------------------ 7. Articles Grid -------------------------- */

.grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.project {
  padding: .8rem 0;
}

.project h3 {
  font-size: 1.15rem;
  margin: .1rem 0 .35rem;
  color: var(--accent);
}

.project p {
  color: var(--text-muted);
  margin: .25rem 0 .75rem;
}

/* ------------------ 8. Buttons ------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: calc(var(--radius) - 6px);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border: none;
  transition: var(--transition);
  box-shadow: 0 8px 22px rgba(77,10,24,.18);
}

.btn:hover {
  transform: translateY(-1px);
  background: var(--accent-soft);
  box-shadow: 0 10px 26px rgba(121,93,76,.26);
}

.btn.small {
  padding: .5rem .8rem;
}

.btn.outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn.outline:hover {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow);
}

/* ------------------ 9. Footer ------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 1rem 0;
}

.site-footer small {
  color: var(--text-muted);
  display: block;
  text-align: center;
  font-size: .85rem;
}

/* ------------------ 10. Focus States -------------------------- */

a:focus,
button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}