/* Virtual Sociality - Style Sheet
   Aesthetic: Early modern period meets futurism
   Cream + deep navy palette with muted gold accents
*/

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  /* Colors - Light Mode */
  --color-bg: #FFFEF9;
  --color-bg-alt: #F5F3ED;
  --color-text: #1a1a2e;
  --color-text-muted: #2d2d44;
  --color-header-bg: #1e2a47;
  --color-gold: #d4af37;
  --color-gold-bright: #e6c34d;
  --color-gold-muted: #b8942a;
  --color-link: #8a6914;
  --color-link-hover: #a67c00;
  --color-gray: #6b6b7b;
  --color-gray-light: #9a9aaa;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Crimson Text', Georgia, serif;
  --font-size-base: 19px;
  --line-height: 1.7;
  --measure: 65ch;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-bg: #121220;
  --color-bg-alt: #1e1e32;
  --color-text: #FFFEF9;
  --color-text-muted: #c5c5d0;
  --color-header-bg: #0a0a14;  /* Super dark blue, almost black */
  --color-link: #e6c34d;
  --color-link-hover: #f0d56a;
  --color-gray: #9a9aaa;
  --color-gray-light: #6b6b7b;
}

/* Respect system preference when no explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121220;
    --color-bg-alt: #1e1e32;
    --color-text: #FFFEF9;
    --color-text-muted: #c5c5d0;
    --color-header-bg: #0a0a14;  /* Super dark blue, almost black */
    --color-link: #e6c34d;
    --color-link-hover: #f0d56a;
    --color-gray: #9a9aaa;
    --color-gray-light: #6b6b7b;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-header-bg);
  color: var(--color-gold);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  z-index: 1000;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: none;
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================
   DARK MODE TOGGLE
   ======================================== */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFEF9;  /* Fixed cream - doesn't change with theme */
  transition: color 0.2s ease;
}

.theme-toggle:hover {
  color: var(--color-gold);
}

.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Show correct icon based on theme */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

h1 {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2rem;
  margin-top: var(--space-lg);
}

h3 {
  font-size: 1.5rem;
  margin-top: var(--space-md);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  max-width: var(--measure);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-link-hover);
}

/* Focus states for accessibility */
a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

blockquote {
  margin: var(--space-md) 0;
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-gold);
  font-style: italic;
  color: var(--color-text-muted);
}

code {
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 0.9em;
  background: var(--color-bg-alt);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

pre {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-sm);
  overflow-x: auto;
  border-radius: 4px;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ========================================
   DROP CAP
   ======================================== */
.drop-cap::first-letter,
.post-content > p:first-of-type::first-letter {
  /* Modern approach - maintains text selection */
  /* Value slightly over 3 to account for font metrics */
  initial-letter: 3.15;
  -webkit-initial-letter: 3.15;
  font-family: var(--font-heading);
  color: var(--color-gold);
  font-weight: 700;
  margin-right: 0.15em;
}

/* Fallback for browsers without initial-letter support */
@supports not (initial-letter: 3) {
  .drop-cap::first-letter,
  .post-content > p:first-of-type::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.8;
    padding-right: 0.1em;
    padding-top: 0.1em;
  }
}

/* ========================================
   LAYOUT
   ======================================== */
.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.container--narrow {
  max-width: 700px;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */
.site-header {
  padding: var(--space-sm) 0;
  background: var(--color-header-bg);
  background-image: url('../images/constellations-light.svg');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border-bottom: none;
  transition: background-color 0.3s ease;
}

/* Dark mode constellation */
[data-theme="dark"] .site-header {
  background-image: url('../images/constellations-dark.svg');
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header {
    background-image: url('../images/constellations-dark.svg');
  }
}

.site-header .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 900px;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  margin-left: 0.5rem;
}

.site-brand:hover .site-title {
  color: var(--color-gold-bright);
}

.site-logo {
  height: 5.4rem;
  width: auto;
  border-radius: 4px;
  border: 2px solid var(--color-gold);
}

.site-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--color-gold);
  transition: color 0.2s ease;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: 1rem;
}

.site-nav a {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #FFFEF9;  /* Fixed cream - doesn't change with theme */
  text-decoration: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: var(--color-gold);
}

.site-brand-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

/* About page image */
.about-image {
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.about-image img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  opacity: 0.9;
}

/* Contact page image */
.contact-image {
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.contact-image img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  opacity: 0.9;
}

/* ========================================
   MAIN CONTENT
   ======================================== */
main {
  padding: var(--space-md) 0;
  min-height: calc(100vh - 200px);
}

/* Ornamental divider */
.ornament {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: var(--color-gold);
  margin: var(--space-md) 0;
  letter-spacing: 0.5em;
}

.ornament::before {
  content: "◆ ◆ ◆";
}

/* ========================================
   BLOG LIST
   ======================================== */
.blog-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-bg-alt);
}

.blog-list li:last-child {
  border-bottom: none;
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-bg-alt);
}

.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagination-link {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--color-text);
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination-link:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-gold);
}

.pagination-current {
  background-color: var(--color-gold);
  color: var(--color-header-bg);
  font-weight: 600;
}

.pagination-current:hover {
  background-color: var(--color-gold);
  color: var(--color-header-bg);
}

.pagination-disabled {
  color: var(--color-gray-light);
  cursor: default;
}

.pagination-disabled:hover {
  background-color: transparent;
  color: var(--color-gray-light);
}

.pagination-ellipsis {
  padding: 0.5rem 0.25rem;
  color: var(--color-gray);
}

.pagination-prev,
.pagination-next {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 480px) {
  .pagination {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination-numbers {
    order: -1;
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
}

.post-link {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-xs);
}

.post-link:hover {
  color: var(--color-gold);
}

.post-meta {
  font-size: 0.9rem;
  color: var(--color-gray);
  margin-bottom: var(--space-xs);
}

.post-excerpt {
  color: var(--color-text-muted);
  margin: 0;
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

.post-excerpt:hover {
  color: var(--color-text);
}

/* Tags - inline style like Marginal Revolution */
.tag {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.tag:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

/* Active tag when filtering */
.tag--active {
  font-weight: 600;
}

/* Filtering notice */
.filter-notice {
  font-size: 0.9rem;
  color: var(--color-gray);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--color-bg-alt);
  border-radius: 4px;
}

.filter-notice a {
  margin-left: 0.5rem;
}

/* ========================================
   SINGLE POST
   ======================================== */
.post-header {
  margin-bottom: var(--space-md);
  text-align: left;
}

.post-header h1 {
  font-size: 2rem;
  margin-bottom: var(--space-xs);
}

.post-header .post-meta {
  font-size: 1rem;
}

.post-content {
  max-width: var(--measure);
  text-align: justify;
}

.post-content h2 {
  margin-top: var(--space-lg);
}

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

/* Article figures */
.figure-float {
  float: left;
  max-width: 45%;
  margin: 0.5rem var(--space-md) var(--space-sm) 0;
}

.figure-float img {
  width: 100%;
  border-radius: 4px;
}

.figure-center {
  margin: var(--space-sm) auto;
  text-align: center;
  max-width: 60%;
}

.figure-center img {
  max-width: 100%;
  border-radius: 4px;
}

.figure-float figcaption,
.figure-center figcaption {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-gray);
  margin-top: var(--space-xs);
}

/* Clear float after paragraphs if needed */
.post-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Footnotes */
.footnotes {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-bg-alt);
  font-size: 0.9rem;
}

.footnotes hr {
  display: none;
}

.footnotes ol {
  padding-left: 1.5rem;
}

.footnotes li {
  margin-bottom: var(--space-sm);
  color: var(--color-text-muted);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-bg-alt);
}

.footnotes li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.footnotes li p {
  margin: 0;
}

/* Footnote reference in text */
sup a[id^="fnref"] {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-gold);
}

sup a[id^="fnref"]:hover {
  color: var(--color-gold-bright);
}

/* Back link in footnotes */
.footnotes a.footnote-backref {
  text-decoration: none;
  margin-left: 0.25rem;
}

.post-footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-bg-alt);
}

.back-link {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Post Navigation (Next/Previous) */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-bg-alt);
}

.post-nav-link {
  flex: 1;
  text-decoration: none;
  padding: var(--space-sm);
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.post-nav-link:hover {
  background-color: var(--color-bg-alt);
}

.post-nav-link--prev {
  text-align: left;
}

.post-nav-link--next {
  text-align: right;
}

.post-nav-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
  margin-bottom: 0.25rem;
}

.post-nav-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.post-nav-link:hover .post-nav-title {
  color: var(--color-gold);
}

/* Empty state for when there's no prev/next */
.post-nav-placeholder {
  flex: 1;
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
  padding: var(--space-md) 0;
  background: var(--color-header-bg);
  border-top: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.site-footer p {
  font-size: 0.85rem;
  color: #FFFEF9;  /* Fixed cream - doesn't change with theme */
  margin: 0 auto;
}

.site-footer a {
  color: var(--color-gold);
}

.site-footer a:hover {
  color: var(--color-gold-bright);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  :root {
    --font-size-base: 17px;
  }

  .site-header .container {
    align-items: center;
    gap: var(--space-sm);
  }

  .site-brand {
    margin-left: 0;
  }

  .site-title {
    font-size: 1.6rem;
  }

  .site-nav {
    margin-left: 0;
  }

  .drop-cap::first-letter,
  .post-content > p:first-of-type::first-letter {
    font-size: 3.5rem;
  }

  .post-nav {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .post-nav-link--prev,
  .post-nav-link--next {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .site-nav {
    gap: var(--space-sm);
  }

  /* Disable float on mobile - images go full width */
  .figure-float {
    float: none;
    max-width: 100%;
    margin: var(--space-sm) 0;
  }

  .figure-center {
    max-width: 100%;
  }
}