/* ============================================
   QPJ: A Journal of Queer Performance
   Clean Gradient Design - Based on Mockup
   ============================================ */

/* ==================== FONTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap');

/* ==================== TYPOGRAPHY ==================== */
body, p, span, div, button, input, textarea, select, label, td, th, li {
    font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif !important;
    font-weight: 400;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Spectral', Georgia, serif !important;
    font-weight: 600;
    line-height: 1.3;
}

/* FANCY DISPLAY HEADING - Like your mockup */
.display-heading, .hero-title, .page-title-large {
    font-family: 'Playfair Display', 'Spectral', Georgia, serif !important;
    font-weight: 800;
    font-size: 3.5em;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 30px;
}

/* Make h1 on homepage use fancy style */
.article-header h1, .page-header h1 {
    font-family: 'Playfair Display', 'Spectral', Georgia, serif !important;
    font-weight: 800;
    font-size: 3em;
    color: #1a1a1a;
}

.material-icons, [class*="icon-"], .fa, [class*="fa-"], .glyphicon {
    font-family: inherit !important;
}

/* ==================== PINK CURSOR ==================== */
* {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M0,0 L0,16 L6,10 L9,16 L11,15 L8,9 L14,9 Z" fill="%23fb64bf"/></svg>') 0 0, auto;
}

a, button, .btn, input[type="submit"], input[type="button"], select {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M6,0 L6,8 L0,8 L10,16 L20,8 L14,8 L14,0 Z" fill="%23fb64bf"/></svg>') 10 0, pointer !important;
}

/* ==================== CLEAN PALE PINK BACKGROUND ==================== */
body {
    background: #faf5f7 !important;
    color: #1a1a1a;
}

/* ==================== GRADIENT HEADER - LIKE MOCKUP ==================== */
.navbar, header, .top-bar, nav {
    background: linear-gradient(90deg, #ffd4c8 0%, #ffb8d4 50%, #fb64bf 100%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 25px 40px;
}

.navbar a, header a, nav a {
    color: #1a1a1a !important;
    transition: all 0.3s ease;
    font-weight: 500;
}

.navbar a:hover, header a:hover, nav a:hover {
    opacity: 0.7;
}

/* ==================== FOOTER - MATCHING GRADIENT ==================== */
footer, .footer {
    background: linear-gradient(90deg, #ffd4c8 0%, #ffb8d4 50%, #fb64bf 100%) !important;
    color: #1a1a1a !important;
    border-top: none !important;
    padding: 40px 60px;
    box-shadow: none !important;
}

footer a, .footer a {
    color: #1a1a1a !important;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

footer a:hover, .footer a:hover {
    opacity: 0.7;
    border-bottom: 2px solid #1a1a1a;
}

/* ==================== SIDEBAR - VERY SUBTLE ==================== */
.sidebar, aside, .side-menu {
    background: #fff !important;
    border-right: 1px solid #f0e8eb;
}

.sidebar h3, aside h3 {
    color: #fb64bf !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9em;
    border-bottom: none !important;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.sidebar a, aside a {
    color: #1a1a1a !important;
    transition: all 0.3s ease;
}

.sidebar a:hover, aside a:hover {
    color: #fb64bf !important;
    padding-left: 8px;
}

/* ==================== MAIN CONTENT - CLEAN ==================== */
main, .main-content, .content {
    background: #faf5f7 !important;
    color: #1a1a1a;
}

/* Remove white boxes from Janeway containers */
.container, .wrapper, .content-wrapper, .main-wrapper, .page-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ==================== HEADINGS ==================== */
h1 {
    color: #1a
}

h2 {
    color: #fb64bf !important;
    font-weight: 700;
    text-transform: 
    letter-spacing: 1.5px;
    font-size: 1em;
   

}

h3 {
    color: #1a1a1a !important;
    font-weigh
    font-size: 1.4em;
    margin-top: 30px;
    margin-bottom: 12px;
}

h4, h5, h6 {
    color: #1a1a1a !important;
}

/* Remove border from h1 - cl

    border-left: none;
    padding-left: 0;
    margin-bot
}

/* ==================== LINKS ==================== */
a {
    color: 
    text-decoration: none;
    border-bottom: 1px solid #fb64bf;
    transition
    font-weight: 500;
}

a:hover {
    opac
}

/* ==================== 
.btn, button, input[type="submit"], input[type="button"
    border-radius: 4p
    font-weight: 600;
 

    border: none;
}

.btn-primary, button.prim
    background: #fb64bf !important;
    color: whi
}

.btn-primary:hover, button.primary:hover, .button-primary:hover {
    op
    transform: transl
}

.btn-secondary, bu
    background: white
    color: #fb64bf 
    border: 2px solid #f
}

.btn-secondary:hover, button.secondary:ho
    background: #fb64bf !important;
 
}

/* ==================== DIVIDERS ==================== */
hr {
    border
    height: 1px;
    
    margin: 30px 0;
}

/* =============
.

    border-left: 4px solid #fb64bf;
    padding: 25px;
    margin: 3
    color: #1a1a1a;
    box-shadow: 
}

.grey-box, .info-box {
    background: #f0e8eb;
    border-
   
    margin: 30px 0;
    color: #1a1a1a;
}

/* ==================== BLOCKQUOTES ==================== */
blockquote {
    border-left: 4px solid #fb64bf;
    padding: 20px 25px;
    margin: 25px 0
 

    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/*
.card, .box, .article-card, .panel {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    border: none;
    background: white;
}

.card:hover, .box:hover, .a
 

}

/* ==================== FORMS ==================== */
input[type="text"
textar
    border: 1px solid #f0e8eb;
    
    padding: 12px 1
 

    color: #1a1a1a;
}

input[type="text"]:focus, input[type="email"]:focus, 

    border: 2px solid #fb64bf;
 
}

/* ==================== TABLES ==================== */
table {
    border-collapse: co
    width: 100%;
    margin: 20px 0
    background: white;
    box-s
}

th {
    background:
 

    text-align: left;
    fo
    text-transform: uppercase;
    letter-spacing: 1px;
    f
    border-bottom: 2p
}

td {
    padding: 12px 14px;
    border-bottom
    color: #1a1a1
}

tr:hover td {
    background: #faf5f7;
}

/* ==================== BADGES &
.badge, .tag, .ca
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size:
    font-weight: 600;
    marg
    transition: all 0.3s ease;
}

.badge-primary, .tag-primary {
    background: #fb64bf;
    color: white;
}

.badge-primary:hover, .tag-primary:hover {
    opacity: 0.85;
}

.badge-secondary, .tag-secondary {
    background: #f0e8eb;
    color: #fb64bf;
}

.badge-secondary:hover, .tag-secondary:hover {
    background: #fb64bf;
    color: white;
}

/* ==================== ALERTS ==================== */
.alert {
    padding: 16px 20px;
    border-radius: 6px;
    margin: 15px 0;
    border-left: 4px solid;
}

.alert-info {
    background: white;
    border-color: #fb64bf;
    color: #1a1a1a;
}

/* ==================== PAGINATION ==================== */
.pagination a, .pagination span {
    padding: 8px 12px;
    margin: 0 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: white;
}

.pagination a {
    color: #fb64bf;
    font-weight: 600;
}

.pagination a:hover {
    background: #fb64bf;
    color: white;
}

.pagination .current {
    background: #fb64bf;
    color: white;
}

/* ==================== LOADING ==================== */
.loading, .spinner {
    border: 3px solid #f0e8eb;
    border-top: 3px solid #fb64bf;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

/* ==================== ACCESSIBILITY ==================== */
*:focus {
    outline: 2px solid #fb64bf;
    outline-offset: 2px;
}

/* ==================== SELECTION ==================== */
::selection {
    background: #fb64bf;
    color: white;
}

::-moz-selection {
    background: #fb64bf;
    color: white;
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #faf5f7;
}

::-webkit-scrollbar-thumb {
    background: #fb64bf;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff8ec8;
}

/* ==================== LISTS ==================== */
.article ul li::marker, .content ul li::marker {
    color: #fb64bf;
}

/* ==================== CONTACT/FOOTER INFO STYLE ==================== */
/* For styling like "PHONE" and "EMAIL" in your mockup */
.contact-label, .info-label {
    color: #fb64bf !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.9em;
    margin-bottom: 8px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .display-heading, .hero-title {
        font-size: 2.5em;
    }
    
    .article-header h1, .page-header h1 {
        font-size: 2em;
    }
}

/* ==================== PRINT ==================== */
@media print {
    .navbar, header, footer, .btn, button {
        display: none;
    }
    
    body, main {
        background: white;
        color: black;
    }
}

/* ==================== OPTIONAL: ADD TEXTURE WITH BACKGROUND IMAGE ==================== */
/* 
To add risograph texture like Option 1:
1. Create or download a risograph texture PNG
2. Upload it to your server at: /static/qpj-custom/images/riso-texture.png
3. Uncomment these lines:

.navbar::before, header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/qpj-custom/images/riso-texture.png');
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}
*/