/* ==========================================================================
   Philip Kalikman Academic Site - Consolidated CSS
   ========================================================================== */

/* CSS Variables for Light/Dark Mode */
:root {
  /* Typography */
  --font-serif: Sabon, Baskerville, "Mrs Eaves", Garamond, Minion, Georgia, serif;
  --font-mono: 'Courier New', Courier, monospace;
  
  /* Light mode colors */
  --color-background: #ffffff;
  --color-foreground: #111;
  --color-underline: #a3a3a3;
  --color-sidebar-underline: #d3d3d3;
  --color-footer: #a3a3a3;
  --color-border: #bfbfbf;
  --color-subtle: #f8f8f8;
  
  /* Font sizes - increased across the board */
  --font-size-base: 20px; /* Larger base */
  --font-size-content: 1.0rem; /* Much larger content text */
  --font-size-small: 0.9em; /* Larger sidebar text */
  --font-size-large: 1.2em;
  --font-size-xl: 1.4em;
  --font-size-xxl: 1.6em;
  
  /* Layout */
  --sidebar-width: 320px;
  --content-max-width: 650px; /* Narrower like your blog */
  --container-max-width: 1200px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #120026;
    --color-foreground: #82759a;
    --color-footer: #6a5c74;
    --color-underline: #6a5c74;
    --color-border: #4a4458;
    --color-subtle: #1a0d2e;
  }
}

/* Base styles */
* {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  background-color: var(--color-background);  /* Add this line */
}

body {
  margin: 0;
  padding: 0; 
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-foreground);
  background-color: var(--color-background);
  counter-reset: sidenote-counter;
}

/* Links - matching your blog style exactly */
a:link, a:visited {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.3s ease;
}

a:hover {
  color: inherit;
  text-decoration-color: var(--color-foreground);
}

@media (hover: none) and (pointer: coarse) {
  a:link, a:visited {
    text-decoration-color: var(--color-foreground);
  }
}

/* Global heading styles */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-family: var(--font-serif);
  text-align: left;
}

/* Layout Container */
#main {
  margin-left: auto;
  margin-right: auto;
  padding-left: 2em;
  padding-right: 2em;
  max-width: var(--container-max-width);
  position: relative;
  min-height: 100vh;
}

/* Page Header with Navigation */
.page-header {
  display: flex;
  justify-content: space-between;
    align-items: end;
  /* align-items: center; */
  margin: 1.5em 0 0.0em 0;
  padding-bottom: 0.0em;
  border-bottom: 2px solid var(--color-border);
  max-width: var(--content-max-width); /* Fix overhang */
  position: relative;
}

.page-header .nav-left {
  font-size: var(--font-size-xl);
  font-weight: 400;
}


.page-header .nav-right {
  display: flex;
  gap: 2rem;
  font-size: var(--font-size-xl);
  font-weight: 400;
}

.page-header a {
  color: inherit;
 /*  text-decoration: none; */
  transition: text-decoration-color 0.3s ease;
}

.page-header a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-foreground);
}

.page-header a.active {
  text-decoration: none; 
  font-weight: 600;
}

/* Sidebar 
.sidebar {
  margin-bottom: 1em;
}
 */

.sidebar {
  margin-bottom: 1em;
  background-color: var(--color-background);
  padding: 1em 1em 1em 1em; /* 2em 1.5em 1.5em 1.5em;*/
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 2em;
    left: 2em;
    width: var(--sidebar-width);
    z-index: 10;
  }
}

@media (min-width: 1280px) {
  .sidebar {
    left: calc((100vw - var(--container-max-width)) / 2 + 2em);
  }
}

/* Page Content Area */
.page {
  width: 100%;
  margin-left: 0;
  padding-bottom: 1em;
}

@media (min-width: 1024px) {
  .page {
    width: calc(100% - var(--sidebar-width) - 2em);
    margin-left: calc(var(--sidebar-width) + 2em);
    padding-left: 2em;
  }
}

@media (min-width: 1280px) {
  .page {
    padding-left: 3em;
  }
}

.page__content {
  max-width: var(--content-max-width);
  margin-top: 1em;
  position: relative;
}

/* Content Typography - larger fonts, tighter lines */
.page__content h1 {
  font-size: var(--font-size-xxl);
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1em;
  margin-top: 1.5em;
}

.page__content h2 {
  font-size: var(--font-size-xl);
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--color-border);
  margin-top: 2em;
  margin-bottom: 1em;
}

.page__content h3 {
  font-size: var(--font-size-large);
}

.page__content p,
.page__content li,
.page__content dl,
.page__content summary {
  font-size: var(--font-size-content);
  line-height: 1.4; /* Tighter line spacing */
  margin-bottom: 1.4rem;
}

.page__content p {
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  padding-right: 0;
  vertical-align: baseline;
  text-align: justify;
  text-justify: inter-word;
}

.page__content ol,
.page__content ul {
  font-size: var(--font-size-content);
  line-height: 1.4;
}

/* Author Profile */
.author__avatar {
  text-align: center;
  margin-top: 1em;
}

/*
.author__avatar img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  /*
  object-fit: cover;
  padding: 0;
  border: 3px solid var(--color-border); } 


  object-fit: cover;
  padding: 0;
  border: 3px solid var(--color-border);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
*/

.author__avatar img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  padding: 0;
  border: 3px solid var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border);
}

.author__content {
  margin-top: 1.5em;
  padding-left: 10px;
  line-height: 1.4;
}

.author__name {
  margin: 0 0 0.5em 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-family: var(--font-serif);
}

.author__bio {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: 1.5;
  font-family: var(--font-serif);
}

/* Author Links - tighter spacing */
.author__urls-wrapper {
  margin-top: 1.2em; /* Reduced from 1.5em */
  padding-left: 10px;
}

.author__urls {
  margin: 0;
  padding: 0;
  list-style: none;
}

.author__urls li {
  margin-bottom: 4px; /* Reduced from 8px */
  white-space: nowrap;
}

.author__urls a { 
  display: flex;
  align-items: center;
  padding: 2px 0;
  color: inherit;
  font-size: var(--font-size-small);
  font-family: var(--font-serif);
  text-decoration: underline;
  text-decoration-color: var(--color-sidebar-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.3s ease;  
  /* transition: text-decoration-color 0s; */
}

.author__urls a:hover {
  text-decoration-color: var(--color-foreground);
}

.lucide-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

.custom-icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Footer - blog style */
.page-footer {
  margin-top: 0em;
  padding-top: 0em;
  border-top: 1px solid var(--color-footer);
  text-align: center;
  max-width: var(--content-max-width);
}

.page-foot {
  font-size: 50%; /* Matching your blog */
  font-family: var(--font-mono);
  color: var(--color-footer);
  margin: 0;
}

.page-footer a {
  text-decoration: none;
  color: var(--color-footer);
  text-decoration: underline;
}

/* Image handling from your additional.css */
.page__content img {
  width: 70%;
  text-align: center;
  padding-left: 10%;
}

.page__content .img-small img {
  width: 50%;
  text-align: center;
  padding-left: 20%;
}

@media (max-width: 1023px) {
  .sidebar {
    position: static;
    width: 100%;
      margin: 1em 0 1em 0;
  padding: 0em 1em 0em 1em;
  max-width: var(--content-max-width);
  }
  
  .page {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }
  
  .author__avatar img {
    width: 200px;
    height: 200px;
    aspect-ratio: 1;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
  }
  .author__avatar {
    padding: 0.5em 0 0 0;
    margin: 0 0 0 0;
  }
  
  .author__content,
  .author__urls-wrapper {
    text-align: left;
    padding: 0 0 0 0;
    margin: 0em 0 0.75em 0;
  }
  
  .author__urls a {
    padding: 0 0 0 0;
    justify-content: flex-start;
  }
  
  .page-header {
    margin-top: 1em;
  } 

  .page-header a:not(.active) {
    text-decoration: underline;
    text-decoration-color: var(--color-underline);
  }


  
  .page__content p,
  .page__content li,
  .page__content dl,
  .page__content summary {
    font-size: 0.9rem;
    line-height: 1.3;
  }

/* Narrow device adjustments */
@media (max-width: 480px) {
  #main {
    padding-left: 1em;
    padding-right: 1em;
  }
    .page-header a {
    font-size: 0.85rem;
  }
}