/* Custom site styles */
:root{
  --bg:#f8fafc;
  --accent:#06b6d4; /* teal */
  --accent-700:#0ea5a5;
  --text:#0f172a;
  --muted:#6b7280;
}

html,body{
  height:100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--text);
  background:var(--bg);
}

.site-header .navbar-brand{ font-weight:700; color:var(--text); }
.brand-mark{
  background:linear-gradient(135deg,var(--accent),var(--accent-700));
  color:white;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-weight:700;
}

.hero{
  background:linear-gradient(180deg, rgba(6,182,212,0.85), rgba(14,165,165,0.85));
  color: #ffffff;
  /* ensure hero text stands out against background */
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
}
.hero .lead{ color:rgba(255,255,255,0.95);}
.hero h1{ color: #ffffff; font-weight:700; }

/* Dark overlay to increase contrast against the gradient */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 0;
}
.hero .container{ position: relative; z-index: 1; }
.hero-card{ background:linear-gradient(180deg,#ffffff,#f8fafc);}

.projects h2{ color:var(--text);}
.card{ border:0; position: relative; }

/* Remove previous ribbon rules if present (safe no-op if already removed) */
.ribbon{ display:none !important; }

/* Compact inline badge for new items */
.new-badge{
  display:inline-block;
  background:var(--accent-700);
  color:#fff;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:600;
}

@media (max-width: 767px){
  .hero{ padding-top:3rem; padding-bottom:3rem; }
  .ribbon{ left: -28px; top: 8px; padding: 4px 34px; font-size:0.75rem; }
}

/* Smooth scrolling for in-page anchors (e.g. "See Projects") */
html {
  scroll-behavior: smooth;
}

/* Prevent anchored sections from being hidden under the header */
.about, .projects, #contact {
  scroll-margin-top: 84px; /* tweak if header height changes */
}

.site-footer a{ color:var(--muted); text-decoration:none; }
.site-footer a:hover{ color:var(--text); }

.navbar-avatar{ width:40px; height:40px; object-fit:cover; display:inline-block; }
.navbar-brand .brand-text{ font-weight:700; color:var(--text); }

.btn-accent{
  background: linear-gradient(90deg,var(--accent),var(--accent-700));
  border: none;
}
.btn-accent:hover{
  background: linear-gradient(90deg,var(--accent-700),var(--accent));
}
.btn.btn-accent{
  /* higher specificity so Bootstrap defaults don't override */
  background: linear-gradient(90deg,var(--accent),var(--accent-700));
  color: #fff;
  border: none;
}
.btn.btn-accent:hover{
  background: linear-gradient(90deg,var(--accent-700),var(--accent));
}
.btn.btn-accent:focus{
  box-shadow: 0 0 0 0.25rem rgba(6,182,212,0.25);
  outline: none;
}