/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

:root {
  /* UVA Brand Colors */
  --uva-blue: #232D4B;
  --uva-blue-light: #7BAFD4;
  --uva-blue-dark: #133584;
  --uva-orange: #e57200;
  --uva-orange-light: #F4B942;
  --uva-orange-muted: #a54d17;
  --uva-orange-dark: #b5550e;
  --uva-orange-subtle: #735550;
  
  /* Typography */
  --font-family-sans: "Inter", "SF Pro Display", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-serif: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  
  /* Neutral Colors */
  --text-primary: #111;
  --text-gray: #666;
  --text-gray-light: #aaa;
  --text-gray-lighter: #ccc;
  --text-gray-dark: #888;
  --background-primary: #f1eee8;
  --background-code: #f8f8f8;
  --border-light: #e0e0e0;
  --border-medium: #ddd;
  --nav-red: #701010;
}

/* ============================================================================
   PUBLICATION IMAGES
   ============================================================================ */

/* Publication images - fixed height, left side with right-aligned edges */
p img[alt^="pub-"] {
  position: absolute;
  left: -200px;  /* Position further in left margin */
  height: 110px;  /* Fixed height for consistent layout */
  width: auto;   /* Auto width to maintain aspect ratio - NEVER CONSTRAIN */
  max-width: none;  /* No width constraints to prevent squashing */
  border: 1px solid var(--border-light);
  cursor: pointer;  /* Show it's clickable */
  transition: opacity 0.2s ease;
  object-fit: contain;  /* Maintain aspect ratio */
}

/* Hover effect for clickable images */
p img[alt^="pub-"]:hover {
  opacity: 0.8;
}

/* Container needs relative positioning for absolute images */
p:has(img[alt^="pub-"]) {
  position: relative;
  margin-left: 0;
  min-height: 110px;  /* Ensure minimum height to accommodate larger image */
}

/* Align images to the right within their container */
p img[alt^="pub-"] {
  transform: translateX(calc(-100% + 180px));  /* Right-align within the expanded margin space */
}

/* Clear positioning after publication sections */
h1, h2, h3 {
  clear: both;
  position: relative;
}

/* For smaller screens, inline images */
@media (max-width: 1000px) {
  p img[alt^="pub-"] {
    position: static;
    float: left;
    transform: none;
    left: auto;
    margin-right: 1rem;
    margin-bottom: 1rem;
    height: 80px;  /* Smaller but still fixed height */
    width: auto;   /* Always auto width to prevent squashing */
    max-width: none;  /* No width limits */
  }
}

/* ============================================================================
   IMAGE LIGHTBOX
   ============================================================================ */

.image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
}

.image-lightbox.active {
  display: flex;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 2px solid var(--border-light);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}

.lightbox-close:hover {
  opacity: 0.7;
}

/* ============================================================================
   BASE TYPOGRAPHY & LAYOUT
   ============================================================================ */

html {
  font-size: 16px;
}

body {
  width: 90%;
  max-width: 800px;
  padding: 0 5%;
  margin: 0 auto;
  font-family: var(--font-family-sans);
  font-size: 1.1rem;
  background-color: var(--background-primary);
  color: var(--text-primary);
  line-height: 1.6;
  counter-reset: sidenote-counter;
}

/* Browser-specific font size adjustments */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  body { font-size: 1.15rem; }
}

@-moz-document url-prefix() {
  body { font-size: 1.25rem; }
}

/* ============================================================================
   LAYOUT COMPONENTS
   ============================================================================ */

/* Full-width utility class to reduce repetition */
.full-width,
article, section,
p, section p, article p, .content p,
h1, h2, h3, h4, h5, h6,
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
ul, ol, section ul, section ol, article ul, article ol, .content ul, .content ol,
li, section li, article li, .content li,
blockquote, blockquote p,
table, figure, pre, pre > code,
.content, .recent-pages, .random-pages {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

article {
  padding: 3rem 0;
}

section {
  padding: 1rem 0;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

/* Paragraphs */
p, section p, article p, .content p {
  margin: 1.4rem 0;
  padding-right: 0;
  vertical-align: baseline;
}

h1 + p, section h1 + p, .content h1 + p, article section h1 + p {
  margin-top: 0.6rem;
}

/* Headings */
header h1 {
  font-size: 1.7rem;
  color: var(--text-gray);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

section h1, .content h1, article section h1, h1 {
  font-size: 1.6rem;
  color: var(--uva-blue);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

h2 {
  font-family: var(--font-family-sans);
  color: var(--uva-orange-muted);
  font-style: normal;
  font-weight: normal;
  font-size: 1.4rem;
}

h3 {
  font-family: var(--font-family-sans);
  color: var(--text-gray);
  font-style: normal;
  font-size: 1.25rem;
}

h4 {
  color: var(--uva-blue);
  font-style: normal;
  font-size: 1.15rem;
}

h5 {
  color: var(--uva-orange-muted);
  font-style: normal;
  font-size: 1.1rem;
}

h6 {
  color: var(--uva-orange-muted);
  font-style: normal;
  font-size: 1.05rem;
}

p.subtitle {
  font-size: 1.6rem;
}

/* ============================================================================
   LISTS
   ============================================================================ */

ul, ol, section ul, section ol, article ul, article ol, .content ul, .content ol {
  padding-left: 2rem;
  /* Prevent horizontal overflow on mobile */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

li:not(:first-child) {
  margin-top: 0.25rem;
}

/* Ensure list items don't overflow */
li {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ============================================================================
   BLOCK ELEMENTS
   ============================================================================ */

blockquote {
  margin: 1.4rem 0;
  padding-left: 2rem;
  border-left: 3px solid var(--text-gray-light);
  font-style: italic;
}

table {
  margin: 1.4rem 0;
  border-collapse: collapse;
}

hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 2rem 0;
}

/* ============================================================================
   IMAGES & FIGURES
   ============================================================================ */

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

figure {
  margin: 2rem 0;
  padding: 0;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-gray);
  text-align: center;
}

/* ============================================================================
   CODE BLOCKS
   ============================================================================ */

pre {
  margin: 1.4rem 0;
  padding: 1rem;
  background: var(--background-code);
  border-radius: 4px;
  overflow-x: auto;
}

pre > code {
  font-size: 0.9rem;
  display: block;
}

.codehilite {
  width: 87.5%;
  padding: 0.3rem 1rem;
}

/* ============================================================================
   LINKS
   ============================================================================ */

a {
  color: var(--uva-blue-dark);
  text-decoration: none;
}

a:hover {
  color: var(--uva-orange-muted);
  text-decoration: underline;
}

/* Wikilinks */
a.wikilink {
  color: var(--uva-blue-dark);
  text-decoration: none;
}

a.wikilink:hover {
  color: var(--uva-orange-muted);
  text-decoration: underline;
}

/* External links */
a[href^="http"]:not(.wikilink),
a[href^="https"]:not(.wikilink) {
  color: var(--uva-orange-subtle);
  text-decoration: none;
}

a[href^="http"]:not(.wikilink):hover,
a[href^="https"]:not(.wikilink):hover {
  color: var(--uva-orange);
  text-decoration: underline;
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

/* Top navigation bar */
nav.top-nav {
  text-align: center;
  padding: 1.5rem 0 0.5rem 0;
  font-family: var(--font-family-sans);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 2rem;
}

nav.top-nav a {
  color: var(--uva-blue);
  text-decoration: none;
  padding: 0 0.5rem;
}

nav.top-nav a:hover {
  color: var(--uva-orange-muted);
}

nav.top-nav .nav-separator {
  color: var(--text-gray-light);
  padding: 0 0.25rem;
}

nav.top-nav .nav-logo {
  height: 1.3em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.2rem 3px 0;
}

/* Header navigation */
header > nav.group {
  width: 95%;
  padding-top: 2rem;
}

header > nav a:link {
  font-size: 1.2rem;
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-red);
  padding-top: 1.5rem;
  float: left;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 1.6rem;
  background: unset;
  text-shadow: unset;
}

header > nav a:visited {
  color: var(--nav-red);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer-separator {
  border-top: 1px solid var(--border-light);
  margin: 2rem 0 1rem 0;
}

footer {
  padding: 1rem 0 4rem 0;
}

.footer-text {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-gray);
}

.page-dates {
  font-size: 0.7rem;
  color: var(--text-gray-lighter);
  font-family: var(--font-family-sans);
  margin: 0.3rem 0 1rem 0;
  font-weight: normal;
}

/* ============================================================================
   HOME PAGE SECTIONS
   ============================================================================ */

.recent-pages,
.random-pages {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-medium);
}

.recent-pages h2,
.random-pages h2 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: var(--uva-orange-muted);
}

/* Page list styles */
.recent-pages ul.page-list,
.random-pages ul.page-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}

.recent-pages .page-list li,
.random-pages .page-list li {
  margin-bottom: 0.1rem;
  padding: 0.1rem 0;
  display: flex;
  align-items: baseline;
  gap: 2rem;
}

.recent-pages .page-list a,
.random-pages .page-list a {
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--uva-blue);
  flex: 1;
}

.recent-pages .page-list a:hover,
.random-pages .page-list a:hover {
  color: var(--uva-orange-muted);
  text-decoration: underline;
}

.page-date {
  font-size: 1rem;
  color: var(--text-gray-light);
  margin-left: auto;
  margin-right: 0;
  flex-shrink: 0;
  text-align: right;
  font-weight: normal;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.timestamp {
  font-size: 1rem;
  color: var(--text-gray-dark);
}

/* ============================================================================
   KATEX MATH RENDERING
   ============================================================================ */

.katex-display {
  text-align: center;
  margin: 1em 0;
}

article .katex-display,
article .katex {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Safari-specific KaTeX fixes */
@supports (-webkit-appearance: none) and (not (min-resolution:.001dpcm)) {
  .katex-display {
    display: block;
    text-align: center;
    margin: 1em auto;
    line-height: 1.2;
  }
  
  .katex {
    vertical-align: -0.2ex;
  }
  
  .katex .base {
    vertical-align: baseline;
  }
  
  .katex .mfrac {
    vertical-align: -0.25em;
  }
  
  .katex .msup {
    vertical-align: 0.5em;
  }
  
  .katex .msub {
    vertical-align: -0.25em;
  }
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
  body {
    width: 95%;
    padding: 0 2.5%;
    font-size: 1rem;  /* Reduce base font size */
  }
  
  article {
    padding: 1.5rem 0;  /* Less padding */
  }
  
  /* Compact single-row navigation on mobile */
  nav.top-nav {
    padding: 0.5rem 0 0.3rem 0;  /* Reduced padding */
    margin-bottom: 0.8rem;  /* Less margin */
    font-size: 0.75rem;  /* Even smaller nav text for single row */
    white-space: nowrap;  /* Prevent wrapping */
    overflow-x: auto;  /* Allow horizontal scroll if needed */
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
  }
  
  nav.top-nav a {
    padding: 0 0.15rem;  /* Minimal horizontal padding */
    display: inline-block;  /* Ensure proper spacing */
  }
  
  nav.top-nav .nav-separator {
    padding: 0 0.05rem;  /* Very tight separators */
    font-size: 0.6rem;  /* Smaller dots */
  }
  
  nav.top-nav .nav-logo {
    height: 0.9em;  /* Even smaller logo */
    margin: 0 0.1rem 1px 0;
  }
  
  /* Smaller headings on mobile */
  header h1 {
    font-size: 1.4rem;  /* Was 1.7rem */
    margin-bottom: 0.3rem;
  }
  
  section h1, .content h1, article section h1, h1 {
    font-size: 1.3rem;  /* Was 1.6rem */
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  
  h2 {
    font-size: 1.2rem;  /* Was 1.4rem */
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  
  h3 {
    font-size: 1.1rem;  /* Was 1.25rem */
  }
  
  h4 {
    font-size: 1.05rem;  /* Was 1.15rem */
  }
  
  h5, h6 {
    font-size: 1rem;
  }
  
  /* Smaller paragraph spacing */
  p, section p, article p, .content p {
    margin: 1rem 0;  /* Was 1.4rem */
  }
  
  /* Compact page dates */
  .page-dates {
    font-size: 0.65rem;  /* Was 0.7rem */
    margin: 0.2rem 0 0.5rem 0;
  }
  
  /* Reduce list padding on mobile */
  ul, ol, section ul, section ol, article ul, article ol, .content ul, .content ol {
    padding-left: 1.2rem;
  }
  
  /* Compact footer */
  .footer-separator {
    margin: 1.5rem 0 0.5rem 0;
  }
  
  footer {
    padding: 0.5rem 0 2rem 0;
  }
  
  .footer-text {
    font-size: 0.85rem;
  }
  
  /* Ensure proper containment */
  p, li, blockquote {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Prevent any element from causing horizontal scroll */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Handle long URLs and code */
  a {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  pre {
    overflow-x: auto;
    max-width: 100%;
    font-size: 0.85rem;  /* Smaller code blocks */
  }
  
  code {
    word-break: break-word;
    font-size: 0.9rem;
  }
  
  /* Compact blockquotes */
  blockquote {
    margin: 1rem 0;
    padding-left: 1.5rem;
  }
}