/* ==========================================================================
   Template CSS (Bootstrap 5 edition)
   ==========================================================================
   Previously compiled from scss/style.scss, which imported the full
   Bootstrap 4 SCSS source just to theme a handful of Sass variables
   ($primary, $secondary, $light, $dark, etc.) before appending this same
   template-specific block. Now that the site loads Bootstrap 5 straight
   from its CDN build (see header.php/footer.php), there's no local Sass
   compile step any more, so this file is that same template-specific
   block with the old $variables substituted for their literal values:
     $primary:  #E47A2E
     $secondary: #EDF5F7
     $light:    #FFFFFF
     $dark:     #121F38
   scss/style.scss and scss/bootstrap/ are no longer used to build the
   site (left on disk for reference) — this file is what's actually
   loaded. Load order: Bootstrap 5 CDN CSS -> this file -> custom.css,
   so these rules and custom.css's can still override Bootstrap defaults.
   ========================================================================== */

.font-secondary {
    font-family: 'Great Vibes', cursive;
}

.btn-square {
    width: 40px;
    height: 40px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 50px;
    height: 50px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.scroll-to-bottom {
    position: fixed;
    width: 20px;
    left: calc(50% - 10px);
    bottom: 30px;
    z-index: 11;
    -webkit-animation: action 1s infinite alternate;
    animation: action 1s infinite alternate;
}

.back-to-top {
    position: fixed;
    display: none;
    text-align: center;
    right: 15px;
    bottom: 30px;
    z-index: 11;
    -webkit-animation: action 1s infinite alternate;
    animation: action 1s infinite alternate;
}

@-webkit-keyframes action {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-15px);
    }
}

@keyframes action {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-15px);
    }
}

.navbar-dark {
    display: none;
}

.navbar-dark .navbar-nav .nav-link {
    padding: 25px 10px;
    color: #FFFFFF;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    outline: none;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #E47A2E;
}

@media (max-width: 991.98px) {
    .navbar-dark .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1;
}

.section-title {
    margin-bottom: 30px;
}

.section-title::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 2px;
    bottom: 11px;
    left: calc(50% - 80px);
    background: #E47A2E;
}

.section-title::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 2px;
    bottom: 11px;
    right: calc(50% - 80px);
    background: #E47A2E;
}

.btn-play {
    position: relative;
    margin-top: 50px;
    display: block;
    box-sizing: content-box;
    width: 16px;
    height: 26px;
    border-radius: 100%;
    border: none;
    outline: none !important;
    padding: 18px 20px 20px 28px;
    background: #FFFFFF;
}

.btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 100%;
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 100%;
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    left: -1px;
    border-left: 16px solid #E47A2E;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
        opacity: 0;
    }
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

#videoModal .modal-body {
    position: relative;
    padding: 0px;
}

#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #ffffff;
    background: #000000;
    opacity: 1;
}

.timeline .row {
    position: relative;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .timeline::after {
        position: absolute;
        content: "";
        width: 2px;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -1px;
        background: #E47A2E;
    }

    .timeline .row::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
        background: #FFFFFF;
        border: 2px solid #E47A2E;
        transform: rotate(45deg);
        z-index: 1;
    }

    .timeline .row::after {
        content: "\f004";
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        position: absolute;
        top: calc(50% - 10px);
        left: calc(50% - 8px);
        color: #E47A2E;
        z-index: 2;
    }
}

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    transition: .5s;
}

.gallery-item:hover img {
    transform: scale(1.2);
}

.gallery-item a {
    position: absolute;
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    text-decoration: none;
    transition: .5s;
    opacity: 0;
}

.gallery-item:hover a {
    opacity: 1;
}

.bg-gallery {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/gallery.jpg), no-repeat center center;
    background-size: cover;
}

.gallery-carousel .owl-nav {
    position: absolute;
    width: 135px;
    height: 60px;
    top: -90px;
    left: calc(50% - 67px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

.gallery-carousel .owl-nav .owl-prev,
.gallery-carousel .owl-nav .owl-next {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E47A2E;
    background: #FFFFFF;
    font-size: 30px;
}

@media (max-width: 767.98px) {
    #event .border-right {
        border-right: none !important;
    }
}

/* ==========================================================================
   Bootstrap 5 theme overrides
   ==========================================================================
   Bootstrap 5.3's CDN build exposes most of the old Sass-variable theming
   as CSS custom properties, so the rest of the old $primary/$secondary/
   $light/$dark/$border-width/$enable-rounded theming (previously set at
   Sass-compile time) is reapplied here instead, scoped to :root so it
   cascades through every Bootstrap component automatically.
   ========================================================================== */

:root {
    /* Moved here from custom.css — these are the site's actual color
       tokens (used throughout custom.css itself, and by the wedding-app's
       pwa-style.css/hunt-style.css and rsvp.php), not something specific
       to the homepage, so they belong in the shared theme file rather
       than the homepage-only one. This also means the wedding-app pages
       can load theme.css on its own and still have these defined. */
    --e-global-color-astglobalcolor0: #c78665;
    --ast-global-color-0: #c78665;
    --e-global-color-astglobalcolor1: #2a2a2a;
    --ast-global-color-1: #2a2a2a;
    --e-global-color-astglobalcolor2: #2a2a2a;
    --ast-global-color-2: #2a2a2a;
    --e-global-color-astglobalcolor3: #7a7a7a;
    --ast-global-color-3: #7a7a7a;
    --e-global-color-astglobalcolor4: #f3f3f3;
    --ast-global-color-4: #f3f3f3;
    --e-global-color-astglobalcolor5: #ffffff;
    --ast-global-color-5: #ffffff;
    --e-global-color-astglobalcolor6: #2f2d28;
    --ast-global-color-6: #2f2d28;
    --e-global-color-astglobalcolor7: #2f2d28;
    --ast-global-color-7: #2f2d28;
    --e-global-color-astglobalcolor8: rgba(200,134,101,0.12);
    --ast-global-color-8: rgba(200,134,101,0.12);
    --e-global-color-astglobalcolor9: #E47A2E;
    --ast-global-color-9: #E47A2E;
    --e-global-color-astglobalcolor10: #f8f0ec;
    --ast-global-color-10: #f8f0ec;
    --e-global-color-astglobalcolor11: #d9a98c;
    --ast-global-color-11: #d9a98c;
    --bs-primary: #E47A2E;
    --bs-primary-rgb: 228, 122, 46;
    /* Bootstrap's compiled bundle hardcodes this to its own default blue
       (rgba(13,110,253,.25)) rather than deriving it from --bs-primary-rgb
       at runtime — it's what drives the blue glow on a focused input or
       button. Overriding it here fixes that everywhere at once, same
       underlying issue as the nav-pills active-tab color and the
       btn-outline-primary hover/active colors below. */
    --bs-focus-ring-color: rgba(228, 122, 46, .25);
    --bs-secondary: #EDF5F7;
    --bs-secondary-rgb: 237, 245, 247;
    --bs-light: #FFFFFF;
    --bs-light-rgb: 255, 255, 255;
    --bs-dark: #121F38;
    --bs-dark-rgb: 18, 31, 56;
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #818491;
    /* Bootstrap 5.3 added --bs-secondary-color/-rgb as the actual source
       for .text-muted (and .text-body-secondary) - these are separate
       tokens from --bs-body-color, pre-compiled into the CDN bundle as
       Bootstrap's own near-black default (rgba(33,37,41,.75)) regardless
       of what --bs-body-color is set to here, the same kind of
       bundle-hardcoded-default issue as --bs-focus-ring-color above.
       Overriding --bs-body-color alone (as this block already did) left
       every .text-muted on the site using that hardcoded near-black,
       which just read as slightly-too-dark gray on white backgrounds -
       easy to miss - but was flatly unreadable (dark text on a dark
       header) wherever .text-muted landed on a dark background, e.g. the
       GPS status text in wedding-app/hunt.html's header. Matched to the
       same #818491 as --bs-body-color so "muted" text reads as one
       consistent tone everywhere rather than two different grays. */
    --bs-secondary-color: #818491;
    --bs-secondary-color-rgb: 129, 132, 145;
    --bs-body-color-rgb: 129, 132, 145;
    --bs-font-sans-serif: 'Montserrat', sans-serif;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 50rem;
    --bs-border-width: 2px;
}

body {
    font-family: var(--bs-font-sans-serif);
}

/* The old Bootstrap 4 style.css had this exact rule, applying to every
   plain <a> site-wide with no class needed — Bootstrap 5's own default
   (var(--bs-link-color), its own blue) otherwise shows through on any
   link that doesn't carry an explicit color-giving class of its own
   (.text-primary, .btn, a nav link, etc.). Re-added here now that
   style.css is gone, so the next unclassed link doesn't need its own
   one-off fix the way weather.html's "Add more locations" link just
   did. */
a {
    color: #E47A2E;
    text-decoration: none;
    background-color: transparent;
}
a:hover {
    color: #af5617;
    text-decoration: underline;
}
a:not([href]):not([class]) {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #121F38;
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: #E47A2E;
    --bs-btn-border-color: #E47A2E;
    --bs-btn-hover-bg: #cf6c22;
    --bs-btn-hover-border-color: #cf6c22;
    --bs-btn-active-bg: #cf6c22;
    --bs-btn-active-border-color: #cf6c22;
    /* Bootstrap's disabled state is a SEPARATE pair of variables from the
       normal bg/border above, not derived from them — so without this a
       disabled .btn-primary (e.g. the wedding-app's Upload/Save buttons,
       which start disabled until the form is valid) was still falling
       back to Bootstrap's own blue. Only noticed now because the
       wedding-app pages previously got their disabled-state color from
       the old Bootstrap 4 style.css, which did set this explicitly, and
       didn't load theme.css at all. */
    --bs-btn-disabled-bg: #E47A2E;
    --bs-btn-disabled-border-color: #E47A2E;
}

/* Same compiled-bundle issue as .btn-primary above: .btn-outline-primary's
   hover/active colors are hardcoded to Bootstrap's default blue rather
   than following --bs-primary, so without this it flashes blue on hover
   and press (e.g. the footer's "Open the Wedding App" link, the event
   "more details" buttons, the RSVP form's "+ Add Another Guest"). */
.btn-outline-primary {
    --bs-btn-color: #E47A2E;
    --bs-btn-border-color: #E47A2E;
    --bs-btn-hover-bg: #E47A2E;
    --bs-btn-hover-border-color: #E47A2E;
    --bs-btn-disabled-color: #E47A2E;
    --bs-btn-disabled-border-color: #E47A2E;
    --bs-btn-active-bg: #cf6c22;
    --bs-btn-active-border-color: #cf6c22;
}

/* Separate issue from the --bs-btn-* variables above: on a touchscreen,
   tapping any link or button briefly overlays it with the browser's own
   default tap-highlight color — a semi-transparent blue — regardless of
   what the element's own CSS says. That's the "flashes blue on press"
   part. Turning it off everywhere removes that overlay so only this
   theme's own hover/active colors show. */
a, button, .btn {
    -webkit-tap-highlight-color: transparent;
}

/* Bootstrap hardcodes a focused .form-control/.form-select's border AND
   its glow to literal values in the compiled CSS — border-color: #86b7fe
   and box-shadow: 0 0 0 .25rem rgba(13,110,253,.25) — rather than any CSS
   variable, so overriding --bs-primary/--bs-focus-ring-color above never
   touches either one. This is the actual, full rule that was still
   showing blue around a focused input, textarea or select. */
.form-control:focus,
.form-select:focus {
    border-color: #E47A2E;
    box-shadow: 0 0 0 .25rem rgba(228, 122, 46, .25);
}

/* Same hardcoded-literal pattern as above, this time for a checked radio
   or checkbox (e.g. the RSVP form's "Will you be attending?" Yes/No). */
.form-check-input:checked {
    background-color: #E47A2E;
    border-color: #E47A2E;
}
.form-check-input:focus {
    border-color: #E47A2E;
    box-shadow: 0 0 0 .25rem rgba(228, 122, 46, .25);
}

/* Bootstrap 5 dropped .form-group entirely (it was just this one rule) —
   kept here rather than touching every form markup site that still uses
   it across the public and admin pages. */
.form-group {
    margin-bottom: 1rem;
}