/* ---------------------------------------------------------------------------
   Site additions layered over the Bootstrap template in style.css.
   Custom properties mirror the brand palette defined in config/config.php.
   --------------------------------------------------------------------------- */

:root {
    --brand:        #06BBCC;
    --brand-dark:   #049aa8;
    --accent:       #F57905;
    --ink:          #181d38;
    --muted:        #5a6482;
    --line:         #e4e9f2;
    --surface:      #ffffff;
    --surface-alt:  #f4f7fb;
    --shadow:       0 10px 40px rgba(24, 29, 56, .10);
    --radius:       .75rem;
}

/* Keyboard users need to be able to jump the nav. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: var(--ink);
    color: #fff;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
    left: 0;
}

/* --- Page header ---------------------------------------------------------- */

.page-header {
    background: linear-gradient(rgba(24, 29, 56, .82), rgba(24, 29, 56, .82)),
                url('../img/carousel-1.jpg') center center / cover no-repeat;
}
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .6); }
.page-header .breadcrumb-item a { color: var(--accent); text-decoration: none; }
.page-header .breadcrumb-item.active { color: rgba(255, 255, 255, .85); }

/* --- Cards ---------------------------------------------------------------- */

.inb-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    height: 100%;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.inb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.inb-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.inb-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inb-card__body { padding: 1.5rem; }
.inb-card__title { font-size: 1.15rem; margin-bottom: .5rem; color: var(--ink); }
.inb-card__meta { font-size: .85rem; color: var(--muted); }

.inb-icon {
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(6, 187, 204, .10);
    color: var(--brand);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

/* --- Filter pills --------------------------------------------------------- */

.filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; }
.filter-pill {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    border-radius: 999px;
    padding: .5rem 1.25rem;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
}
.filter-pill:hover { border-color: var(--brand); color: var(--brand); }
.filter-pill.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Forms ---------------------------------------------------------------- */

.inb-form .form-control,
.inb-form .form-select {
    border-radius: .5rem;
    border: 1px solid var(--line);
    padding: .85rem 1rem;
}
.inb-form .form-control:focus,
.inb-form .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(6, 187, 204, .15);
}
.inb-form label { font-weight: 500; margin-bottom: .35rem; color: var(--ink); }
.inb-form .form-text { color: var(--muted); font-size: .85rem; }
.required-mark { color: var(--accent); }

/* --- Article -------------------------------------------------------------- */

.article-body { font-size: 1.05rem; line-height: 1.85; color: #2c3350; }
.article-body p { margin-bottom: 1.25rem; }
.article-body strong { color: var(--ink); }

.article-meta {
    display: flex; flex-wrap: wrap; gap: 1rem;
    color: var(--muted); font-size: .9rem;
    padding-bottom: 1.25rem; margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--line);
}

.comment {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    background: var(--surface);
}
.comment__head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.comment__name { font-weight: 600; color: var(--ink); }
.comment__time { color: var(--muted); font-size: .85rem; }
.comment__body { margin: 0; color: #2c3350; white-space: pre-wrap; }

/* --- Gallery -------------------------------------------------------------- */

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-alt); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
    position: absolute; inset: auto 0 0 0;
    padding: 1.5rem 1rem .85rem;
    background: linear-gradient(transparent, rgba(24, 29, 56, .85));
    color: #fff; font-size: .9rem;
}

/* --- Map ------------------------------------------------------------------ */

.map-frame { width: 100%; min-height: 380px; border: 0; border-radius: var(--radius); }

/* --- Empty state ---------------------------------------------------------- */

.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    background: var(--surface-alt);
}
.empty-state i { font-size: 2.5rem; color: var(--brand); margin-bottom: 1rem; display: block; }

/* --- Pagination ----------------------------------------------------------- */

.inb-pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.inb-pagination a,
.inb-pagination span {
    min-width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: .5rem;
    color: var(--muted); text-decoration: none;
}
.inb-pagination a:hover { border-color: var(--brand); color: var(--brand); }
.inb-pagination .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Footer overlap guards --------------------------------------------------
   Two fixes for content bleeding over the footer.

   1. The template's team "diamond" is a 200px pseudo-element pulled up with
      top:-101px. It was sized for the original owl-carousel markup, which
      compensated with `.team-img-icon { margin-top:-200px }`. The rewritten
      team cards do not use that wrapper, so the decoration had nothing pulling
      it back and overflowed ~200px into the next section.
   2. The footer had no stacking context, so anything overflowing from the
      section above painted on top of it.
   --------------------------------------------------------------------------- */

.team-content::before {
    display: none;
}

.container-fluid.footer {
    position: relative;
    z-index: 5;
    clear: both;
    margin-top: 0;
}

/* Reserve a safe area at the very bottom of the page.
   The chat bubble and translate button are position:fixed at bottom-left, so
   once the visitor scrolls to the end they sit on top of whatever occupies
   that corner — which was the copyright line. The padding lifts the last row
   clear, so the widgets float over empty space instead of over text.

   Applied to the outer .container-fluid, not the inner .container: that one
   carries Bootstrap's .pb-4, and the spacing utilities are declared
   !important, so a plain rule on it is simply ignored. */
.container-fluid.footer {
    padding-bottom: 6.5rem;
}

@media (max-width: 767px) {
    .container-fluid.footer { padding-bottom: 5.5rem; }
}

/* Decorative overflow stays inside its own section rather than running on into
   the next one. Applied to the wrapper, not to individual sections, so the
   deliberately offset About images are not clipped. */
main#main > .container-fluid:last-child,
main#main > section:last-child {
    margin-bottom: 0;
}

/* Respect a stated preference for less motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .animated, .wow { visibility: visible !important; }
}