/* 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 */
  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 (No top header in Bibliophile) ──────────────── */
#quarto-header {
  display: none !important; /* Hidden because we use sidebar for header */
}

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

#quarto-sidebar {
  background-color: transparent !important;
  border: none !important;
  width: 100% !important; /* Mobile default */
  padding: 0 !important;
  position: static;
  height: max-content;
}

@media (min-width: 768px) {
  #quarto-sidebar {
    width: 250px !important;
    position: sticky;
    top: 40px;
  }
}

/* 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 */
.aa-Panel, .quarto-search-results {
  background-color: 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;
}

.aa-Item, .search-result {
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

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

/* Search Match Highlight (Remove blue text/bg) */
.aa-Item mark,
.aa-Item em,
.search-match,
.search-result mark {
  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; }