/* =========================
   Main About Page Layout
   ========================= */
.about-main {
    min-height: 100vh;
    padding-bottom: 3rem;
    position: relative;
    z-index: 1;
}
.about-sections-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
    align-items: flex-start;
}

/* =========================
   General Info Section Styles
   ========================= */
.general-info-section-main {
    flex: 1 1 350px;
    max-width: 500px;
    min-width: 300px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgba(30,30,60,0.07);    
    border-radius: 22px;
}
.general-info-section {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff; /* or your desired background */
    padding-left: 2.5vw !important;
    padding-right: 2.5vw !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    border-top: 2.5px solid #e3e3f2;
    border-left: 2.5px solid #e3e3f2;
    border-right: 2.5px solid #e3e3f2;
}
.general-info-end-section {
    border-bottom: 2.5px solid #e3e3f2;
    border-radius: 0 0 22px 22px !important;
}
.general-info-section h2 {
    color: #392F5A;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}
.general-info-section h3 {
    font-size: 1.5rem;
}

/* =========================
   FAQ Section Styles
   ========================= */
.faq-section-main {
    flex: 1 1 350px;
    max-width: 500px;
    min-width: 300px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgba(30,30,60,0.07);
    border-radius: 22px;
}
.faq-travel-section {
    border-radius: 0 0 22px 22px !important;
    border-bottom: 2.5px solid #e3e3f2;
}
.faq-section {
    position: relative;
    border-radius: 0;
    box-shadow: none !important;
    background: #fff; /* or your desired background */
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    border-top: 2.5px solid #e3e3f2;
    border-left: 2.5px solid #e3e3f2;
    border-right: 2.5px solid #e3e3f2;
}
.faq-section h2 {
    color: #392F5A;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

/* =========================
   FAQ List and Item Styles
   ========================= */
.faq-list {
    margin-top: 1.5rem;
}
.faq-item {
    margin-bottom: 1.2rem;
}

/* =========================
   FAQ Accordion Button Styles
   ========================= */
.faq-question {
    width: 100%;
    background: #392F5A;
    color: #ECD189;
    border: none;
    border-radius: 8px;
    padding: 1rem 2.5rem 1rem 1rem;
    font-size: 1.15rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
    outline: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faq-question.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.faq-answer.open {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}
.faq-arrow {
    display: inline-block;
    transition: transform 0.3s;
    font-size: 1.2em;
    margin-left: 0.5em;
}
.faq-question.open .faq-arrow {
    transform: rotate(90deg);
}

/* =========================
   FAQ Answer Styles
   ========================= */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #2a3e7b;
    color: #ECD189;
    border-radius: 0 0 8px 8px;
    padding: 0 1rem;
    margin-top: 0.2rem;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s;
}
.faq-answer.open {
    max-height: 1000px;
    padding: 1rem;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s;
}

/* =========================
   General Info Section (White Card)
   ========================= */
.general-info-section {
    background: #fff;
    color: #392F5A;
    border-radius: 22px;
    padding: 2.1rem 1.5rem 1.2rem 1.5rem;
    box-shadow: 0 2px 12px 0 rgba(30,30,60,0.07);
    border: 2.5px solid #e3e3f2;
}
.general-info-list a {
    color: #392F5A;
    text-decoration: underline;
}

/* =========================
   Responsive Padding for General Info Section
   ========================= */
@media (max-width: 600px) {
  .general-info-section {
    padding: 1.2rem 0.7rem 0.7rem 0.7rem;
  }
}

/* =========================
   Navy Section Headers
   ========================= */
.navy-header {
    background: #392F5A;
    color: #fff;
    font-family: 'Futura PT', 'Futura', 'Arial', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0.85em 1.2em 0.6em 1.2em;
    margin-bottom: -0.5rem;
    position: relative;
    z-index: 2;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px 0 rgba(30,30,60,0.04);
}
@media (max-width: 600px) {
  .navy-header {
    font-size: 1.35rem;
    padding: 0.7em 0.7em 0.5em 0.7em;
  }
}

/* =========================
   Remove Top Border Radius When Preceded by Header
   ========================= */
.navy-header + .general-info-section,
.navy-header + .faq-section {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* =========================
   Remove Top Margin from First Child in Section
   ========================= */
.general-info-section > *, .faq-section > * {
    margin-top: 0;
}

/* =========================
   Responsive Column Layout for About Sections
   ========================= */
@media (max-width: 1000px) {
    .about-sections-row {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center; /* Center children when stacked */
    }
    .general-info-section-main,
    .faq-section-main {
        max-width: 100%;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================
   Fixed Background Image for About 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;
}

/* =========================
   Remove Default Background for About Page
   ========================= */
body, html {
    background: none !important;
}

/* =========================
   Ensure Proper Stacking Context
   ========================= */
.page-header, .main-header, .about-main, .involved-main, footer {
    position: relative;
    z-index: 1;
}

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