/* static/styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 20px;
} 


#suggestions {
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    background-color: white;
    width: 100%;
    z-index: 1000;
} 

.typing {
    border-right: 2px solid #000;
    animation: blink 0.75s step-end infinite;
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: black; }
}

#result {
    max-height: 80vh;
    overflow-y: auto;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}


.search-container {
    position: relative;
    width: 80%; /* <---  Width as a percentage of parent */
    max-width: 800px; /* Optional: set a maximum width if you don't want it to get too wide on very large screens */
    margin: 50px auto;
}

#occupation-input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.autocomplete-suggestions {
    position: absolute;
    top: 40px;
    width: 100%;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 1000;
}

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

.autocomplete-suggestion:hover {
    background-color: #f0f0f0;
}

#spinner {
    text-align: center;
    margin-top: 20px;
}



/* Add to your styles.css */
.narrative-content {
    font-family: Arial, sans-serif;
    /* If marked generates proper HTML, you may not need pre-wrap.
       Remove it if you don’t require whitespace preservation. */
    /* white-space: pre-wrap; */
    line-height: 1.4;  /* Slightly tighter than 1.6 */
    padding: 10px;     /* Reduced overall padding */
}

/* Headers */
.narrative-content h1 {
    font-size: 2em;
    margin: 0.5em 0;       /* Reduced margin */
    padding-bottom: 0.2em; /* Reduced padding */
    border-bottom: 2px solid #eee;
}

.narrative-content h2 {
    font-size: 1.5em;
    margin: 0.5em 0;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #eee;
}

.narrative-content h3 {
    font-size: 1.25em;
    margin: 0.5em 0;
}

/* Paragraphs */
.narrative-content p {
    margin: 0.5em 0;   /* Reduced margin */
}

/* Lists */
.narrative-content ul,
.narrative-content ol {
    margin: 0.5em 0 0.5em 1.5em; /* Less vertical space and slightly smaller indent */
    padding-left: 1em;
}

.narrative-content li {
    margin: 0.3em 0;   /* Reduced spacing between list items */
}

/* Horizontal rules */
.narrative-content hr {
    margin: 1em 0;     /* Reduced margin */
    height: 2px;
    background-color: #eee;
    border: none;
}

/* Blockquotes */
.narrative-content blockquote {
    margin: 0.5em 0;
    padding-left: 1em;
    border-left: 4px solid #eee;
    color: #666;
}



.copy-button {
    position: sticky;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
}

.copy-button:hover {
    background-color: #0056b3;
}



/* Header */

/* --- Header Styles --- */
.page-header {
    background-color: #f0f0f0; /* Light gray background for contrast */
    color: #333; /* Dark text color */
    padding: 10px 20px;
    text-align: left; /* Align header content to the left */
    border-bottom: 1px solid #ccc; /* Optional bottom border */
}

.header-content {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items in the header */
    max-width: 1200px; /* Optional: Limit header width for larger screens */
    margin: 0 auto; /* Center the header content horizontally */
}

.logo-placeholder {
    margin-right: 40px; /* Space between logo and title */
    width: 50px; /* Adjust logo area width as needed */
    height: 50px; /* Adjust logo area height as needed */
    /* border: 1px dashed #ccc; Placeholder border, remove or style as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: #777;
}

.logo {
    max-width: 100%;
    max-height: 100%;
}

.page-header h1 {
    font-size: 1.8em;
    margin: 0; /* Remove default h1 margins */
    line-height: 1; /* Adjust line height if needed */
}

.page-header p.created-by {
    font-size: 0.9em;
    margin: 0 0 0 10px; /* Add some left margin */
    color: #555; /* Slightly lighter color for "created by" text */
    align-self: flex-end; /* Align "created by" to the bottom of the header line */
    margin-bottom: 5px; /* Adjust bottom margin for vertical alignment */
}


/* Live update indicator styling */
#liveIndicator {
    font-size: 0.9em;
    color: #555;
    margin: 14px 0;
  }
  .pulse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #007bff;
    border-radius: 50%;
    margin-left: 5px;
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  
  .narrative-content h2 + p {
    margin-top: 1em;
  }
  


  .onet-link {
    font-size: 1.1em;
    font-weight: bold;
    color: #007bff;             /* Blue color */
    text-decoration: none;
    border: 1px solid #007bff;  /* Border matching the text color */
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.onet-link:hover {
    background-color: #007bff;  /* Blue background on hover */
    color: #fff;                /* White text on hover */
}