/* style.css */

/* === Global Site Structure & Navbar === */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1a1a1a; /* Dark background for the whole page */
    /* text-align: left; (This is in the original body. Elements will handle their own alignment) */
    /* color: #ccc; (This would be for text directly in body, content areas like author-page-container override it) */
}

#site-banner-container,
#site-navbar-wrapper {
    width: 100%;
    max-width: 1246px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

#site-banner-container {
    background-color: #000000; 
    text-align: center; 
    padding: 0; /* Banner image likely spans full width or has its own bg */
    line-height: 0; /* Removes potential space below img if it's inline-block */
}

#site-banner-container img {
    display: block; 
    margin: 0 auto; 
    max-width: 100%; 
    height: auto;   
    border-bottom: 3px solid #ff8c00; /* Orange accent line, matching banner aesthetics */
}

#site-navbar-wrapper {
    background-color: #222222; /* Dark background for navbar */
    border-bottom: 2px solid #444444; /* Subtle separator */
}

.site-navbar {
    display: flex;
    justify-content: center; 
    width: 100%;
}

.site-navbar ul.navbar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; 
}

.site-navbar ul.navbar-menu > li {
    position: relative; 
}

.site-navbar ul.navbar-menu > li > a {
    display: block;
    padding: 5px 20px;
    color: #f0f0f0;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px; 
    transition: background-color 0.3s, color 0.3s;
}

.site-navbar ul.navbar-menu > li > a:hover,
.site-navbar ul.navbar-menu > li:hover > a { 
    background-color: #ff8c00; 
    color: #000000;
}

.site-navbar .navbar-caret { /* Styling for Font Awesome caret */
    margin-left: 7px;
    font-size: 0.9em;
}

/* Dropdown Menu */
.site-navbar .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: #333333; 
    border: 1px solid #444444;
    border-top: none;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
    min-width: 220px; /* Adjusted for longer item names */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.site-navbar .dropdown-menu li a {
    display: block;
    padding: 12px 18px; /* Slightly more padding */
    color: #dddddd;
    text-decoration: none;
    font-size: 13px;
    text-transform: none; /* Sub-items often not all-caps */
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}

.site-navbar .dropdown-menu li a:hover {
    background-color: #ff8c00;
    color: #000000;
}


/* === General Author Page Styles === */
body { /* Original body styles from provided CSS - some are merged above or overridden by content containers */
    font-family: Arial, sans-serif;
    /* margin: 0; padding: 0; background-color: #f0f2f5; */ /* Handled by new global body style */
    /* color: #333; */ /* Handled by new global body style and .author-page-container */
    text-align: left; /* This can remain for default text alignment within blocks */
}

.author-page-container {
    max-width: 1246px; /* MODIFIED from 1200px */
    margin: 0px auto; /* ADDED top/bottom margin for spacing from navbar, auto for centering */
    padding: 5px 20px;
    background-color: #fff; /* This is important for content readability */
    color: #333; /* Reset text color for this container */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box; /* Added for good practice */
}

/* Author Header Layout */
.author-header {
    display: flex;
    align-items: flex-start; 
    padding-bottom: 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid #e0e0e0;
}

.author-info-left {
    display: flex;
    flex-direction: column; 
    width: 240px; 
    flex-shrink: 0; 
    margin-right: 30px; 
}

.author-info-left .author-pfp {
    align-self: center; 
    margin-bottom: 20px; 
}

.author-pfp img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ddd;
    background-color: #f0f0f0; 
}

.author-info-right {
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    min-width: 0; 
}

/* MODIFIED: Author Name H1 styling */
.author-info-right #author-name { 
    margin-top: 0;
    margin-bottom: 1px;
    /* margin-top: 0; */ /* Redundant */
    font-size: 2.2em;
    color: #1c1e21;
    display: flex; /* Use flexbox for aligning name text and flag */
    align-items: center; /* Vertically center items */
    flex-wrap: wrap; /* Allow flag to wrap on smaller screens or long names */
}

/* NEW: Styles for the nationality flag decoration */
.author-nationality-flag {
    display: inline-flex; /* Allows internal flex alignment (for img and text) */
    align-items: center; /* Vertically align img and text within the flag span */
    margin-left: 10px; /* Space between author name and flag */
    padding: 3px 8px;  /* Padding inside the flag badge */
    background-color: #34495e; /* Dark blue-gray background */
    border-radius: 16px; /* Rounded pill shape */
    font-size: 12px;     /* Fixed small font size for country name text */
    color: #ecf0f1;     /* Light text color for contrast */
    line-height: 1;      /* Keep line height tight */
    /* white-space: nowrap; */ /* Optional: if country name shouldn't wrap */
}

.author-nationality-flag img {
    height: 12px !important; /* Ensure consistent height from flags.json */
    width: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between flag image and country name text */
    float: none !important; /* Override 'align="left"' from HTML attribute in flags.json */
}
/* END NEW STYLES */


/* Contact Links Styling */
.author-contacts { 
    width: 100%; 
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}

.contact-category-row {
    display: flex;
    align-items: flex-start; 
    width: 100%;
}

.contact-category-label {
    font-weight: bold;
    color: #555; 
    white-space: nowrap;
    padding-top: 5px; 
    margin-right: 8px; 
    text-align: right;   
    width: 55PX;         
    flex-shrink: 0;     
}

.contact-links-area {
    display: flex;
    flex-wrap: wrap; 
    gap: 6px;  
    flex-grow: 1; 
}

.author-contacts a {
    display: inline-flex;
    align-items: center; 
    padding: 5px 10px; 
    border-radius: 15px; 
    background-color: #e7f3ff; 
    color: #0056b3; 
    text-decoration: none;
    font-size: 0.85em; 
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.3; 
}

.author-contacts a.copyable-link {
    cursor: pointer;
}

.author-contacts a:hover {
    background-color: #0056b3;
    color: #fff;
}

.author-contacts a i {
    margin-right: 5px; 
    font-size: 1em; 
}
.author-contacts a span {
    display: inline-block; 
    white-space: nowrap; 
}

.author-description-text { 
    font-size: 1em;
    line-height: 1.6;
    color: #444;
    text-align: left;
    margin-top: 1px;
    margin-bottom: 10px; /* Space before the video/overview wrapper */
}
.author-description-text br {
    margin-bottom: 0.5em; 
}

/* NEW: Wrapper for video and overview sections */
.author-video-overview-wrapper {
    display: flex;
    flex-direction: row; /* Side-by-side by default */
    flex-wrap: wrap;     /* Allow stacking on smaller screens */
    align-items: flex-start; /* Align items to the top of the row */
    gap: 25px;           /* Space between video and overview when side-by-side, or when stacked */
    width: 100%;
    margin-bottom: 2px; /* Space after this combined section */
}

/* Styles for video and overview, now within .author-video-overview-wrapper */
.author-latest-video {
    flex: 1 1 560px; /* Attempt to be 560px wide, can grow/shrink */
    max-width: 560px; /* Don't get wider than standard video */
    min-width: 280px; /* Minimum sensible video width */
    text-align: center; 
    margin-bottom: 0; /* Gap handled by parent wrapper */
}
.author-latest-video h3{
    margin-top: 0; /* Remove top margin if it's the first child */
    margin-bottom: 10px;
    font-size: 1.4em;
    color: #333;
}
.author-latest-video iframe {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block; /* Helps with centering if margin auto is used */
}

.author-overview-section {
    flex: 1 1 300px; /* Take up remaining space, basis of 300px */
    min-width: 250px; /* Minimum readable width for text */
    margin-bottom: 0; /* Gap handled by parent wrapper */
}
.author-overview-section h2 {
    margin-top: 0; 
    margin-bottom: 10px; 
    font-size: 1.4em;
    color: #333;
    padding-bottom: 8px;
}
.author-overview-section .overview-text-content {
    font-size: 1em;
    line-height: 1.6;
    color: #444;
    text-align: left;
}
.author-overview-section .overview-text-content p { 
    margin-bottom: 1em;
}
.author-overview-section .overview-text-content p:last-child {
    margin-bottom: 0;
}
.author-overview-section .overview-text-content br { 
    margin-bottom: 0.5em;
    display: block; 
    content: ""; 
}

/* === Project Tabs Styles === */
.author-projects-tabs {
    display: flex;
    border-bottom: 2px solid #007bff;
    margin-bottom: 2px;
    overflow-x: auto; 
}

.tab-button {
    padding: 2px 20px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.1em;
    font-weight: 500;
    color: #555;
    transition: color 0.2s, border-bottom 0.2s;
    border-bottom: 3px solid transparent; 
    margin-bottom: -2px; 
}

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

.tab-button.active {
    color: #007bff;
    border-bottom: 3px solid #007bff;
    font-weight: bold;
}

.project-tab-content {
    display: none;
    padding: 5px 0; 
}

.project-tab-content.active {
    display: block;
}

/* START OF MODIFICATION: Widen character table section */
#project-content-characters.project-tab-content.active {
    /* .author-page-container content width is 1206px (1246px max-width - 2*20px padding) */
    /* Desired width for .visibility-wrapper hosting character cards is 1246px */
    /* Difference is 1246 - 1206 = 40px. Each side needs to expand by 20px. */
    margin-left: -20px;  /* MODIFIED from -43px */
    margin-right: -20px; /* MODIFIED from -43px */
}
/* END OF MODIFICATION */

.project-tab-content h2 { 
    font-size: 1.6em;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.project-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.project-item-card {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.project-item-image {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
}

.project-item-info h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.2em;
    color: #0056b3;
}

.project-item-origin {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 5px;
}

.project-item-description {
    font-size: 0.95em;
    color: #444;
    line-height: 1.5;
    margin-bottom: 12px;
    flex-grow: 1; 
}

.project-item-link {
    display: inline-block;
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.2s;
    margin-top: auto; 
}

.project-item-link:hover {
    background-color: #0056b3;
}

.author-creations section { 
    margin-bottom: 30px;
}
.author-creations section h2 { 
    font-size: 1.5em; 
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.table-loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    min-height: 120px; 
    text-align: center;
}

.table-loader .spinner { 
    border: 5px solid #e0e0e0; 
    border-top: 5px solid #007bff; 
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin { 
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.table-loader p {
    font-size: 1.1em;
    color: #555;
}

.characters-list .container { 
    margin: 0 auto 15px auto; 
    box-shadow: none; 
    border: 1px solid #e0e0e0; 
}

.no-characters-message { 
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 5px;
    text-align: center;
    color: #777;
    font-style: italic;
}

/* Snackbar Styles */
#clipboard-snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px; 
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 1001; 
    left: 50%;
    bottom: 30px;
    font-size: 1em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

#clipboard-snackbar.show {
    visibility: visible;
    -webkit-animation: snackbar-fadein 0.5s, snackbar-fadeout 0.5s 2.5s; 
    animation: snackbar-fadein 0.5s, snackbar-fadeout 0.5s 2.5s;
}

#clipboard-snackbar.success {
    background-color: #4CAF50; 
}

#clipboard-snackbar.error {
    background-color: #f44336; 
}

@-webkit-keyframes snackbar-fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes snackbar-fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes snackbar-fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes snackbar-fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}