/* Bibliophile WordPress Theme Port */

@font-face {
  font-family: 'Albura';
  src: url('bibliophile-wpcom/assets/fonts/albura_normal_400.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Albura SemiBold';
  src: url('bibliophile-wpcom/assets/fonts/albura-semibold_normal_545.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

:root {
  --bg-page: #e7e4df; /* Warm parchment */
  --text-main: #1a1a1a; /* Deep charcoal */
  --text-dim: #555555;
  --link-color: #1a1a1a;
  --link-hover: #888888;
  --font-text: 'Albura', serif;
  --font-header: 'Albura SemiBold', 'Albura', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --border-color: #d1cdc7;
}

/* ─── BASE TYPOGRAPHY & COLORS ─────────────────────────────── */

body:not(.app-page) {
  background-color: var(--bg-page) !important;
  color: var(--text-main) !important;
  font-family: var(--font-text) !important;
  font-size: 18px; /* Classic editorial size */
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ─── PAGE WRAPPER ───────────────────────────────────────── */

body:not(.app-page) .quarto-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 80px 40px 40px 40px !important; /* Generous top spacing */
}

body:not(.app-page) #quarto-content {
  display: flex !important;
  flex-direction: column !important; /* Mobile default */
  justify-content: flex-start !important; /* Prevent massive gaps from min-height stretch */
  gap: 40px;
}

@media (min-width: 768px) {
  body:not(.app-page) #quarto-content {
    flex-direction: row !important; /* Left sidebar, right content on desktop */
    justify-content: space-between;
    gap: 80px;
  }
}

/* ─── HEADER (Mobile Drawer Toggle) ──────────────────────── */
body:not(.app-page) #quarto-header,
body:not(.app-page) #quarto-header nav,
body:not(.app-page) .navbar {
  background-color: var(--bg-page) !important;
  background: var(--bg-page) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body:not(.app-page) .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) contrast(200%); /* Ensure hamburger icon is dark */
}

@media (min-width: 768px) {
  body:not(.app-page) #quarto-header {
    display: none !important; /* Hidden on desktop because sidebar is always visible */
  }
}

/* ─── STICKY LEFT SIDEBAR (Acts as Header & Nav) ─────────── */

#quarto-sidebar {
  background-color: var(--bg-page) !important; /* Parchment background for mobile drawer */
  border: none !important;
  border-right: 1px solid var(--border-color) !important;
}

@media (min-width: 768px) {
  #quarto-sidebar {
    width: 250px !important;
    position: sticky !important;
    top: 40px !important;
    background-color: transparent !important;
    border-right: none !important;
  }
}

/* Site Title inside Sidebar */
#quarto-sidebar .sidebar-title {
  display: block;
  font-family: var(--font-header);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--text-main);
  padding-bottom: 20px;
}

#quarto-sidebar a {
  text-decoration: none !important;
  color: var(--text-main) !important;
}

#quarto-sidebar a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

#quarto-sidebar .sidebar-item-text {
  font-family: var(--font-text) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--text-main) !important;
  padding: 8px 0 !important;
  transition: color 0.2s;
}

#quarto-sidebar a:hover .sidebar-item-text {
  color: var(--link-hover) !important;
}

/* Sidebar Search Box */
#quarto-sidebar #quarto-search,
#quarto-sidebar .quarto-search,
#quarto-sidebar .aa-Form,
#quarto-sidebar .aa-InputWrapperPrefix,
#quarto-sidebar .aa-InputWrapper,
#quarto-sidebar .aa-SubmitIcon,
#quarto-sidebar .aa-ClearIcon {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#quarto-sidebar .aa-Input,
#quarto-sidebar input {
  border: none !important;
  border-bottom: 1px solid var(--text-main) !important;
  background-color: transparent !important;
  background: transparent !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-text) !important;
  font-style: italic;
  width: 100%;
  color: var(--text-main) !important;
}

#quarto-sidebar .quarto-search {
  margin-bottom: 40px;
}

/* Search Results Dropdown & Mobile Overlay */
body:not(.app-page) .aa-Panel, 
body:not(.app-page) .quarto-search-results,
body:not(.app-page) .aa-DetachedContainer,
body:not(.app-page) .aa-DetachedFormContainer {
  background-color: var(--bg-page) !important;
  background: var(--bg-page) !important;
  border: 1px solid var(--text-main) !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.1) !important;
  font-family: var(--font-text) !important;
  color: var(--text-main) !important;
}

body:not(.app-page) .aa-DetachedCancelButton {
  background-color: transparent !important;
  color: var(--text-main) !important;
  border: none !important;
}

body:not(.app-page) .aa-DetachedFormContainer .aa-Form,
body:not(.app-page) .aa-DetachedFormContainer input {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-main) !important;
}

body:not(.app-page) .aa-Item, 
body:not(.app-page) .search-result,
body:not(.app-page) .aa-DetachedContainer .aa-Item {
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-color) !important;
  background-color: transparent !important;
}

body:not(.app-page) .aa-Item[aria-selected="true"],
body:not(.app-page) .aa-Item:hover,
body:not(.app-page) .search-result:hover,
body:not(.app-page) .aa-DetachedContainer .aa-Item[aria-selected="true"],
body:not(.app-page) .aa-DetachedContainer .aa-Item:hover {
  background-color: #dcd9d4 !important; /* Slightly darker parchment for highlight */
  color: var(--text-main) !important;
}

/* Search Match Highlight (Remove blue text/bg) */
body:not(.app-page) .aa-Item mark,
body:not(.app-page) .aa-Item em,
body:not(.app-page) .search-match,
body:not(.app-page) .search-result mark,
body:not(.app-page) .aa-DetachedContainer mark,
body:not(.app-page) .aa-DetachedContainer em {
  background-color: transparent !important;
  color: var(--text-main) !important;
  font-weight: bold !important;
  text-decoration: underline !important;
}

/* ─── POST LISTING ───────────────────────────────────────── */

body:not(.app-page) main.content {
  width: 100% !important; /* Mobile default */
  padding: 0 !important;
}

@media (min-width: 768px) {
  body:not(.app-page) main.content {
    width: calc(100% - 330px) !important;
  }
}

div.quarto-post {
  margin-bottom: 40px; /* Reduced from 80px */
  padding: 0 !important; /* Removed 40px bottom padding */
  border-bottom: none !important; /* Removed divider line */
  display: block !important;
}

/* Title */
div.quarto-post .listing-title {
  font-family: var(--font-header);
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.1;
}

div.quarto-post .listing-title a {
  color: var(--text-main) !important;
  text-decoration: none !important;
}

div.quarto-post .listing-title a:hover {
  color: var(--text-main) !important; /* Do not change color */
  text-decoration: underline !important; /* Only underline */
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

/* Metadata (Date) */
div.quarto-post .metadata {
  display: block !important;
  font-family: var(--font-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-bottom: 24px;
  border: none !important;
  padding: 0 !important;
}

/* Categories (Style like plain text) */
div.quarto-post .listing-categories,
.quarto-categories {
  display: flex;
  gap: 15px;
  margin-bottom: 24px;
}

div.quarto-post .listing-categories .listing-category,
.quarto-categories .quarto-category {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--text-main) !important;
  font-family: var(--font-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-decoration: none !important;
}

div.quarto-post .listing-categories .listing-category:hover,
.quarto-categories .quarto-category:hover {
  color: var(--text-main) !important; /* Do not change color */
  text-decoration: underline !important; /* Only underline */
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

/* Thumbnail Floated Left (Classic Book Style) */
div.quarto-post .thumbnail {
  float: left;
  margin: 5px 30px 15px 0;
  width: 250px;
}

div.quarto-post .thumbnail img {
  width: 100%;
  height: auto;
  border: none;
  border-radius: 2px;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.1); /* Subtle page shadow */
}

div.quarto-post .listing-description {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-main);
  margin-bottom: 24px;
}

div.quarto-post a:has(> .listing-description),
div.quarto-post .listing-description a,
div.quarto-post .listing-description {
  pointer-events: none !important;
  text-decoration: none !important;
  color: var(--text-main) !important;
}

/* Typography links */
body:not(.app-page) a {
  color: #000000 !important;
  text-decoration: none !important;
}

body:not(.app-page) a:hover {
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

/* Footer and Bottom Nav (Remove white backgrounds) */
.nav-footer,
.page-navigation,
.page-navigation .nav-page {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Pagination (Remove Bootstrap Blue/White Boxes) */
.pagination {
  justify-content: flex-start !important; /* Optional: Align left or center */
}

.pagination .page-link {
  background-color: transparent !important;
  border: none !important;
  color: var(--text-main) !important;
  font-family: var(--font-text) !important;
  font-size: 14px;
  margin: 0 5px;
  text-decoration: none !important;
}

.pagination .page-link:hover {
  text-decoration: underline !important;
  background-color: transparent !important;
}

.pagination .active .page-link {
  font-weight: bold !important;
  text-decoration: underline !important;
  background-color: transparent !important;
  color: var(--text-main) !important;
}

/* Hide hero */
.hero-banner { display: none !important; }

/* ─── POST HEADER SPACING ────────────────────────────────── */
body:not(.app-page) header#title-block-header {
  margin-bottom: 60px !important;
}

/* ─── FOOTNOTES, APPENDIX & POPOVERS ─────────────────────── */
body:not(.app-page) section.footnotes,
body:not(.app-page) .footnotes,
body:not(.app-page) #quarto-appendix {
  border-top: 1px solid var(--border-color) !important;
  margin-top: 60px !important;
  padding-top: 20px !important;
  font-size: 0.9em;
  color: var(--text-main) !important;
  background-color: transparent !important;
  background: transparent !important;
}

body:not(.app-page) .popover,
body:not(.app-page) .tippy-box {
  background-color: var(--bg-page) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.1) !important;
  font-family: var(--font-text) !important;
}

body:not(.app-page) .popover-header,
body:not(.app-page) .popover-body {
  background-color: transparent !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-color);
}

body:not(.app-page) .popover-arrow::after,
body:not(.app-page) .popover-arrow::before,
body:not(.app-page) .tippy-arrow {
  color: var(--bg-page) !important;
  border-bottom-color: var(--bg-page) !important;
  border-top-color: var(--bg-page) !important;
}