/* ===================================
   X.COM STYLE MODIFICATIONS
   Complete CSS for X.com-style theme
   =================================== */

/* COLOR SCHEME - Dark Theme */
:root {
  --x-bg-primary: #000000;
  --x-bg-secondary: #16181C;
  --x-bg-hover: #1C1F23;
  --x-border: #2F3336;
  --x-text-primary: #E7E9EA;
  --x-text-secondary: #71767B;
  --x-blue: #1DA1F2;
  --x-blue-hover: #1A91DA;
}

/* GLOBAL RESETS */
body {
  background: var(--x-bg-primary);
  color: var(--x-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
}

/* REMOVE ROUNDED CORNERS */
#page-wrapper,
#content-wrapper,
#header,
.padder,
.widget,
.post-thumbnail,
.post-thumbnail img,
#footer {
  border-radius: 0 !important;
}

/* LAYOUT - X.com Three Column */
#page-wrapper {
  width: 100%;
  max-width: 1265px;
  margin: 0 auto;
  background: var(--x-bg-primary);
}

#content-wrapper {
  background: transparent;
  margin-bottom: 0;
}

/* LEFT SIDEBAR - Navigation */
#header {
  position: fixed;
  left: 0;
  top: 0;
  width: 275px;
  height: 100vh;
  background: var(--x-bg-primary);
  border-right: 1px solid var(--x-border);
  border-bottom: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

#logo {
  padding: 20px;
  margin: 0;
}

/* NAVIGATION - Vertical Icon Style */
#nav {
  float: none;
  width: 100%;
}

#nav .menu {
  float: none;
  margin: 0;
  padding: 0 12px;
}

#nav .menu li {
  float: none;
  display: block;
  margin: 4px 0;
}

#nav .menu li a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--x-text-primary);
  font-size: 20px;
  font-weight: 400;
  border-radius: 9999px;
  transition: background-color 0.2s;
}

#nav .menu li a:hover,
#nav .menu li:hover > a {
  background: var(--x-bg-hover);
  color: var(--x-text-primary);
}

/* Hide dropdown menus in X style */
#nav .menu .sub-menu {
  display: none !important;
}

/* CENTER CONTENT FEED */
#content,
#container {
  float: none;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  margin-left: 275px;
  background: transparent;
  border-left: 1px solid var(--x-border);
  border-right: 1px solid var(--x-border);
}

.padder {
  background: transparent;
  padding: 0;
}

/* RIGHT SIDEBAR */
.sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 350px;
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
  background: var(--x-bg-primary);
}

#sidebar-right {
  margin: 0;
}

/* WIDGETS - X.com Style */
.widget {
  background: var(--x-bg-secondary);
  border: 1px solid var(--x-border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.widget .widgettitle,
.widget .widget-title {
  color: var(--x-text-primary);
  font-size: 20px;
  font-weight: 800;
  border: none;
  padding: 0 0 12px 0;
  margin: 0 0 12px 0;
}

/* POST CARDS - Feed Style */
.gp-blog-wrapper section {
  background: transparent;
  border-bottom: 1px solid var(--x-border);
  padding: 12px 16px;
  margin: 0;
  border-radius: 0;
  transition: background-color 0.2s;
}

.gp-blog-wrapper section:hover {
  background: var(--x-bg-hover);
  cursor: pointer;
}

/* POST CONTENT */
.post-text h2 {
  color: var(--x-text-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 8px;
}

.post-text h2 a {
  color: var(--x-text-primary);
}

.post-text h2 a:hover {
  color: var(--x-blue);
}

/* POST META - Inline Style */
.gp-entry-meta,
.gp-loop-meta {
  color: var(--x-text-secondary);
  font-size: 15px;
  font-weight: 400;
  margin: 0 0 4px 0;
}

.gp-post-meta {
  color: var(--x-text-secondary);
  font-weight: 400;
  margin: 0 4px 0 0;
}

.gp-post-meta:before {
  content: "·";
  margin: 0 4px;
  font-family: inherit;
}

.gp-meta-author:before,
.gp-meta-date:before,
.gp-meta-cats:before,
.gp-meta-comments:before {
  content: "·";
  margin: 0 4px;
}

/* POST THUMBNAILS */
.post-thumbnail {
  margin: 12px 0;
  border-radius: 16px;
  overflow: hidden;
}

.post-thumbnail img {
  border-radius: 16px;
}

/* BUTTONS - X.com Style */
input[type='button'],
input[type='submit'],
button,
.button,
.sc-button {
  background: var(--x-blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: none;
  transition: background-color 0.2s;
}

input[type='button']:hover,
input[type='submit']:hover,
button:hover,
.button:hover,
.sc-button:hover {
  background: var(--x-blue-hover);
}

/* LINKS */
a {
  color: var(--x-blue);
}

a:hover {
  text-decoration: underline;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
  color: var(--x-text-primary);
  font-weight: 700;
}

.page-title {
  color: var(--x-text-primary);
  font-size: 20px;
  font-weight: 800;
  padding: 16px;
  margin: 0;
  border-bottom: 1px solid var(--x-border);
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  z-index: 100;
}

/* FORMS */
input,
textarea,
select {
  background: var(--x-bg-primary);
  color: var(--x-text-primary);
  border: 1px solid var(--x-border);
  font-size: 15px;
  padding: 12px;
  border-radius: 4px;
}

input:focus,
textarea:focus {
  border-color: var(--x-blue);
  background: var(--x-bg-primary);
}

/* COMMENTS - X.com Reply Style */
#comments {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

#comments .commentlist li {
  border-bottom: 1px solid var(--x-border);
  padding: 12px 16px;
  margin: 0;
}

.comment-reply-link {
  background: transparent;
  color: var(--x-text-secondary);
  border: 1px solid var(--x-border);
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
}

.comment-reply-link:hover {
  background: var(--x-bg-hover);
  color: var(--x-text-primary);
}

/* PAGINATION */
ul.page-numbers .page-numbers {
  background: transparent;
  color: var(--x-text-primary);
  border: 1px solid var(--x-border);
  border-radius: 9999px;
  padding: 8px 12px;
}

ul.page-numbers .page-numbers:hover,
ul.page-numbers .page-numbers.current {
  background: var(--x-bg-hover);
  border-color: var(--x-blue);
}

/* FOOTER */
#footer {
  background: var(--x-bg-primary);
  border-top: 1px solid var(--x-border);
  color: var(--x-text-secondary);
  margin-left: 275px;
  max-width: 600px;
}

/* REMOVE BOX SHADOWS */
* {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* SCROLLBAR STYLING */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--x-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--x-bg-hover);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--x-border);
}

/* SINGLE POST STYLES */
.x-post-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--x-border);
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  z-index: 100;
}

.x-back-button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  margin-right: 20px;
  transition: background-color 0.2s;
}

.x-back-button:hover {
  background: var(--x-bg-hover);
}

.x-header-text h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--x-text-primary);
  margin: 0;
}

.x-post-card {
  border-bottom: 1px solid var(--x-border);
  padding: 16px;
}

.x-post-author {
  display: flex;
  margin-bottom: 12px;
}

.x-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  overflow: hidden;
  margin-right: 12px;
}

.x-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.x-author-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.x-author-name a {
  font-weight: 700;
  color: var(--x-text-primary);
  font-size: 15px;
  line-height: 20px;
}

.x-author-name a:hover {
  text-decoration: underline;
}

.x-post-date {
  font-size: 15px;
  color: var(--x-text-secondary);
  line-height: 20px;
}

.x-post-content {
  color: var(--x-text-primary);
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 12px;
}

.x-post-title {
  font-size: 23px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 12px;
  color: var(--x-text-primary);
}

.x-post-media {
  margin: 12px 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--x-border);
}

.x-post-media img {
  width: 100%;
  height: auto;
  display: block;
}

.x-post-stats {
  display: flex;
  gap: 40px;
  padding: 12px 0;
  color: var(--x-text-secondary);
  font-size: 14px;
}

.x-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color 0.2s;
}

.x-stat-item:hover {
  color: var(--x-blue);
}

.x-stat-item svg {
  opacity: 0.7;
}

.x-post-tags {
  margin: 12px 0;
}

.x-tag {
  color: var(--x-blue);
  margin-right: 8px;
  font-size: 15px;
}

.x-tag:hover {
  text-decoration: underline;
}

/* SEARCH WIDGET STYLING */
.gp-search-widget .search-field {
  width: 100%;
  background: var(--x-bg-secondary);
  border: 1px solid transparent;
  padding: 12px 16px;
  border-radius: 9999px;
  color: var(--x-text-primary);
  font-size: 15px;
}

.gp-search-widget .search-field:focus {
  background: var(--x-bg-primary);
  border-color: var(--x-blue);
}

.gp-search-widget .search-field::placeholder {
  color: var(--x-text-secondary);
}

/* TRENDING TOPICS WIDGET */
.x-trending-list {
  display: flex;
  flex-direction: column;
}

.x-trending-item {
  padding: 12px 16px;
  display: block;
  transition: background-color 0.2s;
  border-radius: 4px;
  margin-bottom: 4px;
}

.x-trending-item:hover {
  background: var(--x-bg-hover);
}

.x-trending-category {
  font-size: 13px;
  color: var(--x-text-secondary);
  margin-bottom: 2px;
}

.x-trending-tag {
  font-size: 15px;
  font-weight: 700;
  color: var(--x-text-primary);
  margin-bottom: 2px;
}

.x-trending-count {
  font-size: 13px;
  color: var(--x-text-secondary);
}

/* BUDDYPRESS BUTTONS */
#bp-buttons {
  padding: 20px;
  margin: 0;
}

.bp-button {
  background: var(--x-blue);
  color: #fff;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 15px;
  margin: 4px 0;
  display: block;
  text-align: center;
}

.bp-button:hover {
  background: var(--x-blue-hover);
}

.bp-button a {
  color: #fff;
}

/* MOBILE NAV BUTTON */
#mobile-nav-button {
  background: var(--x-blue);
  border-radius: 9999px;
}

#mobile-nav-button:hover {
  background: var(--x-blue-hover);
}

/* RESPONSIVE ADJUSTMENTS */
@media only screen and (max-width: 1265px) {
  .sidebar {
    display: none;
  }
  
  #content,
  #container {
    margin-right: 0;
  }
}

@media only screen and (max-width: 1023px) {
  #header {
    position: relative;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--x-border);
  }
  
  #content,
  #container {
    margin-left: 0;
    border-left: none;
  }
  
  #nav .menu li {
    display: inline-block;
  }
  
  #nav .menu li a {
    font-size: 16px;
    padding: 8px 12px;
  }
  
  #bp-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  
  .bp-button {
    display: inline-block;
    margin: 0;
  }
}

@media only screen and (max-width: 767px) {
  #nav .menu li a {
    font-size: 14px;
    padding: 6px 10px;
  }
  
  .x-post-header {
    padding: 12px;
  }
  
  .x-post-card {
    padding: 12px;
  }
}