/* =============================================================================
 * App ↔ Template bridge
 *
 * Small overrides to make Yii2 widgets render cleanly on top of the new
 * "Cappa" template (Bootstrap 5). It does NOT change any business logic; it
 * only polishes the presentation where the widgets still emit legacy markup.
 * ========================================================================== */

/* Body tweaks so the template's fonts and colors win over Yii bootstrap-3 resets. */
body {
    font-family: "Outfit", sans-serif;
    background: #fff;
}

/* Make old BS3 column offset classes usable even when only BS5 grid is active. */
.col-md-offset-3 { margin-left: 25%; }
.col-md-offset-1 { margin-left: 8.333333%; }

/* Yii ActiveForm fields inside the template's .form1 booking-box */
.booking-inner .form-group,
.form1 .form-group {
    margin-bottom: 20px;
}
.booking-inner .form-group label,
.form1 .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}
.booking-inner .help-block,
.form1 .help-block {
    display: block;
    margin-top: 5px;
    color: #dc3545;
    font-size: 0.875em;
    min-height: 1em;
}
.booking-inner .has-error .form-control,
.form1 .has-error .form-control {
    border-color: #dc3545;
}

/* Hidden honeypot field used by forms */
.work-email {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.hidden { display: none !important; }

/* Template breadcrumbs inside inner-page banner */
.breadcrumb-template {
    display: inline-flex;
    justify-content: center;
    background: transparent;
    padding: 0;
    margin-top: 15px;
    color: #fff;
    font-size: 14px;
}
.breadcrumb-template a { color: #fff; text-decoration: none; }
.breadcrumb-template a:hover { text-decoration: underline; }
.breadcrumb-template .active { color: rgba(255,255,255,0.8); }
.breadcrumb-template > li + li::before { content: "\00a0/\00a0"; padding: 0 4px; }

/* Cookie bar - use template colors */
#cookiebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 20px 0;
    z-index: 2000;
    font-size: 14px;
}
#cookiebar h3 { color: #fff; font-size: 18px; margin: 0 0 8px; }
#cookiebar p { margin: 0; }
#cookiebar a { color: #fff; text-decoration: underline; }
#cookiebar #okcookies { margin-right: 10px; }

/* Alert widget from Yii2 – template-safe look */
.alert {
    padding: 12px 18px;
    border-radius: 4px;
    margin-bottom: 20px;
}
.alert-success { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.alert-danger, .alert-error { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
.alert-info { background: #cff4fc; color: #055160; border: 1px solid #b6effb; }
.alert-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }

/* LinkPager (pagination) styled for template */
.pagination {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}
.pagination > li > a,
.pagination > li > span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #e5e5e5;
    color: #333;
    text-decoration: none;
    background: #fff;
}
.pagination > li.active > span,
.pagination > li.active > a {
    background: #333;
    color: #fff;
    border-color: #333;
}
.pagination > li.disabled > span {
    color: #aaa;
    cursor: not-allowed;
}

/* Page content body – typography inside CMS-generated content */
.page-content-body img { max-width: 100%; height: auto; }
.page-content-body h1,
.page-content-body h2,
.page-content-body h3,
.page-content-body h4 { margin: 1.2em 0 0.6em; }
.page-content-body p { margin-bottom: 1em; line-height: 1.7; }
.page-content-body ul,
.page-content-body ol { margin-bottom: 1em; padding-left: 1.4em; }

/* Inner page banner breadcrumbs container (keep caption centered) */
.banner-header .breadcrumb-template { margin: 15px auto 0; }

/* Footer tweaks */
.footer .footer-column .btn-store,
.footer .footer-stores a {
    color: #fff;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Keep Yii2 kartik/dialog modals visible over template */
.bootstrap-dialog { z-index: 9999 !important; }

/* ----------------------------------------------------------------------------
 * Invert the logo while the page is at the top (navbar is still transparent
 * over the dark hero image). As soon as the user scrolls the template adds
 * `.nav-scroll` to the navbar → the logo returns to its natural colors
 * against the white sticky bar.
 * -------------------------------------------------------------------------- */
.navbar .logo-img {
    transition: filter 0.25s ease;
}
.navbar:not(.nav-scroll) .logo-img {
    filter: invert(1) brightness(1.1);
}

/* ----------------------------------------------------------------------------
 * Home hero carousel (.slider-fade) – mirrors the template's .banner-header
 * typography so the headline uses the "Shadows Into Light" handwritten font
 * exactly like the static hero did.
 * -------------------------------------------------------------------------- */
.slider-fade .item .caption h1 {
    font-family: "Shadows Into Light", cursive;
    position: relative;
    font-size: 120px;
    line-height: 1em;
    color: #fff;
    margin-bottom: 15px;
}
.slider-fade .item .caption h1 span {
    color: #7e9dcb;
}
.slider-fade .item .caption h5 {
    position: relative;
    margin-bottom: 15px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1.5em;
    text-transform: uppercase;
}
.slider-fade .item .caption h5 + h1 {
    margin-top: 10px;
}
@media screen and (max-width: 991px) {
    .slider-fade .item .caption h1 {
        font-size: 60px;
        letter-spacing: 0;
        line-height: 60px;
    }
    .slider-fade .item .caption h1 span {
        font-size: 20px;
    }
}