/* =========================================
   JOURNALS PUSH MENU & MASONRY LAYOUT
   ========================================= */
:root {
  --sidebar-bg: #4c3b31;
  --sidebar-text: #e6ded3;
  --main-bg: #cecece;
  --column-border: rgba(0, 0, 0, 0.08);
  --text-dark: #242424;
  --accent-gray: #616161;
  --sidebar-width: 320px;
}

body.page-template-template-journals {
  background-color: var(--main-bg) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important; /* Allow vertical scroll */
  height: auto !important;       /* Remove fixed 100vh lock */
  min-height: 100vh !important;
}

body.page-template-template-journals .site-header {
  display: block !important;
}

.journals-page-root {
  position: relative;
    display: flex;
    width: 100%;
    min-height: calc(100vh - 160px); /* Adjust based on your header/footer height */
    overflow: visible; /* Avoid clipping the page scroll */
}

/* 1. Left Sidebar Navigation */
.journals-page-root .sidebar {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  background-color: #5b4942 !important;
  color: var(--sidebar-text) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 40px 32px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  transform: translateX(0) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  font-family: 'CS Castle', sans-serif !important;
}

.journals-page-root.menu-closed .sidebar {
  transform: translateX(-100%) !important;
}

.journals-page-root .sidebar-close-btn {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  background: transparent !important;
  border: none !important;
  color: var(--sidebar-text) !important;
  font-size: 32px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  padding: 8px !important;
}

.journals-page-root .sidebar-brand {
  margin-top: 20px !important;
  margin-bottom: 50px !important;
  text-align: center !important;
}

.journals-page-root .brand-logo-text {
  font-family: 'CS Castle', sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  display: block !important;
}

.journals-page-root .brand-subtext {
  font-family: 'CS Castle', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #c4b49e !important;
  margin-top: 6px !important;
  display: block !important;
}

.journals-page-root .category-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.journals-page-root .category-link {
  color: var(--sidebar-text) !important;
  text-decoration: none !important;
  font-family: 'CS Castle', sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  display: block !important;
  cursor: pointer !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.journals-page-root .category-link:hover,
.journals-page-root .category-link.active {
  color: #ffffff !important;
  transform: translateX(5px) !important;
}

/* 2. Main Content Wrapper */
.journals-page-root .main-wrapper {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--sidebar-width) !important;
  width: calc(100vw - var(--sidebar-width)) !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--main-bg) !important;
  overflow: hidden !important;
  transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  box-sizing: border-box !important;
}

.journals-page-root.menu-closed .main-wrapper {
  left: 0 !important;
  width: 100vw !important;
}

/* Top Bar */
.journals-page-root .top-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 30px 48px 10px 48px !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

.journals-page-root .main-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 58px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  color: #4c3b31 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.journals-page-root .menu-toggle-btn {
  background-color: var(--accent-gray) !important;
  color: #ffffff !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 4px !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Scroll Area */
.journals-page-root .scroll-content-area {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  position: relative !important;
  padding: 0 48px 80px 48px !important;
}

.journals-page-root .scroll-content-area::-webkit-scrollbar {
  display: none !important;
}

/* Column Divider Lines */
.journals-page-root .column-dividers-bg {
  position: absolute !important;
  top: 0 !important;
  left: 48px !important;
  right: 48px !important;
  bottom: 0 !important;
  min-height: 100% !important;
  pointer-events: none !important;
  display: flex !important;
  z-index: 1 !important;
}

.journals-page-root .divider-col {
  flex: 0 0 25% !important;
  width: 25% !important;
  border-right: 1px solid var(--column-border) !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

.journals-page-root .divider-col:last-child {
  border-right: none !important;
}

/* Masonry Grid & Cards */
.journals-page-root .journals-grid {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 0 0 0 !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

.journals-page-root .grid-sizer,
.journals-page-root .journal-card-wrapper {
  width: 25% !important;
  padding: 0 16px 45px 16px !important;
  box-sizing: border-box !important;
  float: left !important;
}

.journals-page-root .journal-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.journals-page-root .card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.journals-page-root .plus-icon-link {
  text-decoration: none !important;
  display: inline-flex !important;
}

.journals-page-root .plus-icon {
  width: 15px !important;
  height: 15px !important;
  background-color: var(--accent-gray) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.journals-page-root .card-date {
  font-size: 11px !important;
  font-style: italic !important;
  color: #555555 !important;
  letter-spacing: 0.3px !important;
}

.journals-page-root .card-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--text-dark) !important;
  margin: 0 0 6px 0 !important;
}

.journals-page-root .card-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.journals-page-root .card-category {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #444444 !important;
  margin: 0 0 14px 0 !important;
  text-transform: uppercase !important;
}

.journals-page-root .card-thumb-link {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #bbbbbb !important;
}

.journals-page-root .card-thumb {
  width: 100% !important;
  height: auto !important;
  filter: grayscale(100%) !important;
  display: block !important;
  object-fit: cover !important;
  transition: filter 0.35s ease, transform 0.35s ease !important;
}

.journals-page-root .card-thumb-link:hover .card-thumb {
  filter: grayscale(0%) !important;
  transform: scale(1.02) !important;
}

/* Scroll Controller */
.journals-page-root .scroll-controller {
  position: absolute !important;
  top: 90px !important;
  bottom: 30px !important;
  right: 12px !important;
  width: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 50 !important;
}

.journals-page-root .scroll-btn {
  background-color: var(--accent-gray) !important;
  color: #ffffff !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: none !important;
  font-size: 9px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.journals-page-root .scroll-track {
  flex: 1 !important;
  width: 3px !important;
  background: #b5b5b5 !important;
  border-radius: 2px !important;
  position: relative !important;
  margin: 8px 0 !important;
}

.journals-page-root .scroll-thumb {
  width: 100% !important;
  height: 40px !important;
  background: var(--accent-gray) !important;
  border-radius: 2px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Responsive Grid Adjustments */
@media (max-width: 1280px) {
  .journals-page-root .grid-sizer,
  .journals-page-root .journal-card-wrapper { width: 33.333% !important; }
  .journals-page-root .divider-col { flex: 0 0 33.333% !important; width: 33.333% !important; }
  .journals-page-root .divider-col:nth-child(4) { display: none !important; }
}

@media (max-width: 900px) {
  .journals-page-root .grid-sizer,
  .journals-page-root .journal-card-wrapper { width: 50% !important; }
  .journals-page-root .divider-col { flex: 0 0 50% !important; width: 50% !important; }
  .journals-page-root .divider-col:nth-child(3),
  .journals-page-root .divider-col:nth-child(4) { display: none !important; }
  .journals-page-root .top-bar { padding: 25px 24px 10px 24px !important; }
  .journals-page-root .scroll-content-area { padding: 0 24px 80px 24px !important; }
  .journals-page-root .column-dividers-bg { left: 24px !important; right: 24px !important; }
}

@media (max-width: 600px) {
  .journals-page-root .grid-sizer,
  .journals-page-root .journal-card-wrapper { width: 100% !important; padding: 0 0 35px 0 !important; }
  .journals-page-root .column-dividers-bg { display: none !important; }
}


/* =========================================
   JOURNAL PAGE FOOTER FIX
   ========================================= */
body.page-template-template-journals .site-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  clear: both !important;
  width: 100% !important;
  z-index: 100 !important;
  background-color: #ffffff; /* Adjust to match your footer background */
}

/* Ensure the outer wrappers don't clip the bottom */
body.page-template-template-journals {
  overflow-y: auto !important;
}

body.page-template-template-journals .site-content-contain,
body.page-template-template-journals .site-content {
  overflow: visible !important;
}
nav.panel{
  z-index: 999;
}