/* ================================================
   The Smart 10 — Site-wide custom styles
   Color refs: #c2b599 gold, #2a2825 dark, #6a6967 gray
   v1.1
================================================ */

/* ── Homepage: strip the 80px top/bottom padding from .content.entry and lock backgrounds to white ── */
.home .content.entry {
    padding-top: 36px;
    padding-bottom: 40px;
    background: #fff;
}

/* ── Align sidebar top with featured post tags ── */
.home .sidebar {
    padding-top: 36px;
}
.home .blog,
.home .ms_featured_home_post,
.home .ms_masonry_grid,
.home .cmsmasters_post_masonry {
    background: transparent;
}

/* ── Tighten gap below carousel → posts/sidebar on homepage (non-home fallback) ── */
.ms_posts_carousel_wrap ~ .middle_content {
    padding-top: 36px;
}

/* ── Tighten gap between post nav and comments ── */
.single .post_nav {
    padding-bottom: 20px;
}

/* ── Fix prev/next post titles breaking mid-word (e.g. "THA T'LL", "YO U") ── */
.post_nav .cmsmasters_prev_post .post_nav_title_wrap .post_nav_title,
.post_nav .cmsmasters_next_post .post_nav_title_wrap .post_nav_title {
    word-break: normal;
    overflow-wrap: break-word;
}

/* ── Fix titles breaking mid-word on narrow/mobile viewports (e.g. "Top 10 Camping Gif/ts").
   Core theme CSS forces word-break: break-all on several title-bearing selectors, which lets
   the browser split anywhere instead of at a word boundary once a line is too narrow to fit
   the whole word — hits both single-post/category headline banners (shared .entry-title
   markup, template-functions.php) and blog-list post titles. Safari/Edge on mobile trigger it
   more readily than desktop since the container is narrower. ── */
.headline_outer .headline_inner .headline_text .entry-title,
.cmsmasters_post_default .cmsmasters_post_header .cmsmasters_post_title,
.cmsmasters_breadcrumbs .cmsmasters_breadcrumbs_inner,
.widget_recent_entries ul li a {
    word-break: normal;
    overflow-wrap: break-word;
}

/* ── Fix real root cause of the mobile word-break bug: the theme's Customizer logo settings
   generate an inline <style> block that force-sets the retina logo image to its raw uploaded
   pixel width (width: 1086px, with no media query or cap), instead of scaling it to fit the
   180px logo_wrap container. That forces the ENTIRE page 1086px+ wide on every viewport,
   which is what pushes titles into the break-all wrapping above in the first place on any
   screen narrower than ~1086px (effectively all mobile). !important is required since the
   offending rule is a same-page inline <style> block with matching specificity. ── */
.header_mid_inner .logo img.logo_retina {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

.single .comment-respond {
    margin-top: 16px;
}

/* ── Affiliate Disclosure Box ─────────────────── */
.ms_affiliate_disclosure {
    margin: 36px 0 28px;
    padding: 14px 18px;
    border-left: 4px solid #c2b599;
    background: #faf9f7;
    border-radius: 0 3px 3px 0;
}

.ms_affiliate_disclosure p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #6a6967;
}

.ms_affiliate_disclosure strong {
    color: #2a2825;
    font-weight: 600;
}

.ms_affiliate_disclosure a {
    color: #c2b599;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.ms_affiliate_disclosure a:hover {
    border-bottom-color: #c2b599;
}

/* ── Featured first post (homepage) ────────────────────────────────── */
.ms_featured_home_post {
    margin-bottom: 44px;
    text-align: center;
}

/* Category tags */
.ms_featured_home_cats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}
.ms_featured_home_cat {
    display: inline-block;
    background: #c2b599;
    color: #fff;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 9px;
    text-decoration: none;
    transition: background 0.2s;
}
.ms_featured_home_cat:hover {
    background: #2a2825;
}

/* Title */
.ms_featured_home_title {
    font-size: 22px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.35;
    margin: 0 0 14px;
}
.ms_featured_home_title a {
    color: #2a2825;
    text-decoration: none;
}
.ms_featured_home_title a:hover {
    color: #c2b599;
}

/* Date */
.ms_featured_home_date {
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #959492;
    margin: 0 0 24px;
}

/* Image */
.ms_featured_home_img {
    margin-bottom: 24px;
    overflow: hidden;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}
.ms_featured_home_img img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}
.ms_featured_home_img a:hover img {
    transform: scale(1.02);
}

/* Excerpt */
.ms_featured_home_excerpt {
    color: #6a6967;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 auto 20px;
    max-width: 520px;
}

/* Read More button — matches collage cards */
.ms_featured_home_more {
    display: inline-block;
    border: 1px solid #c2b599;
    background: #f3f2f3;
    color: #2a2825;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 7px 18px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.ms_featured_home_more:hover {
    background: #c2b599;
    color: #fff;
}

/* ── Divider between featured post and collage grid ─────────────────── */
.ms_home_divider {
    height: 1px;
    background: #e6e6e6;
    margin: 44px 0 0;
}
.ms_home_divider span { display: none; }

/* ── Homepage masonry grid ───────────────────────────────────────────── */

/* Container: Isotope needs position:relative */
.ms_masonry_grid {
    position: relative;
    margin-top: 36px;
}

/* 2-column item width: 50% minus half the 28px gutter (gutter handled by Isotope JS) */
.ms_masonry_grid article.cmsmasters_post_masonry {
    width: calc(50% - 14px);
    margin-bottom: 44px;
    box-sizing: border-box;
}

/* Image: natural height so masonry stagger works */
.cmsmasters_post_masonry .cmsmasters_img_wrap {
    overflow: hidden;
    display: block;
}

.cmsmasters_post_masonry .cmsmasters_img_link {
    display: block;
    overflow: hidden;
}

.cmsmasters_post_masonry .cmsmasters_img_wrap img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.cmsmasters_post_masonry .cmsmasters_img_link:hover img {
    transform: scale(1.03);
}

/* Category tags below image */
.cmsmasters_post_masonry .cmsmasters_post_category {
    display: block;
    margin: 10px 0 0;
}

.cmsmasters_post_masonry .cmsmasters_cat_color {
    display: inline-block;
    background: #c2b599;
    color: #fff;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 8px;
    text-decoration: none;
    margin-right: 4px;
    margin-bottom: 4px;
    transition: background 0.2s;
}

.cmsmasters_post_masonry .cmsmasters_cat_color:hover {
    background: #2a2825;
}

/* Title */
.cmsmasters_post_masonry .cmsmasters_post_title {
    font-size: 13px;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.45;
    margin: 12px 0 6px;
}

.cmsmasters_post_masonry .cmsmasters_post_title a {
    color: #2a2825;
    text-decoration: none;
}

.cmsmasters_post_masonry .cmsmasters_post_title a:hover {
    color: #c2b599;
}

/* Date */
.cmsmasters_post_masonry .cmsmasters_post_cont_info {
    margin-bottom: 8px;
}

.cmsmasters_post_date abbr {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #959492;
    text-decoration: none;
    border: none;
    cursor: default;
}

/* Excerpt */
.cmsmasters_post_masonry .cmsmasters_post_content p {
    color: #6a6967;
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 14px;
}

/* Read More */
.cmsmasters_read_more_wrap {
    margin-top: 4px;
}

.cmsmasters_post_read_more {
    display: inline-block;
    border: 1px solid #c2b599;
    background: #f3f2f3;
    color: #2a2825;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 7px 18px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.cmsmasters_post_read_more:hover {
    background: #c2b599;
    color: #fff;
}

/* ── Subscribe / Stay Savvy section ─────────────────────────────────── */
.ms_subscribe_wrap {
    clear: both;              /* must appear below both floated content + sidebar */
    background: #faf9f7;
    border-top: 1px solid #e8e4de;
    text-align: center;
    padding: 60px 20px;
    margin-top: 0;            /* margin-top is replaced by clear — padding on .content.entry handles spacing */
}
.ms_subscribe_tagline {
    font-size: 26px;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: #2a2825;
}
.ms_subscribe_sub {
    color: #6a6967;
    font-size: 14px;
    margin: 0 0 28px;
}
.ms_subscribe_form {
    display: flex;
    justify-content: center;
    max-width: 440px;
    margin: 0 auto;
}
.ms_subscribe_form input[type="email"] {
    flex: 1;
    box-sizing: border-box;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #c2b599;
    border-right: 0;
    font-size: 13px;
    outline: none;
    background: #fff;
}
.ms_subscribe_form button {
    box-sizing: border-box;
    height: 44px;
    line-height: 42px;
    padding: 0 22px;
    background: #c2b599;
    color: #fff;
    border: 1px solid #c2b599;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.ms_subscribe_form button:disabled {
    opacity: .6;
    cursor: default;
}
.ms_subscribe_msg {
    max-width: 440px;
    margin: 14px auto 0;
    font-size: 13px;
    min-height: 1.2em;
}
.ms_subscribe_msg_ok {
    color: #4b7a4b;
}
.ms_subscribe_msg_err {
    color: #a94442;
}

/* ── Welcome sidebar widget ──────────────────────────────────────────── */
.ms_welcome_body {
    text-align: center;
    padding: 0 8px;
}

.ms_welcome_img_wrap {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 3px solid #e8e4de;
}

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

.ms_welcome_name {
    font-size: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #2a2825;
    margin: 0 0 12px;
    font-weight: 700;
}

.ms_welcome_blurb {
    font-size: 13px;
    line-height: 1.7;
    color: #6a6967;
    margin: 0;
}

/* ── Categories Widget (block editor: wp-block-categories-list) ──────── */

.wp-block-categories-list {
    list-style: none !important;
    margin: -24px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.wp-block-categories-list li {
    list-style: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    text-align: center !important;
    border-bottom: 1px solid #f0ece8 !important;
    border-top: none !important;
    background: none !important;
}

.wp-block-categories-list li::before,
.wp-block-categories-list li::after {
    display: none !important;
    content: none !important;
}

.wp-block-categories-list li a {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #959492 !important;
    transition: opacity 0.2s;
}

.wp-block-categories-list li a:hover {
    opacity: 0.7;
}

/* Order matches nav menu: Tech, Home, Health, Beauty, Outdoor, Gaming, Family */
.wp-block-categories-list .cat-item-3 { order: 1; }
.wp-block-categories-list .cat-item-4 { order: 2; }
.wp-block-categories-list .cat-item-5 { order: 3; }
.wp-block-categories-list .cat-item-6 { order: 4; }
.wp-block-categories-list .cat-item-7 { order: 5; }
.wp-block-categories-list .cat-item-8 { order: 6; }
.wp-block-categories-list .cat-item-9 { order: 7; }

/* ── Smart 10 Recent Posts Widget ───────────────────────────────────── */
.s10_recent_posts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s10_recent_posts li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e8e4de;
}

.s10_recent_posts li:last-child {
    border-bottom: none;
}

.s10_rp_img {
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
}

.s10_rp_img img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    display: block;
}

.s10_rp_cont {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.s10_rp_cont a {
    font-size: 12px;
    letter-spacing: .04em;
    color: #2a2825;
    text-decoration: none;
    line-height: 1.4;
}

.s10_rp_cont a:hover {
    color: #c2b599;
}

.s10_rp_date {
    font-size: 11px;
    color: #959492;
    letter-spacing: .04em;
}

/* ── Category / Archive page: 3-column card grid ────────────────────── */
.archive .cmsmasters_archive,
.category .cmsmasters_archive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    overflow: visible;
}

/* Each card: stack image on top of text */
.archive .cmsmasters_archive_type,
.category .cmsmasters_archive_type {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ede9e4;
}

.archive .cmsmasters_archive_type:first-of-type,
.category .cmsmasters_archive_type:first-of-type {
    padding-top: 0;
}

/* Image: full-width block on top */
.archive .cmsmasters_archive_type .cmsmasters_archive_item_img_wrap,
.category .cmsmasters_archive_type .cmsmasters_archive_item_img_wrap {
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.archive .cmsmasters_archive_type .cmsmasters_archive_item_img_wrap img,
.category .cmsmasters_archive_type .cmsmasters_archive_item_img_wrap img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.archive .cmsmasters_archive_type:hover .cmsmasters_archive_item_img_wrap img,
.category .cmsmasters_archive_type:hover .cmsmasters_archive_item_img_wrap img {
    transform: scale(1.03);
}

/* Content: full-width below image */
.archive .cmsmasters_archive_type .cmsmasters_archive_item_img_wrap + .cmsmasters_archive_item_cont_wrap,
.category .cmsmasters_archive_type .cmsmasters_archive_item_img_wrap + .cmsmasters_archive_item_cont_wrap {
    display: block;
    width: 100%;
    padding: 16px 18px 20px;
    box-sizing: border-box;
}

.archive .cmsmasters_archive_type .cmsmasters_archive_item_cont_wrap,
.category .cmsmasters_archive_type .cmsmasters_archive_item_cont_wrap {
    padding: 16px 18px 20px;
    box-sizing: border-box;
}

/* Post type label */
.archive .cmsmasters_archive_type .cmsmasters_archive_item_type,
.category .cmsmasters_archive_type .cmsmasters_archive_item_type {
    padding: 0 0 8px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #c2b599;
}

/* Title */
.archive .cmsmasters_archive_type .cmsmasters_archive_item_title,
.category .cmsmasters_archive_type .cmsmasters_archive_item_title {
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: .04em;
    margin: 0 0 10px;
}

.archive .cmsmasters_archive_type .cmsmasters_archive_item_title a,
.category .cmsmasters_archive_type .cmsmasters_archive_item_title a {
    color: #2a2825;
    text-decoration: none;
}

.archive .cmsmasters_archive_type .cmsmasters_archive_item_title a:hover,
.category .cmsmasters_archive_type .cmsmasters_archive_item_title a:hover {
    color: #c2b599;
}

/* Meta info (date / category / author) */
.archive .cmsmasters_archive_type .cmsmasters_archive_item_info,
.category .cmsmasters_archive_type .cmsmasters_archive_item_info {
    padding: 0 0 10px;
    margin: 0;
    font-size: 11px;
    color: #959492;
}

/* Excerpt */
.archive .cmsmasters_archive_type .cmsmasters_archive_item_content,
.category .cmsmasters_archive_type .cmsmasters_archive_item_content {
    padding: 0;
}

.archive .cmsmasters_archive_type .cmsmasters_archive_item_content p,
.category .cmsmasters_archive_type .cmsmasters_archive_item_content p {
    font-size: 12px;
    line-height: 1.6;
    color: #6a6967;
    margin: 0;
    padding: 0;
}

/* ── Related Posts (single post, by shared category) ─────────────────── */
.smart10_related_posts {
    margin-top: 32px;
    margin-bottom: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e3df;
}

.smart10_related_posts h2 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #2a2825;
}

.smart10_related_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.smart10_related_list li {
    margin: 0;
    padding: 0;
}

/* Theme injects a bullet via ul > li:before (icon-font content) regardless of list-style — kill it here */
.smart10_related_list li:before {
    content: none;
    display: none;
}

.smart10_related_link {
    display: block;
    color: #6a6967;
    text-decoration: none;
}

.smart10_related_thumb {
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #e5e3df;
    margin-bottom: 8px;
}

.smart10_related_thumb img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.smart10_related_link:hover .smart10_related_thumb img {
    transform: scale(1.05);
}

.smart10_related_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.8em;
    font-size: 13px;
    line-height: 1.4;
    color: #2a2825;
    border-bottom: 1px solid transparent;
}

.smart10_related_link:hover .smart10_related_title {
    color: #c2b599;
}

/* ── Post content: scale down product images (applies to all posts) ─── */
.entry-content img {
    max-width: 60%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ── Top nav (category bar): tighten spacing so all 7 categories fit on one line ──
   "Gaming & Hobbies" made the combined nav wider than the header_mid container,
   which has a fixed height (set by the theme's Header Mid Height option) — the
   wrapped second line had no background and spilled into the content below.
   NOTE: the category nav actually lives in .header_mid (class "mid_nav navigation"),
   not .header_top -- header-top.php's markup is a separate, unused header section. ── */
.header_mid nav > div > ul > li > a {
    padding: 0 9px;
}
.header_mid .navigation > li > a {
    letter-spacing: 0.5px;
    font-size: 11px;
}

/* ── Walking Pads post: shrink the portrait hero — full-width portrait
   renders very tall since the theme scales the featured image to the full
   content-column width; this keeps it portrait but noticeably smaller.
   ID 452 = local, ID 445 = live (same post, different IDs per environment). ── */
.postid-452 .cmsmasters_img_wrap,
.postid-445 .cmsmasters_img_wrap {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* Same fix for the homepage featured-post slot (overrides the sitewide
   75% .ms_featured_home_img rule just for this post, since it's the
   current most-recent post and shows up there portrait and oversized). */
.post-452.ms_featured_home_post .ms_featured_home_img,
.post-445.ms_featured_home_post .ms_featured_home_img {
    max-width: 45%;
}

/* Reserve consistent title height on category masonry-grid cards so the
   date/meta row lines up across cards regardless of whether a given
   post's title wraps to one line or two (e.g. "Top 10 Budget Cat Toys"
   vs "Top 10 Dog Gadgets Every Owner Needs" in the same row). The earlier
   2.7em min-height was too small for a genuine 2-line title -- a real
   2-line title (e.g. "Top 10 Kitchen Organization Hacks") measured ~56px,
   about 21px taller than 2.7em at this element's 13px font-size, which
   silently pushed that whole masonry column down relative to its
   neighbors. Fixed with a precise px min-height plus a hard 2-line clamp
   so no future title -- however long -- can ever overflow this reserved
   space again (an unusually long title is truncated with an ellipsis in
   the grid card only; the full title still displays on the post page). */
.cmsmasters_post_masonry .cmsmasters_post_header .cmsmasters_post_title {
    min-height: 58px;
}
.cmsmasters_post_masonry .cmsmasters_post_header .cmsmasters_post_title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .archive .cmsmasters_archive,
    .category .cmsmasters_archive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .ms_masonry_grid article.cmsmasters_post_masonry {
        width: 100%;
    }
    .archive .cmsmasters_archive,
    .category .cmsmasters_archive {
        grid-template-columns: 1fr;
    }
}

/* ── Recent Posts widget: fix uneven gaps between circular thumbnails ──
   The thumbnail is position:absolute (75px tall) but the text block next
   to it is normal-flow and sets the <li>'s actual height. A 1-line title
   makes the <li> shorter than 75px, so the next <li>'s fixed 40px
   margin-top ends up measured from a too-short box, producing a smaller
   gap than rows with a 2-line title. Reserving 75px on the text block
   keeps every row's height consistent regardless of title wrap. */
.widget_custom_posts_tabs_entries .cmsmasters_tabs .cmsmasters_lpr_tabs_cont {
    min-height: 75px;
}