/****************************
  LOCAL CSS
****************************/

/* === Avatar General === */
.user-avatar {
  width: 25px !important;
  height: 25px !important;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 25px !important;
  height: 25px !important;
  object-fit: cover;
  border-radius: 50%;
}

/* === Large Avatar on Dashboard/Profile Pages === */
.user-header-box .user-avatar {
  width: 150px !important; /* Adjust to desired size */
  height: 150px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  line-height: 0 !important; /* Remove any line-height spacing */
}

.user-header-box .user-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
  border: none !important;
  margin: 0 !important;
}

/* === Article === */

.article-front-wrapper {
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.article-front-wrapper img {
  max-width: 100%;
  border-radius: 6px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.article-meta {
  margin-bottom: 1rem;
}

.article-title {
  font-size: 1.4rem;
  margin-top: 0.5rem;
  color: #333;
}

.article-submitted {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 1rem;
}

.article-tags {
  font-style: italic;
  font-size: 0.85rem;
  color: #555;
}

.article-share {
  margin-top: 1rem;
}

/* === Clean Up User Registration Form in the users profile area === */

.user-register-form {
  max-width: 600px;
  margin: 0 !important;
  padding: 0rem !important;
  background-color: #ffffff;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.user-register-form .form-item {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f0f4ff;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.user-register-form .form-item label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #2a3f8d;
}

.user-register-form input[type="text"],
.user-register-form input[type="email"],
.user-register-form input[type="password"],
.user-register-form textarea {
  width: 100%;
  padding: 0.75rem;
  border-radius: 4px;
  border: 1px solid #bbb;
  box-sizing: border-box;
}

/* === Registration Fieldset Tweak === */
.user-register-form fieldset {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: #fefefe;
}

.user-register-form fieldset legend {
  font-weight: bold;
  color: #2a3f8d;
  padding: 0 0.5rem;
  font-size: 1rem;
}

/* === Submit button alignment === */
.user-register-form input[type="submit"] {
  display: block;
  margin: 0rem auto 2rem auto;
  padding: 0.75rem 1.5rem;
  background-color: #2a52be;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Picture upload field cleanup */
.field--name-user-picture .form-item,
.field--name-user-picture .form-managed-file {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.field--name-user-picture input[type="file"] {
  margin-bottom: 0.5rem;
}

.field--name-user-picture input[type="submit"] {
  margin-top: 0.5rem;
  align-self: flex-start;
  padding: 0.5rem 1.25rem;
  background-color: #2a42aa;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.field--name-user-picture input[type="submit"]:hover {
  background-color: #1f3085;
}
.field--name-user-picture {
  margin-bottom: 2rem !important;
}

/* Style the user profile section - make it much more compact */
.profile-user-info {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.profile-user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.profile-member-info .username {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* Style the submission info - reduce padding */
.submitted {
    padding: 8px 15px;
    background: transparent;
    border-bottom: none;
    font-size: 12px;
    color: #666;
}

.submitted a {
    color: #0066cc;
    text-decoration: none;
    font-weight: 500;
}

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

/* Style the comment form */
.comment-form {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
}

.comment-form .form-item {
    margin-bottom: 15px;
}

.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.comment-form input[type="text"],
.comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.comment-form .form-actions {
    margin-top: 20px;
    text-align: right;
}

.comment-form .button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
}

.comment-form .button--primary {
    background: #0066cc;
    color: white;
}

.comment-form .button--primary:hover {
    background: #0052a3;
}

.comment-form .button:not(.button--primary) {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ccc;
}

.comment-form .button:not(.button--primary):hover {
    background: #e9ecef;
}


/* Comment form styling */
.comment-form {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
}

.comment-form .form-item {
    margin-bottom: 15px;
}

.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.comment-form input[type="text"],
.comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.comment-form .form-actions {
    margin-top: 20px;
    text-align: right;
}

.comment-form .button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
}

.comment-form .button--primary {
    background: #0066cc;
    color: white;
}

.comment-form .button--primary:hover {
    background: #0052a3;
}

.comment-form .button:not(.button--primary) {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ccc;
}

.comment-form .button:not(.button--primary):hover {
    background: #e9ecef;
}

/* Comment Threading and Hierarchy */
/* -------------------------------------------------------------------------- */

/* Base style for individual comments */
.comment {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin: 15px 0;
    overflow: hidden;
    position: relative; /* Needed for absolute positioning of thread indicators */
}

/* Threading indentation - each level gets more indent */
/* This uses Drupal's core .indented class for threading */
.indented {
    margin-left: 30px; /* Adjust this value for indentation depth */
    border-left: 3px solid #e0e0e0; /* A subtle line to show the thread */
    padding-left: 15px; /* Space between the line and the comment content */
}

/* Optional: Color the indentation border based on depth (if you use comment-level-X classes) */
.comment.comment-level-1 + .indented { /* Apply to the indented wrapper of level 1 replies */
    border-left-color: #0066cc;
}

.comment.comment-level-2 + .indented { /* Apply to the indented wrapper of level 2 replies */
    border-left-color: #28a745;
}

.comment.comment-level-3 + .indented { /* Apply to the indented wrapper of level 3 replies */
    border-left-color: #ffc107;
}

/* Reply button styling */
/* This targets the actual link elements for reply and edit */
.comment .links a { /* General link style within comment links section */
    display: inline-block;
    background-image: none !important; /* FIX: Remove any unwanted background images */
    background-color: #0066cc; /* Solid background color */
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    margin-right: 8px;
    border: none; /* Ensure no default button border */
}

.comment .links a:hover {
    background-color: #0052a3;
    color: white;
    text-decoration: none;
}

/* Ensure the links section has proper padding and border */
.comment .links {
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    display: flex; /* Use flexbox for button alignment */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 8px; /* Space between buttons */
}

/* User info within comments (similar to main post but smaller) */
.comment .profile-user-info {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.comment .profile-user-info img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.comment .profile-member-info .username {
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

/* Hide empty about me in comments */
.comment .profile-about-me {
    display: none;
}

/* Comment content body */
.comment .content {
    padding: 15px;
}

.comment .content h3 { /* Comment subject */
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
}

.comment .content h3 a {
    color: #333;
    text-decoration: none;
}

.comment .content h3 a:hover {
    color: #0066cc;
    text-decoration: underline;
}

.comment .content p {
    margin: 0 0 10px 0;
    line-height: 1.5;
    color: #333;
}

/* General Contact Form Container--------------------------------------- */
.contact-message-feedback-form {
  background-color: #f0f4ff;
  padding: 2em;
  border-radius: 10px;
  border: 1px solid #ccc;
  max-width: 600px;
  margin: 2em auto;
  font-family: Arial, sans-serif;
}

/* Field Labels */
.contact-message-feedback-form label {
  display: block;
  font-weight: bold;
  color: #2a42aa;
  margin-bottom: 0.3em;
}

/* Text Inputs and Textarea */
.contact-message-feedback-form input[type="text"],
.contact-message-feedback-form input[type="email"],
.contact-message-feedback-form textarea {
  width: 100%;
  padding: 0.7em;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1em;
  margin-bottom: 1em;
}

.contact-message-feedback-form input[type="submit"],
.contact-message-feedback-form input[type="button"] {
  padding: 0.6em 1.2em;
  font-size: 1em;
  border: none;
  border-radius: 6px;
  background-color: #2a42aa;
  color: #fff;
  cursor: pointer;
  margin-right: 0.5em;
  margin-top: 1em; /* 👈 Add this line */
  transition: background-color 0.2s ease-in-out;
}

.contact-message-feedback-form input[type="submit"]:hover,
.contact-message-feedback-form input[type="button"]:hover {
  background-color: #1a2b7a;
}

/* Optional: Checkbox alignment */
.contact-message-feedback-form .form-item-copy {
  margin-top: 1em;
  display: flex;
  align-items: center;
}

.contact-message-feedback-form .form-item-copy input {
  margin-right: 0.5em;
}

.contact-message-feedback-form {
  margin-top: 0.1em; /* or adjust as needed */
}

/* Entire sidebar block----------------------------------------------------- */
/* Remove extra background/border from Content Input block when inside sidebar or wrapper */
#sidebar-right .block {
  background-color: #fafbff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 1.5em;
  font-family: Arial, sans-serif;
  color: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Block title/header */
#sidebar-right .block .block-title {
  background-color: #f0f4ff; /* Matching Propositions header */
  font-weight: bold;
  font-size: 1.1em;
  color: #000;
  padding: 0.75em 1em;
  margin: 0;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

/* Login----------------------------------------------- */
#block-danland-userlogin {
  background-color: #f0f4ff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1em;
  font-family: Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #000;
  max-width: 300px;
  margin: 0 auto 1.5em auto;
}

#block-danland-userlogin h2.block-title {
  background-color: transparent !important;
  font-weight: bold;
  font-size: 1.1em;
  color: #000;
  padding: 0 0 0.5em 0;
  margin: 0;
  border-bottom: 1px solid #ccc;
}

#block-danland-userlogin label {
  display: block;
  font-weight: normal;
  margin-top: 0.5em;
  color: #222;
  font-size: 0.95em;
}

#block-danland-userlogin input[type="text"],
#block-danland-userlogin input[type="password"] {
  width: 100%;
  padding: 0.5em;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-top: 0.2em;
  margin-bottom: 0.8em;
  background-color: #ffffff; /* Make field backgrounds white */
}

#block-danland-userlogin input[type="submit"] {
  background-color: #2a42aa;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font-weight: bold;
}

#block-danland-userlogin input[type="submit"]:hover {
  background-color: #1c2f8b;
}

#block-danland-userlogin ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1em;
}

#block-danland-userlogin li {
  margin-bottom: 0.5em;
}

#block-danland-userlogin a {
  color: #2a42aa;
  text-decoration: none;
}

#block-danland-userlogin a:hover {
  text-decoration: underline;
}
#block-danland-userlogin input[type="text"],
#block-danland-userlogin input[type="password"] {
  width: 100% !important;
  max-width: 100%;
  padding: 0.5em;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #ffffff !important; /* Force white */
  box-sizing: border-box;
  font-size: 1em;
  margin-bottom: 1em;
}
#block-danland-userlogin label {
  text-align: center;
  display: block;
  margin: 0.5em 0 0.2em;
  font-size: 1em;
}
#block-danland-useraccountmenu > h2.block-title {
  background-color: #f0f4ff;
}

/* Center the login form--------------------------------- */
.user-login-form input[type="text"],
.user-login-form input[type="password"] {
  width: 250px; /* Set a specific width instead of 100% */
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Input fields */
.user-login-form input[type="text"],
.user-login-form input[type="password"] {
  width: 200px; /* Shortened from 100% */
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  background-color: #fff; /* Ensure white background */
}

/* Labels */
.user-login-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: bold
  color: #333;
}

/* Submit button */
.user-login-form input[type="submit"] {
  background-color: #003366;
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s ease;
}

.user-login-form input[type="submit"]:hover {
  background-color: #005199;
}


/* Comment Form Styling ----------------------------------------------*/
.comment-form {
  background: #f0f4ff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1em;
  margin-top: 2em;
  max-width: 700px;
}

.comment-form h2 {
  margin-top: 0;
  font-size: 1.2em;
  color: #1d2a60;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.5em;
}

.comment-form label {
  display: block;
  margin-top: 1em;
  font-weight: bold;
}

.comment-form textarea,
.comment-form input[type="text"] {
  width: 100%;
  padding: 0.5em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.comment-form .form-actions {
  margin-top: 1em;
}

.comment-form .form-actions input {
  padding: 0.5em 1.25em;
  font-size: 1em;
  border-radius: 4px;
}

ul.links.inline .comment-add {
  display: none;
}

.js-filter-guidelines,
.js-filter-wrapper > .form-wrapper:first-child {
  display: none;
}

.comment-form .form-actions input[type="submit"] {
  background-color: #3b51c5; /* Light royal blue */
  color: white;
  border: none;
  padding: 0.6em 1.5em;
  font-size: 1em;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 0.5em;
  transition: background-color 0.2s ease-in-out;
}

.comment-form .form-actions input[type="submit"]:hover {
  background-color: #2a3da1; /* Deeper blue on hover */
}

#comment-form input#edit-preview {
  display: none !important;
}

#edit-field-leave-blank-0-value {
  display: none !important;
}

label[for="edit-field-leave-blank-0-value"] {
  display: none !important;
}

.user-pass form {
  max-width: 500px;
  margin: 3rem auto;
  padding: 2rem;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: system-ui, sans-serif;
}

.user-pass label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #2a3f8d;
}

.user-pass input[type="text"],
.user-pass input[type="email"] {
  width: 100%;
  padding: 0.75rem;
  border-radius: 4px;
  border: 1px solid #bbb;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
}

.user-pass input[type="submit"] {
  padding: 0.75rem 1.5rem;
  background-color: #2a52be;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.user-pass input[type="submit"]:hover {
  background-color: #1f3d91;
}

.user-pass input[type="text"],
.user-pass input[type="email"] {
  width: 100%;
  max-width: 400px; /* Adjust as needed */
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #bbb;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
  font-size: 1rem;
}

/* Style the password reset form container */
form.user-pass-reset {
  max-width: 600px;
  margin: 3rem auto;
  padding: 2rem;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: 1.1rem;
  line-height: 1.6;
  color: #111;
}

/* Style the login submit button */
form.user-pass-reset input[type="submit"] {
  background-color: #3f51b5;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1.5rem;
  transition: background-color 0.2s ease-in-out;
}

form.user-pass-reset input[type="submit"]:hover {
  background-color: #2c3c9c;
}

form.user-pass-reset {
  margin-top: 0.1rem; /* reduced from 3rem */
}

.user-form,
.user-form-edit,
.user-form-edit-account {
  max-width: 700px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

form[action*="/user/"][action*="/edit"] .form-item {
  margin-bottom: 1.5rem;
}

form[action*="/user/"][action*="/edit"] label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
  color: #2a3f8d;
}

form[action*="/user/"][action*="/edit"] input[type="text"],
form[action*="/user/"][action*="/edit"] input[type="email"],
form[action*="/user/"][action*="/edit"] input[type="password"],
form[action*="/user/"][action*="/edit"] select,
form[action*="/user/"][action*="/edit"] textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-sizing: border-box;
}

form[action*="/user/"][action*="/edit"] input[type="submit"] {
  padding: 0.75rem 1.5rem;
  background-color: #2a52be;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

form[action*="/user/"][action*="/edit"] input[type="submit"]:hover {
  background-color: #1f3d91;
}

/* Profile View for authenticated users----------------------------------------------- */

/* User Info Container - make it flex */
.profile-user-info {
  background: #f0f4ff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding-left: 2rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Avatar on the left */
.profile-user-info img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-bottom: 0; /* Remove bottom margin */
  object-fit: cover;
  flex-shrink: 0; /* Prevent avatar from shrinking */
}

/* Member info on the right */
.profile-member-info {
  flex: 1;
  text-align: left;
}

/* Member info styling */
.profile-member-info .username {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 2rem;
}

.profile-member-info .member-status {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.profile-member-info .member-time {
  color: #6c757d;
  font-size: 0.95rem;
}

/* About Me Container */
.profile-about-me {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 2rem;
  margin-top: 1.5rem;
}

/* Button on Submitted content link--------------- */
.user-content-link {
  margin: 20px 0;
  padding: 10px;
  background-color: #f0f4ff;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.view-submissions-link {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.view-submissions-link:hover {
  color: #0073aa;
}

/* Hide the toggle buttons completely --------------------------------------------*/
.responsive-menu-icon {
  display: none !important;
}

/* Make sure menu is always visible */
nav[role="navigation"] ul.main-navigation-menu {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Vote container-------------------------------------------------------------- */
.vote-container {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 15px;
    background-color: #f0f4ff;
    border: 1px solid #d6d8db;
    width: fit-content;
}

.vote-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #6c757d;
}

.vote-btn:hover {
    transform: scale(1.1);
}

.vote-arrow {
    width: 18px;
    height: 18px;
    transition: all 0.2s ease;
}

.vote-btn.upvote:hover .vote-arrow {
    color: #28a745;
    stroke: #28a745;
}

.vote-btn.downvote:hover .vote-arrow {
    color: #dc3545;
    stroke: #dc3545;
}

.vote-btn.upvote.voted .vote-arrow {
    color: #28a745;
    stroke: #28a745;
    fill: #28a745;
}

.vote-btn.downvote.voted .vote-arrow {
    color: #dc3545;
    stroke: #dc3545;
    fill: #dc3545;
}

.score {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    min-width: 20px;
    text-align: center;
}

.teaser-external-image {
  margin: 1rem 1rem 1rem 1rem;
  text-align: center;
}

.teaser-external-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Teaser title styling */
.main-content-input-teaser .teaser-post-content > div:nth-child(2) {
  font-size: 1.2rem !important;
  color: #1d2a60 !important;
  font-weight: bold !important;
  margin-bottom: 0.5rem !important;
}

/* Teaser body text */
.main-content-input-teaser .teaser-post-content > div:nth-child(3) {
  color: #333 !important;
  font-weight: normal !important;
  line-height: 1.5;
}

/* Teaser Read more styling */
.main-content-input-teaser .links {
  margin-bottom: 1rem !important;
}

.main-content-input-teaser .links a {
  font-size: 0.9rem !important;
  color: #007bff !important;
  font-weight: normal !important;
  text-decoration: underline;
}

/* Teaser user info box */
.main-content-input-teaser-meta {
  background: #f0f4ff;
  border: 0px solid #666;
  border-bottom: 1px solid #ccc; /* Add only bottom border */
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.main-content-input-teaser-meta .propositions-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
}

.main-content-input-teaser-meta .propositions-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Hide admin image upload field for non-admins */
body:not(.role--administrator) .field--name-field-admin-image-upload {
  display: none !important;
}


/* Modern Form Styling for Drupal Content Input Forms----------------------------------- */

/* Main form container styling */
.node-main-content-input-form {
  background: #f0f4ff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1em;
  margin-top: .2em;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Form field wrapper styling */
.form-wrapper {
  margin-bottom: 0px;
}

/* Label styling */
.form-item label {
  display: block;
  font-weight: bold;
  font-size: 16px;
  color: #374151;
  margin: 10px 0 !important; /* Top & bottom margin */    
  letter-spacing: 0.025em;
}

/* Input field styling */
.form-text,
.form-textarea,
.form-select {
  width: 100%;
  padding: .5em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Focus states for inputs */
.form-text:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  background-color: #ffffff;
}

/* Textarea specific styling */
.form-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

/* Text format guidelines styling */
.js-filter-guidelines {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 16px;
  margin-top: 12px;
}

.js-filter-guidelines h4 {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.js-filter-guidelines ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.js-filter-guidelines li {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

/* File upload styling */
.image-widget {
  background-color: #ffffff;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: border-color 0.2s ease-in-out;
}

.image-widget:hover {
  border-color: #6366f1;
}

.form-file {
  margin: 0;
  font-size: 14px;
}

/* Button styling */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.button {
 background-color: #3b51c5; /* Light royal blue */
  color: white;
  border: none;
  padding: 0.6em 1.5em;
  font-size: 1em;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 0.5em;
  transition: background-color 0.2s ease-in-out;
}

.button--primary {
  background-color: #3b51c5;
  color: #ffffff;
}

.button--primary:hover {
  background-color: #2a3da1;
}

.button:not(.button--primary) {
  background-color: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.button:not(.button--primary):hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

/* Hidden honeypot field */
.url-textfield {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .node-main-content-input-form {
    padding: 20px;
    margin: 0 10px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .button {
    width: 100%;
    text-align: center;
  }
}

/* Editor toolbar styling */
.ck-toolbar {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  border-color: #d1d5db !important;
}

.ck-editor__editable {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-color: #d1d5db !important;
}

/* Help text styling */
.description {
  font-size: 13px;
  color: #6b7280;
  margin-top: 6px;
  line-height: 1.4;
}

/* Error state styling */
.form-item--error .form-text,
.form-item--error .form-textarea,
.form-item--error .form-select {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-item--error label {
  color: #dc2626;
}

/* Success state styling */
.form-item--success .form-text,
.form-item--success .form-textarea {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Pagination container------------------------------------------ */
.js-pager__items {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Add this line */
  gap: 8px !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Pagination items */
.js-pager__items li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pagination links (Page 1, Next, etc.) */
.js-pager__items a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4a5568 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

.js-pager__items a:hover {
  background: #eef2ff !important;
  border-color: #a5b4fc !important;
  color: #3730a3 !important;
}

/* Current page (if there's a current page indicator) */
.js-pager__items .is-active,
.js-pager__items li.is-active a {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Hide the visually-hidden heading if it's causing spacing issues */
.pagination-heading {
  margin: 0 !important;
}

/* ==========================================
   Node Delete Confirmation Form Styling
   CivilSimian.com Custom Theme
   ========================================== */

/* Main container */
form[id^="node-"][id$="-delete-form"] {
  background-color: #f0f4ff; /* soft red background to imply caution */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 25px 28px;
  margin: 2px auto;
  max-width: 700px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: system-ui, sans-serif;
  color: #222;
}

/* Text message */
form[id^="node-"][id$="-delete-form"] {
  font-size: 16px;
  line-height: 1.5;
}

form[id^="node-"][id$="-delete-form"]::before {
  content: "⚠️ This action cannot be undone.";
  display: block;
  color: #000;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Button container */
form[id^="node-"][id$="-delete-form"] .form-actions {
  margin-top: 22px;
  display: flex;
  gap: 15px;
}

/* Delete (Primary) button */
form[id^="node-"][id$="-delete-form"] .button--primary {
  background-color: #723882 !important;
  border-radius: 6px !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 20px !important;
}

form[id^="node-"][id$="-delete-form"] .button--primary:hover {
  background-color: #b72e2e;
}

/* Cancel button */
form[id^="node-"][id$="-delete-form"] .button.dialog-cancel {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #333;
  padding: 9px 22px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

form[id^="node-"][id$="-delete-form"] .button.dialog-cancel:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
}

/* ==========================================
   Content Input block – seamless top and bottom sections
   ========================================== */

/* ==========================================
   Content Input block – final version
   ========================================== */

#block-danland-usersubmissionsmenu {
  border: 1px solid #d0d6e0; /* Slight definition */
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 0;
  background: #fff; /* Clean white container background */
  max-width: 1100px !important;  /* wider container */
  width: 100% !important;         /* keep it responsive */
  margin-left: auto;
  margin-right: auto;
}

/* Header section */
#block-danland-usersubmissionsmenu .block-title {
  background-color: #f0f4ff;
  margin: 0;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  border-bottom: 1px solid #ccd3e0;
  border-radius: 6px 6px 0 0;
}

/* Link section */
#block-danland-usersubmissionsmenu ul.main-navigation-menu {
  background-color: #fff;
  margin: 0;
  padding: 10px 16px;
  list-style: none;
  text-align: center;
  border-top: none; /* Remove any overlap line */
}

/* Links */
#block-danland-usersubmissionsmenu ul.main-navigation-menu a {
  color: #2c3670; /* default navy text */
  font-weight: 600;
  margin: 0 12px;
  text-decoration: none;
  display: inline-block;
  padding: 6px 8px;
  transition: color 0.2s ease;
}

/* Hover/focus: use CivilSimian orange */
#block-danland-usersubmissionsmenu ul.main-navigation-menu a:hover,
#block-danland-usersubmissionsmenu ul.main-navigation-menu a:focus {
  color: #e67300; /* your theme’s orange */
  border-bottom: none; /* remove underline */
}

/* Active tab style (optional) */
#block-danland-usersubmissionsmenu ul.main-navigation-menu a.active {
  color: #000;
}

/* --- Force outer container definition for Content Input block --- */
#block-danland-usersubmissionsmenu {
  position: relative;
  background: #fff;
  border: 1px solid #ccd3e0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin: 0 auto 20px auto;
  padding: 0;
  max-width:720px !important;
}

/* Make sure the Danland wrapper or region doesn't override it */
.region-content #block-danland-usersubmissionsmenu,
#wrapper #block-danland-usersubmissionsmenu {
  background: #fff !important;
  border: 1px solid #ccd3e0 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
}

/* Header section stays the same */
#block-danland-usersubmissionsmenu .block-title {
  background-color: #f0f4ff;
  margin: 0;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  border-bottom: 1px solid #ccd3e0;
  border-radius: 6px 6px 0 0;
}

/* Lower section (links area) */
#block-danland-usersubmissionsmenu ul.main-navigation-menu {
  background-color: #ffffff;
  margin: 0;
  padding: 15px 16px;
  list-style: none;
  text-align: center;
  border-top: none;
}

/* Link styling */
#block-danland-usersubmissionsmenu ul.main-navigation-menu a {
  color: #2c3670;
  font-weight: 600;
  margin: 0 12px;
  text-decoration: none;
  display: inline-block;
  padding: 6px 8px;
  transition: color 0.2s ease;
}

/* Hover/focus: CivilSimian orange */
#block-danland-usersubmissionsmenu ul.main-navigation-menu a:hover,
#block-danland-usersubmissionsmenu ul.main-navigation-menu a:focus {
  color: #e67300;
  border-bottom: none;
}

/* --- Final polish for Content Input block --- */
#block-danland-usersubmissionsmenu {
  position: relative;
  background: #fff;
  border: 1px solid #ccd3e0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: .9rem !important; /* Gap below the content menu */
  padding: 0;
  max-width: 98%;
}

/* Header */
#block-danland-usersubmissionsmenu .block-title {
  background-color: #f0f4ff;
  margin: 0;
  padding: 9px 16px; /* Content input menu header area */
  font-size: 18px;
  font-weight: 600;
  color: #000;
  border-bottom: 1px solid #ccd3e0;
  border-radius: 6px 6px 0 0;
}

/* Lower section */
#block-danland-usersubmissionsmenu ul.main-navigation-menu {
  background-color: #ffffff;
  margin: 0;
  padding: 12px 12px;
  list-style: none;
  text-align: center;
  border-top: none;
  white-space: nowrap; /* prevents wrapping */
}

/* Links */
#block-danland-usersubmissionsmenu ul.main-navigation-menu a {
  color: #2c3670;
  font-weight: 600;
  margin: 0 8px; /* tighter spacing */
  text-decoration: none;
  display: inline-block;
  padding: 6px 4px;
  transition: color 0.2s ease;
}

/* Hover/focus */
#block-danland-usersubmissionsmenu ul.main-navigation-menu a:hover,
#block-danland-usersubmissionsmenu ul.main-navigation-menu a:focus {
  color: #e67300; /* CivilSimian orange */
  border-bottom: none;
}