/* Volunteer page styles with role colors and consistent typography */

:root {
    /* Role colors from UI mockup */
    --color-frivillig: #90EE90;
    --color-afvikler: #87CEEB;
    --color-arrangor: #FFB6C1;
    --color-praktikant: #FFF59D;
    --color-rudme-lejr: #FFEB3B;
    --color-foreningsmedlem: #B19CD9;
}

/* Enable vertical scrolling on this page */
html, body {
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Background color is set dynamically from volunteer-roles.json via JavaScript */
}

.volunteer-main {
    padding-top: 0; /* No padding, image goes to top */
    background-color: transparent; /* Transparent so body color shows through */
}

/* Hero section with big image - absolute on desktop, relative on mobile */
.hero-section {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    z-index: 1; /* Behind header which has higher z-index */
}

.hero-image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

.hero-text {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 60px;
    font-weight: 400; /* Regular, not bold */
    letter-spacing: -2px;
    color: #111;
    text-align: right;
    padding-top: 490px; /* Position below the absolute hero image */
    margin-bottom: 80px;
    padding-right: 30px;
    position: relative;
    z-index: 10;
    /* Constrain width and push to right */
    max-width: 1000px;
    margin-left: auto; /* This pushes it to the right */
    margin-right: 30px; /* Default right margin for small screens */
}

/* Jobopslag section */
.jobopslag-section {
    padding: 40px 30px;
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin-right: auto;
    margin-left: 30px;
    margin-bottom: 80px;
}

.jobopslag-title {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 90px;
    font-weight: 400;
    letter-spacing: -1px;
    color: #111;
    margin-bottom: 30px;
    text-align: left;
    padding-left: 0;
}

.jobopslag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

.jobopslag-card {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 200px;
}

.jobopslag-card-title {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #111;
    margin: 0;
}

.jobopslag-card-button {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.5px;
    color: #90EE90;
    background-color: #111;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.jobopslag-note {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -1px;
    color: #111;
    text-align: left;
    margin-top: 30px;
    padding-left: 0;
}

/* Roles section */
.roles-section {
    padding: 40px 30px;
    background: transparent; /* Transparent so body color shows through */
    position: relative;
    z-index: 10;
    /* Constrain width and push to right */
    max-width: 900px;
    margin-left: auto; /* This pushes it to the right */
    margin-right: 30px; /* Default right margin */
    margin-bottom: 80px; /* Add spacing after roles section */
}

/* On larger screens, increase margins */
@media (min-width: 1200px) {
    .hero-text {
        margin-right: 60px;
    }

    .jobopslag-section {
        margin-left: 60px;
    }

    .roles-section {
        margin-right: 60px;
    }
}

@media (min-width: 1600px) {
    .hero-text {
        margin-right: 100px;
        max-width: 800px; /* Slightly wider container on very large screens */
    }

    .jobopslag-section {
        margin-left: 100px;
        max-width: 800px;
    }

    .roles-section {
        margin-right: 100px;
        max-width: 800px; /* Match hero text width on large screens */
    }
}

.section-title {
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 90px;
    font-weight: 400; /* Regular */
    letter-spacing: -1px;
    color: #111;
    margin-bottom: 30px;
    text-align: right;
    padding-right: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: 30px;
}

/* Flexbox for role boxes - float right with variable width */
.roles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-end; /* Align boxes to the right */
    /* Remove width constraint since parent container handles it */
}

/* Individual role boxes with colors */
.role-box {
    padding: 12px 20px;
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 42px;
    font-weight: 400; /* Regular, not bold */
    letter-spacing: -1px;
    color: #111;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    width: auto; /* Variable width based on content */
    display: inline-block;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Apply specific colors to each role box */
.role-box[data-role="frivillig"] {
    background-color: var(--color-frivillig);
}

.role-box[data-role="afvikler"] {
    background-color: var(--color-afvikler);
}

.role-box[data-role="arrangor"] {
    background-color: var(--color-arrangor);
}

.role-box[data-role="praktikant"] {
    background-color: var(--color-praktikant);
}

.role-box[data-role="rudme-lejr"] {
    background-color: var(--color-rudme-lejr);
}

.role-box[data-role="foreningsmedlem"] {
    background-color: var(--color-foreningsmedlem);
}

.role-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.role-box:active {
    transform: translateY(-2px);
}

/* Role section styles now use shared section-component.css */
/* Poster/roller section styles now use shared roller-component.css */

/* Add spacing to role sections container */
#role-sections-container {
    margin-top: 80px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .volunteer-main {
        padding-top: 0;
    }

    /* On mobile, use relative positioning for natural document flow */
    .hero-section {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin: 15px 15px 0 15px;
    }

    .hero-text {
        font-size: 28px;
        letter-spacing: -1px;
        padding-right: 0px;
        padding-top: 20px; /* Spacing after the hero image (natural flow) */
        margin-right: 15px; /* Match hero image margin */
        max-width: none; /* Remove max-width constraint on mobile */
        margin-left: 0; /* Full width on mobile, no auto margin */
    }

    .section-title {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .jobopslag-section {
        padding: 20px 15px;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 40px;
    }

    .jobopslag-title {
        font-size: 32px;
        letter-spacing: -1px;
        padding-left: 0;
    }

    .jobopslag-grid {
        gap: 8px;
    }

    .jobopslag-card {
        min-width: unset;
        width: 100%;
        padding: 16px;
    }

    .jobopslag-card-title {
        font-size: 18px;
    }

    .jobopslag-card-button {
        font-size: 14px;
        padding: 10px 16px;
    }

    .jobopslag-note {
        font-size: 20px;
        padding-left: 0;
    }

    .roles-section {
        padding: 10px 15px;
        max-width: none; /* Full width on mobile */
        margin-left: 0;
        margin-right: 0;
    }

    .roles-grid {
        gap: 8px;
    }

    .role-box {
        font-size: 20px; /* Bigger text on mobile */
        letter-spacing: -0.5px;
        padding: 10px 18px; /* Bigger padding for larger boxes */
    }

    .roles-section {
        padding: 10px 15px;
    }
}