@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');

/**
 * Revista Periphérica - Professional Theme
 * Inspirado em Academic Free Theme + Axis Design
 * Aplicando técnicas profissionais de OJS themes
 */

/* ============================================
   VARIÁVEIS - Sistema de Cores Periphérica
   ============================================ */
:root {
    /* Primary - Purple/Violet */
    --peripherica-primary: #6B21A8;
    --peripherica-primary-dark: #4C1D95;
    --peripherica-primary-light: #8B5CF6;
    --peripherica-primary-accent: #7C3AED;

    /* Secondary - Emerald */
    --peripherica-secondary: #10B981;
    --peripherica-secondary-dark: #059669;

    /* Accent */
    --peripherica-accent: #F59E0B;

    /* Neutrals */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Spacing */
    --spacing-base: 20px;
    --spacing-sm: 10px;
    --spacing-lg: 30px;
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
    box-sizing: border-box;
}

html {
    background-color: var(--gray-50);
    background-image: url('/journals/1/homepageImage_pt_BR.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

html {
    /* CAMINHO CORRIGIDO PARA O SERVIDOR OJS */
    background: url('/public/journals/1/homepageImage_pt_BR.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
}

/* Fallback se o caminho acima falhar por causa da barra inicial */
@support not (background: url('/')) {
    html {
        background-image: url('homepageImage_pt_BR.jpg') !important;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    /* Faz o body ser transparente para mostrar o background do HTML */
    background: transparent !important;
}

/* ============================================
   HEADER - Professional Two-Section Design with Background Image
   ============================================ */
.pkp_structure_head {
    /* Define variable for easy image update */
    --header-bg-image: url('/public/journals/1/homepageImage_pt_BR.jpg');

    /* Fallback color if image fails */
    background-color: var(--peripherica-primary-dark);

    /* Increased opacity for header to highlight corporate purple */
    background-image:
        linear-gradient(135deg, rgba(76, 29, 149, 0.9) 0%, rgba(107, 33, 168, 0.85) 50%, rgba(124, 58, 237, 0.9) 100%),
        var(--header-bg-image) !important;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Layered shadows for 3D depth */
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(107,33,168,0.15), 0 8px 16px rgba(107,33,168,0.1);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(107,33,168,0.15), 0 8px 16px rgba(107,33,168,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(107,33,168,0.15), 0 8px 16px rgba(107,33,168,0.1);

    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);

    /* Fix Alignment: Column Flex to stack Logo and Nav */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    padding-bottom: 0 !important; /* GLUE NAV TO BOTTOM */
}

.pkp_head_wrapper {
    background: transparent;
    width: 100% !important;
    max-width: none !important; /* ALLOWS BRIDGING TO FULL SCREEN */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Site Name Wrapper - Centered within the full-width header */
.pkp_site_name_wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1400px !important; /* KEEPS CONTENT IN THE GRID */
    margin: 0 auto !important;
    padding: 60px 40px 40px 40px !important;
    box-sizing: border-box !important;
}

/* Site Name with Enhanced Prominence */
.pkp_site_name a {
    font-family: 'Georgia', 'Lora', serif;
    color: #ffffff;
    font-size: 3rem; /* INCREASED FROM 2rem */
    font-weight: 700;
    letter-spacing: -0.03em;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: block;
    margin-bottom: 10px;
}

.pkp_site_name {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Unified Brand: Logo + Hardcoded Matadora Font */
.pkp_site_name a {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    text-decoration: none !important;
    font-size: 0 !important; /* Hides original text safely */
    color: transparent !important;
}

/* THE LOGO - Forced via ::before */
.pkp_site_name a::before {
    content: "" !important;
    display: inline-block !important;
    width: 110px !important;
    height: 110px !important;
    background: url('/public/journals/1/simbolo_isolado.svg') no-repeat center center !important;
    background-size: contain !important;
    filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0,0,0,0.4)) !important;
    flex-shrink: 0 !important;
}

/* THE HARDCORE TEXT - Forced via ::after */
.pkp_site_name a::after {
    content: "Revista Periphérica" !important;
    display: block !important;
    
    /* TYPOGRAPHY MATADORA */
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    font-size: 4.5rem !important; /* IMPACTO TOTAL */
    color: #ffffff !important;
    letter-spacing: -0.04em !important;
    line-height: 0.9 !important;
    text-transform: none !important;
    font-style: italic !important; /* Estilo editorial clássico */
    
    /* Efeito de Profundidade */
    text-shadow: 
        2px 2px 0px rgba(0,0,0,0.2),
        4px 4px 15px rgba(0,0,0,0.4),
        0px 8px 30px rgba(0,0,0,0.2) !important;
    
    white-space: nowrap !important;
}

.pkp_site_name a:hover::after {
    color: #FF3131 !important; /* VERMELHO MATADOR NO HOVER */
    transition: color 0.3s ease;
}

/* Kill any OJS default images/text */
.pkp_site_name img,
.pkp_site_name .sr-only {
    display: none !important;
}

/* ============================================
   NAVIGATION - Professional Style
   ============================================ */
.pkp_navigation_primary_row {
    background: rgba(45, 10, 80, 0.98) !important; /* Solid Darker for contrast */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    /* TRUE FULL WIDTH */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    
    display: flex !important;
    justify-content: center !important; /* Center the inner content grid */
}

/* Navigation Internal Wrapper: Spreads Menu and Search */
.pkp_navigation_primary_row .pkp_head_wrapper,
.pkp_navigation_primary_row > div {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* PUSHES MENU LEFT AND SEARCH RIGHT */
    align-items: center !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important; /* Center the 1400px container */
    padding: 0 40px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Removed display: contents as it was breaking the layout distribution */
/* .pkp_navigation_primary_row > div,
.pkp_navigation_primary_row .pkp_head_wrapper {
    display: contents !important;
} */

.pkp_navigation_primary {
    display: flex !important;
    flex-direction: row !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 15px !important;
    /* Aligns to the right edge of the 1400px central container */
    right: calc(50% - 700px + 40px) !important;
    
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 1001 !important;
    display: block !important;
}

@media (max-width: 1440px) {
    .pkp_navigation_user_wrapper {
        right: 40px !important;
    }
}

.pkp_navigation_user {
    display: inline-flex !important; /* Change to inline-flex so text-align works on parent */
    flex-direction: row !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    justify-content: flex-end !important;
}

/* Target only the top-level links for white color */
.pkp_navigation_user > li > a {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    margin-left: 20px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
    transition: all 0.2s ease !important;
}

.pkp_navigation_user > li > a:hover {
    color: var(--peripherica-secondary) !important;
    text-decoration: underline !important;
}

/* Fix for DROPDOWN menu visibility */
.pkp_navigation_user ul {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    padding: 10px 0 !important;
    border: 1px solid var(--gray-200) !important;
}

.pkp_navigation_user ul li a {
    color: var(--gray-800) !important; /* Dark color for dropdown items */
    font-size: 0.85rem !important;
    padding: 8px 20px !important;
    display: block !important;
    text-shadow: none !important;
    text-align: left !important;
}

.pkp_navigation_user ul li a:hover {
    background: var(--peripherica-primary-light) !important;
    color: #ffffff !important;
}

.pkp_navigation_primary li, 
.pkp_navigation_user li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.pkp_navigation_primary a {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.875rem 1.25rem;
    display: block;
    transition: all 0.3s ease;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pkp_navigation_primary a:hover,
.pkp_navigation_primary a:focus {
    background: rgba(255, 255, 255, 0.15);
    color: var(--peripherica-secondary);
    transform: translateY(-1px);

    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   MAIN CONTENT - Professional Card Design
   ============================================ */
.pkp_structure_content {
    /* THE GRAY BOX BEHIND PANELS - AS REQUESTED */
    background: rgba(230, 230, 235, 0.9) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    max-width: 1400px; /* Constrains it so background image shows on sides */
    margin: 40px auto !important; /* Centers and adds spacing from header */
    padding: 40px !important;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.pkp_structure_main {
    /* Solid White for contrast against the gray background */
    background: #ffffff !important; 
    border: none !important; 
    border-right: none !important; /* Force kill any right border */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    padding: 3rem;
    margin-bottom: 50px;
    
    /* REAJUSTE: Diminuindo um pouco a largura para garantir que não toque na linha/sidebar */
    width: 66% !important; 
    float: left !important;
    display: block !important;
}

.pkp_structure_sidebar {
    padding: 0;
    background: transparent !important;
    margin: 0 !important;
    
    /* FORCE ALIGNMENT AND WIDTH */
    width: 28% !important;
    float: right !important;
    
    /* MATANDO A LINHA DEFINITIVAMENTE */
    border: none !important;
    border-left: none !important;
    outline: none !important;
}

/* Removendo possíveis linhas fantasmas de separação do OJS */
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Ensure the content area clears the floats */
.pkp_structure_content::after {
    content: "";
    display: table;
    clear: both;
}

/* Page Title - Professional Typography */
.page_title,
.pkp_structure_main > h1 {
    font-family: 'Georgia', 'Lora', serif;
    color: var(--peripherica-primary-dark);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-base);
    letter-spacing: -0.025em;
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.page_title::after,
.pkp_structure_main > h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 3px;

    /* Gradient underline */
    background: -moz-linear-gradient(to right, var(--peripherica-primary) 0%, var(--peripherica-secondary) 100%);
    background: -webkit-gradient(linear, left top, right top, from(var(--peripherica-primary)), to(var(--peripherica-secondary)));
    background: -webkit-linear-gradient(to right, var(--peripherica-primary) 0%, var(--peripherica-secondary) 100%);
    background: linear-gradient(to right, var(--peripherica-primary) 0%, var(--peripherica-secondary) 100%);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

/* Section Headings */
h2, .h2 {
    font-family: 'Georgia', 'Lora', serif;
    color: var(--peripherica-primary);
    font-size: 1.7rem;
    font-weight: 600;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-base);
}

h3, .h3 {
    color: var(--peripherica-primary-accent);
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: var(--spacing-base);
    margin-bottom: var(--spacing-sm);
}

/* ============================================
   SIDEBAR - Professional Panel System
   ============================================ */
/* Sidebar block correction */
.pkp_structure_sidebar .pkp_block {
    background: #ffffff !important;
    border: none !important; /* No borders here either to keep it clean */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    width: 100% !important; /* Ensure it stays inside the 28% width of the sidebar */
}

.pkp_structure_sidebar .pkp_block {
    /* Solid white for sidebar blocks */
    background: #ffffff !important;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Professional depth shadow */
    -webkit-box-shadow: 4px 4px 5px -3px rgba(166, 166, 166, 0.35);
    -moz-box-shadow: 4px 4px 5px -3px rgba(166, 166, 166, 0.35);
    box-shadow: 4px 4px 5px -3px rgba(166, 166, 166, 0.35);

    margin-bottom: 40px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pkp_structure_sidebar .pkp_block:hover {
    -webkit-box-shadow: 0 8px 16px rgba(107, 33, 168, 0.15), 4px 4px 5px -3px rgba(166, 166, 166, 0.35);
    -moz-box-shadow: 0 8px 16px rgba(107, 33, 168, 0.15), 4px 4px 5px -3px rgba(166, 166, 166, 0.35);
    box-shadow: 0 8px 16px rgba(107, 33, 168, 0.15), 4px 4px 5px -3px rgba(166, 166, 166, 0.35);

    transform: translateY(-2px);
    border-color: #C7D2FE;
}

/* Panel Heading - Gradient Style */
.pkp_structure_sidebar h2,
.pkp_structure_sidebar .title {
    background: -moz-linear-gradient(to bottom, #7C3AED 0%, #6B21A8 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#7C3AED), to(#6B21A8));
    background: -webkit-linear-gradient(to bottom, #7C3AED 0%, #6B21A8 100%);
    background: linear-gradient(to bottom, #7C3AED 0%, #6B21A8 100%);

    color: #ffffff;
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    /* Text shadow for depth */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Sidebar Lists */
.pkp_structure_sidebar ul {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.pkp_structure_sidebar li {
    border-bottom: 1px solid var(--gray-100);
}

.pkp_structure_sidebar li:last-child {
    border-bottom: none;
}

.pkp_structure_sidebar a {
    color: var(--gray-700);
    display: block;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.pkp_structure_sidebar a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: -moz-linear-gradient(to right, #EEF2FF 0%, transparent 100%);
    background: -webkit-gradient(linear, left top, right top, from(#EEF2FF), to(transparent));
    background: -webkit-linear-gradient(to right, #EEF2FF 0%, transparent 100%);
    background: linear-gradient(to right, #EEF2FF 0%, transparent 100%);
    transition: width 0.3s ease;
    z-index: -1;
}

.pkp_structure_sidebar a:hover {
    color: var(--peripherica-primary);
    padding-left: 1.5rem;
    font-weight: 600;
}

.pkp_structure_sidebar a:hover::before {
    width: 100%;
}

/* ============================================
   ARTICLES - Professional Card Design
   ============================================ */
.obj_article_summary {
    background: #ffffff;
    border: 1px solid var(--gray-200);

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    /* Layered shadow */
    -webkit-box-shadow: 4px 4px 5px -3px rgba(166, 166, 166, 0.35), 0 2px 4px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 4px 4px 5px -3px rgba(166, 166, 166, 0.35), 0 2px 4px rgba(0, 0, 0, 0.05);
    box-shadow: 4px 4px 5px -3px rgba(166, 166, 166, 0.35), 0 2px 4px rgba(0, 0, 0, 0.05);

    padding: var(--spacing-base);
    margin-bottom: var(--spacing-base);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Top accent border on hover */
.obj_article_summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: -moz-linear-gradient(to right, var(--peripherica-primary) 0%, var(--peripherica-secondary) 100%);
    background: -webkit-gradient(linear, left top, right top, from(var(--peripherica-primary)), to(var(--peripherica-secondary)));
    background: -webkit-linear-gradient(to right, var(--peripherica-primary) 0%, var(--peripherica-secondary) 100%);
    background: linear-gradient(to right, var(--peripherica-primary) 0%, var(--peripherica-secondary) 100%);
    transition: height 0.3s ease;
}

.obj_article_summary:hover {
    -webkit-box-shadow: 0 10px 20px rgba(107, 33, 168, 0.15), 0 5px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 10px 20px rgba(107, 33, 168, 0.15), 0 5px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 20px rgba(107, 33, 168, 0.15), 0 5px 10px rgba(0, 0, 0, 0.1);

    transform: translateY(-4px);
    border-color: #C7D2FE;
}

.obj_article_summary:hover::before {
    height: 4px;
}

.obj_article_summary .title {
    font-family: 'Georgia', 'Lora', serif;
    font-size: 1.4rem;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;

    /* Dotted border like Academic Free */
    border-bottom: 1px dotted var(--gray-300);
    padding-bottom: var(--spacing-sm);
}

.obj_article_summary .title a {
    color: var(--peripherica-primary-dark);
    font-weight: 700;
    transition: color 0.3s ease;
}

.obj_article_summary .title a:hover {
    color: var(--peripherica-primary);
}

/* ============================================
   BUTTONS - Professional Style
   ============================================ */
.pkp_button,
.cmp_button,
button[type="submit"],
input[type="submit"],
.btn-primary {
    /* Multi-vendor gradient */
    background: -moz-linear-gradient(135deg, #6B21A8 0%, #7C3AED 100%);
    background: -webkit-gradient(linear, left top, right bottom, from(#6B21A8), to(#7C3AED));
    background: -webkit-linear-gradient(135deg, #6B21A8 0%, #7C3AED 100%);
    background: linear-gradient(135deg, #6B21A8 0%, #7C3AED 100%);

    border: none;
    color: #ffffff;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;

    /* Professional shadow */
    -webkit-box-shadow: 0 2px 4px rgba(107, 33, 168, 0.3), 0 4px 8px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 4px rgba(107, 33, 168, 0.3), 0 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(107, 33, 168, 0.3), 0 4px 8px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;
}

.pkp_button:hover,
.cmp_button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover {
    background: -moz-linear-gradient(135deg, #4C1D95 0%, #6B21A8 100%);
    background: -webkit-gradient(linear, left top, right bottom, from(#4C1D95), to(#6B21A8));
    background: -webkit-linear-gradient(135deg, #4C1D95 0%, #6B21A8 100%);
    background: linear-gradient(135deg, #4C1D95 0%, #6B21A8 100%);

    transform: translateY(-2px);

    -webkit-box-shadow: 0 4px 8px rgba(107, 33, 168, 0.4), 0 8px 16px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 4px 8px rgba(107, 33, 168, 0.4), 0 8px 16px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 8px rgba(107, 33, 168, 0.4), 0 8px 16px rgba(0, 0, 0, 0.15);
}

.pkp_button:active,
.cmp_button:active,
button[type="submit"]:active,
input[type="submit"]:active,
.btn-primary:active {
    transform: translateY(0);
}

/* ============================================
   GALLEY LINKS (PDF) - Professional Style
   ============================================ */
.obj_galley_link {
    background: -moz-linear-gradient(135deg, #10B981 0%, #059669 100%);
    background: -webkit-gradient(linear, left top, right bottom, from(#10B981), to(#059669));
    background: -webkit-linear-gradient(135deg, #10B981 0%, #059669 100%);
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);

    color: #ffffff;
    padding: 0.625rem 1.25rem;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem;

    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    -webkit-box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    -moz-box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);

    transition: all 0.3s ease;
}

.obj_galley_link:hover {
    background: -moz-linear-gradient(135deg, #059669 0%, #047857 100%);
    background: -webkit-gradient(linear, left top, right bottom, from(#059669), to(#047857));
    background: -webkit-linear-gradient(135deg, #059669 0%, #047857 100%);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);

    transform: translateY(-2px);

    -webkit-box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
    -moz-box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

/* ============================================
   FOOTER - Professional Dark Design
   ============================================ */
.pkp_structure_footer_wrapper {
    background: -moz-linear-gradient(135deg, #1F2937 0%, #4C1D95 100%);
    background: -webkit-gradient(linear, left top, right bottom, from(#1F2937), to(#4C1D95));
    background: -webkit-linear-gradient(135deg, #1F2937 0%, #4C1D95 100%);
    background: linear-gradient(135deg, #1F2937 0%, #4C1D95 100%);

    color: var(--gray-300);
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-lg);
    border-top: 3px solid var(--peripherica-primary);

    /* Subtle shadow */
    -webkit-box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);

    position: relative;
}

.pkp_structure_footer {
    position: relative;
    min-height: 150px;
    padding-bottom: 100px;
}

.pkp_structure_footer a {
    color: var(--peripherica-secondary);
    transition: color 0.3s ease;
}

.pkp_structure_footer a:hover {
    color: #34D399;
}

/* OJS/PKP Logo Box - Positioned Right */
.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer,
.pkp_structure_footer a[href*="pkp.sfu.ca"]:last-child {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    padding: 1rem 1.5rem;

    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    transition: all 0.3s ease;

    /* Position in bottom right corner */
    position: absolute !important;
    right: 30px !important;
    bottom: 30px !important;
    margin: 0 !important;
}

.pkp_brand_footer:hover,
.pkp_structure_footer a[href*="pkp.sfu.ca"]:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--peripherica-secondary);
    transform: translateY(-2px);

    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* OJS/PKP Logo Image in Box */
.pkp_brand_footer img,
a[href*="pkp.sfu.ca"] img {
    display: block;
    max-width: 150px;
    height: auto;
    filter: brightness(1.2);
    transition: filter 0.3s ease;
}

.pkp_brand_footer:hover img,
a[href*="pkp.sfu.ca"]:hover img {
    filter: brightness(1.5);
}

/* ============================================
   FORMS - Professional Style
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    border: 2px solid var(--gray-300);

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    background: #ffffff;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--peripherica-primary);
    outline: none;

    -webkit-box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.1);
    -moz-box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.1);
    box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.1);
}

/* ============================================
   HOMEPAGE IMAGE SUPPORT
   Background image with solid white content box
   ============================================ */
/* Background aplicado ao <html> element */

.pkp_structure_content {
    background-color: transparent;
    background: none !important;
}

/* ============================================
   LINKS - Professional Style
   ============================================ */
a {
    color: var(--peripherica-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: var(--peripherica-primary-accent);
}

/* ============================================
   TABLES - Professional Style
   ============================================ */
table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    overflow: hidden;

    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th {
    background: -moz-linear-gradient(to bottom, #7C3AED 0%, #6B21A8 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#7C3AED), to(#6B21A8));
    background: -webkit-linear-gradient(to bottom, #7C3AED 0%, #6B21A8 100%);
    background: linear-gradient(to bottom, #7C3AED 0%, #6B21A8 100%);

    color: #ffffff;
    padding: var(--spacing-sm);
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--gray-200);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover {
    background: var(--gray-50);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 640px) {
    .pkp_structure_sidebar {
        padding: 0;
        margin-top: var(--spacing-lg);
    }

    .pkp_structure_main {
        margin: 0 var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .pkp_site_name a {
        font-size: 1.5rem;
    }

    h2, .h2 {
        font-size: 1.4rem;
    }

    .obj_article_summary {
        padding: var(--spacing-sm);
    }

    /* Remove background image on mobile */
    body.pkp_page_index {
        background: var(--gray-50);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .pkp_structure_head,
    .pkp_structure_sidebar,
    .pkp_structure_footer_wrapper,
    .pkp_navigation_primary {
        display: none;
    }

    .pkp_structure_main {
        box-shadow: none;
        border: 1px solid var(--gray-300);
    }

    body {
        background: #ffffff;
    }
}

/* ============================================
   ACCESSIBILITY - Screen Reader Only
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus states for accessibility */
*:focus-visible {
    outline: 3px solid var(--peripherica-secondary);
    outline-offset: 2px;
}