/* ==========================================================================
   Section Widget - Styles
   ========================================================================== */

/* ==========================================================================
   Base Section Styles
   ========================================================================== */

.section {
    width: 100%;
    position: relative;
}

/* Background variants */
.section-bg-cosmic {
    background-color: var(--color-cosmic-blue);
}

.section-bg-dark {
    background-color: var(--color-dark-blue);
}

.section-bg-gradient-cosmic {
    background: var(--gradient-dark);
}

.section-bg-gradient-light {
    background: var(--gradient-light);
}

.section-bg-white {
    background-color: var(--color-white);
}

.section-bg-transparent {
    background-color: transparent;
}

.section-bg-younameit {
    background: radial-gradient(66.59% 102.34% at 50% -40.17%, #31578F 0%, #002D73 100%);
}

/* Height variants */
.section-full-height {
    min-height: 100vh;
}

.section-min-height {
    min-height: 100vh;
}

.section-50-height {
    min-height: 50vh;
}

/* Centered content */
.section-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-centered > .container,
.section-centered > .container-fluid,
.section-centered > .container-narrow,
.section-centered > .w-100 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Padding variants */
.section-padding-none {
    padding: 0;
}

.section-padding-small {
    padding: 2rem 0;
}

.section-padding-medium {
    padding: 4rem 0;
}

.section-padding-large {
    padding: 6rem 0;
}

.section-padding-xlarge {
    padding: 10rem 0;
}

/* Narrow container */
.container-narrow {
    max-width: 800px;
}

/* Responsive padding */
@media (max-width: 767px) {
    .section-padding-small {
        padding: 1.5rem 0;
    }

    .section-padding-medium {
        padding: 3rem 0;
    }

    .section-padding-large {
        padding: 4rem 0;
    }

    .section-padding-xlarge {
        padding: 6rem 0;
    }
}

/* ==========================================================================
   Section Title Styles
   ========================================================================== */

.section-title {
    font-family: var(--font-heading) !important;
    font-size: 2.5rem;
    line-height: 1.3;
    margin: 0; 
    padding: 1rem 0;
    width: 100%;
    z-index: 10;
}

/* Title positioning */
.section-title-absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.section-title-relative {
    position: relative;
}

/* Title alignment */
.section-title-center {
    text-align: center;
}

.section-title-left {
    text-align: left;
}

.section-title-right {
    text-align: right;
}

/* Title color variants - for dark backgrounds */
.section-title-light {
    color: var(--color-white) !important;
}

/* Title color variants - for light backgrounds */
.section-title-dark {
    color: var(--color-cosmic-blue) !important;
}

/* Title color variants - accent colors */
.section-title-gold {
    color: var(--color-gold) !important;
}

.section-title-teal {
    color: var(--color-teal) !important;
}

/* Responsive title */
@media (max-width: 767px) {
    .section-title {
        font-size: 1.5rem;
        padding: 0.75rem 1rem;
    }
}

@media (min-width: 1200px) {
    .section-title {
        font-size: 3rem;
    }
}

/* ==========================================================================
   Section Footer Styles
   ========================================================================== */

.section-footer {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0;
    padding: 1rem 0;
    width: 100%;
    z-index: 10;
}

/* Footer positioning */
.section-footer-absolute {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.section-footer-relative {
    position: relative;
}

/* Footer alignment */
.section-footer-center {
    text-align: center;
}

.section-footer-left {
    text-align: left;
}

.section-footer-right {
    text-align: right;
}

/* Footer color variants - default gold */
.section-footer-gold {
    color: var(--color-gold) !important;
}

/* Footer color variants - for dark backgrounds */
.section-footer-light {
    color: var(--color-white) !important;
}

/* Footer color variants - for light backgrounds */
.section-footer-dark {
    color: var(--color-cosmic-blue) !important;
}

/* Footer color variants - accent colors */
.section-footer-teal {
    color: var(--color-teal) !important;
}

/* Responsive footer */
@media (max-width: 767px) {
    .section-footer {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}

@media (min-width: 1200px) {
    .section-footer {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   Section Content Wrapper
   ========================================================================== */

.section-content {
    font-family: var(--font-body);
    width: 100%;
    flex: 1;
}

/* Content alignment */
.section-content-center {
    text-align: center;
}

.section-content-left {
    text-align: left;
}

.section-content-right {
    text-align: right;
}

/* When title/footer are absolute, add padding to content */
.section-has-absolute-title .section-content {
    padding-top: 4rem;
}

.section-has-absolute-footer .section-content {
    padding-bottom: 4rem;
}

@media (max-width: 767px) {
    .section-has-absolute-title .section-content {
        padding-top: 3rem;
    }

    .section-has-absolute-footer .section-content {
        padding-bottom: 3rem;
    }
}

/* ==========================================================================
   Legacy Support - Question Text & Event Details
   ========================================================================== */

/* These styles maintain backward compatibility with existing markup */
.question-text {
    font-family: var(--font-heading) !important;
    font-size: 2.5rem;
    color: var(--color-dark-blue) !important;
    line-height: 1.3;
    margin: 0 0 3rem 0;
    max-width: 800px;
}

.event-details {
    font-family: var(--font-heading) !important;
    font-size: 2.5rem;
    color: var(--color-gold) !important;
    line-height: 1.3;
    margin: 3rem 0 0 0;
}

@media (max-width: 767px) {
    .question-text {
        font-size: 1.5rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .event-details {
        font-size: 1.5rem;
        margin-top: 2rem;
        padding: 0 1rem;
    }
}

@media (min-width: 1200px) {
    .question-text {
        font-size: 2.5rem;
    }

    .event-details {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   Section Content Text Styles
   ========================================================================== */

/* Content text - Alegreya font with line break preservation */
.section-text {
    font-family: var(--font-body) !important;
    font-size: 1.1rem;
    line-height: 1.8;
    white-space: pre-line; /* Preserves newlines from text */
    margin: 1.5rem 0;
    /* max-width: 800px; */
}

/* Color variants for content text */
.section-text-light {
    color: var(--color-white) !important;
}

.section-text-dark {
    color: var(--color-cosmic-blue) !important;
}

.section-text-muted {
    color: var(--color-light-blue) !important;
}

/* Responsive content text */
@media (max-width: 767px) {
    .section-text {
        font-size: 1rem;
        padding: 0 1rem;
    }
}

@media (min-width: 1200px) {
    .section-text {
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   Text Utility Classes - For inline styling within content
   ========================================================================== */

/* Bold text */
.text-bold {
    font-weight: 700;
}

/* Gold/Accent text */
.text-gold {
    color: var(--color-gold) !important;
}

/* Teal text */
.text-teal {
    color: var(--color-teal) !important;
}

/* White text */
.text-white {
    color: var(--color-white) !important;
}

/* Dark text */
.text-dark {
    color: var(--color-cosmic-blue) !important;
}

/* Italic text */
.text-italic {
    font-style: italic;
}

/* Uppercase text */
.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Larger text for emphasis */
.text-large {
    font-size: 1.3em;
}

/* Smaller text */
.text-small {
    font-size: 0.85em;
}

/* Heading font (Megrim) for special emphasis */
.text-heading-font {
    font-family: var(--font-heading) !important;
}

/* Number font (Playfair) for dates, prices */
.text-number-font {
    font-family: var(--font-numbers) !important;
}

/* ==========================================================================
   Hero Tagline (moved from site.css)
   ========================================================================== */

.hero-tagline {
    font-family: var(--font-heading) !important;
    font-size: 1.1rem;
    color: var(--color-white) !important;
    letter-spacing: 0.15em;
    margin-top: 3rem;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .hero-tagline {
        font-size: 0.85rem;
        letter-spacing: 0.1em;
        margin-top: 2rem;
        padding: 0 1rem;
    }
}

@media (min-width: 1200px) {
    .hero-tagline {
        font-size: 1.2rem;
    }
}