/* ==========================================================================
 * BLOG COMPONENTS  —  front-end styling for the Blog Improvements shortcodes.
 *
 * Migrated from the theme's custom.css; the only change is the class prefix
 * (hkb- → bc-) so it matches the module's markup, which now always emits the
 * "bc" prefix. JS hooks (js-bc-*) are independent of these classes.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * Shared Utilities
 * -------------------------------------------------------------------------- */

.bc-mobile-only  { display: none; }
.bc-desktop-only { display: none; }

@media (max-width: 767px) { .bc-mobile-only  { display: block; } }
@media (min-width: 768px) { .bc-desktop-only { display: block; } }

/* Prevent horizontal overflow on mobile */
@media (max-width: 767px) {
    html,
    body { overflow-x: hidden; }
}

/* Full-bleed breakout on mobile */
@media (max-width: 767px) {
    .bc-slider-wrap.bc-products,
    .bc-posts-wrap {
        position:     relative;
        left:         50%;
        right:        50%;
        margin-left:  -50vw !important;
        margin-right: -50vw !important;
        width:        100vw !important;
        max-width:    100vw !important;
        padding:      30px !important;
    }
}


/* --------------------------------------------------------------------------
 * Whitepaper Block  [blog_whitepaper]
 * Renders as <a> when unlocked, <button> when locked. Both share styling.
 * -------------------------------------------------------------------------- */

.bc-whitepaper-block {
    display:            block;
    width:              100%;
    margin:             0 0 30px;
    padding:            0;
    border:             0;
    background:         var(--bc-whitepaper-bg, #fce6a3);
    color:              inherit;
    font:               inherit;
    text-align:         center;
    text-decoration:    none;
    cursor:             pointer;
    appearance:         none;
    -webkit-appearance: none;
}

.bc-whitepaper-block:focus         { outline: 0; }
.bc-whitepaper-block:focus-visible {
    outline:        2px solid #1d2327;
    outline-offset: 3px;
}

.bc-whitepaper-img,
.bc-whitepaper-label {
    display: block;
}

.bc-whitepaper-img {
    width:    100%;
    height:   200px;
    overflow: hidden;
}

.bc-whitepaper-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.bc-whitepaper-label {
    padding:     15px;
    color:       #1d2327;
    font-family: 'Epunda Slab';
    font-size:   1.2em;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
 * Whitepaper Modal  (locked-state pop-up containing Gravity Form #1)
 * -------------------------------------------------------------------------- */

.bc-whitepaper-modal {
    position:        fixed;
    inset:           0;
    z-index:         2147483647;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
}

.bc-whitepaper-modal[hidden] { display: none; }

.bc-whitepaper-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.6);
    cursor:     pointer;
}

.bc-whitepaper-modal__dialog {
    position:      relative;
    width:         100%;
    max-width:     520px;
    max-height:    calc(100vh - 40px);
    overflow-y:    auto;
    background:    #fff;
    box-shadow:    0 20px 60px rgba(0, 0, 0, 0.3);
}

.bc-whitepaper-modal__close {
    position:        absolute;
    top:             10px;
    right:           10px;
    z-index:         2;
    width:           36px;
    height:          36px;
    padding:         0;
    border:          0;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.9);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.bc-whitepaper-modal__close:hover { background: #fff; }

.bc-whitepaper-modal__close:focus-visible {
    outline:        2px solid #1d2327;
    outline-offset: 2px;
}

.bc-whitepaper-modal__close svg {
    width:  16px;
    height: 16px;
    fill:   #1d2327;
}

.bc-whitepaper-modal__media {
    width:    100%;
    height:   200px;
    overflow: hidden;
}

.bc-whitepaper-modal__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.bc-whitepaper-modal__body {
    padding: 24px;
}

.bc-whitepaper-modal__title {
    margin:      0 0 8px;
    color:       #1d2327;
    font-size:   1.4em;
    line-height: 1.2;
}

.bc-whitepaper-modal__intro {
    margin: 0 0 16px;
    color:  #555;
}

.bc-whitepaper-modal__success {
    margin: 0 0 40px;
}

.bc-whitepaper-modal__download {
    display:         inline-block;
    padding:         12px 24px;
    background:     #d7cd62;
    color:           #271928;
    text-decoration: none;
    border-radius:   99px;
}

.bc-whitepaper-modal__download:hover {
    background: #fbb35d;
    color:      #1d2327;
}

.bc-whitepaper-modal__download:focus-visible {
    outline:        2px solid #1d2327;
    outline-offset: 3px;
}

/* Body lock when modal is open */
body.bc-modal-open { overflow: hidden; }

@media (max-width: 600px) {
    .bc-whitepaper-modal__media { height: 150px; }
    .bc-whitepaper-modal__body  { padding: 20px; }
    .bc-whitepaper-modal__title { font-size: 1.2em; }
}


/* --------------------------------------------------------------------------
 * Product Slider  [blog_product_slider]
 * -------------------------------------------------------------------------- */

/* Wrapper */
.bc-slider-wrap.bc-products {
    position:      relative;
    color:         #fff;
    padding:       15px;
    margin-bottom: 30px;
    background:    var(--bc-products-bg, #6e1e3a);
}

@media (max-width: 767px) {
    .bc-slider-wrap.bc-products { background: #e2f1fd !important; }
}

/* Heading */
.bc-products-heading {
    margin:      0 0 12px;
    font-family: "DM Serif Text", Georgia, "Times New Roman", serif;
    font-weight: 500;
    line-height: 1.3;
    color:       #fff;
    text-align:  center;
}

/* Scrollable track */
.bc-track {
    display:                    flex;
    gap:                        20px;
    overflow-x:                 hidden;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior:            smooth;
}

.bc-track:has(> .bc-slide:only-child) {
    justify-content: center;
}

@media (max-width: 767px) {
    .bc-track { gap: 12px; }
}

/* Slide card */
.bc-slide {
    flex:              0 0 240px;
    width:             240px;
    text-align:        center;
    scroll-snap-align: center;
}

.bc-slide a img {
    width:      100%;
    height:     auto;
    display:    block;
    object-fit: contain;
}

.bc-slide-title {
    margin:      10px 0 0;
    font-weight: 700;
    color:       #fff;
    word-break:  break-word;
}

.bc-slide-price {
    margin:    4px 0 0;
    color:     #fff;
    font-size: .95em;
}

.bc-slide a:focus-visible {
    outline:        2px solid #faab4b;
    outline-offset: 3px;
}

/* Mobile: narrower cards, image-only */
@media (max-width: 767px) {
    .bc-slide                        { flex: 0 0 170px; width: 170px; }
    .bc-track > .bc-slide:only-child { flex: 0 0 100%;  width: 100%; }
    .bc-slide-title,
    .bc-slide-price                  { display: none; }
}

/* Prev / Next arrow buttons */
.bc-prev,
.bc-next {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    border:      0;
    background:  transparent;
    cursor:      pointer;
    padding:     5px;
    line-height: 1;
}

.bc-prev { left:  6px; }
.bc-next { right: 6px; }

.bc-prev svg,
.bc-next svg {
    width:   24px;
    height:  24px;
    display: block;
    fill:    #faab4b;
}

.bc-prev svg { transform: scaleX(-1); }

.bc-prev:disabled,
.bc-next:disabled {
    opacity: 0.3;
    cursor:  not-allowed;
}

.bc-prev:focus-visible,
.bc-next:focus-visible {
    outline:        2px solid #faab4b;
    outline-offset: 3px;
    border-radius:  2px;
}

/* Hide arrows on mobile — native scroll takes over */
@media (max-width: 767px) {
    .bc-prev,
    .bc-next { display: none; }
}


/* --------------------------------------------------------------------------
 * Related Posts  [blog_related_posts]  /  Related FAQs  [blog_related_faqs]
 * -------------------------------------------------------------------------- */

/* Wrapper */
.bc-posts-wrap {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .bc-posts-wrap { background: #f0ebeb !important; }
}

/* Post list */
.bc-posts {
    padding:    0;
    border:     0;
    background: transparent;
}

/* Mobile: horizontal scroll strip */
@media (max-width: 767px) {
    .bc-posts {
        display:                    flex;
        gap:                        12px;
        overflow-x:                 hidden;
        scroll-snap-type:           x mandatory;
        -webkit-overflow-scrolling: touch;
    }
}

/* Desktop: stacked list */
@media (min-width: 992px) {
    .bc-posts {
        display:  block;
        overflow: visible;
    }
}

/* Post card */
.bc-post {
    background: var(--bc-blogpost-bg, #fce6a3);
}

.bc-post.whitepaper {
    background: #faab4b;
}

/* Mobile card sizing */
@media (max-width: 767px) {
    .bc-post                      { flex: 0 0 170px; width: 170px; scroll-snap-align: center; text-align: center; }
    .bc-posts .bc-post:only-child { flex: 0 0 100%;  width: 100%; }
    .bc-post                      { background: transparent !important; }
}

/* Desktop card spacing */
@media (min-width: 992px) {
    .bc-post { min-width: unset; margin-bottom: 18px; }
}

/* Card link */
.bc-post a {
    display: block;
}

.bc-post a:focus-visible {
    outline:        2px solid #20588f;
    outline-offset: 3px;
}

/* Thumbnail */
.bc-post img {
    width:      100%;
    height:     160px;
    object-fit: cover;
    display:    block;
}

@media (min-width: 992px) {
    .bc-post img {
        max-width:  320px;
        width:      100%;
        height:     auto;
        margin:     0 auto;
        object-fit: cover;
    }
}