/* ==========================================================================
   BJC site additions
   Styles for components added on top of the base theme (news, events, gallery,
   search, contact form, member directory, CMS pages). Kept separate so the
   vendor theme files remain untouched.
   ========================================================================== */

:root {
    --bjc-radius: 12px;
    --bjc-border: rgba(0, 0, 0, 0.08);
    --bjc-muted: #6b7280;
}

/* --- Accessibility --------------------------------------------------------- */

.bjc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 10px 18px;
    background: #fff;
    color: #111;
    border-radius: 0 0 var(--bjc-radius) 0;
}

.bjc-skip-link:focus {
    left: 0;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Never let a page scroll sideways on small screens. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Banner ---------------------------------------------------------------- */

.common-banner {
    position: relative;
}

.common-banner__content {
    position: relative;
    z-index: 2;
    padding: 40px 0;
}

.bjc-banner-title {
    color: #fff;
    margin: 0 0 10px;
    font-size: clamp(28px, 5vw, 48px);
    line-height: 1.15;
    word-break: break-word;
}

.bjc-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.bjc-breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    opacity: 0.6;
    color: #fff;
}

.bjc-breadcrumb a,
.bjc-breadcrumb span {
    color: rgba(255, 255, 255, 0.85);
}

.bjc-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- Generic section spacing ---------------------------------------------- */

.bjc-section {
    padding: 80px 0;
}

@media (max-width: 767px) {
    .bjc-section {
        padding: 50px 0;
    }
}

.bjc-section__intro {
    margin-bottom: 40px;
}

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

.bjc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--bjc-border);
    border-radius: var(--bjc-radius);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bjc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}

.bjc-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f1f3f5;
}

.bjc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bjc-card:hover .bjc-card__media img {
    transform: scale(1.05);
}

.bjc-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px;
}

.bjc-card__title {
    font-size: 20px;
    line-height: 1.35;
    margin: 0 0 10px;
}

.bjc-card__title a {
    color: inherit;
}

.bjc-card__text {
    color: var(--bjc-muted);
    margin-bottom: 16px;
    flex: 1 1 auto;
}

.bjc-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 14px;
    color: var(--bjc-muted);
    margin-bottom: 10px;
}

.bjc-card__meta i {
    margin-right: 6px;
}

.bjc-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

.bjc-badge--accent {
    background: var(--primary-color, #14b8a6);
    color: #fff;
}

/* --- Filters / toolbar ----------------------------------------------------- */

.bjc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.bjc-chiplist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bjc-chip {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--bjc-border);
    border-radius: 999px;
    font-size: 14px;
    color: #333;
    background: #fff;
}

.bjc-chip:hover,
.bjc-chip--active {
    background: var(--primary-color, #14b8a6);
    border-color: var(--primary-color, #14b8a6);
    color: #fff;
}

.bjc-searchbar {
    display: flex;
    gap: 8px;
    min-width: 260px;
    flex: 1 1 260px;
    max-width: 420px;
}

.bjc-searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 16px;
    border: 1px solid var(--bjc-border);
    border-radius: var(--bjc-radius);
    background: #fff;
}

.bjc-searchbar button {
    flex: 0 0 auto;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--bjc-radius);
    background: var(--primary-color, #14b8a6);
    color: #fff;
    cursor: pointer;
}

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

.bjc-form .form-row {
    margin-bottom: 18px;
}

.bjc-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.bjc-form .required {
    color: #dc3545;
}

.bjc-form input[type="text"],
.bjc-form input[type="email"],
.bjc-form input[type="tel"],
.bjc-form select,
.bjc-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--bjc-border);
    border-radius: var(--bjc-radius);
    background: #fff;
    font: inherit;
}

.bjc-form textarea {
    min-height: 150px;
    resize: vertical;
}

.bjc-form input:focus,
.bjc-form select:focus,
.bjc-form textarea:focus {
    outline: 2px solid var(--primary-color, #14b8a6);
    outline-offset: 1px;
}

.bjc-form .field-error {
    display: block;
    margin-top: 6px;
    color: #dc3545;
    font-size: 14px;
}

.bjc-alert {
    padding: 14px 18px;
    border-radius: var(--bjc-radius);
    margin-bottom: 22px;
}

.bjc-alert--success {
    background: #e8f7ef;
    color: #14663c;
    border: 1px solid #b7e4c7;
}

.bjc-alert--error {
    background: #fdecec;
    color: #922;
    border: 1px solid #f5c2c7;
}

.bjc-alert--info {
    background: #eef4ff;
    color: #24427a;
    border: 1px solid #c9d9f7;
}

/* Honeypot: hidden from users, visible to naive bots. */
.bjc-hp {
    position: absolute !important;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
}

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

.bjc-article__body {
    font-size: 17px;
    line-height: 1.8;
}

.bjc-article__body img {
    border-radius: var(--bjc-radius);
    margin: 20px 0;
}

.bjc-article__body h2,
.bjc-article__body h3,
.bjc-article__body h4,
.bjc-article__body h5,
.bjc-article__body h6 {
    margin: 32px 0 12px;
}

.bjc-article__body ul,
.bjc-article__body ol {
    margin: 0 0 18px 20px;
}

.bjc-article__body ul li {
    list-style: disc;
}

.bjc-article__body ol li {
    list-style: decimal;
}

.bjc-article__body blockquote {
    margin: 24px 0;
    padding: 18px 24px;
    border-left: 4px solid var(--primary-color, #14b8a6);
    background: #f8f9fa;
    border-radius: 0 var(--bjc-radius) var(--bjc-radius) 0;
}

.bjc-article__body table {
    width: 100%;
    margin-bottom: 20px;
}

/* Wide content scrolls inside itself rather than pushing the page sideways. */
.bjc-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bjc-share {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--bjc-border);
}

.bjc-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #333;
}

.bjc-share a:hover {
    background: var(--primary-color, #14b8a6);
    color: #fff;
}

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

.bjc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.bjc-gallery-item {
    position: relative;
    display: block;
    border-radius: var(--bjc-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f1f3f5;
    cursor: zoom-in;
}

.bjc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.bjc-gallery-item__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
    font-size: 14px;
}

/* --- Team ------------------------------------------------------------------ */

.bjc-team-photo {
    aspect-ratio: 1 / 1;
    background: #f1f3f5;
    overflow: hidden;
}

.bjc-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Directory ------------------------------------------------------------- */

.bjc-directory-card {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--bjc-border);
    border-radius: var(--bjc-radius);
    height: 100%;
    background: #fff;
}

.bjc-directory-card__avatar {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f3f5;
}

.bjc-directory-card__name {
    font-size: 17px;
    margin: 0 0 2px;
}

.bjc-directory-card__meta {
    font-size: 14px;
    color: var(--bjc-muted);
    margin: 0;
}

/* --- Search results -------------------------------------------------------- */

.bjc-result {
    padding: 22px 0;
    border-bottom: 1px solid var(--bjc-border);
}

.bjc-result__title {
    font-size: 20px;
    margin: 8px 0 6px;
}

.bjc-result__url {
    font-size: 14px;
    color: var(--primary-color, #14b8a6);
    word-break: break-all;
}

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

.bjc-empty {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--bjc-border);
    border-radius: var(--bjc-radius);
    color: var(--bjc-muted);
}

.bjc-empty i {
    font-size: 42px;
    display: block;
    margin-bottom: 14px;
    opacity: 0.4;
}

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

.bjc-pagination {
    margin-top: 40px;
}

.bjc-pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.bjc-pagination .page-link {
    border-radius: 8px;
    border: 1px solid var(--bjc-border);
    color: #333;
}

.bjc-pagination .page-item.active .page-link {
    background: var(--primary-color, #14b8a6);
    border-color: var(--primary-color, #14b8a6);
    color: #fff;
}

/* --- Lightbox -------------------------------------------------------------- */

.bjc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.9);
}

.bjc-lightbox.is-open {
    display: flex;
}

.bjc-lightbox__inner {
    max-width: 1000px;
    width: 100%;
    text-align: center;
}

.bjc-lightbox img {
    max-height: 76vh;
    max-width: 100%;
    border-radius: var(--bjc-radius);
}

.bjc-lightbox__meta {
    color: #fff;
    margin-top: 16px;
}

.bjc-lightbox__meta h5 {
    color: #fff;
    margin-bottom: 6px;
}

.bjc-lightbox__meta p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 4px;
    font-size: 14px;
}

.bjc-lightbox__close,
.bjc-lightbox__nav {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.bjc-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
}

.bjc-lightbox__nav--prev {
    left: 24px;
    right: auto;
}

.bjc-lightbox__nav--next {
    right: 24px;
}

@media (max-width: 575px) {
    .bjc-lightbox__nav {
        top: auto;
        bottom: 20px;
        transform: none;
    }
}

/* --- Navbar login button fix --------------------------------------------- */

.header .navbar__menu-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Navbar single-line fix ------------------------------------------------ */
/* Keep logo, nav links, phone block, search & login on one row.
   We reduce padding and gaps — never font-size — so the text stays readable. */

/* Prevent the outer navbar from wrapping */
.header .navbar {
    flex-wrap: nowrap;
}

/* Tighten the gap between logo and menu-wrapper */
.header-secondary .navbar__menu-wrapper {
    gap: 20px;
}

/* Reduce inline padding inside the menu pill so links have more room */
@media (min-width: 1400px) {
    .header-secondary .navbar__menu-wrapper {
        padding-inline-start: 30px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header-secondary .navbar__menu-wrapper {
        padding-inline-start: 16px;
    }
    .header-secondary .main-header__menu-box {
        padding: 14px 20px;
    }
}

/* Shrink horizontal padding on each nav link */
.header-secondary .navbar__item > a {
    padding-left: 10px;
    padding-right: 10px;
}

/* Reduce right padding on the menu block so the phone area fits */
.header-secondary .navbar__menu {
    padding-inline-end: 20px;
}

/* Compact the contact/phone block */
.header-secondary .contact-btn {
    padding-left: 30px;
    padding-right: 30px;
}

/* Reduce gap between search icon and login button */
.header .navbar__options {
    gap: 12px;
}

.header .navbar__mobile-options {
    gap: 12px;
}

/* Slightly smaller login/account button padding */
.header-secondary .navbar__options .btn--primary {
    padding: 14px 28px;
}

/* --- Notice for editors ---------------------------------------------------- */

.bjc-editor-notice {
    padding: 22px;
    border: 1px dashed #f0ad4e;
    background: #fff8ec;
    border-radius: var(--bjc-radius);
    color: #7a5200;
}