/**
 * Brand-only styles — gradients, background images, filters.
 * Layout & spacing → Bootstrap 5 utilities in views.
 * Fonts & sizes → public-typography.css
 */

body {
    overflow-x: hidden !important;
}

/* Footer: gradient + background image + logo filter */
.public-footer {
    background-image: linear-gradient(
        to bottom,
        rgba(247, 148, 29, 0.82) 0%,
        rgba(227, 82, 22, 0.90) 45%,
        rgba(190, 58, 14, 0.98) 85%,
        var(--jm-color-orange-dark) 100%
    ), url('/assets/public/images/bg-footer.webp');
    background-color: var(--jm-color-orange-dark);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.public-cms-section--about,
.public-cms-section--purpose,
.public-cms-section--gallery,
.public-cms-section--partner,
.public-cms-section--event {
    padding: 100px 0;
}

.section--gallery {
    padding-top: 50px;
}

.public-footer__logo {
    filter: brightness(0) invert(1);
}

/* CMS section: theme backgrounds & dynamic images */
.public-cms-section--hero {
    background-color: #000000;
    padding-top: 180px;
}

.public-cms-section--about {
    background-color: #fff9ef;
}

.public-cms-section--purpose {
    background-color: #fbf6ee;
}

.public-cms-section--event {
    background-color: #f4f4f4;
}

.public-cms-section--register {
    background: linear-gradient(to bottom, #111111 0%, #1e1611 40%, #3a1f0b 100%);
}

.public-cms-section--gallery {
    background: #000000;
}

.public-cms-section--testimony {
    background: linear-gradient(to right, #4A4E2E 0%, #231F20 100%);
}

.public-cms-section--content-banner {
    background: var(--public-cms-content-bg, none) center no-repeat;
    background-size: cover;
}

/* Card overlays: gradient scrims */
.public-cms-section__card-overlay--event {
    background: linear-gradient(
        to top,
        #000 0%,
        #000 25%,
        rgba(0, 0, 0, 0.6) 50%,
        transparent 100%
    );
}

.public-cms-section__card-overlay--gallery {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        transparent 70%
    );
}

/* Brand CTA button (orange not in Bootstrap palette) */
.btn-brand {
    background-color: var(--jm-color-orange);
    border-color: var(--jm-color-orange);
    color: var(--jm-color-white);
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--jm-color-orange-hover);
    border-color: var(--jm-color-orange-hover);
    color: var(--jm-color-white);
}

/* Legacy SiteSettings footer component */
.public-footer--legacy-dark {
    background: none;
}

.public-footer--legacy-dark .public-footer__inner {
    background-color: #2b2b2b;
}

/* Portrait ratio 4:5 (Bootstrap ratio only has 1x1, 4x3, 16x9, 21x9) */
.ratio-portrait {
    --bs-aspect-ratio: 125%;
}

.ratio-landscape {
    --bs-aspect-ratio: 80%;
}

.scrollToTop {
    background-color: var(--jm-color-orange);
}

/* Custom page scrollbar — target html (viewport scroll container) */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--jm-color-accent) var(--jm-color-cream);
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track {
    background: var(--jm-color-cream);
}

html::-webkit-scrollbar-thumb {
    background-color: var(--jm-color-accent);
    border-radius: 4px;
    border: 2px solid var(--jm-color-cream);
}

html::-webkit-scrollbar-thumb:hover {
    background-color: var(--jm-color-orange-hover);
}