/*--------------------------------------------------------------
  BuddyBoss Child Theme — Custom Styles
  2026-02m-18d — Featured image thumbnails, font override, 111% text
  
  Targets:
  - Global: Atkinson Hyperlegible Next font override + 111% size
  - Blog list: .ratio-wrap > a.entry-media.entry-img > img
  - Single post: figure.entry-media.entry-img.bb-vw-container1 > img
--------------------------------------------------------------*/

/* === GLOBAL: 111% text size === */
html {
    font-size: 111% !important;
}

/* === GLOBAL: Atkinson Hyperlegible Next font override === */
body,
body .site,
.entry-title,
.entry-content,
.widget,
.bb-header,
.buddypanel-menu,
.entry-header,
.entry-meta,
h1, h2, h3, h4, h5, h6,
p, li, a, span, div,
input, textarea, select, button,
.bb-pagination,
.post-title,
.nav-menu,
.site-title,
.site-description,
.comment-body,
.breadcrumb,
.buddypress *,
.bbpress * {
    font-family: 'Atkinson Hyperlegible Next', sans-serif !important;
}

/* === BLOG LIST: Thumbnail 150x150, floated top-right with text wrap === */

/* Kill the ratio-wrap aspect ratio trick — we want a fixed square */
.post-inner-wrap .ratio-wrap {
    padding-bottom: 0 !important;
    position: relative;
    width: 150px;
    height: 150px;
    float: right;
    margin: 0 0 12px 16px;
    overflow: hidden;
    border-radius: 8px;
}

/* Make the link container fill the square */
.post-inner-wrap .ratio-wrap a.entry-media.entry-img {
    position: relative !important;
    display: block;
    width: 150px;
    height: 150px;
}

/* Crop the image to center-fill the 150x150 square */
.post-inner-wrap .ratio-wrap a.entry-media.entry-img img {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover;
    border-radius: 8px;
    position: relative !important;
}

/* Clear floats after each post card */
.post-inner-wrap::after {
    content: "";
    display: table;
    clear: both;
}

/* === SINGLE POST: CSS Grid — thumbnail top-right, content full-width below === */

/* Grid: 2 columns (fluid left + fixed 150px right), auto rows */
.single-post .entry-content-wrap.primary-entry-content {
    display: grid;
    grid-template-columns: 1fr 150px;
    column-gap: 20px;
    row-gap: 0;
}

/* Title: left column */
.single-post .entry-content-wrap.primary-entry-content > .entry-header {
    grid-column: 1;
    grid-row: 1;
}

/* Meta (author/date/comments): left column */
.single-post .entry-content-wrap.primary-entry-content > .entry-meta {
    grid-column: 1;
    grid-row: 2;
}

/* Thumbnail: right column, spans both title and meta rows */
.single-post .entry-content-wrap.primary-entry-content > figure.entry-media.entry-img.bb-vw-container1 {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px;
    /* Kill BuddyBoss viewport-width tricks */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    align-self: start;
}

figure.entry-media.entry-img.bb-vw-container1 img {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover;
    border-radius: 8px;
}

/* Content: full width below both columns */
.single-post .entry-content-wrap.primary-entry-content > .entry-content {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* === MOBILE: Let thumbnails breathe on small screens === */
@media (max-width: 480px) {
    .post-inner-wrap .ratio-wrap {
        float: none;
        width: 100%;
        height: 180px;
        margin: 0 0 12px 0;
        border-radius: 8px;
    }

    .post-inner-wrap .ratio-wrap a.entry-media.entry-img,
    .post-inner-wrap .ratio-wrap a.entry-media.entry-img img {
        width: 100% !important;
        height: 180px !important;
        border-radius: 8px;
    }

    .single-post .entry-content-wrap.primary-entry-content {
        display: block;
    }

    /* Move thumbnail above title on mobile */
    .single-post .entry-content-wrap.primary-entry-content > figure.entry-media.entry-img.bb-vw-container1 {
        order: -1;
    }

    .single-post .entry-content-wrap.primary-entry-content {
        display: flex;
        flex-direction: column;
    }

    figure.entry-media.entry-img.bb-vw-container1 {
        width: 100% !important;
        height: 180px !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        border-radius: 8px;
    }

    figure.entry-media.entry-img.bb-vw-container1 img {
        width: 100% !important;
        height: 180px !important;
    }
}

/* ===== HEADER GAP FIX — 2026-02m-18d ===== */
/* BuddyBoss sticky header uses position:fixed but never sets top/left,
   so they default to 'auto' — any body padding offsets the header.
   Force explicit viewport anchoring + zero body padding. */
body {
    padding: 0 !important;
    margin: 0 !important;
}

.sticky-header .site-header {
    top: 0 !important;
    left: 0 !important;
}

/* ===== BuddyBoss Search Fix — 2026-02m-18d, updated 2026-02m-19d ===== */
/* Safety CSS: hide any stray "Read more" from dummy post on search pages.
   Root cause fixed in PHP (Advanced Excerpt disabled on BP search pages)
   but keeping CSS as a fallback. */
body.search article#post-0 .entry-content > .read-more,
body.search article#post-0 .entry-content > a[href=""].read-more,
body.search .search-hentry .read-more {
    display: none !important;
}