/*
Theme Name: AjaxCategories
Author: You
Version: 1.2
*/
:root {
  --accent: #666666;
  --border: #e2e2e2;
  --bg: #ffffff;
  --text: #111111;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  max-width: 1400px;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Wrapper for sticky footer */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.site-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo img {
  max-height: 20px;
  width: auto;
  display: block;
}

/* Mobile Toggle (Hidden on PC) */
#mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
}

/* PC Layout - Fixed Widths to prevent jumping */
.ajax-layout {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  margin: 0 auto;    /* Center the whole grid */
  width: 100%;
}

.ajax-col {
  min-height: 260px;
}

/* Fixed percentages instead of flex-grow to stop jumping */
#cats.ajax-col { width: 10%; flex: 0 0 10%; }
#subcats.ajax-col { width: 10%; flex: 0 0 10%; }
#post-content.ajax-col { width: 80%; flex: 0 0 80%; }

/* Clickable items */
#cats .cat, #subcats .subcat, #post-content .post-item {
  cursor: pointer;
  padding: 8px 0;
}
#cats .cat:hover, #subcats .subcat:hover, #post-content .post-item:hover {
  color: var(--accent);
}

/* SIMPLE COLOR FOR SELECTED CATEGORY */
#cats .cat.selected {
  color: var(--accent);
}

#post-content h2{
  margin-top: 0px;
}
 #post-content.ajax-col {
  
    margin-inline: auto;
}

/* MOBILE STYLES */
@media (max-width: 768px) {
  /* Show Hamburger */
  #mobile-menu-toggle { display: block; }

  /* Hide Categories by default (Overlay Menu) */
  #cats.ajax-col, #subcats.ajax-col {
    display: none; /* Hidden until menu opened */
    position: fixed;
    top: 60px; /* Below header */
    left: 0;
    width: 100%;
    background: white;
    z-index: 100;
    padding: 20px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    border-top: 1px solid var(--border);
  }

  /* When menu is active, show cats */
  body.menu-open #cats.ajax-col { display: block; }
  
  /* When a category is clicked, we hide cats and show subcats via JS logic or CSS toggle. 
     For simple UX: Show subcats INSTEAD of cats when parent selected. */
  body.subcats-open #cats.ajax-col { display: none; }
  body.subcats-open #subcats.ajax-col { display: block; }

  /* Article is always visible underneath, effectively the "Home" view */
  #post-content.ajax-col {
    width: 100%;
    flex: 0 0 100%;
    padding: 10px 20px;
    
  }
}