/* Theme Setup */
:root {
  --font-body: "Inter", system-ui, sans-serif;
  --font-heading: "Poppins", sans-serif;

  --color-bg: #f9fafb;          /* very light gray background */
  --color-bg-alt: #ffffff;      /* white for cards/nav */
  --color-text: #1e293b;        /* slate-800 (dark gray for readability) */
  --color-muted: #64748b;       /* slate-500 (muted gray) */

  --color-accent: #1e3a8a;      /* navy blue (indigo-900 / deep navy) */
  --color-accent-hover: #172554;/* even deeper navy */
/*  --color-accent: #1e4b1e;*/
/*  --color-accent-hover: #2d412d;*/
  
  --radius: 1rem;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}


/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

/* Header / Nav Bar */
header {
  background: var(--color-bg-alt);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* --- Navbar responsive --- */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.nav-links { display: flex; list-style: none; gap: 1.5rem; }
.nav-toggle { display: none; background: transparent; border: 0; padding: .25rem; line-height: 0; }
.nav-toggle svg { width: 28px; height: 28px; }

/* Small screens: hide desktop links, show hamburger */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* --- Mobile drawer --- */
.mobile-drawer[hidden] { display: none; }
.mobile-drawer {
  position: fixed; inset: 0; z-index: 1100;
}

.mobile-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; transition: opacity .2s ease;
}

.mobile-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(84vw, 320px);
  background: var(--color-bg-alt);
  box-shadow: var(--shadow);
  transform: translateX(-100%);
  transition: transform .2s ease;
  padding: 1rem 1rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}

.mobile-drawer__close {
  align-self: flex-end;
  background: transparent; border: 0; padding: .25rem; line-height: 0;
}

.mobile-drawer__nav { display: grid; gap: .75rem; margin-top: .5rem; }
.mobile-drawer__nav a {
  text-decoration: none; color: var(--color-accent); font-weight: 600;
  padding: .6rem .75rem; border-radius: .75rem; font-size: 2rem;
}
.mobile-drawer__nav a:hover { background: #f1f5f9; }

/* Open state */
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer.is-open .mobile-drawer__backdrop { opacity: 1; }

/* Prevent background scroll when open */
.no-scroll { overflow: hidden; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer__panel, .mobile-drawer__backdrop { transition: none; }
}


nav .logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 1.5rem;
}

nav ul li a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  transition: color 0.2s;
}

nav ul li a:hover {
  color: var(--color-accent);
}

/* Card Component */
.card {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: baseline;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card h3 {
  font-family: var(--font-heading);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--color-accent);
}

.card p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* Utility Classes */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ---- Form control normalization ---- */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; }
button::-moz-focus-inner { border: 0; } /* remove Firefox inner border */

.btn {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .05s ease;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.btn:hover {
  background: var(--color-accent-hover);
}

/* Keep a11y focus without the harsh black outline */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, .18); /* soft navy ring */
}

/* ---- Orange variant for Quick View / Close ---- */
:root {
  --color-orange: #f97316;        /* orange-500 */
  --color-orange-hover: #ea580c;  /* orange-600 */
  --color-orange-ring: rgba(234, 88, 12, .28);
}

.btn--orange { background: var(--color-orange); color: #fff; }
.btn--orange:hover { background: var(--color-orange-hover); }
.btn--orange:focus-visible { box-shadow: 0 0 0 3px var(--color-orange-ring); }


/* Page-local styles for dialogs, tags, media */
.project-dialog {
  border: none;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 760px;
  width: 90vw;
  position: fixed;
  /* Move it 50% relative to container */
  top: 50%;
  left: 50%;
  /* Move it back 50% relative to self */
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.project-dialog::backdrop { background: rgba(0,0,0,.35); }
.tag {
  display: inline-block;
  font-size: .8rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(30,58,138,.08); /* faint navy */
  color: var(--color-accent);
  margin-right: .5rem; margin-bottom: .5rem;
}
.media-thumb {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.link-row a.btn { margin-right: .5rem; margin-bottom: .5rem; }
.meta { font-size: .9rem; color: var(--color-muted); }