/* Shared site-wide base styles, design tokens, and common components.
   Link this from any page's <head>, before any page-specific <style> block:
   <link rel="stylesheet" href="/assets/site-nav.css">

   Pages that want a different color theme (e.g. the About Me page) can
   override the :root custom properties below in their own inline <style>,
   placed after this link - every shared rule here reads colors via var(),
   so an override cascades into .card/nav.page-nav/etc. automatically without
   needing to redeclare those rules too.
*/
:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --accent: #0284c7;
  --accent2: #db2777;
  --border: #dbe3ee;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

a { color: var(--accent); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
}

.note { font-size: 0.85rem; color: var(--muted); }

/* General-purpose button link for use on light (non-banner) backgrounds. */
.btn-link {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-link:hover { background: #0369a1; transform: translateY(-1px); }
.btn-link.secondary { background: var(--accent2); }
.btn-link.secondary:hover { background: #be185d; }

/* ---------- Site-wide header ---------- */
/* One simple bar, the same on every page across every subdomain: the
   favicon pinned to the actual left corner of the page, all nav links
   together in the content column next to it, wrapping naturally on
   narrow screens. Use on any page:
   <header class="site-header">
     <img class="site-favicon" src="https://shekarkrishnamoorthy.com/favicon.svg" alt="" width="28" height="28">
     <div class="site-header-inner">
       <nav aria-label="Primary">
         <a class="active" href="https://shekarkrishnamoorthy.com/">Home</a>
         <a href="https://shekarkrishnamoorthy.com/important/projects.html">Projects</a>
         <a href="https://test.shekarkrishnamoorthy.com/">Music</a>
         <a href="https://reporting.shekarkrishnamoorthy.com/">Reporting</a>
       </nav>
     </div>
   </header>
   The favicon is a plain image, not a link. Mark the current page's link
   with class="active"; absolute URLs throughout since this crosses domains. */
header.site-header {
  background: #0f172a;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.5rem;
}
.site-favicon {
  display: block;
  border-radius: 50%;
  flex-shrink: 0;
}
.site-header-inner {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
header.site-header nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
header.site-header nav a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
header.site-header nav a:hover { color: #ffffff; }
header.site-header nav a.active { color: #ffffff; border-bottom-color: var(--accent); }

/* Simple page intro - a normal heading in the page flow, not a hero banner.
   Use directly inside <main>: <div class="page-intro"><h1>...</h1><p>...</p></div> */
.page-intro { margin-bottom: 2rem; padding-left: 1rem; border-left: 4px solid var(--accent); }
.page-intro h1 { margin: 0 0 0.4rem; font-size: 1.6rem; }
.page-intro p { margin: 0; color: var(--muted); }
