@import url("https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;400;500;600;700&family=Cormorant:ital,wght@0,300..700;1,300..700&family=Pinyon+Script&family=UnifrakturMaguntia&display=swap");

:root {
  --event-color: blue;
  --main-color: #222222;
  --main-color-light: #555555;
  --accent-color: #cc3300;
  --make-white: #fefdf8;
  --make-black: black;
  --text-error: #721c24;
}

.cormorant-sc-light {
  font-family: "Cormorant SC", serif;
  font-weight: 300;
  font-style: normal;
}

.cormorant-sc-regular {
  font-family: "Cormorant SC", serif;
  font-weight: 400;
  font-style: normal;
}

.cormorant-sc-medium {
  font-family: "Cormorant SC", serif;
  font-weight: 500;
  font-style: normal;
}

.cormorant-sc-semibold {
  font-family: "Cormorant SC", serif;
  font-weight: 600;
  font-style: normal;
}

.cormorant-sc-bold {
  font-family: "Cormorant SC", serif;
  font-weight: 700;
  font-style: normal;
}

.cormorant-bold {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.cormorant-normal {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.unifrakturmaguntia-regular {
  font-family: "UnifrakturMaguntia", cursive;
  font-weight: 400;
  font-style: normal;
}

.pinyon-script-regular {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0px;
  padding: 0px;
  /* background-image: url("img/flag-black-background.png"); */
  /* background-size: cover; */
  /* background-position: center; */
  /* background-attachment: fixed; */
  /* background-repeat: no-repeat; */
  background-color: var(--main-color);
  font-family: "Cormorant", serif;
  /* text-align: justify; */
  font-size: 18px;
  color: black;
}

h1,
h2,
h3 {
  font-weight: normal;
  color: #ffffff;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1rem;
}

p {
  text-indent: 2em;
}

ol {
  list-style: decimal;
}

a {
  color: #000000;
  text-decoration: none;
  font-style: italic;
}

a:hover {
  text-decoration: none;
  color: #e11803 !important;
}

a img {
  border: none;
}

#wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* background-color:#FFFFFF; */
}

/* Header */

#header {
  margin: 0 auto;
  background-color: #ffffff;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

#header a {
  text-decoration: none;
  color: #ffffff;
}

#header-bar {
  display: flex;
  justify-content: space-between; /* Pushes Logo left and Nav right */
  align-items: center; /* Vertically centers everything */
  padding: 15px 20px;
  background-color: var(--main-color-light);
}

#header-banner {
  background-image: url("img/cbane-banner3.png");
  background-size: cover; /* Fills the area, might crop edges */
  background-position: center; /* Centers the banner focus */
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 18/4;
}

/* --- Logo, Icon, & Title Group --- */
#site-title {
  color: #ffffff;
  margin: auto;
  font-size: 3rem;
  font-family: "Cormorant SC", serif;
  font-weight: 600;
  font-style: normal;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#logo img {
  width: 50px;
  height: auto;
  display: block;
}

#logo h1 {
  margin: 0;
  line-height: normal;
  font-weight: normal;
  color: #000;
}

#social-icons {
  font-size: 24px;
  display: flex;
  gap: 15px;
  justify-content: center;
  display: none;
}

#social-icons a:hover {
  color: var(--accent-color);
}

#social-icons a {
  margin: 0 10px;
  text-decoration: none;
  font-size: 1.2rem;
}

.si-icon {
  width: 20px;
  fill: #ff6719; /* This is the official Substack orange */
  transition: fill 0.3s ease;
}
.si-icon:hover {
  fill: #000000;
}

.link-list li {
  list-style: none;
  display: flex;
  justify-content: space-between; /* This pushes the icon to the far right */
  align-items: center;
}

.branch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.branch-item a {
  text-decoration: none;
  color: #333;
  transition: transform 0.2s ease-in-out;
  display: block;
}

.branch-item a:hover {
  transform: translateY(-5px);
  color: #003366; /* Classic Navy Blue */
}

.branch-logo {
  width: 120px;
  height: auto;
  margin-bottom: 12px;
}

.branch-name {
  font-family: "Cormorant sc", serif;
  font-weight: 700;
  font-style: normal;
}

.iowa-logo,
.archives-logo {
  display: block; /* Removes extra whitespace at the bottom of the image */
  width: 100%; /* Forces image to scale to container width */
  height: auto; /* Maintains aspect ratio so it doesn't look stretched */
  margin-bottom: 10px;
}

/* --- Navbar Container --- */
.custom-navbar {
  display: flex;
  justify-content: flex-end; /* Keeps hamburger on the right */
  align-items: center;
  position: relative;
}

/* Hide the checkbox entirely */
.nav-checkbox {
  display: none;
}

/* --- Hamburger Icon Animation --- */
.nav-hamburger {
  display: block;
  width: 30px;
  cursor: pointer;
  z-index: 100;
  position: relative;
  padding-left: 10px;
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.nav-hamburger span:last-child {
  margin-bottom: 0;
}

/* --- The Sidebar (Right Side) --- */
.nav-menu {
  position: fixed;
  top: 0;
  right: -400px; /* Offset slightly more for shadow buffer */
  width: 300px;
  height: 100vh;
  background-color: #1a1a1a;
  z-index: 9999;
  transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1); /* Smoother slide */
  padding: 40px 20px; /* Extra top padding */
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
  display: block !important; /* Overrides any previous display:none */
}

/* Slide in when checked */
.nav-checkbox:checked ~ .nav-menu {
  right: 0;
}

/* --- Close Button inside Submenu --- */
.nav-close {
  display: block;
  text-align: right;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 40px;
  font-family: "Cormorant", serif;
  letter-spacing: 2px;
}

.nav-close i {
  margin-left: 10px;
  color: var(--accent-color);
}

.nav-close:hover {
  color: var(--accent-color);
}

/* --- Nav List --- */
.nav-list {
  list-style: none;
  padding: 0;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.nav-item {
  margin-bottom: 25px;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 12px;
}

.nav-item a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  transition: 0.3s;
}

.nav-item a:hover,
.nav-item.active a {
  color: var(--accent-color);
  padding-left: 10px; /* Slight nudge on hover */
}
/* Create an overlay when menu is open */
.nav-checkbox:checked ~ #page {
  filter: brightness(0.5);
  pointer-events: none; /* Prevents clicking content while menu is open */
}

/* Page */

#page {
  width: 100%;
  padding: 20px 0px;
  background: #ffffff;
  font-family: "Cormorant", serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  /* gap:10px; */
  /* flex-shrink:0; */
}

#content-full {
  width: 98%;
  margin: 0 auto;
  padding-bottom: 20px;
}

.cb-video-header {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

#header-pic {
  background: url("img/cbane-banner2.png") no-repeat center top;
  width: 100%;
  height: 250px;
  margin: 0 auto;
}

/* Content */

#content {
  /* float: right; */
  width: 67%;
  /* margin: 10px 0px; */
  padding: 0px 20px;
}

/* Force WordPress generated images to stay inside the container */
h1.title {
  margin: 0px;
  /* background: var(--main-color-light); */
  padding: 7px 0px;
  text-align: center;
  color: #000;
  border-bottom: 1px solid #000;
}

#post-container {
  margin-top: 10px;
}

.post .entry {
  padding: 0px 20px;
  color: black;
}

.post .meta {
  font-weight: bold;
}

.post .byline {
  margin-top: 10px;
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.substack {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  padding: 5px;
}

.back-link {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

/* Video Embed Styling */
.cb-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin-bottom: 15px;
}
.cb-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Grid Container */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

/* Card Styling */

/* --- Author Profile Header: Citizen Bane --- */

.author-profile-box {
  display: flex;
  align-items: center;
  background: #fdfdfd;
  padding: 25px;
  border: 1px solid #e0e0e0;
  border-left: 5px solid #333; /* Editorial accent bar */
  margin-bottom: 40px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
}

.author-avatar {
  flex-shrink: 0;
  margin-right: 25px;
}

.author-avatar img {
  display: block;
  border-radius: 4px; /* Slightly rounded square for a classic look */
  border: 1px solid #ddd;
  background: #fff;
  padding: 3px;
}

.author-info {
  flex-grow: 1;
}

.author-label {
  display: block;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #888;
  margin-bottom: 5px;
  font-weight: bold;
}

.author-name {
  margin: 0 0 8px 0 !important;
  font-size: 2.2rem;
  line-height: 1;
  color: #222;
}

.author-bio {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: #555;
  line-height: 1.5;
  font-style: italic;
}

.author-stats {
  margin-top: 12px;
  font-size: 16px;
  color: #777;
  border-top: 1px dotted #ccc;
  padding-top: 10px;
}

.author-stats i {
  margin-right: 5px;
  color: #444;
}

.author-stats a {
  font-size: 24px;
}

/* Archive Grid Layout */
.cb-post-grid {
  display: flex;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 20px;
}

/* Thumbnail Wrapper & Video Overlay */
.cb-thumb-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
  aspect-ratio: 16 / 9;
}
.cb-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.cb-thumb-wrapper:hover img {
  transform: scale(1.05);
}
.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.5rem;
  pointer-events: none;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

/* Meta & Typography */
.cb-card-meta {
  margin-top: 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-family: sans-serif;
}
.cb-card-meta a {
  color: #ceaa00;
  text-decoration: none;
  margin-right: 8px;
}

.author-meta {
  font-size: 0.85rem;
  color: #777;
}

.author-post-item {
  flex: 0 1 calc(50% - 10px); /* 2 per row */
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #eee;
  background: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  box-shadow: 5px 5px 2px 1px rgba(0 0 0 / 0.2);
}

.post-title {
  font-size: 1.25em;
}

/* Sidebar */

/* Hide all sidebar sections by default */
.all-posts,
.bane-posts,
.otr-posts,
.bane-authors,
.resistance-list,
.otr-list,
.fed-list,
.iowa-list,
.military-list,
.categories-list,
.VIT-widget,
.states-list {
  display: none;
}

.VIT-widget {
  height: 300px;
}

.citizen-bane-lookup {
  padding: 10px;
  margin-bottom: 10px;
}

.citizen-bane-lookup h3 {
  color: #000;
}

#sidebar-content {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 5px 5px 2px 1px rgba(0 0 0 / 0.2);
}

#sidebar {
  padding: 10px 20px;
  width: 30%;
}

#sidebar ul {
  padding: 0px 0 5px 0;
  margin: 0px;
  list-style: none;
}

#sidebar li li {
  margin-left: 10px;
  margin-right: 10px;
  line-height: 30px;
  padding-left: 15px;
  border-bottom: 1px dashed #bdbdbd;
}

#sidebar li ul {
  margin-bottom: 1.8em;
  list-style: none;
}

#sidebar h2 {
  /* background: var(--main-color-light); */
  padding: 7px 25px;
  color: #000;
  border-bottom: 1px solid #000;
}

#sidebar a {
  text-decoration: none;
}

#sidebar a:hover {
  text-decoration: underline;
}

/* Sidebar Author Styling */
#authors-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-author-item {
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.sidebar-author-item:last-child {
  border-bottom: none;
}

.sidebar-author-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sidebar-author-link:hover .sidebar-author-name {
  color: #000; /* Or your preferred hover color */
  text-decoration: underline;
}

.sidebar-author-avatar {
  margin-right: 12px;
  flex-shrink: 0;
}

.sidebar-author-avatar img {
  border-radius: 4px; /* Matches the journalist box theme */
  border: 1px solid #ddd;
  display: block;
}

.sidebar-author-info {
  display: flex;
  flex-direction: column;
}

.sidebar-author-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  line-height: 1.2;
}

.sidebar-author-view {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin-top: 2px;
}
.sidebar-category-info {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sidebar-category-view {
  padding-left: 10px;
}
/* Sidebar Military Branch Styling */
#branches-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-branch-item {
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.sidebar-branch-item:last-child {
  border-bottom: none;
}

.sidebar-branch-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: background 0.2s ease;
}

.sidebar-branch-link:hover .sidebar-branch-name {
  text-decoration: underline;
  color: #000;
}

.sidebar-branch-logo {
  margin-right: 12px;
  flex-shrink: 0;
  width: 60px; /* Fixed width matching the author avatar size */
  text-align: center;
}

.sidebar-branch-logo img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: grayscale(
    20%
  ); /* Optional: gives a slightly more serious, uniform tone */
}

.sidebar-branch-info {
  display: flex;
  flex-direction: column;
}

.sidebar-branch-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  line-height: 1.2;
}

.sidebar-branch-sub {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin-top: 2px;
}

/* Style the Search Input */
.filter-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#billSearch {
  width: 100%;
  max-width: 500px;
  padding: 12px 20px;
  border: 2px solid #ddd;
  border-radius: 25px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s;
  margin-top: 10px;
}

#billSearch:focus {
  border-color: #004477; /* Legislative Blue */
}

/* Helper for hidden items during search */
.hidden {
  display: none !important;
}

/* Footer */

#footer {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0px;
  color: #fff;
  font-family: "Cormorant", serif;
  font-weight: 400;
  font-style: normal;
}

#footer p {
  text-align: center;
  line-height: normal;
  text-indent:0;
}

#footer a {
  font-weight: bold;
  color: yellow;
}

.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes items to the far left, center, and far right */
  padding: 0px 20px;
}

.footer-content {
  text-align: center;
  flex-grow: 1; /* Ensures the center content takes up the middle space */
}

.back-to-top {
  text-decoration: none;
  color: #333;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.back-to-top:hover {
  transform: translateY(-5px); /* Simple hover effect */
  color: #007bff; /* Change to your brand color */
}

/* Blog % RSS Section */
/* Ensure the whole card uses Cormorant */

/* RSS */
#rss-container {
  padding: 10px 15px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.vote-item {
  flex: 1 1 calc(33% - 20px); /* 3 columns on desktop */
  min-width: 250px;
  background: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.6;
}

#pageInfo {
  margin: 0 15px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.cb-post-card {
  display: flex;
  flex-direction: column; /* Stacks top-row and meta vertically */
  /* gap: 15px; */
  font-family: "Cormorant", serif !important;
  margin-bottom: 30px;
  /* padding: 10px 10px; */
  border: 1px solid #ccc;
  box-shadow: 5px 5px 2px 1px rgba(0 0 0 / 0.2);
}

.full-post-card {
  display: flex;
  flex-direction: column; /* Stacks top-row and meta vertically */
  /* gap: 15px; */
  font-family: "Cormorant", serif !important;
  margin: 10px 20px;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 2px 1px rgba(0 0 0 / 0.2);
}
p.byline {
  text-indent: 0;
}
.full-post-title {
  font-size: 2rem;
  margin: 0 auto;
  padding-top: 10px;
}

/* Social Discussion Styling */
.discussion-box {
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-align: center;
}
.discussion-box p {
  margin-bottom: 20px;
  color: #999;
}
.social-links-wrap {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Side-by-side layout for Image and Text */
.cb-card-top-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Force Cormorant on all internal elements */
.cb-post-title,
.cb-post-title a,
.cb-post-excerpt,
.cb-post-excerpt p,
.cb-post-meta-centered,
.cb-post-meta-centered a {
  font-family: "Cormorant", serif !important;
  font-weight: 400;
  font-style: normal;
}

.cb-post-title a {
  font-size: 1.8rem;
  color: #222;
}

/* Image control */
.cb-post-thumbnail {
  flex: 0 0 250px; /* Adjust width as needed */
}

.cb-post-img {
  width:90%;
  height: auto;
  border-radius: 4px;
  padding:5px;
  
}

/* Styling for the featured image */
.cb-single-featured-image {
  margin: 20px 0;
  text-align: center;
  width: 100%;
}

.cb-single-featured-image img {
  width: 100%;
  height:auto;
}

/* Centered Meta section at bottom */
.cb-post-meta-centered {
  text-align: center;
  width: 100%;
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 5px;
}

.cb-post-meta-centered .bullet {
  margin: 0 10px;
  color: #ccc;
}

.cb-small-card {
  flex: 1;
  display: flex;
  padding: 20px 0px;
  flex-direction: column;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 2px 1px rgba(0 0 0 / 0.2);
}

.cb-small-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top; /* This forces the crop to start from the top */
  aspect-ratio: 16 / 9;
}

.cb-small-card h3 {
  font-size: 1.1rem;
  margin: 5px 0;
  line-height: 1.3;
}

.cb-small-card h3 a {
  text-decoration: none;
  color: #333;
}

.cb-small-card .author-meta {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

#directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}
.state-card {
  padding: 15px;
  background: #f9f9f9;
  border-left: 4px solid #333;
  border-bottom: 1px solid #ddd;
  transition: all 0.2s ease;
}
.state-card:hover {
  background: #fffcfc;
  border-left-color: #b22222;
  transform: translateY(-2px);
}
.state-card strong {
  display: block;
  font-size: 1.1em;
  margin-bottom: 5px;
  color: #111;
}
.state-link {
  font-size: 0.75em;
  color: #b22222;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Isolated News Wire Styles */
.cb-wire-item {
  margin-bottom: 20px;
  padding-bottom: 25px;
  margin-top: 20px;
  border-bottom: 1px solid #ddd;
}

.cb-wire-item:last-of-type {
  border-bottom: none;
}

.cb-wire-date {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #777;
  margin-bottom: 8px;
}

.cb-wire-title {
  margin: 0 0 12px 0 !important; /* Force margin to avoid global H3 overrides */
  font-size: 1.25rem;
  line-height: 1.2;
}

.cb-wire-title a {
  text-decoration: none;
  color: #1a1a1a;
}

.cb-wire-title a:hover {
  text-decoration: underline;
}

.cb-wire-excerpt {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.cb-wire-link {
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #555;
  border: 1px solid #ccc;
  padding: 5px 10px;
  display: inline-block;
}

.cb-wire-link:hover {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* Pagination Styling */
/* Pagination */
.cb-pagination {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ddd; /* Lighter line for a cleaner look */
  display: flex;
  justify-content: space-between; /* Pushes buttons to the sides */
  align-items: center;
}

.pagination-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  gap: 15px;
}

.cb-pagination a {
  display: inline-block;
  padding: 8px 16px;
  background: #333;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: bold;
  transition: background 0.2s;
}

.cb-pagination a:hover {
  background: #555;
}

.cb-pagination .page-info {
  font-size: 1rem;
  font-style: italic;
  color: #666;
}

/* --- Responsive Media Query --- */

@media (max-width: 800px) {
  #page {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   /* text-align: center; */
   width:100%;
   /* padding:5px; */
  }
  #content {
    width: 100%;
    order: 1; /* Appears first */
    margin:0;
    padding:0;
  }

  #sidebar {
    width: 100%;
    order: 2; /* Appears second (at the bottom) */
  }
  #sidebar-content {
  border: none;
  padding: 0px;
  box-shadow: none;
  }

  #footer {
    width: 100%;
    color: black;
  }

  #footer a {
    color: var(--accent-color);
  }

  body {
    background: none;
  }

  .cb-card-top-row {
    flex-direction: column;
    display: block;
  }
  .cb-post-thumbnail {
    width: 100%;
  }
  .cb-post-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
  .post .entry {
    padding: 0px 0px;
  }
  .full-post-card {
    margin: 10px 20px;
    border: none;
    box-shadow: none;
  }
  .author-post-item {
    flex: 0 1 100%;
  }
}

@media (max-width: 480px) {
  .cb-post-grid {
    grid-template-columns: 1fr; /* 1 per row on phones */
  }
  #site-title {
    font-size: 2.25rem;
  }
  #logo img {
  width: 40px;
  height: auto;
  }
}

/* Responsive */
@media (max-width: 850px) {
  .cb-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive adjustment for mobile */
@media (max-width: 600px) {
  .author-profile-box {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .author-avatar {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .author-name {
    font-size: 1.8rem;
  }
  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}