/* =========================================================
   H. Ahmadzai — Academic Website
   Custom site styling
   ========================================================= */


/* ---------------------------------------------------------
   Fonts
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');


/* ---------------------------------------------------------
   Color palette
   --------------------------------------------------------- */

:root {
  --site-purple: #5a4775;
  --site-purple-dark: #44335a;
  --site-purple-light: #8b7a9d;

  --site-blue: #426b86;

  /* Original body text color */
  --site-text: #696969;

  --site-background: #ffffff;
  --site-border: #f0edf2;
  --site-hover-background: #f7f4f8;

  --site-link: #663399;

  /* Added: previously hardcoded values, now centralized */
  --site-hover-accent: #2F4F2F;
  --site-link-underline: #E6E6FA;
  --site-toc-inactive: #D8BFD8;

  /* Added: tab-specific tints, derived from --site-purple family */
  --site-tab-fill: #f6f3f8;
  --site-tab-fill-hover: #ece6f0;
  --site-tab-fill-active: #efe9f3;
  --site-tab-border: #ddd2e3;
  --site-tab-border-hover: #c3b3cc;
}


/* ---------------------------------------------------------
   General page styling
   --------------------------------------------------------- */

body {
  font-family: "Inconsolata", monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--site-text);
  background-color: var(--site-background);
}


/* ---------------------------------------------------------
   Navigation bar
   Ed Rubin's navbar — exact rules from supplied CSS,
   except for the retained horizontal bottom border.
   --------------------------------------------------------- */

.navbar {
  background: #fff;
  border-bottom: 1px solid var(--site-border);
}

.navbar a {
  color: #8799A8;        /* light slate */
}

.navbar a:hover {
  color: #2F4F2F;        /* your forest green */
}

.navbar-nav .nav-link.active {
  color: #663399;        /* Rubin's active color */
}

.navbar .quarto-navbar-tools .quarto-navigation-tool {
  color: #D8BFD8;
}

.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
  color: #D8BFD8;
}


/* ---------------------------------------------------------
   Dropdown menus
   --------------------------------------------------------- */

.dropdown-menu {
  border: 1px solid var(--site-border);
  box-shadow: 0 4px 12px rgba(50, 40, 60, 0.08);
}

.dropdown-item {
  font-size: 14px;
  color: var(--site-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--site-hover-accent);
  background-color: var(--site-hover-background);
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

a {
  color: var(--site-link);
  text-decoration: underline dotted var(--site-link-underline);
  text-underline-offset: 2px;
  transition: color 0.1s ease;
}

a:hover {
  color: var(--site-blue);
  text-decoration: underline dotted var(--site-link-underline);
}

/* Keyboard accessibility */
a:focus-visible {
  outline: 2px solid var(--site-purple-light);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: "Inconsolata", monospace;
  color: #222326;
  font-weight: 600;
}

h1 {
  margin-bottom: 1rem;
}

h2 {
  margin-top: 1.8rem;
  margin-bottom: 0.8rem;
}

h3 {
  margin-top: 1.4rem;
  margin-bottom: 0.6rem;
}


/* ---------------------------------------------------------
   Paragraphs
   --------------------------------------------------------- */

p {
  margin-bottom: 0.75em;
}


/* ---------------------------------------------------------
   Sidebar / table of contents
   --------------------------------------------------------- */

.sidebar nav[role="doc-toc"] ul > li > a {
  color: var(--site-toc-inactive) !important;
  text-decoration: none;
  transition: color 0.1s ease;
}

.sidebar nav[role="doc-toc"] ul > li > a:hover {
  color: var(--site-blue) !important;
}

.sidebar nav[role="doc-toc"] ul > li > a.active {
  color: var(--site-link) !important;
  font-weight: 500;
}


/* ---------------------------------------------------------
   Navigation tabs (used site-wide, incl. panel-tabset)
   --------------------------------------------------------- */

.nav-tabs {
  border-bottom: none;
  gap: 6px;
}

.nav-tabs .nav-link {
  border: 1px solid var(--site-tab-border);
  border-radius: 6px;
  background-color: var(--site-tab-fill);
  color: var(--site-purple);
  font-weight: 500;
  padding: 6px 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-tabs .nav-link:hover {
  background-color: var(--site-tab-fill-hover);
  border-color: var(--site-tab-border-hover);
  color: var(--site-purple-dark);
}

.nav-tabs .nav-link.active {
  background-color: var(--site-tab-fill-active);
  border-color: var(--site-purple-dark);
  color: var(--site-purple-dark);
  font-weight: 600;
}


/* ---------------------------------------------------------
   Tab content
   --------------------------------------------------------- */

.tab-content {
  border: none;
  padding-top: 0.75rem;
}


/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */

ul,
ol {
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.2rem;
}


/* ---------------------------------------------------------
   Images
   --------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
}


/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

table {
  border-color: var(--site-border);
}

th {
  color: var(--site-purple-dark);
}


/* ---------------------------------------------------------
   Code
   --------------------------------------------------------- */

code {
  color: var(--site-purple-dark);
}


/* ---------------------------------------------------------
   Small-screen adjustments
   --------------------------------------------------------- */

@media (max-width: 768px) {

  body {
    font-size: 14px;
  }

  .navbar .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

}