:root {
    --bg-color: #FFF5E1; /* Matches nav bar cream background */
    --bg-color-mail: #C6BBA3; /* Matches nav bar dark cream background */
    --text-color: #3C2F2F; /* Dark brown text */
    --header-bg: #FF4500; /* Orange header */
    --link-color: #FF4500; /* Orange links */
    --nav-bg: #FFF5E1; /* Light theme nav background (cream) */
    --nav-text: #8B0000; /* Light theme nav text (dark red) */
}

/* Light theme defaults (apply to html or body normally) */
html {
    background-color: var(--bg-color);
    color: var(--text-color);
}

header {
    background-color: transparent;
    color: white;
    padding: 0;
    text-align: center;
    min-height: 125px;
    background-image: url('/static/images/4umheader2560.jpg');
    background-size: auto;
    background-position: left top;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: block;
    overflow-x: hidden;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    padding-top: 115px;
    font-family: "Times New Roman", Times, serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: all 0.3s;
    position: relative;
    z-index: 0;
    overflow-x: hidden;
    width: 100vw;
    box-sizing: border-box;
    max-width: 100%;
}

html.dark-cream-bg {
    background-color: var(--bg-color-mail);
}

body.dark-cream-bg {
    background-color: #c6bba3; /* darker cream, adjust as desired */
    color: #3C2F2F;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-top: 115px;         /* same as regular pages */
}

body.dark-cream-bg nav {
    background-color: var(--bg-color-mail); /* darker cream, adjust as desired */
    color: #3C2F2F; /* text color for contrast */
}

body.dark-cream-bg footer {
    background-color: var(--bg-color-mail); /* darker cream, adjust as desired */
    color: #3C2F2F; /* text color for contrast */
}

h1 {
    margin-top: 0.2em; /* reduce this value as needed */
    margin-bottom: 0.1em; /* optional, to control space below */
}

/* Global link color */
a {
    color: var(--nav-text);
    text-decoration: none; /* optional: remove underline globally */
    font-weight: bold;
}

a:hover,
a:focus {
    text-decoration: underline; /* keep underline on hover/focus for usability */
}

nav {
    background-color: var(--nav-bg);
    padding: 2px 6px;
    width: 100%;
    position: relative;
    top: 0px;
    z-index: 5;
    text-align: left;
    display: flex;
    align-items: center;
}

nav a {
    color: var(--nav-text);
    margin: 0 10px;
    text-decoration: none;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
}

nav a::before {
    content: "[";
}

nav a::after {
    content: "]";
}

nav a:hover {
    text-decoration: underline;
}

.article-link {
    color: var(--nav-text);      /* matches nav link dark red */
    text-decoration: none;       /* remove underline */
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
}

.article-link:hover {
    text-decoration: underline;
}

.content-wrapper main {
    min-height: 500px; /* adjust as needed */
    position: relative; /* to contain absolute children */
}

.content-wrapper {
    margin-top: 0px;
    width: 95vw;
    max-width: 95%;
    max-height: none;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

main p.small {
    line-height: 1.1;
    font-size: 12px;
    border: 2px solid #3C2F2F;
    padding: 5px;
    margin-top: 10px;
    display: inline-block;
    box-sizing: border-box;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: var(--bg-color);
    color: var(--text-color);
    position: static;
    width: 100%;
    margin-top: 0px;
    padding-bottom: 20px; /* Reduced since button is in table */
}

@media (max-width: 600px) {
    main {
        margin: 0;
        padding: 0 10px;
    }
    nav a {
        margin: 0 5px;
    }
}

td {
    padding: 0;
    box-sizing: border-box;
}

main {
    max-width: none;
    margin: 0 auto;
    padding: 0 6px;
    line-height: 1.4;
    margin-top: 0;
    width: auto;
    font-size: 18px;
    overflow-x: hidden;
    box-sizing: border-box;
}

main h2 {
    font-size: 1.5em;
    margin-top: 0;
}

main form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

main .form-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

main .form-group label {
    font-weight: bold;
    min-width: 150px;
}

main input {
    padding: 5px;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    border: 1px solid #3C2F2F;
    box-sizing: border-box;
    width: 240px;
    max-width: 240px;
}


main .form-table {
    width: 90%;
    max-width: 1200px;
    border-collapse: collapse;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    table-layout: auto;
    border: 1px solid #3C2F2F;
    padding-bottom: 100px;
}


main .form-table th {
    text-align: right;
    padding: 5px 15px;
    font-weight: bold;
    vertical-align: top;
    width: 200px;
    white-space: nowrap;
    border: 1px solid #3C2F2F;
}

main .form-table td {
    padding: 5px 15px;
    vertical-align: top;
    border: 1px solid #3C2F2F;
}

main .form-table .description {
    font-size: 14px;
    white-space: normal;
    width: 600px;
    min-width: 300px;
    max-width: 600px;
    border: 1px solid #3C2F2F;
}

main .form-table td.button-cell {
    text-align: center; /* Center button horizontally */
    padding: 10px; /* Spacing around button */
    vertical-align: middle; /* Ensure vertical alignment */
}

main .captcha-table {
    border-collapse: collapse;
    width: 100%;
}

main .captcha-table td {
    padding: 0;
    vertical-align: top;
    border: 1px solid #3C2F2F;
}

main p {
    margin: 10px 0; /* 10px top/bottom margin for paragraph spacing */
    line-height: 1.2;
}

.register-button {
    display: inline-block;
    width: fit-content;
    padding: 6px 12px;
    background-color: #8B0000;
    border: 2px solid #3C2F2F;
    color: #FFF5E1;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 6px;
    margin: 0 auto; /* Reinforce centering */
}

.register-button:hover {
    background-color: #A52A2A;
    color: #F5F5DC;
}


/* Headlines-specific styles */
.headlines-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr)); /* Strict 4 columns on wide screens */
    gap: 20px;
    padding: 20px;
}

.category-column {
    background: var(--bg-color);
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.category-column h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: var(--text-color);
}

.category-column ul {
    list-style: none;
    padding: 0;
}

.category-column li {
    margin-bottom: 10px;
}

.category-column a {
    color: var(--nav-text);
    text-decoration: none;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
}

.category-column a:hover {
    text-decoration: underline;
}

@media (max-width: 1200px) {
    .headlines-container {
        grid-template-columns: repeat(3, minmax(250px, 1fr)); /* 3 columns for medium screens */
    }
}

@media (max-width: 900px) {
    .headlines-container {
        grid-template-columns: repeat(2, minmax(250px, 1fr)); /* 2 columns for smaller screens */
    }
}

@media (max-width: 600px) {
    .headlines-container {
        grid-template-columns: 1fr; /* 1 column for smartphones */
    }
}

/* Article-specific styles */
.article-header {
    margin-bottom: 20px;
}

.article-header a {
    color: var(--nav-text);
    text-decoration: none;  /* optional */
    font-weight: bold;      /* optional, to match nav */
    font-family: "Times New Roman", Times, serif; /* optional */
}

.article-header a:hover {
    text-decoration: underline;
}

.article-header p {
    margin: 5px 0;
}

.article-content {
    line-height: 1.4;
    font-size: 18px;
}


/* Article-specific styles */
.article-header-table {
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.article-header-table td {
    padding: 2px 10px;
    color: var(--text-color);
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    vertical-align: top;
    line-height: 1.2;
}

.article-header-table td.article-title h2 {
    text-align: left;
    margin: 0;
    padding: 0;
}

.article-header-table td:first-child {
    width: 1%;              /* shrink as small as possible */
    font-weight: normal;
    white-space: nowrap;    /* keeps labels on one line */
    text-align: right;      /* optional: aligns labels to right */
}

.article-header-table td:nth-child(2) {
    font-weight: bold;
    width: 99%;             /* take remaining space */
    word-break: break-word; /* wrap long URLs */
}

.article-content {
    line-height: 1.4;
    font-size: 18px;
    color: var(--text-color);
}

.article-content p {
    margin: 0 0 1.9em 0 !important; /* top=0, right=0, bottom=1.2em, left=0 */
}

/* Article-specific styles (continued) */
.article-actions {
    margin-top: 10px;
}

.article-actions a {
    margin-right: 20px;
}

.article-comments {
    margin-top: 2em;
}

.article-comments .comment {
    margin-bottom: 1em;
}

.article-comments .comment p {
    margin: 0.3em 0;
}

.article-comments .comment-meta {
    font-size: 0.9em;
    color: #666;
}

.article-comments .comment a {
    color: var(--nav-text) !important;
    text-decoration: none !important;
    font-weight: bold;
}

.article-comments .comment a:hover {
    text-decoration: underline !important;
}

.article-block a,
.comment-block a {
    color: var(--nav-text);   /* same dark red */
    text-decoration: none;    /* optional: remove underline */
    font-weight: bold;        /* optional: match nav styling */
    margin-bottom: 8px;  /* small spacing between items */
}

.article-block a:hover,
.comment-blockx a:hover {
    text-decoration: underline; /* underline on hover, like nav links */
}

.comment-block {
    displayx: flex;          /* horizontal alignment */
    flex-wrapx: wrap;        /* allow second line for Post Date */
    margin-bottom: 8px;     /* spacing between items */
}

.comment-blockx .title-line {
    flex: 1 1 auto;         /* takes remaining space */
    white-space: nowrap;     /* keep title + (#n) + Full Thread together */
}

.comment-blockx .title-line a {
    margin-right: 4px;      /* optional spacing */
}

.comment-blockx .meta-line {
    width: 100%;            /* force to next line */
    margin-top: 2px;        /* small gap from title line */
}

#to_list_container a {
  display: inline; /* instead of inline-block */
  margin-right: 0; /* remove extra spacing */
}

#to_list_container .recipient {
    background: var(--nav-bg);       /* pill background */
    color: var(--nav-text) !important;  /* match nav links exactly */
    font-weight: bold;
    border-radius: 12px;
    padding: 3px 6px;
    margin-right: 4px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

#to_list_container .recipient:hover {
    text-decoration: underline;
}


#thread-party-link {
    color: var(--nav-text);    /* same dark red as nav links */
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin-left: 8px;          /* spacing from search box */
}

#thread-party-link:hover {
    text-decoration: underline;
}

#user_suggestions div.highlight {
    background-color: #FFDDDD;  /* light pink highlight */
    color: var(--nav-text);      /* same dark red as nav links */
}

.context-box {
    border: 2px solid var(--nav-text);  /* dark red border matching nav links */
    background-color: #FFF5E1;          /* light cream background */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;
}

label[for="comment"] {
    margin-bottom: 2px;  /* instead of default ~8px */
    display: block;
}

/* Reduce spacing above the TinyMCE editor */
.tox-tinymce, 
.tox-editor-container, 
.tox-tinymce-outer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Add to your existing CSS file */
.autocomplete-input {
    width: 200px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.suggestions-container {
    position: relative;
}

#user_suggestions

.autocomplete-suggestions {
    position: absolute;       /* absolute positioning */
    top: 100%;                /* place directly below input */
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background-color: white;
    max-height: 700px !important;   /* larger max height */
    overflow-y: auto !important;    /* scroll if too tall */
    z-index: 9999;            /* on top */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Make sure the input's container is position: relative for absolute positioning context */
.autocomplete-container {
    position: relative;
}


.autocomplete-suggestions {
    position: absolute;       /* absolute positioning */
    top: 100%;                /* position directly below input */
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background-color: white;
    max-height: 700px !important;
    overflow-y: auto !important;         /* scroll if too tall */
    z-index: 9999;            /* on top of other elements */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.autocomplete-suggestion {
    padding: 8px 12px;
    cursor: pointer;
}
.autocomplete-suggestion:hover, 
.autocomplete-suggestion.selected {
    background-color: #b3d4fc;
}

/* The container for the form inputs and labels should use flexbox */
.form-inline {
    display: flex;
    align-items: center; /* vertically center label and input */
    gap: 10px; /* space between items */
}

/* Labels should have no block behavior */
.form-inline label {
    white-space: nowrap;
    margin: 0; /* remove default margin */
}

/* Inputs can keep their width, or shrink as desired */
.form-inline input[type="text"] {
    width: 180px; /* or whatever fits your design */
    box-sizing: border-box;
}

/* Autocomplete container should still be relative for positioning */
.autocomplete-container {
    position: relative;
    /* Remove margin-bottom to make inline */
    margin: 0;
    /* Optional: set width if needed */
}

/* Each label + input + suggestions group 
.autocomplete-container {
  position: relative;
  display: flex;
  align-items: center; 
  gap: 6px; 
}
*/

/* Container to hold the whole filter form inline and center it */
#filter-form {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* vertically center the items */
  gap: 20px; /* space between From and To input groups */
  padding: 1em 0;
}


/* Label styling */
.autocomplete-container label {
  white-space: nowrap;
  font-weight: bold;
}

/* Input width */
.autocomplete-container input[type="text"] {
  width: 200px;
  padding: 6px 8px;
  box-sizing: border-box;
}

/* Suggestions popup remains absolutely positioned */
.autocomplete-suggestions {
  position: absolute;
  top: 100%; /* below input */
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  background: white;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.autocomplete-suggestion {
  padding: 8px 12px;
  cursor: pointer;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.selected {
  background-color: #b3d4fc;
}


#filter-form {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start; /* align items to the left */
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

#filter-form .autocomplete-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

#filter-form label {
    text-decoration: none !important;  /* forcibly remove any underline */
    border: none !important;           /* remove border lines if any */
    box-shadow: none !important;       /* remove shadow if applies */
    display: inline-block;
    margin: 0;
    font-weight: bold;
    vertical-align: middle;
    cursor: default;                   /* normal cursor on labels */
}

.article-link.check-pings {
    display: inline-block;  /* or block */
    font-style: italic;
    margin-top: 0.1em;  /* smaller top margin */
    margin-bottom: 0.1em; /* smaller bottom margin */
    padding-top: 0;     /* remove padding if any */
    padding-bottom: 0;  /* remove padding if any */
    line-height: 1; /* tighter line height */
    vertical-align: middle; /* or baseline */
}

#check-pings-container {
    padding-top: 1px;  /* small padding to prevent margin collapse */
}

.button-group a {
    background-color: #444c56;
    color: #fff;
    text-decoration: none;
    padding: 0.6em 1.2em;
    border-radius: 6px;
    font-weight: bold;
    border: 1px solid transparent;
    transition: background-color 0.3s, border-color 0.3s;
    cursor: pointer;
    user-select: none;
}

.button-group a:hover {
    background-color: #ffaa00;
    color: #222;
    border-color: #ffaa00;
}

.mailcompose-form-row {
    display: flex;
    align-items: center;
    margin-top: 1em;
}

.mailcompose-form-row label {
    width: 80px; /* fixed width for labels */
    margin-right: 10px;
}

.mailcompose-form-row input[type="text"] {
    flex: 1; /* fill remaining horizontal space */
    padding: 6px;
    font-size: 14px;
}


.mailcompose-form button.button {
    display: inline-block;          
    margin: 0 8px;                  
    padding: 12px 24px;

    /* Font match nav buttons */
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;      /* match nav buttons size */
    font-weight: bold;     /* match nav buttons weight */

    color: #fff;
    background: linear-gradient(to right, #A32D2D, #7D1F1F);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
}

.mailcompose-form button.button:hover {
    background: linear-gradient(to right, #7D1F1F, #A32D2D);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.mailcompose-form button.button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


/* Optional: align buttons vertically with the label */
.mail-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;  /* alternative horizontal spacing */
}

  #to_user_suggestions
  {
    position: absolute;
    z-index: 1000;
    background: #fff; 
    border: 1px solid #aaa;
    width: auto;             /* shrink to content */
    min-width: 200px;        /* at least 200px wide */
    max-width: 350px;        /* never wider than 350px */
    padding: 4px 0;          /* some vertical padding */
    border-radius: 6px;      /* rounded corners */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    max-height: 150px;
    overflow-y: auto;
    display: none;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
  }



.mailcompose-form #to_user_suggestions div {
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mailcompose-form #to_user_suggestions div:hover,
.mailcompose-form #to_user_suggestions div.selected {
    background-color: #f0f0f0;
}

.mail-table, 
.mail-table th, 
.mail-table td {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
}

.mail-button {
    display: inline-block;        /* makes the link behave like a button */
    padding: 8px 16px;
    font-family: "Times New Roman", serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to right, #A32D2D, #7D1F1F);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;        /* removes underline */
    text-align: center;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
}

.mail-button:hover {
    background: linear-gradient(to right, #7D1F1F, #A32D2D);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.mail-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}