/* -------------------------------------------------------
   --- This section styles the main CSS blocks
   ------------------------------------------------------- */

html, body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word; /* Avoid long strings overlapping divs */
    word-break: break-word;    /* Ensure proper text breaking */
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center; /* Center content */
}

.main-container {
    flex: 1; /* Expands to push footer down */
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; /* Debug: Removed for production */
}

footer {
    width: 100%;
    margin-top: auto; /* Ensures footer stays at the bottom when there's little content */
}

.announcement {
    border-radius: 10px;
}

.row {
  width: 100%; /* Ensure the row doesn't exceed the parent */
  margin-left: 0 !important; /* Override Bootstrap's negative margin */
  margin-right: 0 !important; /* Override Bootstrap's negative margin */
  box-sizing: border-box; /* Include padding/margins in the width */
  /* border: 1px solid blue; /* Debug: Removed for production */
}

/* -------------------------------------------------------
   --- This section styles the footer.
   ------------------------------------------------------- */

.footer {
    background-color: white; /* White background */
    padding: 20px 0; /* Top and bottom padding */
    text-align: center; /* Center-align all content */
    /*border-top: 1px solid #ddd; /* Optional: light border on top */
}

.footer-content {
    max-width: 1200px; /* Align with your layout width */
    margin: 0 auto;
    font-size: 0.9rem; /* Slightly smaller font size */
    color: #6A5ACD; /* Neutral gray color for text */
}

.footer-brand {
    margin-bottom: 10px; /* Spacing below branding text */
    font-weight: bold; /* Emphasize the brand text */
}

.footer-links {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
    display: flex;
    justify-content: center; /* Center-align links */
    gap: 15px; /* Space between links */
}

.footer-links li {
    display: inline; /* Display links inline */
}

.footer-links a {
    text-decoration: none; /* Remove underline */
    color: #555; /* Link color */
    font-weight: 500; /* Medium font weight */
}

.footer-links a:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #6A5ACD; /* Darker shade on hover */
}

/* -------------------------------------------------------
   --- This section styles Post container.
   ------------------------------------------------------- */

/* Styling post-container div */
.post-container {
  margin-top: 0rem !important;
  margin-bottom: 0.7rem !important;
  padding-left: 0;
  padding-right: 0;
}

/* post-container links */
.post-container a.custom-post-links {
  color: #333 !important;
}

.post-container a.custom-post-links:hover {
  text-decoration: underline !important;
}

.post-box {
  background-color: #f8f9fa; /* Light gray background */
  border-radius: 10px; /* Rounded corners */
  border: none !important; /* Remove the border entirely */
}

/* img should fit the .post content and not overlap */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* links in .post-content should open in a new tab */
.post-content a {
    cursor: pointer;
}

/* Disable click on image links */
.post-content a:has(img) {
    pointer-events: none;
    cursor: default;
}

/* -------------------------------------------------------
   --- This section styles the carousel.
   ------------------------------------------------------- */

.carousel-container {
    margin-top: 20px; /* Adjust as needed */
}

.carousel .carousel-inner {
    height: 200px; /* Adjust height as needed */
}

/* -------------------------------------------------------
   --- This section styles the breadcrumb menu.
   ------------------------------------------------------- */

.custom_breadcrumb {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.7rem;
}

.custom_breadcrumb a {
  text-decoration: none;
  color: #333; /* Link color */
}

.custom_breadcrumb a:hover {
  text-decoration: underline;
}

.custom_breadcrumb > span {
  color: #333; /* Text color for non-links */
}

/* -------------------------------------------------------
   --- This section styles the header.
   ------------------------------------------------------- */

.full-width-header {
  width: 100%; /* Full-screen width */
  background-color: #57C57C; /* Purple background */
  padding-bottom: 0; /* No extra padding at the bottom */
  box-sizing: border-box;
}

.inner-header { /* Inner Header Content (Logo and Buttons) */
  max-width: 1200px; /* Center and constrain content */
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* Logo on the left, buttons on the right */
  align-items: center;
  padding: 15px 20px; /* Add padding around the logo and buttons */
}/* Logo (Left-Aligned) */

.logo {
  flex-shrink: 0; /* Prevent the logo from shrinking */
  margin-right: auto; /* Push the logo to the far left */
}

.logo img {
  max-height: 80px; /* Limit logo height */
  height: auto;
}

.right-content { /* Right Content (Aligned to the Right) */
  display: flex; /* Flexbox layout for right-side elements */
  align-items: center; /* Vertically align items */
  gap: 15px; /* Space between "Create a Post," search bar, and buttons */
  margin-left: auto; /* Push the right content to the far right */
}

/* -------------------------------------------------------
   --- This section styles the search bar.
   ------------------------------------------------------- */

.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-bar form {
  display: flex;
  position: relative; /* For positioning the icon inside the input */
}

.search-bar .input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar .search-input {
  border: none; /* Remove border on focus */
  padding: 8px 12px;
  border-radius: 5px; /* Fully rounded corners */
  width: 250px; /* Adjust width as needed */
  padding-right: 40px; /* Space for the search icon */
  outline: none; /* Remove browser's default outline */
}

.search-bar .search-input::placeholder {
  font-size: 0.9rem; /* Smaller font size for placeholder text */
  color: #999; /* Lighter color for placeholder text */
}

.search-bar .search-input:focus {
  border: none; /* Remove border on focus */
  outline: none; /* Remove browser's default outline */
  color: #999; /* Lighter color for placeholder text */
}

.search-bar .search-icon {
  position: absolute;
  right: 8px; /* Adjust to align within the input */
  background-color: #EA705D;
  border: none;
  padding: 8px;
  border-radius: 5px; /* Fully rounded corners */
  display: flex;
  cursor: pointer;
}

.search-bar svg {
  width: 16px;
  height: 16px;
}

/* -------------------------------------------------------
   --- This section styles the authentication buttons.
   ------------------------------------------------------- */
:root {
  --gold: #EA705D;
  --purple:#8D52F8;
}

.auth-buttons {
  display: flex;
  gap: 10px; /* Space between the buttons */
}

.auth-buttons .btn.auth-btn, .btn.auth-btn {
  background-color: var(--gold);
  color: black;
  border: 2px solid transparent; /* Add transparent border for alignment */
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: .84px;
  cursor: pointer;
  text-decoration: none; /* Make links look like buttons */
  transition: all 0.3s ease; /* Smooth hover effect */
}

.auth-btn.account-circle {
  width: 45px; /* Fixed width to make it circular */
  height: 45px; /* Fixed height to match width */
  border-radius: 50% !important; /* Makes the button a perfect circle */
  font-size: 0.6rem !important; /* Adjust font size for fitting */
  letter-spacing: -0.5px; /* Adjust space between letters */
  display: flex; /* Align content flexibly */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  overflow: hidden; /* Ensure text stays inside */
  text-transform: uppercase; /* Ensure all letters are uppercase */
  white-space: nowrap; /* Prevent text from wrapping to the next line */
  text-align: center; /* Center the text within the button */
}

.right-content .create-post-btn {
  border-radius: 50px; /* Pill shape */
  display: inline-flex; /* Align icon and text horizontally */
  align-items: center; /* Center icon and text vertically */
  gap: 0.5rem; /* Add gap between icon and text */
  box-sizing: border-box; /* Ensure padding and border don't affect box size */
}

.right-content .create-post-btn .icon {
  width: 1rem; /* Icon width */
  height: 1rem; /* Icon height */
  flex-shrink: 0; /* Prevent the icon from resizing the button box */
}

.auth-buttons .btn.auth-btn:hover,
.btn.auth-btn:hover {
  background-color: #fff;
  color: var(--purple);
}

.auth-buttons .btn.sign-in-btn {
  background-color: white;
  border: 2px solid var(white);
  color: var(white);
}

.auth-buttons .btn.sign-in-btn:hover {
  background-color: var(--gold);
  color: black;
  border: 2px solid var(--gold);
}

/* Dropdown menu styles */
.dropdown-menu {
  background-color: #5A4ECF;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px 0;
  min-width: 150px;
}

.dropdown-menu .dropdown-item {
  color: white;
  padding: 8px 15px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #4F3DAF;
  color: #FFD700;
}

/* -------------------------------------------------------
   --- This section styles the posts buttons
   ------------------------------------------------------- */

/* Style for the favorite toggle button */
.btn.toggle-favorite {
    background: none; /* Remove background */
    border: none;     /* Remove border */
    padding: 0;       /* Remove padding */
    cursor: pointer;  /* Pointer cursor for interactivity */
    outline: none;    /* Remove focus outline */
}

.btn.toggle-favorite i {
    font-size: 1.2rem; /* Slightly larger icon */
    transition: transform 0.2s ease, color 0.2s ease; /* Smooth hover effect */
}

.btn.toggle-favorite i:hover {
    background: none; /* Remove background */
    transform: scale(1.2); /* Slightly enlarge on hover */
    color: #ffc107; /* Highlight color (yellow) */
}

.btn.toggle-flag i {
    font-size: 1rem; /* Slightly larger icon */
    transition: transform 0.2s ease, color 0.2s ease; /* Smooth hover effect */
}

.btn.toggle-flag i:hover {
    background: none; /* Remove background */
    transform: scale(1.2); /* Slightly enlarge on hover */
    color: #ffc107; /* Highlight color (yellow) */
}

button.btn.toggle-like,
button.btn.toggle-flag {
  padding: 0;
}


.btn.toggle-like i {
    font-size: 1.2rem; /* slightly larger icon */
    transition: transform 0.2s ease, color 0.2s ease; /* smooth hover effect */
}

.btn.toggle-like i:hover {
    background: none; /* Remove background */
    transform: scale(1.2); /* Slightly enlarge on hover */
    color: #ffc107; /* Highlight color (yellow) */
}

/* -------------------------------------------------------
   --- This section styles the header menu.
   ------------------------------------------------------- */

header nav.navbar {
  padding-top: 20px; /* Add padding for better spacing */
  padding-bottom: 0px;
}

header nav.navbar ul.navbar-nav {
  max-width: 1200px; /* Constrain navbar content width */
  margin: 0 auto; /* Center the navbar items */
  justify-content: center; /* Center-align the links */
}

header nav.navbar .nav-link {
  display: block; /* Ensure links take full hoverable area */
  color: white; /* White text for links */
  font-size: 1rem; /* Slightly larger font for readability */
  font-weight: 500; /* Normal font weight */
  letter-spacing: .84px;
  text-transform: none; /* Keep text as-is (no uppercase transformation) */
  text-decoration: none; /* Remove underline */
  text-align: center; /* Center text inside the padded area */
  position: relative; /* For the hover underline */
  background: none; /* Remove any inherited background */
  border: none; /* Remove any border styles */
  transition: color 0.3s ease, background-color 0.3s ease; /* Smooth hover effect */
  padding: var(--bs-nav-link-padding-y) 50px !important;
}

header nav.navbar .nav-link:hover {
  color: #FFD700; /* Gold color for text on hover */
  background-color: #4F3DAF; /* Slightly darker purple for background on hover */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* -------------------------------------------------------
   --- This section styles the header menu dropdown.
   ------------------------------------------------------- */

header nav.navbar .dropdown-menu {
  border-top: 3px solid #FFD700; /* Add a top border with your desired color and width */
  border-left: none; /* Remove left border */
  border-right: none; /* Remove right border */
  border-bottom: none; /* Remove bottom border */
  background-color: #5A4ECF; /* Match the navbar background */
  border-radius: 0px; /* Slight rounding for modern look */
  padding: 10px; /* Add inner spacing for content */
  width: 700px; /* Larger width for the dropdown */
  height: 200px; /* Reduced height for consistency */
  position: absolute; /* Position the dropdown relative to the navbar */
  left: 50%; /* Center the rectangle horizontally */
  transform: translateX(-50%); /* Adjust for centering */
  z-index: 1000; /* Ensure it stays above other content */
  display: none; /* Initially hidden */
  overflow-y: auto; /* Enable scrolling if sub-categories exceed the height */
  grid-template-columns: repeat(8, 1fr); /* Two equal-width columns for sub-categories */
  gap: 5px; /* Space between sub-categories */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Add shadow for elevation */
}

header nav.navbar .nav-item.dropdown:hover .dropdown-menu { /* Show Dropdown Menu Only on Hover */
  display: grid; /* Change from none to grid on hover */
}

header nav.navbar .dropdown-item {
  color: white; /* White text for dropdown items */
  background-color: transparent; /* Remove grey background */
  font-size: 0.9rem; /* Slightly smaller font size */
  font-weight: normal; /* Keep normal weight for dropdown items */
  text-decoration: none;
  text-align: left; /* Align text to the left */
  position: relative; /* For hover underline */
  transition: all 0.3s ease; /* Smooth hover effects */
}

header nav.navbar .dropdown-item:hover {
  text-decoration: underline; /* Add standard underline on hover */
}

header nav.navbar .dropdown-menu::-webkit-scrollbar { /* Scrollbar Styles for Dropdown */
  width: 8px; /* Width of the scrollbar */
}

header nav.navbar .dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #FFD700; /* Yellow scrollbar thumb */
  border-radius: 5px;
}

header nav.navbar .dropdown-menu::-webkit-scrollbar-track {
  background-color: #5A4ECF; /* Match the dropdown background */
}

header nav.navbar .nav-item.dropdown:hover .nav-link, 
header nav.navbar .dropdown-menu:hover ~ .nav-link { /* keep navbar state when hovering */
  color: #FFD700; /* Keep category text yellow */
  background-color: #5A4ECF; /* Slightly darker purple for background on hover */
}

trix-editor {
  background-color: white; /* Set background to white */
  color: #333; /* Set text color to dark grey */
  border: 1px solid #ccc; /* Optional: Add a border for better visibility */
  border-radius: 5px; /* Optional: Rounded corners */
  padding: 10px; /* Add padding for better readability */
  min-height: 150px; /* Set a minimum height */
  font-size: 1rem; /* Adjust font size */
  box-sizing: border-box; /* Ensure padding and border are included in the width/height */
}

.attachment__caption { /* Remove trix caption */
    display: none;
}

/* Add a focus style */
trix-editor:focus {
  border-color: #007bff; /* Highlight border on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.25); /* Optional: Add a subtle focus shadow */
}

.post-create-box input,
.post-create-box textarea,
.post-create-box select {
  background-color: white; /* Ensure consistent white background */
  color: #333; /* Dark grey text color */
  border: 1px solid #ccc; /* Add a light grey border */
  border-radius: 5px; /* Rounded corners */
  padding: 10px; /* Padding for better readability */
  width: 100%; /* Ensure full width */
  box-sizing: border-box; /* Include padding and border in width/height */
  font-size: 1rem; /* Consistent font size */
}

/* Focus styles for inputs, textareas, selects, and trix-editor */
.post-create-box input:focus,
.post-create-box textarea:focus,
.post-create-box select:focus {
  border-color: #007bff; /* Highlight border on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.25); /* Subtle shadow on focus */
  outline: none; /* Remove default browser outline */
}

/* -------------------------------------------------------
  --- This section styles the link pages (About Us, Privacy Policy, etc.)
  ------------------------------------------------------- */

  .link-page-content {
    background-color: #fff; /* White background for the content area */
    padding: 30px; /* Add padding for breathing room */
    border-radius: 10px; /* Rounded corners for a modern look */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-bottom: 30px; /* Space below the content */
}

.link-page-content h1 {
    color: #6A5ACD; /* Use the purple color for the main heading */
    font-size: 2.5rem; /* Larger font size for the main heading */
    font-weight: bold; /* Bold for emphasis */
    margin-bottom: 20px; /* Space below the heading */
}

.link-page-content h3 {
    color: #333; /* Darker color for subheading */
    font-size: 1.5rem; /* Slightly smaller than h1 */
    font-weight: 600; /* Semi-bold for emphasis */
    margin-bottom: 15px; /* Space below the subheading */
}

.link-page-content li,
.link-page-content ol,
.link-page-content ul,
.link-page-content h6,
.link-page-content p {
    color: #555;          /* Same medium gray as <p> */
    font-size: 1rem;      /* Match paragraph font size */
    line-height: 1.5;     /* Match paragraph line height */
    margin-bottom: 10px;  /* Space between list items */
}

.link-page-content br {
    margin-bottom: 10px; /* Ensure line breaks don't create excessive spacing */
}

/* -------------------------------------------------------
  --- This section styles the login form
  ------------------------------------------------------- */

  .login-form-container {
    background-color: #fff; /* White background for the form */
    padding: 30px; /* Add padding for breathing room */
    border-radius: 10px; /* Rounded corners for a modern look */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-width: 500px; /* Limit the form width for better readability */
    margin: 0 auto; /* Center the form within the column */
    text-align: center; /* Center-align text and elements */
}

.login-form-container h1 {
    color: #6A5ACD; /* Purple color for the heading */
    font-size: 2rem; /* Slightly smaller than About Us h1 for hierarchy */
    font-weight: bold; /* Bold for emphasis */
    margin-bottom: 10px; /* Space below the heading */
}

.login-form-container .login-subtitle {
    color: #555; /* Medium gray for subtitle */
    font-size: 1rem; /* Standard font size */
    margin-bottom: 20px; /* Space below the subtitle */
}

.login-form-container .form-group {
    margin-bottom: 20px; /* Space between form fields */
    text-align: left; /* Align labels and inputs to the left */
}

.login-form-container .form-group label {
    display: block; /* Ensure label is on its own line */
    color: #333; /* Darker color for labels */
    font-size: 0.9rem; /* Slightly smaller font for labels */
    font-weight: 500; /* Medium weight for labels */
    margin-bottom: 5px; /* Space below the label */
}

.login-form-container .form-control {
    width: 100%; /* Full width for inputs */
    padding: 10px; /* Padding for better readability */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Standard font size */
    box-sizing: border-box; /* Include padding and border in width */
    transition: border-color 0.3s ease; /* Smooth border transition */
}

.login-form-container .form-control:focus {
    border-color: #6A5ACD; /* Purple border on focus */
    outline: none; /* Remove default browser outline */
    box-shadow: 0 0 5px rgba(106, 90, 205, 0.25); /* Subtle shadow on focus */
}

.login-form-container .reset-password-link {
    margin-top: 10px; /* Space above the link */
    margin-bottom: 20px; /* Space below the link */
    text-align: right; /* Align the link to the right */
    font-size: 0.9rem; /* Slightly smaller font */
}

.login-form-container .reset-password-link a {
    color: #6A5ACD; /* Purple color for the link */
    text-decoration: none; /* Remove underline */
    font-weight: 500; /* Medium weight for emphasis */
}

.login-form-container .reset-password-link a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #FFD700; /* Gold color on hover */
}

.login-form-container .login-btn {
    width: 100%; /* Full-width button */
    padding: 12px; /* Larger padding for a prominent button */
    font-size: 1rem; /* Standard font size */
    border-radius: 50px; /* Pill-shaped button to match create-post-btn */
}

.login-form-container .register-link {
    margin-top: 20px; /* Space above the link */
    color: #555; /* Medium gray for text */
    font-size: 0.9rem; /* Slightly smaller font */
}

.login-form-container .register-link a {
    color: #6A5ACD; /* Purple color for the link */
    text-decoration: none; /* Remove underline */
    font-weight: 500; /* Medium weight for emphasis */
}

.login-form-container .register-link a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #FFD700; /* Gold color on hover */
}

/* -------------------------------------------------------
   --- This section styles the registration form
   ------------------------------------------------------- */

.register-form-container {
    background-color: #fff; /* White background for the form */
    padding: 30px; /* Add padding for breathing room */
    border-radius: 10px; /* Rounded corners for a modern look */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-width: 500px; /* Limit the form width for better readability */
    margin: 0 auto; /* Center the form within the column */
    text-align: center; /* Center-align text and elements */
}

.register-form-container h1 {
    color: #6A5ACD; /* Purple color for the heading */
    font-size: 2rem; /* Slightly smaller than About Us h1 for hierarchy */
    font-weight: bold; /* Bold for emphasis */
    margin-bottom: 10px; /* Space below the heading */
}

.register-form-container .register-subtitle {
    color: #555; /* Medium gray for subtitle */
    font-size: 1rem; /* Standard font size */
    margin-bottom: 20px; /* Space below the subtitle */
}

.register-form-container .social-signup-buttons {
    display: flex; /* Flexbox for horizontal layout */
    justify-content: center; /* Center-align buttons */
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.register-form-container .social-btn {
    display: flex; /* Align icon and text horizontally */
    align-items: center; /* Center vertically */
    gap: 8px; /* Space between icon and text */
    padding: 10px 15px; /* Padding for button size */
    border-radius: 5px; /* Rounded corners */
    font-size: 0.9rem; /* Slightly smaller font */
    font-weight: 500; /* Medium weight for text */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

.register-form-container .social-btn .social-icon {
    width: 20px; /* Icon size */
    height: 20px; /* Icon size */
}

.register-form-container .google-btn {
    background-color: #fff; /* White background */
    border: 1px solid #EA4335; /* Google red border */
    color: #EA4335; /* Google red text */
}

.register-form-container .google-btn:hover {
    background-color: #EA4335; /* Google red background on hover */
    color: #fff; /* White text on hover */
}

.register-form-container .apple-btn {
    background-color: #fff; /* White background */
    border: 1px solid #000; /* Black border for Apple */
    color: #000; /* Black text */
}

.register-form-container .apple-btn:hover {
    background-color: #000; /* Black background on hover */
    color: #fff; /* White text on hover */
}

.register-form-container .facebook-btn {
    background-color: #fff; /* White background */
    border: 1px solid #4267B2; /* Facebook blue border */
    color: #4267B2; /* Facebook blue text */
}

.register-form-container .facebook-btn:hover {
    background-color: #4267B2; /* Facebook blue background on hover */
    color: #fff; /* White text on hover */
}

.register-form-container .manual-signup-heading {
    color: #333; /* Darker color for subheading */
    font-size: 1.5rem; /* Slightly smaller than h1 */
    font-weight: 600; /* Semi-bold for emphasis */
    margin-top: 20px; /* Space above the heading */
    margin-bottom: 20px; /* Space below the heading */
}

.register-form-container .form-group {
    margin-bottom: 20px; /* Space between form fields */
    text-align: left; /* Align labels and inputs to the left */
}

.register-form-container .form-group label {
    display: block; /* Ensure label is on its own line */
    color: #333; /* Darker color for labels */
    font-size: 0.9rem; /* Slightly smaller font for labels */
    font-weight: 500; /* Medium weight for labels */
    margin-bottom: 5px; /* Space below the label */
}

.register-form-container .form-control {
    width: 100%; /* Full width for inputs */
    padding: 10px; /* Padding for better readability */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Standard font size */
    box-sizing: border-box; /* Include padding and border in width */
    transition: border-color 0.3s ease; /* Smooth border transition */
}

.register-form-container .form-control:focus {
    border-color: #6A5ACD; /* Purple border on focus */
    outline: none; /* Remove default browser outline */
    box-shadow: 0 0 5px rgba(106, 90, 205, 0.25); /* Subtle shadow on focus */
}

.register-form-container .alert-danger {
    font-size: 0.9rem; /* Slightly smaller font for error messages */
    padding: 10px; /* Reduced padding for a compact look */
    margin-bottom: 20px; /* Space below the alert */
}

.register-form-container .text-danger {
    font-size: 0.85rem; /* Smaller font for field-specific errors */
    margin-top: 5px; /* Space above the error message */
}

.register-form-container .register-btn {
    width: 100%; /* Full-width button */
    padding: 12px; /* Larger padding for a prominent button */
    font-size: 1rem; /* Standard font size */
    border-radius: 50px; /* Pill-shaped button to match login-btn */
}

.register-form-container .terms-links {
    color: #555; /* Medium gray for text */
    font-size: 0.9rem; /* Slightly smaller font */
}

.register-form-container .terms-links a {
    color: #6A5ACD; /* Purple color for the link */
    text-decoration: none; /* Remove underline */
    font-weight: 500; /* Medium weight for emphasis */
}

.register-form-container .terms-links a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #FFD700; /* Gold color on hover */
}

.register-form-container .login-link {
    color: #555; /* Medium gray for text */
    font-size: 0.9rem; /* Slightly smaller font */
}

.register-form-container .login-link a {
    color: #6A5ACD; /* Purple color for the link */
    text-decoration: none; /* Remove underline */
    font-weight: 500; /* Medium weight for emphasis */
}

.register-form-container .login-link a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #FFD700; /* Gold color on hover */
}

/* -------------------------------------------------------
   --- Generic HTTP error block (used by error.html)
   ------------------------------------------------------- */

.httperror {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* text | illustration */
  gap: 24px;
  background-color: #fff;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid #eee;
}

.httperror__title {
  margin: 0 0 6px 0;
  font-size: clamp(22px, 3.6vw, 28px);
  font-weight: 500;
  color: #202124;
  letter-spacing: .2px;
}

.httperror__title .code {
  font-weight: 800;        /* e.g., “404” */
}

.httperror__title .dot {
  font-weight: 800;        /* the period after the code */
}

.httperror__title .msg {
  font-weight: 500;        /* e.g., “That’s an error.” */
  color: #202124;
}

.httperror__details {
  color: #5f6368;          /* muted gray */
  margin: 6px 0 0 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

.httperror__details code {
  background: #f1f3f4;
  color: #202124;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Consolas, Monaco, monospace;
  font-size: 0.95em;
}

/* Illustration */
.httperror__art {
  text-align: center;
}

.httperror__art img {
  max-width: 360px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* Responsive: stack on small screens */
@media (max-width: 820px) {
  .httperror {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .httperror__art {
    order: -1;             /* show image first on mobile */
  }
}

/* -------------------------------------------------------
   --- Account page (read-only profile + modals)
   ------------------------------------------------------- */

.account-header {                /* header row with initial + meta */
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.25rem;           /* Matches a medium-large letter size */
  line-height: 56px;            /* Vertical centering of the initial */
  text-align: center;           /* Horizontal centering */
  color: #fff;                  /* White text */
  background-color: var(--purple); /* Or keep bg-primary in HTML for theme color */
  flex-shrink: 0;                /* Prevent shrinking in flex containers */
}


.account-meta {                  /* username + joined/last-login text block */
  display: flex;
  flex-direction: column;
}

.account-details dt {            /* left column labels */
  color: #555;
  font-weight: 600;
}

.account-details dd {            /* right column values */
  margin-bottom: .5rem;
}

@media (max-width: 576px) {
  .account-header { gap: 10px; }
  .account-avatar { width: 48px; height: 48px; }
}

/* -------------------------------------------------------
   --- Responsive refinements (DRY version)
   ------------------------------------------------------- */

/* Base */
.create-post-btn .label-mobile{display:none;}
header nav.navbar .nav-link{padding:var(--bs-nav-link-padding-y) 50px!important;}
nav.navbar{margin-top:2px!important;padding-top:2px!important;padding-bottom:2px!important;}
.navbar-toggler{margin:4px 0!important;}
.create-post-btn{display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;}
.create-post-btn .label-mobile{display:inline-block;font-weight:700;line-height:1;}

/* ≤ 992px */
@media (max-width:992px){header nav.navbar .nav-link{padding:8px 12px!important;}}

/* ≤ 576px */
@media (max-width:576px){
  .inner-header{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 12px;}
  .logo{order:1;flex:0 0 auto;}
  .logo img{max-height:48px;}
  .auth-buttons{order:2;margin-left:auto;display:flex;gap:8px;}
  .auth-buttons .btn{background:#fff;color:#111;border:0;border-radius:14px;padding:8px 14px;line-height:1;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.08);}
  .right-content{display:contents;}
  .search-bar{order:3;flex:1 1 auto;min-width:0;margin-right:10px;}
  .search-bar form{width:100%;}
  .search-bar .input-container{position:relative;width:100%;height:44px;padding:0;background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.10);}
  .search-bar .search-input{width:100%;height:100%;padding:0 56px 0 14px;font-size:.95rem;background:transparent;border:0;border-radius:14px;box-shadow:none;}
  .search-bar .search-icon{position:absolute;top:0;right:0;width:44px;height:100%;margin:0;border:0;display:flex;align-items:center;justify-content:center;background:#EA6B58;color:#fff;cursor:pointer;border-radius:0 14px 14px 0;box-shadow:none;}
  .search-bar .search-icon svg{width:18px;height:18px;fill:currentColor;}
  .create-post-btn{order:4;flex:0 0 auto;width:clamp(64px,18vw,86px);height:clamp(64px,18vw,86px);gap:0!important;border:0;padding:0;text-decoration:none;white-space:nowrap;border-radius:999px;background:#EA6B58;color:#111;box-shadow:0 10px 26px rgba(234,107,88,.22);align-self:center;font-size:clamp(12px,3.3vw,14px);}
  .create-post-btn.btn{padding:0;border:0;}
  .create-post-btn .label-desktop{display:none;}
  .create-post-btn .label-mobile{display:inline;font-weight:700;}
  .create-post-btn .icon{width:16px;height:16px;margin-right:2px!important;}
  .navbar-toggler{order:5;display:flex!important;justify-content:center;align-items:center;margin:10px auto 0!important;padding:8px 12px;min-height:44px;background:transparent!important;border:none!important;box-shadow:none!important;outline:none!important;border-radius:0!important;}
  .navbar-toggler:focus{box-shadow:none!important;}
  .navbar-toggler .navbar-toggler-icon{width:28px;height:28px;}
  header,header .navbar,header .navbar .container,header .navbar .container-fluid{overflow:visible;padding-bottom:10px;}
  nav.navbar{background:transparent!important;border:0;border-top:2px solid rgba(0,0,0,.18);padding-top:10px;padding-bottom:10px;}
  nav.navbar .container,nav.navbar .container-fluid{padding-left:0!important;padding-right:0!important;}
  .navbar{display:flex!important;justify-content:center!important;}
  nav.navbar,nav.navbar .container,nav.navbar .container-fluid{padding-top:2px!important;padding-bottom:4px!important;}
}