/* Global Styles */

/* Global Background for Sections */
body, .issue-section, .issue-galleys, .journal-desc {
    background-color: #A8DCDD; /* Light teal background */
}

/* Buttons (Standardized to .btn.btn-primary Design) */
.btn-secondary, button, .btn {
    background-color: #d4af37; /* Golden background */
    color: #212529; /* Dark gray text */
    font-family: 'Work Sans', sans-serif; /* Modern sans-serif font */
    font-weight: 600; /* Bold enough for emphasis */
    font-size: 14px; /* Readable size */
    padding: 10px 20px; /* Comfortable padding */
    border-radius: 5px; /* Rounded corners */
    border: none; /* Clean look */
    transition: all 0.3s ease; /* Smooth hover transitions */
    text-transform: uppercase; /* Adds structure */
}

.btn-secondary:hover, button:hover, .btn:hover {
    background-color: #343a40; /* Dark gray on hover */
    color: #ffffff; /* White text on hover */
}

/* Titles (Consistent Dark Gray for All Headings) */
h2.metadata, h3.journal-desc__title, h3.announcement__title_boxed, 
h2.issue__title, .issue-section__toc-title, .issue-galleys__title {
    font-family: 'Merriweather', serif; /* Academic serif font */
    font-size: 1.8rem; /* Standard size for consistency */
    color: #212529; /* Dark gray for headings */
    text-align: left;
    margin-bottom: 15px;
    border-bottom: 1px solid #343a40; /* Subtle underline for structure */
    padding-bottom: 5px;
}

/* Announcement Box Title */
h3.announcement__title_boxed {
    background-color: #A8DCDD; /* Same as global background */
    padding: 8px 15px; /* Inner padding for readability */
    font-family: 'Merriweather', serif; /* Serif font */
    font-size: 1.5rem; /* Slightly smaller for emphasis */
    color: #212529; /* Dark gray text */
}


body {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Merriweather', serif;
    color: #212529; /* Dark gray for headings */
}

/* h2.metadata */
h2.metadata {
    font-family: 'Merriweather', serif;
    font-size: 1.8rem; /* Slightly large for emphasis */
    text-align: left;
    margin-bottom: 15px;
    letter-spacing: 1px; /* Adds a touch of elegance */
}

/* h3.journal-desc__title */
h3.journal-desc__title {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem; /* Slightly smaller than h2 */
    color: #212529; /* Dark gray for contrast */
    margin-bottom: 10px;
    padding-bottom: 5px;
}

/* Buttons: btn btn-primary */
.btn.btn-primary {
    background-color: #d4af37; /* Golden for consistency with the palette */
    color: #212529; /* Dark gray text for contrast */
    font-family: 'Work Sans', sans-serif; /* Modern sans-serif font */
    font-weight: 600; /* Bold enough for emphasis */
    font-size: 14px; /* Readable size */
    padding: 10px 20px; /* Comfortable padding */
    border-radius: 5px; /* Rounded corners for a modern look */
    border: none; /* Clean look */
    transition: all 0.3s ease; /* Smooth transitions */
    text-transform: uppercase; /* Adds a strong visual hierarchy */
}

.btn.btn-primary:hover {
    background-color: #343a40; /* Dark gray background on hover */
    color: #ffffff; /* White text for hover */
    text-decoration: none; /* Prevent underlines */
}


.main-header {
    background-color: #212529; /* Fondo gris oscuro elegante */
    color: #f8f9fa; /* Blanco humo para texto */
    border-bottom: 2px solid #d4af37; /* Línea decorativa dorada */
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    font-family: 'Merriweather', serif; /* Tipografía académica */
    font-size: 18px; /* Tamaño del texto */
}
nav a {
    color: #f8f9fa; /* Blanco humo para enlaces */
    text-decoration: none;
    font-family: 'Work Sans', sans-serif; /* Tipografía moderna para el menú */
    padding: 0 15px; /* Espaciado entre enlaces */
    font-size: 16px; /* Tamaño del texto del menú */
}
nav a:hover {
    color: #d4af37; /* Dorado al pasar el cursor */
    text-decoration: underline; /* Subrayado elegante */
}


.dropdown-menu {
    background-color: #212529; /* Fondo gris oscuro */
    border: 1px solid #d4af37; /* Borde dorado */
    padding: 0.5rem 0;
    border-radius: 4px; /* Bordes ligeros */
}

.dropdown-menu .dropdown-item a {
    font-size: 14px; /* Fuente compacta */
    line-height: 1.2; /* Ajuste del espaciado */
    color: #f8f9fa; /* Texto blanco humo */
    text-decoration: none;
    font-family: 'Work Sans', sans-serif; /* Tipografía moderna */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #343a40; /* Fondo gris claro */
    color: #d4af37; /* Texto dorado */
    text-decoration: none; /* Sin subrayado */
}

.dropdown-divider {
    height: 1px;
    margin: 0.3rem 0;
    background-color: #6c757d; /* Línea divisoria gris medio */
    border: none;
}



/* Style for the cover image in the section */
.col-md-3 .img-fluid, 
.col-md-3 .img-thumbnail {
    max-width: 82%; /* Adjusts the size */
    height: auto; /* Maintains the aspect ratio */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* Creates a prominent shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animation */
}

.col-md-3 .img-fluid:hover, 
.col-md-3 .img-thumbnail:hover {
    transform: scale(1.05); /* Slightly enlarges the image on hover */
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4); /* Enhances shadow on hover */
}

/* Specific Style for the homepage image */

header.row img[src="https://journal.dialektika.org/ojs/public/journals/1/homepageImage_es.jpg"] {
    mix-blend-mode: unset !important; /* Overrides inline style */
    display: block; /* Ensures the image is treated as a block element */
    margin: 0 auto; /* Centers the image horizontally */
    max-width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains the image's aspect ratio */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow effect */
}

/* Specific Style for the cover image */
header.row img[src="https://journal.dialektika.org/ojs/public/journals/1/cover_issue_18_es_ES.jpg"] {
    max-width: 82%; /* Adjusts size */
    height: auto; /* Maintains aspect ratio */
    filter: brightness(1.2); /* Increases brightness */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* Prominent shadow */
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

header.row img[src="https://journal.dialektika.org/ojs/public/journals/1/cover_issue_18_es_ES.jpg"]:hover {
    transform: scale(1.05); /* Enlarges on hover */
    filter: brightness(1.4); /* Enhances brightness on hover */
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
}

/* Top Menu Styling */

.top-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 10px 25px; /* Adjusted for clean spacing */
    margin: 0;
    background-color: #90c8cc; /* Muted teal background */
    border-bottom: 2px solid #d4af37; /* Thin golden border for elegance */
    font-family: 'Merriweather', serif; /* Academic serif font */
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
    z-index: 100; /* Ensures menu stays above other elements */
}

/* Left and Right Menu Groups */
.left-menu, .right-menu {
    display: flex;
    gap: 15px; /* Balanced spacing */
}

/* Menu Links */
.top-menu a {
    text-decoration: none;
    color: #212529; /* Dark gray text for contrast */
    font-weight: 500; /* Moderate font weight for elegance */
    padding: 8px 14px; /* Comfortable clickable area */
    border-radius: 3px; /* Slightly rounded corners */
    transition: all 0.3s ease; /* Smooth hover transitions */
}

.top-menu a:hover {
    color: #f8f9fa; /* White text on hover */
    background-color: #d4af37; /* Golden background for hover */
}

/* Divider between groups */
.top-menu .divider {
    border-left: 1px solid #6c757d; /* Subtle divider using gray */
    height: 20px;
    margin: 0 10px;
}

/* Responsive Styling */
@media (max-width: 768px) {
    .top-menu {
        flex-wrap: wrap; /* Allows wrapping on smaller screens */
        justify-content: center; /* Centers items for smaller viewports */
        padding: 8px 15px;
    }

    .left-menu, .right-menu {
        flex-wrap: nowrap; /* Keeps items on a single line */
        gap: 10px; /* Reduced gap for tighter design */
    }

    .top-menu a {
        font-size: 14px; /* Smaller font size for smaller screens */
        padding: 6px 10px; /* Reduced padding for compact appearance */
    }
}


/* General Metadata Styling */
.metadata {
    font-family: 'Work Sans', sans-serif; /* Modern sans-serif font for metadata */
    font-size: 14px; /* Slightly smaller for metadata */
    color: #212529; /* Dark gray text for readability */
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Main Article Title */
.main__title {
    font-family: 'Merriweather', serif; /* Academic serif font */
    font-size: 2rem; /* Large title size for emphasis */
    color: #212529; /* Dark gray for consistency */
    text-align: left;
    margin-bottom: 20px;
    border-bottom: 2px solid #d4af37; /* Golden underline for emphasis */
    padding-bottom: 10px;
}

/* Volume and Issue Link */
.metadata a {
    color: #d4af37; /* Golden text for links */
    text-decoration: none; /* No underline for a clean look */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.metadata a:hover {
    color: #343a40; /* Dark gray on hover */
    text-decoration: underline; /* Adds clarity */
}

/* Author List */
ul.metadata {
    padding-left: 15px;
    margin-bottom: 10px;
    font-size: 14px;
    list-style-type: disc; /* Adds a subtle bullet point */
    color: #212529; /* Dark gray text */
}

/* Author Affiliations Section */
.collapse.metadata {
    background-color: #A8DCDD; /* Light teal background for affiliations */
    padding: 10px;
    border: 1px solid #d4af37; /* Golden border for structure */
    border-radius: 5px; /* Rounded corners for a modern look */
    margin-top: 10px;
}

.collapse.metadata strong {
    color: #212529; /* Dark gray for emphasis */
}

.collapse.metadata a {
    color: #d4af37; /* Golden links inside the collapsed section */
    text-decoration: none;
}

.collapse.metadata a:hover {
    text-decoration: underline;
    color: #343a40; /* Dark gray on hover */
}

/* Buttons */
.btn-secondary {
    background-color: #d4af37; /* Golden background for secondary buttons */
    color: #212529; /* Dark gray text */
    font-family: 'Work Sans', sans-serif; /* Modern sans-serif font */
    font-weight: 600; /* Moderate font weight for visibility */
    font-size: 14px; /* Compact and readable */
    padding: 10px 20px;
    border-radius: 5px; /* Rounded corners */
    border: none; /* Clean look */
    transition: all 0.3s ease;
    text-transform: uppercase; /* Adds emphasis */
}

.btn-secondary:hover {
    background-color: #343a40; /* Dark gray hover background */
    color: #ffffff; /* White text on hover */
}

/* General Layout Adjustments */
.col-md-9 {
    padding: 20px; /* Adds spacing for readability */
    background-color: #A8DCDD; /* Light teal background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-bottom: 20px;
}

/* Footer Container */
.main-footer {
    background-color: #212529; /* Dark gray background */
    color: #f8f9fa; /* Light text for contrast */
    padding: 30px 0;
    font-family: 'Work Sans', sans-serif; /* Modern font */
    border-top: 2px solid #343a40; /* Subtle border for separation */
}

/* Footer Headings */
.main-footer h1, .main-footer h2, .main-footer h3, .main-footer h4, .main-footer h5, .main-footer h6 {
    margin-top: 25px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700; /* Bold for emphasis */
    font-size: 1em; /* Consistent heading size */
    color: #f8f9fa; /* Light text for visibility */
}

/* Footer Titles */
.footer__title {
    font-family: 'Merriweather', serif; /* Academic serif font */
    font-size: 1.5rem; /* Larger subheading size */
    margin-bottom: 10px;
}

/* Footer Text */
.footer__text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Footer Lists */
.footer__list {
    list-style: none;
    padding: 0;
}

.footer__list li {
    margin-bottom: 5px;
}

/* Footer Links */
.footer__list a,
.main-footer ul a {
    color: #ffffff; /* White links for visibility */
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer__list a:hover,
.main-footer ul a:hover {
    color: #d4af37; /* Golden on hover */
    text-decoration: underline;
}

/* Footer Icons */
.footer__icons li {
    display: inline-block;
    margin-right: 10px;
}

.footer__icons img {
    width: 24px;
    height: 24px;
}

/* Submit Button */
.footer__btn {
    background-color: #d4af37; /* Golden button background */
    color: #212529; /* Dark gray text */
    padding: 10px 20px;
    border-radius: 5px; /* Rounded corners */
    border: none; /* Clean look */
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.footer__btn:hover {
    background-color: #343a40; /* Dark gray hover background */
    color: #ffffff; /* White text on hover */
}

/* Bottom Section */
.main-footer__block {
    font-size: 14px;
    margin-top: 20px;
    text-align: left;
}

/* OJS Logo */
.main-footer__block img {
    width: 100%;
    max-width: 60px;
}