/* =========================
   Base Styles for Get Involved Page
   ========================= */
body {
    min-height: 100vh;
    color: #392F5A !important;
}
html {
    background: none;
}

/* =========================
   Section Backgrounds and Overlays
   ========================= */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 32px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.section-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 32px;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.65); /* white overlay for readability */
}
.section-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2.2rem 1.2rem 1.2rem 1.2rem;
  text-align: center;
}

/* =========================
   Section Background Images for Each Involvement Type
   ========================= */
.volunteer-bg { background-image: url('/images/Volunteer.jpg'); }
.photographer-bg { background-image: url('/images/photo.jpeg'); }
.art-vendor-bg { background-image: url('/images/vendor1.jpg'); }
.food-vendor-bg { background-image: url('/images/Food.jpg'); }
.performer-bg { background-image: url('/images/Hunter.jpg'); }
.involved-intro-bg { background-image: url('/images/involved-1.jpeg'); }

/* Special case for intro section background */
.section-bg.involved-intro-bg {
  background-image: url('/images/involved-1.jpeg');
}

/* =========================
   Fixed Body Background for the Page
   ========================= */
.body-bg-fixed {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1000;
    background: url('/images/aubfest-background3.png') center center / cover no-repeat fixed;
    pointer-events: none;
}

/* =========================
   Ensure Main Content is Above Background
   ========================= */
.involved-main, .page-header, .main-header, footer {
    position: relative;
    z-index: 1;
}

/* =========================
   Remove Background from Main Content for Transparency
   ========================= */
.involved-main, .container {
    background: transparent !important;
}

/* =========================
   Main Content Layout
   ========================= */
.involved-main {
    padding: 2rem 0;
    min-height: 100vh;
}

.content-section,
.content-section p,
.get-involved-section,
.get-involved-section p {
    color: #392F5A !important;
}

/* =========================
   Section Box Styles
   ========================= */
.involved-section-box {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    border: 3px solid #392F5A;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background: none !important;
}
.involved-section-box:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}

/* =========================
   Section Box Headings and Paragraphs
   ========================= */
.involved-section-box h2 {
    margin-top: 0;
    color: #392F5A;
    font-size: 2.2rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
}
.involved-section-box p {
    color: #392F5A;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
}

/* =========================
   Apply Button and Navigation Link Styles
   ========================= */
.involved-section-box .apply-btn, .involved-nav-link {
    display: inline-block;
    background: #392F5A;
    color: #ECD189 !important;
    border: 2px solid #ECD189;
    border-radius: 8px;
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
}
.involved-section-box .apply-btn:hover, .involved-nav-link:hover {
    background: #241c38;
    color: #ECD189 !important;
    border-color: #ECD189;
}

/* =========================
   Section Box Background Image Compression
   ========================= */
.involved-section-box[style*="background-image"],
.involved-section-box.has-bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}

/* =========================
   Section Box Image Compression
   ========================= */
.involved-section-box img.bg-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    margin-bottom: 1rem;
}

/* =========================
   Responsive Styles for Section Boxes and Navigation
   ========================= */
@media (max-width: 530px) {
    .involved-section-box {
        padding: 1.2rem 0.7rem;
    }
    .involved-section-box.involved-intro-section .involved-nav-link {
        display: block;
        margin: 0.5em auto;
        width: 80%;
    }
    .involved-section-box h2 {
        font-size: 1.6rem;
    }
}

/* =========================
   Larger Font for Desktop
   ========================= */
@media (min-width: 901px) {
  body.involved-page .involved-section-box p {
    font-size: 1.7em !important;
  }
  body.involved-page,
  body.involved-page .content-section,
  body.involved-page .content-section p,
  body.involved-page .get-involved-section,
  body.involved-page .get-involved-section p {
    font-size: 1.7em !important;
  }
}

/* =========================
   Disable Smooth Scroll for Anchor Links
   ========================= */
html.scrolling-to-anchor {
  scroll-behavior: auto !important;
}

/* =========================
   Mobile Background Attachment Fixes
   ========================= */
@media (hover: none) and (pointer: coarse) {
  .body-bg-fixed {
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .involved-section-box,
  .involved-section-box.has-bg {
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

/* =========================
   Remove Parallax on Mobile for Section Backgrounds
   ========================= */
@media (hover: none) and (pointer: coarse) {
  .section-bg,
  .volunteer-bg,
  .photographer-bg,
  .art-vendor-bg,
  .food-vendor-bg,
  .performer-bg,
  .involved-intro-bg {
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

/* =========================
   Remove Parallax on Mobile for Inline Backgrounds
   ========================= */
@media (hover: none) and (pointer: coarse) {
  .involved-section-box > div[style*="fixed"] {
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}