/* ==========================================================
   DESKTOP: sidebar left, main content right
   ========================================================== */
@media (min-width: 769px) {
    /* Sidebar block on left */
    .pkp_structure_sidebar {
        float: left !important;
        width: 25% !important;
    }

    /* Main content to the right */
    .pkp_structure_main {
        float: right !important;
        width: 75% !important;
    }

    /* Remove unnecessary pseudo-elements */
    .pkp_structure_main::before,
    .pkp_structure_main::after {
        display: none;
    }
}

/* ==========================================================
   MOBILE: sidebar below content
   ========================================================== */
@media (max-width: 768px) {
    /* Make layout vertical */
    .pkp_structure_main,
    .pkp_structure_sidebar {
        float: none !important;
        width: 100% !important;
    }

    /* Sidebar moves below main content */
    .pkp_structure_sidebar {
        order: 99 !important;
        margin: 20px 0 0 0 !important;
    }
}

/* ==========================================================
   CUSTOM HEADER
   ========================================================== */
/* Orange header with animated floating symbols */
.gradient-header {
    position: relative;
    height: 250px;
    background: #AD5F08;
    color: #FFFFFF;
    padding: 40px 20px;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Title (reduced 25%) */
.gradient-header h1 {
    font-size: 2.025em;
    font-weight: 900;
    margin: 0;
    opacity: 0;
    animation: fadeSlide 1.5s forwards;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7), 0 0 10px rgba(255,255,255,0.3);
    margin-top: 1.2cm;
}

/* Subtitle (reduced 25%) with link */
.gradient-header p {
    font-size: 0.975em;
    margin: 10px 0 0 0;
    opacity: 0;
    animation: fadeSlide 2s forwards 0.5s;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6), 0 0 6px rgba(255,255,255,0.2);
}

/* Main Pills menu container */
.gradient-header .menu-pills {
    margin-top: calc(0.5cm + 1cm + 0.6cm + 0.3cm);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding-top: 0;
    z-index: 2;
}

.gradient-header .menu-pills a {
    background-color: rgba(255,255,255,0.5175); /* 15% less transparent */
    color: #fff;
    padding: 8px 15px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}

.gradient-header .menu-pills a:hover {
    background-color: #fff;
    color: #AD5F08;
}

/* Top-right vertical menus */
.gradient-header .top-right-menu {
    position: absolute;
    top: 15px;
    right: calc(15px + 0.5cm);
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 3;
}

.gradient-header .top-right-menu a {
    background-color: rgba(255,255,255,0.5175);
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}

.gradient-header .top-right-menu a:hover {
    background-color: #fff;
    color: #AD5F08;
}

/* Symbols container */
.symbols-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 25% MORE TRANSPARENT FLOATING OBJECTS */
.symbols-container span {
    position: absolute;
    color: rgba(255, 255, 200, 0.30);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.35);
    user-select: none;
    animation: float linear infinite;
}

/* Fade-in animation */
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Floating effect */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); opacity: 0.30; }
    50% { opacity: 0.36; }
    100% { transform: translateY(-800px) rotate(360deg); opacity: 0.30; }
}

/* ==========================================================
   PDF VIEW: hide custom header
   ========================================================== */
body[id*="pdf"] .gradient-header,
body[class*="pdf"] .gradient-header,
body:has(#pdfCanvas) .gradient-header,
body:has([src*=".pdf"]) .gradient-header,
body:has(iframe[src*="pdf"]) .gradient-header,
#pdfCanvas ~ .gradient-header {
    display: none !important;
}

/* ==========================================================
   MOBILE: adjust menu-pills to show all items
   ========================================================== */
@media (max-width: 768px) {
    .gradient-header {
        height: auto !important; /* allow header to expand for all pills */
        padding-bottom: 20px;    /* extra spacing */
    }

    .gradient-header .menu-pills {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
    }

    .gradient-header .menu-pills a {
        font-size: 0.85em;
        padding: 6px 10px;
    }
}